".
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 (to avoid sometimes annoying scrolling images) and use images compatible with your display capability (e.g. 1 bit, 2 bit, full color, etc).
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 160x160 pixels, while Windows CE-based devices can be up to 640x480. 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 handheld's viewing area. Use "large" images sparingly and only when appropriate, as they not only consume screen real estate, they consume synchronization bandwidth.
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 dispensing with the image. If you must use detailed images, you should tailor them especially for the device in order to achieve a predictable result.
CHOOSE 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 covert 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 grayscale, 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 to not create overly large or complex nested tables. Tables can quickly consume screen space and cause vertical/horizontal scrolling to become enabled and unnecessarily effect 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, putting "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).
Regardless of whether your organization has PalmPilots, Cassiopeias, Niņos, PDAs, personal companions, PC Companions, Palm-sized PCs or H/PCs, these general tips can help you begin the process of developing Web-based applications that are optimized for enterprise-wide deployment on these and other handheld devices.
On its Web site at www.avantgo.com, AvantGo also offers advanced tips for adding space with GIF files, creating image maps and using text in images, as well as working with dynamically generated HTML and building interactive applications for more advanced mobile application developers. So what are you waiting for? Start optimizing your content today!
About The Author: Marty Kacin is Director of Professional Services at AvantGo, Inc. (www.avantgo.com). He can be reached at marty@avantgo.com or by calling 650-638-3399.
