A typical website that looks great on a standard resolution monitor does not usually keep the same format on a handheld device. Designing websites for hand held devices requires a separate set of layout guidelines and a separate style sheet. Here are some issues to consider when designing a website for a hand held device.

• Create a separate style sheet, and include the media attribute set to “handheld”
• Design your handheld website with only one column of content. Sites with multiple column layouts will wrap on the handheld device, forcing the user to scroll thru several pages to find content in the other columns.
• Minimize the use of images and consider using monochrome images instead of color as the color may become distorted by the handheld browser. If your image is not legible using resolutions below 160 X 320 do not use it for your handheld website layout.
• Avoid large ads or consider replacing them with short text ads instead.
• Avoid large logos and large navigation bar
• Do not try to incorporate dynamic effects in a website for a handheld device. JavaScript does not work well on most handheld devices
• Limit the number of items in the navigation bar to avoid horizontal scrolling. Instead use drill down navigation via hyperlinks to navigate forward and backward. Keep all navigation links near the top of the page.
• For pages with large amounts of content, consider breaking the content up using links and anchors.
• Test your web site on several different handheld devices. If you do not have access to a handheld device, try using the Opera Web browser, http://www.opera.com, which comes with a tool called the “Small-Screen Rendering” to allow you to see how your webpage will look in a tiny window.

Written by Nancy Walk
Senior Analyst/Web Developer