Does Your Website Work on Touchscreen Tablets?

Touchscreens Work Differently from Keyboards and Mice

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

In the early days of designing websites for mobile devices, most developers bifurcated their product offering. They released a fully functional desktop version and then a "mobile optimized" version that stripped away much of the branding and imagery to accommodate the limited capabilities and network speed of candy-bar phones and 3G wireless networks.

Contemporary smartphones, however, can render Web pages just as efficiently as desktop PCs, through networks as good or better than yesterday's DSL lines.

Design, then, converges back to a single-user interface. But the risk for designers isn't that a smartphone or a tablet cannot render a modern responsive website. Rather, it's that the method of user input on a touchscreen device requires meaningful changes to the underlying site design. The days of building a website assuming visitors have a keyboard and a mouse are over.

Basic Touchscreen Design Rules

Designing for a touchscreen-aware Web interface requires an evolution of the traditional monitor–mouse–keyboard approach of the past. In particular, you must accommodate interactions like gestures, taps, and multitouch input.

  • 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 touchscreen, 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. Those additional taps can mean something specific depending on the operating system of the user's device.
  • High-glare devices. The screens of most touchscreen tablets are made out of a sturdy glass. This material can be very hard to read through, with a lot of glare, in bright light situations. Plus, with all the touching, they get fingerprints 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. OSK entry can result in some hilarious typos as well as being uncomfortable to use for extended periods of time.

Because of these features of the device, Web designers should emphasize several basic design rules for touchscreen 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 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 principle is true for buttons as well as links.
  • Hierarchies can be hard to keep open. One popular form of dynamic menu uses JavaScript to open a submenu when the user clicks and then hovers the mouse over the submenu. These states can be very difficult or impossible to use on touchscreens 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 inconvenience.
  • 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 touchscreen device, so users can't infer any useful information from such hover states 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 touchscreen 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 an Android or Windows 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 touchscreens in mind is to test your pages on a touchscreen device. While lots of iPad and Android emulators are available, and plenty of Windows tablets, they still don’t provide the sense of a touchscreen. You can’t tell that links are too close or that buttons are too small—or that the glare makes the page too hard to read—unless you get out a tablet and try them out before you release your new website design.