How Tablets Are Transforming Web Design

by Inspiredology

on June 20, 2011

in UI Design

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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.
Powered by Shutterstock

About Inspiredology