How Tablets Are Transforming Web Design

With the recent launch of iPad2 and the other tablet PCs that are readily available for consumers, web design is starting to transform. Designers can no longer assume that visitors will be accessing the Internet from a standard sized screen. Because there is now a large variance in screen size, the newest trend is for websites to be designed to match the feel of tablet apps.

Here are some of the ways that tablets are transforming web design:

Scale of websites

As mentioned above, web designers can no longer assume that users will be visiting their site from a “standard size” monitor. With the variance of sizes ranging from a small tablet, to a laptop, to a large desktop monitor, there is no standard size.

This creates an issue when determining where to place “the fold”. The fold is where the user must scroll down to see more website content. The most important information and features should be placed about the fold to help decrease the number of users leaving the site before making a purchase or accomplishing another goal of the web designer.

When larger desktop monitors were becoming increasingly popular and common a couple of years back, designers had started design sites that were larger and the fold was lower down. Now, however, designers are scaling back, raising the fold and ensuring that navigation is easily accessible on smaller screens.

Navigation

Navigation is affected by tablets in two ways. First, as mentioned in the previous section, it must be scaled down so it is easy to access in a smaller screen.

Second, with the touch screen capabilities of tablets, navigation must be easy to accomplish with a finger. Using a traditional mouse provides users with a greater precision capability. Using a finger, especially if you are an adult male, links and buttons must be spread apart so users do not become frustrated by constantly clicking on the wrong component of a site.

Adaptive design

Many tablets allow users to view content either horizontally or vertically. This means that web designers should start considering whether their site will work in both formats. One way they are overcoming this hurdle is by utilizing adaptive CSS that is employed only if the users’ device will work with that CSS.

To Flash or not to Flash

Apple no longer develops Flash compatible devices. This means that iPad owners are unable to utilize website elements that use Flash.

Designers must carefully consider then whether to include video or other media that works with Flash. One way that this issue is being sidestepped is through the incorporation of HTML5, which is Apple’s preferred solution to Flash. HTML5 offers options for video and audio distribution so Flash is not required. Sites including YouTube and CNET have already started this transition.

Web design tips

Here are some web design tips offered by Webdesigntuts+ that you can utilize to transform your site to be tablet friendly:

  • Pay closer attention to your typography. Text must be clear and readable, so find the right size and font so visitors can easily read your message.
  • Carefully plan your layout. Give a lot of thought to the layout of your site, especially the navigation. Your amazing graphics and stellar copy aren’t going to make much impact if it’s difficult for visitors to travel through the site.
  • Watch button size. The last thing you want to do is frustrate users who are visiting your website from a touch screen.
  • Utilize your graphics, colors, textures and gradients to highlight the functionality of the site. Using your design prowess to highlight the easy navigation is the perfect marriage between design and functionality, boosting your website from good to great.
Inspiredology

