By Meredith Barnhill
The arrival of touch-screen mobile devices has completely changed the way designers have to think about their target market. Users want the same functionality on a screen a fraction of the size of their personal computers. This requires a separate, and touch-screen-optimized, website design.
Designing for the Small Screen
Simply trusting that your current website design will translate well onto a tiny screen is a mistake that can be avoided. While traditional websites are rich in interactivity and content on a desktop or laptop, on a 2-inch by 3-inch screen, it doesn't provide a good user experience due to tiny text and difficult-to-access elements.
To give your users a good experience no matter what device they are on, you must design separate version of your website. Your site should automatically detect the user's browser and open the corresponding website optimized for their use. Successful touch-screen websites excel in simplicity, with large icons, large touchable areas for icons and links and incorporation of standard gestures such as double-tapping, swiping and pinching/de-pinching.
Interactive Elements
Because the majority of mobile touchscreen users have Apple products and don't support Flash, alternatives to these elements should be programmed into mobile websites. If your website still requires interactive elements, learning HTML5 or coding in JavaScript will give you similar functionality but be accessible to all mobile platforms. These elements should also be large enough for the user to see and interact with, but not overpower the rest of your website content. Navigation should also be straightforward and intuitive for even the most basic user.
Layout
Designers use a fluid "960 grid system" to ensure that the website layout is preserved if the touchscreen device is in landscape or portrait modes. This system is 960 pixels wide (standard for website presentation) and allows for either 6 or 12 columns across the page dividing up sections of the site for different elements. A "fluid" site is one in which the columns resize to maintain the placement of elements on the page depending on the size of the browser window. An example of a fluid grid in action can be seen on designinfluences.com.
"Fat Finger" Syndrome
Typing errant characters or unknowingly gesturing on a touchscreen device that results in an unwanted action is known as "fat finger syndrome." To eliminate "fat finger" issues, the touch-areas of the websites have to be larger than the links themselves. Making clickable elements obvious in design will help prevent frustration due to accidental strokes or motions triggering unwanted events on the webpage.
The touch-screen Facebook website eliminates this issue by using large navigation tabs on the home page as well as plenty of room around text links for tapping. Facebook also limits the amount of clickable elements in its layout to further decrease the chance that a user will accidentally click on an undesired element.
Come back tomorrow for the next installment in this series:
Part 1: Most Popular Devices
Part 2: Who Is the Market for These Devices?
Part 3: How Is the User Experience Different on a Touch Screen?
Part 4: Designing for the Finger Instead of the Mouse
Part 5: Touch Screens of the Future
About the Author
Meredith Barnhill is a multimedia journalist in Austin, Texas.