How to Design a Tablet-Friendly Website

written by Georgia Schumacher 13 November 2013

When most people think about tablet-friendly sites, they picture a simplified design that provides visitors with the information that they need the most, in an easy to access manner. The best of the sites do not sacrifice beauty or creativity to provide information; they simply and cleanly feature interactive elements alongside content to ensure that tablet visitors can make the most of their time on the page.

Encourage Touch

If elements in your web design look like they’re meant to be tapped, swiped or feature any form of media that merits touching, then this should be reflected in the tablet functionality. Remember that most people use their fingers to navigate on tablets. As a result, experts recommend using touch targets sizes of up to 44px to ensure that they are large enough for ease of interaction with fingers.

Consider Appearance and Ease of Use

Outside of making the sites more interactive and touch-friendly, there are a few elements that, if overlooked, can cause your website to lose functionality. Here are a few more design practices recommended by those in the field.

Replace image-based icons with font-based icons. Screen resolution on tablets is typically significantly better than on most computers. Choose your graphics so that they scale well and you don't wind up with pixelated icons.

Use contextual keyboards. This means that if you're asking a user to enter a phone number, design the site so that a numeric keyboard appears rather than an alphabetical one.

Increase font size and line height for legibility, so users don't need to zoom in.

Design contact forms for tablet usage. Fewer fields are better here. Increasing form field size and adding extra space between the fields can also make it easier for users to select the proper field. Ensuring that your forms function properly on tablets is key, since, without them, users are not likely to search out other ways to contact you and will instead navigate away from the site.

Things to Avoid

In addition to the suggestions above, keep in mind that some design choices can impede your site’s performance. To ensure that your web design is truly tablet friendly:

• Don't clutter the site with media. This can cause loading issues and may make the entire website look unorganized.

• Don't overuse Flash as it may not be fully functional on an iPad.

• Don't have too many clickable options next to each other, since this can make it difficult for users to navigate through your site.

Sources

- A Couple of Best Practices for Tablet-Friendly Design
- Tips for Creating Tablet Friendly Websites
- Cool Tips and Resources to Make Your Website Tablet-Friendly

Learn about our Web Design & Interactive Media program today!