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.

Provide an alt tag option
After you pepper your pages with a few 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 description instead. A.J. Flavell has written a thorough document on writing meaningful alt tags. See http://ppewww.ph.gla.ac.uk/~flavell/alt/alt-text.html.

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.

More advanced tips
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. In the next few sections, we'll provide some tips that are a bit more advanced, and probably won't be needed by everyone.

Adding space with gif files
Sometimes you will find that you can't get the amount of space you want between elements on your page. If this frustrates you, you can use a transparent image to wedge extra space in between them. Simply build a transparent GIF with the appropriate dimensions and embed it into the document within an <IMG> tag. One reason to use a spacer GIF is to force a line break after a heading. If you have, for example, an article headline immediately followed by an attribution line, you may not want the extra space that the heading tag or a
tag adds. You can force a line break and add a couple of pixels of space by simply inserting a 150-pixel wide by 1-pixel tall GIF in the text.

Simulating image maps
You can simulate image maps by splitting your image into sections and assigning a different HREF or target to each one. This way, you can have horizontal navigation bars that act just like their image map equivalents. Just remember to keep your images small and simple. Also, keep in mind that the image should give the user some indication of its function. Remember that you don't have the luxury of the cursor turning into a hand when it's over a link.