Look for worldwide shipments of handheld devices to soar to more than 24.8 million in 2001, especially as they take on more Internet connectivity. That forecast, from market watcher International Data Corp. (Framingham, Mass.), is a whopping threefold increase over the 1998 prediction of 9 million.
Still, what the numbers don't show is that organizations are benefiting even more from these smaller, more portable devices because they can now provide employees with access to large amounts of critical information. By developing an HTML-based application for its Internet, corporate intranet or extranet site and optimizing it for use on handheld devices, a company can give its mobile professionals a competitive advantage. But developing effective interactive applications for use on handheld devices requires some thoughtful planning.
Here are some tips that can help you optimize your enterprise-wide HTML applications for small-screen devices.
Choose content carefully. When deciding what information to store on handhelds, choose only that which is most essential. In general, this means information that a user will access regularly or will urgently require in certain situations.
And since different employees have different needs, keep the audience in mind. Customize the content specifically for the target user and target only the information important to that user.
Minimize page length. Handheld computers restrict the amount of screen space available to an application. So when developing applications for small screens, keep in mind that horizontal/vertical scrolling is not always the best solution. Instead, consider providing quick drill-down navigation via hypertext links that easily and intuitively allow you to navigate forward and backward.
Organize information effectively. When you group information using hyperlinked pages, you must maintain a balance between page depth (level of nested pages) and the length of individual pages. With handhelds, you should generally lean toward a deeper hierarchy rather than longer pages-primarily because it can be difficult to find your place in a lengthy section of text using the scroll bar. Try splitting long documents into pieces and creating indexes where possible. If splitting the document is undesirable, try using named anchors to mark sections and maintain links to them in a table of contents. For large or complicated data, you might choose to employ multiple indexes.
Use supported character sets. Most handhelds use the full set of Latin1 characters. International characters are not yet available as internal fonts on some devices. You can include any Latin1 character by using a code of the format "num".
Spend time on graphics. Designing graphics for small bitmapped screens is something of an art. However, once mastered, the graphics you create can make the difference between an adequate page and an outstanding one. The graphics techniques that follow mainly refer to Adobe's PhotoShop application.
Avoid clutter. Designing a quality layout for handhelds requires you to channel some creativity into planning for economy. If you are used to building extravagant sites with wild colors and patterns splashed across the desktop, you will undoubtedly find the small screen a frustrating environment. Try to avoid graphics that reduce readability while providing access to useful, concise and elegantly organized information. Use graphics that fit into one screen and use images compatible with your display capability.
Watch the size. When choosing images for use on devices, it's important to remember the size of the display. For example, the actual size of the PalmPilot connected organizer screen is 160 x 160 pixels, while Windows CE-based devices can be up to 640 x 480. Some software can scale images to fit inside the viewing area, but scaling reduces the quality of many images, so you generally should avoid using images wider than the device's viewing area. Use "large" images sparingly and only when appropriate; they not only consume screen real estate but they consume synchronization bandwidth.
Devil in the details
Consider the details. If the image is wide and somewhat complicated, the scaling operation may obscure critical information. Therefore, it's good practice to avoid large, detailed images. If there is a convenient way to convey the same information without using an image, you are probably better off. If you must use detailed images, you should tailor them especially for the device in order to achieve a predictable result.
Chose contrasting colors. The original color scheme of an image also plays an important role in the way it is rendered on the handheld. For example, the process AvantGo employs is to convert color images to black-and-white ones on images that have a high contrast ratio between colors and that have crisp edges in the details of the picture. Images that are anti-aliased, or smoothed out, do not usually convert well. It is usually a good idea to stick to graphics that are primarily black and white when using handhelds, as it can be hard to predict how dark certain colors will turn out, and to avoid graphics with lots of curved lines.
Design your own images. The easiest and most predictable way of deploying images on handhelds is to make your own custom bitmapped images, so that the software doesn't have to convert or resize them at all. You can create and edit such images with most image-editing packages. If you are used to working with large full-color images it might seem rather restrictive, but it's not as limiting as you might think. It's also good practice to design your images with clean lines and simple shapes since more complicated elements tend to appear ragged. In other words, it is better to use an image that is deliberately simple rather than to try using a complex image that looks confusing. Keep in mind what's appropriate for the medium. If you want to look at high-resolution images, save them for the desktop and reserve the handheld for less graphical information.
Convert images with care. In certain circumstances, you may be forced to convert a complicated color image, such as a corporate logo, for use on the handheld. When faced with this situation, you can try some techniques to obtain a high-quality result. Generally, the process involves converting the image to gray scale, reducing it to a bitmap and cleaning up any poorly converted areas.
Use supported HTML tags. Using supported and industry-standard HTML tags will enable your Web-based application to transfer more elegantly onto a handheld device. When using HTML tables be cautious not to create overly large or complex nested tables. Tables can quickly consume screen space and cause vertical/horizontal scrolling to become enabled and unnecessarily affect display performance during table rendering.
Provide an alt tag option. After you pepper your pages with tasteful, high-quality images, you must still face the fact that many users might choose not to load them. Therefore, it is extremely important to place meaningful alternate text tags in each of your embedded images.
When creating alt tags, keep in mind that you are trying to convey the message of the picture, not describe it. Therefore, "Yellow button" as an alt tag for a yellow button is not nearly as effective as using a "*" instead.
Focus on content, not display The most important thing you should keep in mind when writing HTML for a handheld device is to keep it simple and elegant. Stick to the original intent of HTML, which is to focus on content and not display and you won't go wrong. The main reason that certain pages on the Web won't display well on handhelds is that their designers used HTML for results it was never intended to produce. That said, there are times to bend the rules, especially if you are not content to wait for the next version of the software to add support for the tag or attribute you need.
Test your application. Do not assume your applications will be perfect because they look good on a Web site. Test them with an actual handheld device. Also, it is always smart to test your applications on all of the devices you are deploying, as today's devices range in screen size and resolution. For example, you can preview PalmPilot pages using 3Com's Palm OS Emulator for Windows (http://www.palm.com/devzone/pose/seed.html).