The to-do list

I'll wrap up this month with a checklist for avoiding pixel problems and creating pages flexible enough to work with a variety of user preferences, browser renderings, and display sizes.

Avoid the use of images for text.

Rendering text as a fixed image is counterproductive and will annoy the user.

Build your layout so that it expands to fill available space.

Use CSS hints freely, but remember that they will sometimes be ignored or overridden by browser or display limitations, or even just user caprice.

Test your page on at least a few of the boundary conditions.

Look at your page on a full-screen 25-inch display. Look at it on a 15-inch laptop display with 1600 x 1200 resolution. Pull it up on a cell phone's tiny little browser.

Don't worry about whether your page looks "good" on every display.

Worry about whether all the content is visible. Look for paragraphs where every line is cut off three words early, or for overlapping text. Overlapping text is annoying at any time, but overlapping links are absolutely unacceptable; the user will probably be unable to select one or another of the overlapping links.

Don't waste time working around the limitations of HTML.

Remember that the best can be the enemy of the good: a page of such beauty that grown men weep openly with joy, when it is displayed on a 1024 x 768 display in Internet Explorer on a 75DPI screen, will make grown men weep openly with despair on any other display. Settle for a page that users won't even notice -- so quickly and easily do they find the content they are looking for -- regardless of what browser or display size they're using.

This week's action item: Grab a copy of Firefox and set the display resolution higher or lower than usual. How do the pages look? Now go into Safari, click the larger 'A' font-size button three times and then go explore the Web. Marvel at the illegibility of many pages you encounter.

Resources

• Peter further riffs on the failures of Web design in the article "How not to make your site accessible" (developerWorks, March 2001).
  
  
• In "The design of everyday things," Peter discusses the impact of human factors (as conceived by Donald Norman) on user interface design (developerWorks, September 2002).
  
  
• For a more technical, in-depth discussion of cross-browser design and development, see Doron Rosenberg's "Migrate apps from Internet Explorer to Mozilla" (developerWorks, July 2005).
  
  
• Check out Movable Type, a Weblog publishing platform that provides an example of what can go wrong when one uses graphical backdrops for page menus.
  
  
• Find out how IBM's Global Services Usability Engineering team can help you improve your products and make them easier to use.
  
  
• The Web Architecture zone specializes in articles covering various Web-based solutions.