By Meredith Barnhill
Designing websites and applications for touch screen displays can be challenging. Mobile browsers have extremely limited display space and designing for the less-accurate fingertip can result in frustrating errant keystrokes. Keeping the design simple and easy-to-use is the best way to keep your mobile users happy.
Multi-touch Usability
Because the finger is a lot less accurate than the mouse pointer, clickable areas need to be much larger than in traditional Web design, even on the larger tablet and touch PC devices. Fingers are varying shapes and sizes, so when setting clickable areas, be aware that not every user has the same size "pointer." Keep keystrokes to a minimum to keep your users happy. You should also avoid text input unless absolutely necessary. This reduces the possibility of errant keystrokes and makes navigating the website smoother.
The fact that some mobile touch screen devices allow users to rotate from portrait view to landscape view means that elements on the Web page need to have enough spacing in either mode to present a good design. A simple way to avoid that is to design the page with a single-column so users only have to scroll up and down instead of laterally to see content.
Since most touch screens are generally 340x280, a mobile site should be no wider than 900 pixels, and use the 960 grid system for layout.
Major Challenges
Traditional tabbed navigation is not the most effective way to direct users around your touch screen device. Since there isn't a physical scroll bar on Web pages, it's important to remember that users will have to tap and scroll the screen to look at content below the fold. Keeping your site simple.
Because mobile browsers only use a small screen, try to avoid including large background images or large files that will clutter the site increase load time. For the images that you do include, use high-resolution versions so the images won't pixelate when zoomed. While some users can download documents and files from their mobile browsers, it's important to keep the file size small and in .jpeg format, which is universally recognized by all devices.
Deciding which types of elements to include on your site will largely depend on the types of browsers being used to access your site. As with traditional Web browsing, there are several different browsers used for browsing on touch screen devices. The most common are Apple's Mobile Safari, Opera (used by BlackBerry and HTC), and Google's Android browser (based loosely on the company's traditional browser, Google Chrome). Each mobile browser displays different types of content and supports different effects, like zooming or tabbed browsing. While most mobile browsers display Flash elements, Apple's Mobile Safari can't. Since Apple claims most of the touch screen user base, it is a good idea to degrade Flash elements to simple images or leave them out altogether.
Helpful tools
- Opera has an application that lets designers see what their mobile Web sites look like before publishing.
- Information on the 960 grid design theory.
- The World Wide Web Consortium's recommendations for mobile browsing.
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.