Webvanta Blog: Creating Effective Websites

How and Why to Make Your Website Shine on Tablets

How and Why to Make Your Website Shine on Tablets Image

Does your website work well on tablets? If not, it’s time to fix it. The good news is that it usually isn’t difficult.

The Explosive Rise of Tablets

Tablets have become a huge part of the web-browsing landscape. In 2012, more than 120 million tablets were shipped — 52.5 million in the fourth quarter alone. Of these, Apple’s various iPad models accounted for an impressive 22.9 million units in Q4.

To put these numbers in perspective, about 350 million PCs and laptops (not including tablets) were shipped worldwide in 2012. So tablets have not yet overtaken PCs, but they already account for more than a quarter of the combined PC and tablet market.

Furthermore, tablet sales continue to grow rapidly, with 4Q 2012 shipments an astonishing 75% higher than shipments in 4Q 2011. PC shipments, on the other hand, shrank by a few percent. IDC projects tablet shipments in 2013 to hit 172 million units. That’s about the size of the entire PC market in 2004, which is not so long ago.

Making Your Website Work Well on Tablets

I hope the data above has convinced you that ignoring tablets is a bad idea. So now, what do you need to do?

As a first step, you just need to make sure that your desktop site is usable on a touch-screen device. You may also want to use responsive design to optimize the design for smaller screens, but that is secondary.

The critical issues that you must address are:

  • Don’t depend on separate click and hover actions. On a touch screen, hover and click are the same thing. There are two places that sites commonly use hover events: to display pop-up boxes with additional information (often called tooltips), and to trigger drop-down menus. Make sure click works as well as hover, and that the design doesn’t depend on hover and click triggering different actions.
  • Touch targets must be bigger than click targets, with more spacing between them. Drop-down menus often have items too close together for easy touching. Lists of links in a sidebar or footer are another common source of problems.
  • Eliminate Flash content. iPads won’t display it at all. If you must have Flash content, make sure it is secondary, and not required to browse the site.
  • Make your lead-generation forms touch-friendly. With HTML5 elements, you can specify whether an input field is ordinary text, numeric information, or an email address. Tablets will show different touch-screen keyboards depending on the input type, easing the visitor’s job (and increasing the number who will complete your form).
  • Check your font sizes. Tablets have smaller screens than typical desktop and notebook computers, so if you’ve designed to a fixed width, it will be shrunk down on a tablet. Make sure that the text is not too small to read, and the touch targets are big enough, when displayed on a 7-inch tablet such as the iPad Mini.

Implementation Strategies

The easiest way to support tablets is to make your desktop site tablet-friendly. Once you’ve done this, you don’t necessarily need to distinguish between tablets and desktops.

You might not want to make your clickable items, as displayed on a PC, big enough to be good touch targets on a tablet. In this case, you can use CSS media queries or other techniques to deliver different styling to tablets.

If you are delivering different pages for mobile phones, you’ll need to consider whether tablets should get the desktop version or the phone version. For 10-inch tablets, the desktop version is always preferable; for 7-inch tablets, it depends on the design.

You’ll need to look carefully at how your implementation chooses whether to deliver the desktop or the mobile site. With typical solutions, an iPad Mini will show the desktop site, while many Android tablets will show the mobile site. Unfortunately, there’s no easy, reliable way to distinguish an Android tablet from an Android phone, short of using an extensive list of model numbers to detect tablets. You (or your developer) will need to have a wide range of devices available for testing.

Further Optimization for Tablets

You may also want to use responsive design techniques to drop sidebars and other secondary content for smaller tablets. As the tablet audience grows, it becomes more compelling to put extra effort into delivering an optimal experience, not just a decent experience, for all tablet users.

The next level of optimization is to consider touch gestures. If you have a slideshow, for example, experienced tablet users expect to be able to swipe to move to the next photo.

If you expect repeat visitors, consider prompting users to bookmark your site and add an icon to their devices screen. You’ll need to provide an appropriately-sized icon, and add some JavaScript to suggest that users bookmark the site.

Need Help?

We’d be glad to look at your site and give you a free assessment of its usability on tablets. Give us a call at 888.670.6793, or request a free consultation.

Add Your Comments

(not published)