About 20% of internet users browse with resolutions less than the most popular 1024x768. To accommodate this, web pages should be designed to render properly in resolutions as least as coarse as 800x600, and preferably even coarser. If one develops a fixed-width design for these low-resolution screens, however, the pages will look funny in high resolution settings.

The way to get around this problem is to design pages that can expand or contract in a manner appropriate to the visitor's monitor resolution. A layout that expands in an uncontrolled fashion, however, will be hard to read on wide monitors. The line lengths will be too great.

Thus, one needs a lay out that will shrink on low resolution monitors, but which will not grow overly much on high resolution monitors. To solve this problem, we design our pages so that different style sheets are called in depending on the visitor's screen resolution. A small bit of javascript determines the screen resolution, then sets the appropriate style sheet.

The result is that the main content width is fixed to provide an optimum line length and centered in high resolution monitors (the majority) but is fluid on a low resolution monitor so as to accommodate whatever resolution the visitor has set to accommodate his individual needs.

An additional advantage of using style sheets to govern layout is that the pages can be readily reformatted to be easily read on small screen devices, such as cell phones or PDAs.

Eventually, I'll write up my methods in detail, along with the appropriate javascript so that you all can use the technique without having to reinvent it. If you can't wait for "eventually", send me a prod.


© 2006 by Lawrence G. Piper
e-mail me: lgpiper@MetastableStates.com

Last update: Thursday, January 03, 2013