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.
  • http://www.ethanhackett.com Ethan Hackett

    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.

  • http://trafficcoleman.com/ TrafficColeman

    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”

  • PixelTunnelVision

    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.

  • http://des.igner.co.uk Phil

    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?

  • http://www.webdesign-in.de/ Monika

    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

  • http://logodesignswork.com/ free logo design | logo design

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

  • http://www.thecreativeham.com The Creative Ham

    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…

  • http://www.creditdonkey.com/tip Daniela Baker

    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.

  • http://www.rangpursoft.com/ rangpursoft7

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

  • Aleksey

    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.

  • http://www.brink.com Media Mike

    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.

  • http://www.toprankexpress.com Johnmaurice

    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!

  • http://exmite.com Yashwanth

    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.

  • http://www.creditdonkey.com/tip Daniela Baker

    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.

  • http://brewerdesign.wordpress.com/ Chris B

    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!

  • http://www.angelprintsultrasound1.com/ 3d ultrasounds

    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.

  • http://www.bloggerspider.com/ sublimation inks

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

  • http://www.chinacampus.net/ gardening strategies

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

  • http://www.fashionengines.com/ tattoo

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

  • http://plussize-cocktail-dresses.com/ plus size cocktail dresses

    Thanks for sahring good post here

  • http://www.schmuckmagic.com Tiffany Anhänger

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

  • http://www.creditdonkey.com/tip Daniela Baker

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

  • http://dayjobnuker.com DayJobNuker

    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.

  • http://www.logoglo.com GaryR

    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!

  • http://best-n64-games.blogspot.com/ Best N64 Games

    i like your article, thanks for sharing :)

  • Barry Jennings

    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.

  • http://best-computer-speakers.blogspot.com/ Best Computer Speakers

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

  • http://www.tokomesinkasir.com Mesin Kasir Murah

    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

  • http://www.shivaguide.com/ jewish funeral

    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.

  • http://www.squidoo.com/best-running-shoes-for-shin Best Running Shoes Shin Splints

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