by Daisey Kondziola
Fast food.
Express checkout lanes.
PDAs.
What do these things have in common? They all cater to the person on the go. Convenience is an essential need in people's lives today, and computing is no exception. PDAs allow the freedom of getting your information 'to go' -- hold the ketchup please. Two and a half million PDAs were shipped in 2002, and as this number increases, the demand for handheld compatible web interfaces grows.
Designing an online application for handheld browsers isn't just about making a tiny version of an existing interface. There are some fundamental points to consider in regard to organization of content, navigational hierarchy, and optimization of graphics. Challenges that have already been overcome in the desktop world have reared their heads again in the new realm of handheld browsers. We are encouraged to question the existing practices of interface design and explore new ways of presenting content.
The standard screen size of a handheld is 160x160 pixels, minus title and scroll bars, leaving only 150x140 pixels of usable screen real estate. When designing on such a small canvas, every pixel counts. Rather than using large, detailed imagery, we need to rethink the purposefulness of graphics used in a PDA design. Handheld users sync their information on the fly and don't want to be bogged down waiting for large graphic files to download. So, for example, easy-to-read, high-contrast icons might be more effective than larger, more intricate icons with labels such as home, contact, search, etc.
Designing for handheld browsers requires a minimalist approach, not only aesthetically, but programmatically as well. When building HTML for handheld devices, keep the coding as simple as possible. It's best to stick to basic HTML: avoid nested tables, frames, image maps, styles and scripts, or at least provide an alternative in case they are not supported. Because there are so many types of PDAs (iPaq, PalmPilot, Cassiopeia and Visor to name a few) it's best to test your application on as many handheld devices as possible. If you don't have access to the actual devices, you can download one of the many emulators that are available online.
When designing for limited screen space, it is vital to present your content as efficiently as possible. Decide what information is absolutely essential and organize it in a way that is easy to navigate. Keep page length to a minimum and try to avoid horizontal/vertical scrolling, as the scrollbars not only take up space, but also make the page less user friendly.
If possible, do not present more than one topic per page. It's best to provide links within the content so the user can drill down for additional details. When developing for handhelds, it's preferred to have a deeper hierarchy rather than larger pages. Also, keep in mind that you're developing for a "mobile" device, meaning the users may be unable to focus their full attention on the screen. Present the content as obviously and simply as possible. Be sure to provide easy access to a site map or table of contents so the user can get re-oriented if they get lost.
There's a bit of artistry in designing graphics for handheld devices. Because there's no room for large imagery or superfluous graphics, each pixel has to have purpose. Basically, if the image doesn't have specific meaning or help the user understand the topic, then don't use it!
Because most PDAs lack the ability to display color, it's important to use high-contrast images that translate well onto grayscale displays. It's best practice to check your design in grayscale from time to time during the design phase. Create images in the colors and size for which they're intended; if a device has to convert and scale the images, quality is reduced, and the results are often unpredictable. It's best to avoid detailed graphics with smooth curved lines (anti-aliased) because these do not translate well. Straight lines and simple colors are the key ingredients to well-designed mobile device images. Simple icons can save a lot of screen real estate. Rather than using common words such as "search," "home," "submit," "back," and "next," using icons to represent these will leave more room for content.
So, you've created a simple and elegant design for your PDA web interface... now what? Although handheld web interfaces are written in HTML, it's important to stick to industry standard tags. As a general rule of thumb, keep your layout as simple as possible. Avoid complex and nested tables, as they not only take time for the browser to render, but also take up valuable screen space sometimes resulting in horizontal/vertical scrolling.
Keep in mind that not all PDA users choose to download images. This means two things: one, don't rely on images to convey your message, and two, if you do use images, be sure to use informative ALT tags. Tagging an image with a description such as "red thing" is not as effective as stating what that icon represents.
HTML's original purpose was to present content. Of course, after years of experimentation and pushing the limits of the markup language, desktop web interfaces now contain interwoven tables and pixel perfect placement of elements. Don't try this on a handheld. It won't work. At this stage in the PDA world, design is strictly about presenting information in a clear and efficient way. Similarly, not all handheld devices and browsers support CSS and JavaScript. If you want to 'wow' your audience with bells and whistles, entice them to visit your full web interface in desktop format, but keep your PDA version simple and utilitarian. Otherwise, you will lose them if your handheld interface doesn't work because of unsupported tags and attributes.
There are more and more kinds of PDAs on the market each year. This would seemingly make testing a bit difficult unless you have one of each make and model. Fortunately, there are PDA emulators that can be downloaded to your desktop; these look and act just like the real thing. The Palm OS Emulator (POSE) is an especially good one, because PalmPilot has the smallest screen size and is a good gauge of how your content will display on other handhelds. http://www.palmos.com/dev/tools/emulator
Although web development for handheld browsers introduces challenges already overcome in the desktop world, it's exciting to explore new solutions and creative ways of tackling content publishing. It's inevitable that future communication devices will become smaller and smaller to fit the fast-paced and convenient lifestyles we lead -- it's up to us, as developers, to keep up.