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.

Corporate website design

Corporate website design experiment: how to use a blog to increase your ranking in the search engines.

Everybody knows that a better result in the search engines = more traffic = more sales, right? So here's an experiment to see just how easy (or difficult) it is to claw your way up the search results using the power of your blog. I've carefully written this post to include the key phrase "corporate website design" in several prominent places and you'll notice that in some places I've spelled the phrase corporate website design (three words) and in others corporate web site design (four words). This is because Google will differentiate between a search for "website" and "web site" and treat them as two different searches bringing up different sets of results.

Now, I have to be honest, I'm not sure how well this will work on a brand new blog with no one linking to it yet but I'll keep an eye on the results over the coming weeks and let you know what happens.

At the time of writing (19th June 2007) this blog did not appear anywhere in the top 50 results when searching Google for "corporate website design" or "corporate web site design". Take it away search engine spiders...