Tablet Web Usability

Why it is important

• Analysts from Juniper Research predict that purchases on tablets will beat out smartphones over the next three years.
• According to Google study they did of over 1400 tablet users, 28% now use their tablet as their primary PC and 42% of them are shopping via their tablet.

Why standard desktop sites look ugly on tablets

• Buttons and navigation elements are small;
• Application and order forms are excessively long;
• Long load time of the site;
• Pixelated and fuzzy site images.

To make your website feel like it was designed especially for tablets and make it responsive to the table user common behavior, you need to:

Make it easy to tap and touch

To make sure users can easily touch and tap the elements they were about to, increase the spacing between different touch targets and make them bigger. Use padding instead of a margin to increase the area of tapping. Enlarge the buttons (make the touch target at least 44px by 44px).

Minimize tablet typing

It is more difficult to use a software keybord than that of a desktop, so try to minimize the number of typing tasks required on your website.

Custom your forms

Make sure you use corresponding input type for form fields (if the field requires a phone number, offer up a numeric keypad or if it requires entering an email address, offer an email specific keyboard that includes @ symbol, hyphens and underscores).

Use the following input types on form fields:

• Standard keyboard <input type=”text” />
• Numeric keyboard <input type=”text” pattern=”[0­9]*”/>
• URL parameters <input type=”url”/>
• Email ­specific keyboard <input type=”email”/>

Icons and Images

• Use font based icons for tablets as they will not look blurry on high-resolution displays, besides they are easy to colour and shade using CSS.
• Use high resolution images that don’t look pixelated on Retina quality screens, make images bigger (keep in mind that a larger product image increases conversion by 9%).

Misc

To make your content stretch appropriately on different devices, use percentage-based width.
Remember, if it take more that 3 seconds for your site to load, users will get bored and leave it, so do your best to reduce site load time by compressing images and concatenating CSS and JavaScript to cut down the quantity of HTTP requests and the size of the web pages.