There’s a layout battle brewing in the blogosphere that’s sure to ripple out to the rest of the Web design community.
Several prominent bloggers have begun switching to fixed-width layouts for their site. Whitespace makes several points about legibility and optimum line length being reasons to switch to fixed, as opposed to liquid, layouts.
The problem with fixed layouts in an era of font-resizing (you are using ems aren’t you?), is that optimum line length is a moving target. In the print world, optimum line length is based on the size of the typeface being used.
But if you’ve got a site that allows for font-resizing (which you should) or even if you don’t and your visitors are using browser like Mozilla, which will resize type no matter how you specify it, then all the work put into a fixed layout is blown out of the water by the user — who, rightfully so, has resized the type to fit their needs.
The only answer to the problem, and design is about solving problems, is to use a liquid layout.
If the user wnats big type and narrow columns — they can have it. If the user wants small type and wide columns — they can have it.
The legibility experts may say that goes against years of research (and they’d be right), but research is ultimately about averages — the average user wants x point size in columns y picas wide.
But on the Web we have the chance, and the ability, to easily let users take ownership of any site they want. So even if the user is a statistical outlier they can still be happy with your site.
This just in (12:16 p.m.): Stopdesign’s change is an experiment. He has a good discussion of the various factors involved, and brings up a good point about ems-based designs:
To solve the line-length issue, some have suggested setting column widths in “ems” so they will expand and shrink with text size. However, em-width columns can quickly extend beyond the width of the browser window after just a few increments of text-resizing, resulting in the awkward horizontal scroll bar. And even though this solves the line-length problem, we still have a “fixed width object inside liquid container” problem.
Or you could use a layout whose width is based on ems so when the user resizes the font the design adjusts accordingly. This may be the happy medium that we are striving for.
True, that addresses the font re-sizing issue, but leaves out the issue of what size is the browser viewport?
Not everyone surfs at full screen, not everyone has the same amount of chrome, etc.
A liquid layout allows the user to adjust to whatever their situation may be — no designer can figure out all the possible permutations of the variables involved in a Web design and find a solution that fits well with them all.
With liquid layout you can make a site that looks nice, solves problem AND lets the user adjust it to their particular viewing whim.
Fixed layouts feel like a step backward — taking some usefulness out of the users hands.
In what other medium, could a user re-size a page, or change the fonts to what suites them best?
While liquid layout isn’t the only right answer (there’s no one right answer in design), I think its often the correct choice for the vast majority of sites out there.