Developer Forums | About Us | Site Map
Search  
HOME > TUTORIALS > DESIGN AND LAYOUT > DESIGN PRINCIPLES TUTORIALS > THE CRANKY USER: OH, THE PIXEL PICKLE


Sponsors





Useful Lists

Web Host
site hosted by netplex

Online Manuals

The cranky user: Oh, the pixel pickle
By Peter Seebach - 2005-09-05 Page:  1 2 3

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

Learn

View The cranky user: Oh, the pixel pickle Discussion

Page:  1 2 3 Next Page: Alternatives to the pixelated UI universe

First published by IBM developerWorks


Copyright 2004-2017 GrindingGears.com. All rights reserved.
Article copyright and all rights retained by the author.