On wide monitors, liquid layouts and line lengths…
Read any decent article on CSS layout nowadays and you’ll inevitably see mention of “liquid” layouts, where the page contents scale to fill the available browser space. They’ve become something of an obsession for developers recently, with many going so far as to coin the phrase “the Holy Grail“. In slightly less hyperbolic terms this refers to a 100% cross-browser compatible 3-column layout, with fixed outer columns and a central column that scales to fill the remaining available width. When even CSS guru Eric Meyer has a proposed solution, you know its a movement with some traction.
It would be somewhat controversial then to suggest that maybe a liquid layout isn’t always the best option, but that’s what I’m about to do.
We’ve hit a point when wide-screen monitors with high resolutions are becoming increasingly commonplace, especially with many of our clients, who tend to be highly technical companies working on products and systems which require as much screen real-estate as possible. And from an aesthetic point of view, I’d agree that a website constrained to a maximum width can sometimes look a little odd in a full-screen browser on some of these monitors.
The question is, do we design and layout content to fit the technical specifications of the visitors machine, or the physical limitations of the person using it?
Unfortunately, the human eye and brain haven’t quite developed at the same rate as our monitors! Studies at the end of the 19th Century (Weber, Javel & Cohn, from 1881 to 1883) determined that 4inches was the optimum line length for printed media, and things haven’t changed that greatly since then. The shift to computer monitors at the end of the 20th century saw a slight change, with Dyson and Kipping (1998) finding that reading rates increased as characters per line increased. In their study using 12-point type, the 4-inch line length produced the slowest reading rate and the 7.3 inch line length produced the fastest. However, users preferred the 4-inch line lengths. Similar studies have since been carried out by Youngman and Scharff (1999), Fernandez and Hull (2002) and most recently Dawn Shaikh (2005).
Almost uniformly, participants read varying line-lengths at similar speeds but expressed a preference for lengths of around 4-6 inches (or 10-15 words). This fits the natural arc of the eye, meaning it has to travel less, enabling the brain to concentrate on the text on the page, which is ultimately the point of most websites!
So yes, of course there are reasons why one might want to make page content “liquid”, and while it can present technical issues there’s certainly no shortage of solutions. But when the underlying purpose of a site is to convey information – in some cases very detailed technical information – I would argue that improved usability for the visitor should always be the most important goal. And if that means a constrained-width layout, then that’s the layout model we’ll adopt.