@inspiredology

  • Inspiredology
  • Inspiredology

    @chadmueller

  • Inspiredology
  • Inspiredology

    @andrewdertinger

  • Inspiredology
  • Inspiredology

    @MikePuglielli

  • Inspiredology


  • Join the discussion

    • October 9, 2011 at 9:00 pm

      i really enjoy reading ur article daniela, thanks for sharing with us :)

    • September 23, 2011 at 8:39 am

      The Jewish tradition of shiva platter that continues for the first seven days can be very exhausting both physically and emotionally for the mourners. This is true especially for the Shiva captain and other direct mourners because the Jewish tradition of Shiva needs to be followed intensely and meticulously. There are a number of restrictions and prohibitions for the whole of one week when one sits shiva.

    • September 19, 2011 at 12:51 pm

      Great site will lot of information and also the tips for the easy ways are also given. Good site with lot of good examples

      Mesin Kasir | Komputer Kasir | Program Kasir | Printer Kasir

      http://www.tokomesinkasir.com

    • September 15, 2011 at 5:24 pm

      Hi Daniela, i like ur awesome article, Your web design tips is very helpful, thanks for the post, Kudos!

    • September 12, 2011 at 8:55 am

      Hey guys: I saw your website online while searching for google – I noticed that while your website looks “hot” ( you are a web design company!) Your online rankings were not strong as they could be.

    • August 26, 2011 at 10:48 am

      i like your article, thanks for sharing :)

    • August 23, 2011 at 3:19 pm

      Very insightful post. I have been having some trouble with some clients being able to view our site on their tablet, so it looks like a re-design is imminent. I will defiantly bare these tips in mind when doing it. Great post!

    • August 22, 2011 at 6:07 pm

      If you have a website you can worry about all those things or just choose to accept the fact that not everyone that comes to your site via all these other devices will be able to view it properly.

      Personally, I think the majority of search visitors will always come from laptops or desktops – at least enough to keep most online businesses profitable.

    • August 22, 2011 at 3:34 am

      Freut mich dass mein Artikel auch in anderen Laendern Anklang findet.

    • August 22, 2011 at 2:52 am

      Dein Artikel ist gut wert Augapfel. Außerdem inspirierte mich sehr, sehr attraktiv ,das werde ich diese wieder zu sehen

    • July 30, 2011 at 1:07 am

      Thanks for sahring good post here

    • July 25, 2011 at 11:48 pm

      Hey, I bookmarked this and will return again. Thanks for the info.

    • July 25, 2011 at 11:45 pm

      great resources here.
      I’ll be back for the next your posting.
      keep writing and happy blogging.

    • July 25, 2011 at 11:44 pm

      I really like the layout of this blog. I think I will go for one

    • July 14, 2011 at 12:21 pm

      This is a very interesting perspective, however I think judging someone’s ability to do a job solely based upon their handwriting is a little unfair. I know my handwriting changes depending on what I am writing. I also think the fact that pretty much nothing is written by hand today; from a college to an email, that this can affect people’s handwriting for the worse.

    • July 11, 2011 at 1:33 pm

      I appreciate the ideas brought forth in the article and the comments. I just wanted to bring another perspective into the mix.
      I am 43 years old and have returned to school to get a graphic design degree. I was laid off over 1.5 years ago. While I agree that there are so many new mobile devices inundating the market and the landscape continues to change, I look at that as job security.
      It may be time consuming and frustrating, but, it keeps designers in business! Let’s think about the economy and that having to come up with new ideas, new designs, new layouts, etc. is food in our homes!

    • July 4, 2011 at 9:08 am

      Adaptive CSS/JavaScript methods work nice for a few devices, but it is a cumbersome method. Nobody wants to design their website over and over, every time a new device becomes available. The mobile landscape is evolving so rapidly that it’s impossible to have a fix on every resolution browser.

    • July 4, 2011 at 8:09 am

      Your website Design is awesome. I was searching for the creative websites and i ended up on your blog, and started reading posts you have made. Your Post are really Good.

    • June 30, 2011 at 4:48 am

      I have not been this blog in a long time, however it was joy to find it again. It is such an important topic and ignored by so many, even professionals! I thank you for helping to make people more aware of these issues. Just great stuff as per usual!

    • June 29, 2011 at 5:27 pm

      Great, great information bringing up some really interesting points. The emphasis on simplicity and ease really falls in line with the success of tablets in the first place.

    • June 28, 2011 at 7:17 am

      Thanks, this article is a great short consolidation of everything being discussed on a subject. Although, as other articles, this one does not give clear answer to ‘what exactly should i do?’ question.

    • June 25, 2011 at 2:38 pm

      Nice article! I love it. Thank you for your nice writing.

    • June 24, 2011 at 10:45 pm

      One fundamental mobile design challenge has to do with resolution and actual screen size. Right now there is no one size fits all solution to this problem and I’m sure we’ll see quite a few more fluid vs fixed web design debates.

    • June 24, 2011 at 2:53 am

      Maybe some websites will be able to “degrade” gracefully so that they appear better on tablets if they find they want tablet users to see a different website…

    • June 23, 2011 at 8:31 am

      The article is really informative. Thanks for sharing this useful information with us. The post is really interesting to read.

    • June 23, 2011 at 7:01 am

      Hi 1. great article with good ressources-thanks!

      2. I can’t read any headline nor the name of commenters.
      I’m surfing with firefox 5 and see very very creative symbols but no letters ;)
      if you would like I can send you a screenshot.

      Monika

    • June 22, 2011 at 9:59 am

      This is a great and really relevant article at the moment. The number of clients that come to me that at least have an iPhone, but more and more have iPads (the new toy to have) that this is something I’m finding I’m having to quickly get to grips with.

      As for flash vs HTML 5 – I agree that for iPhone/iPad that using flash would be a big NO, but what about people visiting on older browsers (or *cough* IE) that don’t support HTML 5? The company I currently work at serve a version of the site that have flash elements for older browsers and serve a version of the site that has HTML video for the newer browsers and iPhones/iPads. Do you think this is the correct way to approach this?

    • June 20, 2011 at 6:55 pm

      Like in many cases, I think tablets are big enough that the device should be bending to developers, not the other way around. Media Queries and highly responsive design should only really be an issue for the smartphones that have yet to become “smart” enough to accommodate websites bigger than a few hundred pixels wide. Viewing websites with a tablet in landscape orientation usually provides a 1024px or wider experience, which is more than fine with the 960px wide standard of most sites as-is.

    • June 20, 2011 at 10:26 am

      My wife has the nook and the usability with the net is great. You can do the touch screen just as the same with a desktop.

      “Black Seo Guy “Signing Off”

    • June 20, 2011 at 9:22 am

      Great article addressing the importance of thinking forward.

      I’m glad that the web tools are there to make this process much easier like like CSS3 Media Query etc.

      I would love to invest more time into adaptable content but it’s difficult to convince clients to invest more money for developing a better solution.

    Post a Comment

    Your email is never shared. Required fields are marked *

    *
    *