Resizing: Fixed Width vs. Liquid Width

Back when we were drawing layout blocks with pencil and paper, I explained that the first page element we had to think about was the containing block, and whether or not it would expand to fill the page. This decision is one that has plagued web designers for hundreds, if not thousands of years—all the way back to the days when we used tables and spacer.gif files to layout web page content. Okay, maybe that wasn’t actually thousands of years ago, but this is a long-standing debate nonetheless. In fact, the fixed-versus-liquid debate caused quite a bit of commotion back in December 2003 when two very influential designers, Douglas Bowman of Stopdesign and Dan Cedarholm of SimpleBits, simultaneously switched from liquid- to fixed-width layouts. This caused instant and unwarranted panic among the design and web standards community, whose members feared that this move marked the death of liquid layouts.

Since then, most designers have established their own opinions in regard to the fixed-versus-liquid debate. The decision to use one type of layout over the other should really be determined by the target audience and the accessibility goals of each individual web site. The pros and cons of each layout type are fairly well-defined, as Table 1.1 illustrates.

Table 1.1: Fixed- vs. liquid-width layouts—the pros and cons

	Pros	Cons
Fixed width	v Designer has more control over how an Image floated within the content will look. v Allows for planned whitespace. v Narrower text blocks improve readability.	v Can appear dwarfed in large browser windows. v Takes control away from the user.
Liquid width	v Adapts to most screen resolutions and devices. v Reduces user scrolling.	v Text spanning a wide distance is more difficult to read. v More difficult to execute successfully. v Can cause a lack of, or awkward whitespace.

With these pros and cons in mind, I’ve designed more fixed-width layouts than liquid. I like having control over how the content will display, and working with the background space. On the lip side, I sometimes enjoy the challenges that liquid layouts bring to the table. But, regardless of personal preferences, it’s important to put the needs of your client first. If you’re deciding on the width of a axed-width layout, you have to think about the audience for which you’re designing, and create a layout that meets the needs of those users.

An Alternative: Variable Fixed-width Layout

The somewhat ironic term variable fixed-width layout was coined by Richard Rutter in It’s an excellent an article that he wrote to catalog his findings about this new trend discussion of the topic that provides some great examples.

The homepage of Simon Collison’s Colly Logic exhibits the best implementation I’ve seen of this new trend. When you expand your browser window from 800 pixels to 1024 pixels in width, the right-hand column splits into a third column. Figure 1.29 shows how it works.

Figure 1.29: Viewing Colly Logic at 800 and 1024 pixel widths

Colly Logic acts as an intermediary between fixed- and liquid-width designs. A handful of designers have been toying with this idea; CSS Beauty, one of the CSS gallery sites I mentioned earlier, takes a variable fixed-width approach to displaying features and advertising content