Web page liquidation
22 December 2003
After reading the explosion in debate over fixed-width versus "liquid" web pages in the web design community of late ( -1- | -2- | -3- | -4- | -5- ) one thing came to the fore: the main reasoning against pages that expand with browser size – style preferences aside – was the difficulty in reading overly long lines (however, I think that some designers simply use this as a justification for the other benefits you receive from a fixed-width design; namely, control and ease-of-design).
Liquid-fixed solutions such as Patrick Griffith's CSS Zen Garden entry don't seem quite complete to me, as the size of the page only scales with text size, not on browser width – as a traditional liquid site does. Therefore, I set out to code an example of a liquid page that retains a readable line length.
The page – a simple two-column example – scales font size dependent upon the browser window width. Because all page measurements are specified in relative units (ems) this also means that the size of the page itself scales. Font size (and hence page size) can also be changed by using the text size links.
Because the browser width must be obtained in pixels ultimately the font must be sized in pixels, therefore the line length is only really an approximation of 35ems, based upon the ratio between pixel font size and em based element widths. I'm not sure of all the calculations involved here, but it looks correct, and if any weighting factor is required, it would be easy enough to insert.
With a page that scales to fill the browser window, yet retains a fixed line length there's no longer any excuse to use a fixed-width page for line length only! However, I get the feeling that this solution won't reduce the number of fixed-width pages, as for the most part they seem to be a method of control rather than an exercise in readability.
(Note: The page has been tested in IE6, NN7, Opera 7; there's a few bugs such as <h1> not scaling in IE but hey, it's just an experiment)
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout