Alternatives to the pixelated UI universe

Do you think the pixel is the only unit of measurement for building graphical displays? Come on, you can measure better than that! This month, the Cranky user offers tips for user-friendly HTML layout and interface design, and explains why pixels aren't always the best unit for the job.

I sometimes wonder whether graphics wouldn't be better off if graphics designers and developers had stayed with vector-based graphics. For all that pixels are wonderful (I have nearly two million of them in front of me right now), they sometimes make Web designers do really stupid things.

For example, most designers calculate the size of images in pixels, even though the size of a reasonably clear word (for example) is a function of multiple factors -- distance to monitor, the user's eyesight, display size, and more. Displays alone vary so much that specifying size in pixels leads to graphical images that are too big to be useful or too small to be easily read. In fact, in Web design, I would say that the one thing you can count on is that you cannot calculate the size of your image in pixels. So why do so many designers do it that way?

I think I can explain the drawbacks of over-reliance on pixels and suggest some design techniques for getting around them.

Variable text size

Different browsers offer different levels of control over graphical display. A few browsers allow the user to set a minimum font size, such that absolutely no text will be rendered below the set size. It's a great feature, although in a perfect world it wouldn't be necessary.

Apple's Safari browser was one of the first to add size control to its main-browser toolbar. Firefox lets users specify a display resolution and renders all text accordingly. On many pages, features like these yield beautiful, clear text that is easy on the eyes. Wonderful, but hardly a fix-all.

For example, consider what happens when a page's layout becomes entirely unusable given a different font size. If you're lucky the main text column will simply become too narrow to be easily read. If you're not so lucky the text might extend under or over another part of the display, resulting in overlapping or invisible text.

A browser that gives users more control over the display is a great idea, but it's no solution for poor design.

Graphics and text

Typical DPI range? Ever wondered what the typical DPI range is? Well, there isn't one.The Mac Classic used 72 dots per inch, and as a result many users now refer to a point as a seventy-second of an inch. Programs developed for the original Mac used the 72 DPI assumption. The X Windows system comes with bitmapped fonts rendered for 75-DPI and 100-DPI screens. My primary working desktop is actually a laptop. Depending on whether I'm using it with the built-in display or the larger monitor on my desk, or possibly some other display, its resolution runs between about 86 DPI and 133 DPI. Even when it's on the huge monitor, and running at 86 DPI, I still find that the default font sizes most people use give me a headache; and that's when I can read them at all. And of course that assumes the default 1600 x 1200 resolution. A program running at 800 x 600 is at 43 DPI on the large display! It's a reasonably safe bet that most users will have a resolution somewhere over 25 DPI and under 250 DPI. But that's just for now. Some exceptions already exist.

Attempts that use graphical backdrops to make text render correctly are a major source of pixel problems. For instance, the Web site for Movable Type blog software (see Resources) uses a graphical backdrop for one of its menus. If you change the size of text, the menu no longer lines up as intended with the backdrop and some menu items become invisible.

Attempts to line up graphical elements with text, or even with each other, almost invariably fail at some point -- namely when the page's rendering changes.

Some designers use pictures of text as a way to control the layout of words. Don't do it: it's a bad idea. First, it introduces bloat. Second, it makes your page less accessible to people who can't see the pictures. And finally, it makes your page harder to read. Frankly, it's unlikely that you can do a better job of rendering text clearly for the user than a browser can; don't waste your time (or mine) trying.