Back in the Bad Old Days of the Browser wars, you had to design your web site for two or three browsers because some followed standards more closely than others. These days we still have to maintain a separate mobile site or CSS – and, increasingly, we have to take touchscreens into account. Whether or not tablet computing continues its meteoric rise or not, one things appears certain: Touchscreens are the wave of the future, and sooner or later (an it ought to be sooner) you’ll have to accommodate the paradigm into your web design .
Touchscreens Ain’t Mouses
It might seem simplistic, but the most important thing to remember about touchscreens is that they are not mouse-and-keyboard interfaces. The venerable mouse is a fairly accurate way to move a pointer around screen space, and the pointer itself shows the user precisely what pixel they are currently resting on. Say whatever you will about the QWERTY keyboard, it’s time-tested and just about everyone in the world can use it fairly effectively without any training. The touchscreen uses your finger, the least accurate pointing device in the known universe save using your foot, and the keyboards on most touchscreens (at least until touchscreen desktops take off) are designed for elves. When figuring out your website design for touchscreens, there are some basic tenets to keep in mind.
Touchscreen Design Basics
Sizing. The most important aspect of touchscreen web design is the fat fingers that will be used to navigate your site. You have to give The Worst Pointing Device in the Universe a lot of space for tap areas, buttons, and swipe points, or it’s going to be a frustrating experience for your user. This is especially important for text links. If you can go without any text links at all, all the better. But if you must have some, make sure the tap space around them is generous.
Swiping. Remember, people are using the Worst Pointing Device in the Universe, their finger. Using your finger makes a lot of standard interface stuff difficult on a touchscreen; what works well is swipeable content that can be quickly scrolled through. Make sure your swipeables are big and bold, with plenty of screen real estate for dragging.
Forms. Forms are necessary in a lot of website design because it’s still the only way to get some information from your users. But forms are bad enough on desktops; on touchscreens they can be a nightmare. Make sure your form fields are big enough for the Worst Pointing Device in the Universe, and make their use as convenient as possible by pulling whatever information you can automatically from the device or the GPS, and make sure forms retain error-state info so the user doesn’t have to start over if they make one small mistake.