More on fixed widths

¶ Doug and Dan have responded to the hoohah surrounding the conversion to fixed width layouts of Stopdesign and SimpleBits, both pointing out that the changes are experimental. (Note: Stopdesign has now reverted to liquid.)

Long lines of text

Dan’s main concern which his liquid layout was overly long line lengths in browsers wider than 1028px. It is an oft-quoted criticism of liquid layouts and with some justification. A way to mitigate long lines and keep a purely liquid layout is to use ‘concertina padding’. Every width, padding and margin is set as a percentage of the window width. So as the browser is made wider, the white space increases thus limiting the spread of the text. This technique also means that one can design using a grid in such a way that each page element remains in correct proportion to the others. Clagnut itself is an example of concertina padding in action.

Reading on screen is a different proposition to print. Ridiculously low resolutions (CRT screens have 70 dpi compared to the 3000 dpi of quality printing) and backlit text mean the rules are surely different. Surprisingly, I find short line lengths tiresome on screen; I don’t really subscribe to the empirical prescription of 7–10 words per line for comfortable reading. Most novels have 10–15 words per line and I think the upper region of that range is more appropriate for screen. Don’t forget that shorter lines also mean more scrolling.

It’s worth reiterating at this stage that a key to improving online readability is increasing line-height (leading to typographers) to 1.5em or beyond. Spacing the lines out in this manner helps keep the reader’s eyes on track and eases the transition to the next line.

Replaced elements

Doug brought up the most compelling issue favouring rigid layouts – that of fixed width elements such as images and flash movies. Inherently with a liquid layout one never knows how wide a container will be. This can lead to situations where an image is wider than its container and breaks the layout. The breakage manifests in a number of ways including forcing the container wider or overlapping the image across the edge of the container. Mitigation often means sticking with deliberately small images, linking them to larger versions.

A similar problem can occurs when embedding Flash movies in a page. A classic example is Todd Dominey’s PGA Open Championship site which enhances the experience with Flash movies at the top of many pages. This will be one of the reasons which pushed Todd towards a fixed width layout.

But there are workarounds. Images and other replaced elements can be sized relatively. In yesterday’s experiments of images inside a variable width column of text, I demonstrated this snippet of CSS:

IMG {
  max-width:240px;
  width:100%
}

Here images are sized as large as possible or at their inherent size, whichever is the bigger. Thus you display an image at the correct size, shrinking it to fit only if required. (IE/Win doesn’t understand max-width but the resultant scaling effect may still be acceptable, particularly with PNGs). Flash movies, being primarily vector-based, should scale extremely well anyway so in many cases they could just be left with a width of 100%.

An alternative approach for images is not to scale, but to mask: one shows as much of the image that will fit and hides the rest so as not to break the layout. Ideally one would use overflow:hidden for this but guess what: IE/Win chokes again. Instead the image can be displayed as a background – this has the advantage that we can anchor the image at any of its four corners, a technique aptly demonstrated on Dunstan’s blog and v-2 Organisation.

Horses for courses

Fixed versus liquid design is a seemingly emotive debate. As you might guess, I favour liquid layout – it seems a more intuitive, appropriate and elegant method for a medium where the canvas is unknown.

As with any methodology, liquid layout is not without issues, but many concerns can be addressed with little or no compromise. Highly media-centred sites are more problematic and may tend towards a fixed width approach but again compromises can be found: it is of course possible have a fixed region inside a liquid layout and unite the two techniques.