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.)
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.
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.
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.
Design thinking · CSS techniques
James Craig wrote:
I tried to address a width-sizing issue that not too many people know about on this page: http://cookiecrook.com/AIR/2003/train/accessiblecss.php
Select the “scalable width demo” for info on column widths sized in Em units and the pros/cons over percentage (fluid) widths.
David House wrote:
Richard, these posts are becoming greater and greater by the day. You’re a genious. Thanks for sharing the insight.
Nick Finck wrote:
I think there is a huge missconception with the line length issue here. It’s not 7–10 words per line, it isn’t even 10–15 words per line. It’s 4” lines… or 4” of text. Novels have more words per line because the text is considerably smaller on those small printed pages than it is on most web layouts. We are talking about 8px fonts or less here. Most web designs accomodate about 12px fonts. Therefore the rule of print is based on 4” of text in a single line. That translates to about 400 pixels or so on my system. Check out the studies:
“This study found no significant differences in reading time or reading efficiency between the three line length conditions for both the adults and children. However, the results did support the finding that shorter line lengths are preferred more than full-screen line lengths. As far as the perception of reading efficiency, the results were mixed.”
– “The Effects of Line Length on Children and AdultsOnline Reading Performance” by Michael Bernard1, Marissa Fernandez, & Spring Hull. Software Usability Research Laboratory, Department of Psychology, Wichita State University.
http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm
Rich wrote:
I guess the 7–10 words rule may have come after the 4” line was decided upon, not the other way around. All the more interesting then, that the rule appears in so many typographical texts. Diverse works such as Bringhurst, Muller-Brockmann and Dowding all mention it. Muller-Brockmann in particular goes to great pains to say that line length should be proportional to type size (in order to obey the 7–10 words rule).
The study you quoted was interesting in that actual reading ability seemed unaffected by line length, but perceived readability did vary. However the study only used one type size, so was inconclusive as to whether line length or words per line was the key factor in this.
vickie wrote:
i need help with my livejournal. i don’t know how to make it so that my posts are under my image in the middle of my journal. if anyone has an override for that please tell me.
C Montoya wrote:
I’ve been keeping up with the fixed vs. liquid debate lately. I like liquid layouts, and while there’s nothing wrong with fixed layouts, I wish there were more liquid layouts out there.
Liquid layouts have gotten to be so scarce that I decided to make a gallery of the good ones, which serves as a resource too. It’s here: http://liquid.rdpdesign.com
It’s a new project, hopefully liquid layout supporters will support it.