Click to suit your screen
Fixed and variable width CSS layouts both have their strengths and weaknesses, and have each been adopted widely, but there is a third way.
Paul Sowdens’s “style-switcher” article on A List Apart describes (with a little help from PPK) how to use alternate style sheets and Javascript to let a user switch between the style sheets applied to a web page. The most widely known use of this technique is probably Wired.com’s text size widget, where by clicking on a smaller or larger text icon changes the size of the article text.
As the style-switcher technique allows us to switch between whole style sheets, it is not just the text size a user can be allowed to adjust. By the same token, whatever styles we put into our alternate style sheet will override the styles set out in the persistent or preferred style sheets, when enabled by the Javascript (as long as they are put in order to cascade properly).
We can now set up multiple alternate style sheets, each with different styles applied, and the user change between them. My homepage is styled with a fixed width of 800px, but a user can click on the links at the top of the right column to change this width to suit their screen, be it a portable device, wide screen or standard.
This approach overcomes the two main issues associated with fixed width layouts, namely, that either they are too wide for your screen and necessitate horizontal scrolling, or, that they look lost in a sea of emptiness on your snazzy high-res screen. It also does not suffer the problem often criticized of variable width solutions; that they can produce paragraph widths too wide as to be comfortable to read. The widths can be chosen and tested before anyone applies them.
And I know what some of you will say before you say it: “If you’re using Javascript anyway, why not just use the screen.width property and match the page width with that?” Good point, but this is just another way of producing a variable width layout. Admittedly, you could then use Javascript to choose between alternate style sheets, but we don’t want Javascript to choose the width of our page - we can do that for ourselves.
There is no reason, however, that one of these methods should not be available to the user, or even set as default. We could have a standard width for the page, for example, and a “match my screen size” button for those who felt the standard width was not appropriate for their screens. What I am proposing is that users should have the choice over how best to view content in their own browsers.