Does Your Website Work on Touch Screen Tablets?

Touch Screens Require Some Special Considerations

iPad - Courtesy of Apple
iPad - Image Courtesy of Apple. Courtesy of Apple

When I first started writing about building web pages for mobile back in 2001, a lot of people scoffed feeling that mobile devices were ultimately too difficult to do a lot of browsing on the web. But with the popularity of the iPad and all the new Android tablets coming to market, that is changing. More people bought new tablet devices than new computers in 2011. Creating web pages for small-screen and mobile devices is getting more and more important.

But Tablets Can View Full-Size Web Pages

You may be saying to yourself that you go to web pages all the time on your iPad and you don’t like it when they create a specific mobile version that you have to use instead of the full site. After all the iPad and Android tablets can view standard web pages without a problem, there is no need to create a mobile version for them. Or is there?

While the iPad and Android tablets handle full-sized websites with ease, there is one interface aspect that is different: touch screens.

Touch screens may not seem all that different from clicking with a mouse, but there are a lot of things that you just can’t do with a touch screen, or you can’t do easily. And with the growth in the touch screen tablet market growing, if your website doesn’t keep up, it will be left behind.

Basic Touch Screen Design Rules

When you are designing for a touch screen you have to think about how it is being used.

There are things like gestures, taps, and multi-touch that you should consider.

  • Tapping is not accurate — Unless the customer has the fingers of a toddler, even with the very accurate software controls, it can be hard to tap and be precise.
  • Gestures are different from taps — In order to scroll a long page on a touch screen, the user swipes one finger up the browser window. This may not seem significant until you realize that browsing with a mouse, you move the mouse down.
  • Two (and more) finger taps — A user can use multiple finger taps on the device at the same time to control it.
  • High glare devices — The screens of most touch screen tablets are made out of a sturdy glass. This means that they can be very hard to read, with a lot of glare, in bright light situations. Plus, with all the touching, they get finger prints and smudges on the screen that can affect how your pages look.
  • On screen keyboard — While some users have a wireless keyboard they connect to their tablets, most tablet users use the on-screen keyboard for data entry. And these can result in some hilarious typos (if you ever see the word “TE” where it should say “the” in my text, you know I was typing on my iPad), as well as being difficult to use.

Because of these features of the device, web designers need to remember some basic design rules for touch screen users:

  • Don’t place clickable items too close together — There is no hard and fast rule defining how close is too close, but lists of links, especially in a small font size can be very difficult to navigate by clicking (tapping) with a fat finger. It can be annoying to have to zoom in just to try and click a link. This is true for both buttons as well as links.
  • Hierarchies can be hard to keep open — One popular form of dynamic menu uses JavaScript to open a sub-menu when the user clicks and then hovers the mouse over the sub-menu. These states can be very difficult or impossible to use on touch screens because they either don’t stay open or won’t close.
  • Move links and clickable areas away from the right edge of the window — Most people are right handed, and tend to scroll on that side of the screen. Since scrolling is done with a gesture, sometimes it is possible to start the swipe on a link by mistake. Users can get annoyed if they wanted to scroll on the page and instead ended up accidentally tapping a link. By moving your links away from the right side, you can help them avoid this.
  • There is no mouse — And this means that there is no mouse pointer. You should not rely on the mouse pointer changing to help indicate that something is clickable.
  • Hover states don’t exist — As a corollary to the above, since there is no mouse, there is nothing to hover with. A link is either clicked (tapped) or not on a touch screen device. This means you can’t rely on hover states such as color changes, tool tips, or status bar changes.
  • Black backgrounds enhance the glare — A site with a black background can be very hard to read on a touch screen device because of the glare. Black makes the fingerprints on the devices show up more clearly, blurring the screen. And the black can turn the screen into a mirror reflecting back the users face often more than the text on the screen.
  • Long blocks of text in forms are hard to write — While it is possible to write entire novels on an iPad or Android tablet, most people don’t like using the on-screen keyboard for long stretches of text. The more your design can make data entry as short and easy as possible, the better.

The most important aspect of designing with touch screens in mind is to test your pages on a touch screen device. While there are lots of iPad and Android emulators available, they still don’t provide the sense of a touch screen. You can’t tell that links are too close, buttons too small, or the glare makes the page too hard to read unless you get out a tablet and try them out.