An iPad Compatibility Checklist for Your Existing Website

Have you checked your website analytics lately? You may have noticed that Apple’s iPad as well as other tablet devices, are starting to show up as a not-so-insignificant portion of the traffic paying your site a visit.

While an iPad app or even a tablet-specific version of your site may be on a future roadmap, there are a few changes you can make right now that will help ensure the experience is a good one for someone visiting on a tablet without being detrimental to users accessing your site with more conventional devices.

Sniff Test

If you have an existing mobile web version of your website built for handheld operating systems, such as iOS or Android, chances are that you do not want this to be the version of the site that you display to users on a tablet. In terms of screen size and aspect ratio, a tablet such as the iPad is much more akin to a laptop screen than it is to a mobile one.

Test your site to make sure that your automatic redirects do not group tablets in with handheld’s and cause a tablet browser to be redirected to your website.

Orientation

The tablet experience allows users to switch between portrait and landscape mode quickly and easily to adjust to the optimal format for the content that they are viewing. Because of this, it becomes important to test your website on the various tablet devices you would like to support, to assure that there are no display issues in making the switch in orientation.

Flash

iPads do not support Flash technology. If your site relies on video content in any meaningful way, you will have to explore other options for serving these videos (such as HTML5). One note here, however, is that if you are hosting your videos on a 3rd party site (such as YouTube or Vimeo) and simply embedding them on the page, you should be in the clear. These embedded video will have built-in technology to adjust for devices not compatible with Flash.

Target Size & “Clickability”

Using a finger on a touch screen device requires a slightly bigger target than using the cursor of a mouse. Nothing is more frustrating for your users, than trying to tap on a clickable item and missing it or, worse yet, accidentally clicking on something else adjacent to what you intended. Go through your existing site and make sure that clickable items look clickable, are big enough in size (especially text links) and have enough breathing room to allow for a user on a tablet device to easily activate them with their finger. Digital Product and User Interface guru, Luke W, gives some recommendations on minimum sizes in his article “Touch Target Sizes”.

Page Zoom

Users of most touch-enabled devices are accustomed to “double tapping” a section of a webpage to zoom in on it specifically. While this is a powerful tool, it is important to test that the html structure of your site is built in such a way that the Safari browser can correctly guess the left and right borders of a module, such as the main body of text for an article. In some cases the HTML structure of the site may have been built in a way that confuses the browser and causes an incorrect zoom.

Test the key sections of each page by double tapping them, and verify that they are resizing to the correct margins for an optimal viewing experience.

Hover

Unlike a conventional, mouse-driven browsing experience, there is no concept of a hover-state in a touch-driven environment. Because of this, touch-based devices do not have the ability to handle CSS :hover states or Javascript OnMouseOver functions. Where this can become an important consideration is on sites that contain fly-out menus for top level navigation. If your top navigation contains flyouts that only appear when the mouse hovers over the, special consideration will need to be made to make this compatible with touch devices via a tap.

Forms

Entering information on mobile devices can be a somewhat cumbersome task. One way to make it slightly less painful for the user is to present them with a virtual keyboard that is optimized for the information that they are about to enter. With a slew of new input types available in HTML5, this has become somewhat easier. (See Roger Johansson’s article “HTML5 input types” for more information)

So there you have it, a few items that you can test your existing site against to help ensure an optimal experience for anyone visiting from an iPad or other tablet device. As the web continues to expand, so do the number of devices used to access it. While these new devices present more challenges, they also create more opportunities for all of us to get and stay connected anytime, anywhere.