December 16, 2003

Begun these layout wars have

There’s a layout battle brew­ing in the blo­gos­phere that’s sure to ripple out to the rest of the Web design community.

Sev­eral promi­nent blog­gers have begun switch­ing to fixed-​width lay­outs for their site. White­space makes sev­eral points about leg­i­bil­ity and opti­mum line length being rea­sons to switch to fixed, as opposed to liquid, layouts.

The prob­lem with fixed lay­outs in an era of font-​resizing (you are using ems aren’t you?), is that opti­mum line length is a moving target. In the print world, opti­mum line length is based on the size of the type­face 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 vis­i­tors are using browser like Mozilla, which will resize type no matter how you spec­ify it, then all the work put into a fixed layout is blown out of the water by the user — who, right­fully so, has resized the type to fit their needs.

The only answer to the prob­lem, and design is about solv­ing prob­lems, 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 leg­i­bil­ity experts may say that goes against years of research (and they’d be right), but research is ulti­mately about aver­ages — the aver­age user wants x point size in columns y picas wide.

But on the Web we have the chance, and the abil­ity, to easily let users take own­er­ship of any site they want. So even if the user is a sta­tis­ti­cal out­lier they can still be happy with your site.

This just in (12:16 p.m.): Stopdesign’s change is an exper­i­ment. He has a good dis­cus­sion of the var­i­ous fac­tors involved, and brings up a good point about ems-​based designs:

To solve the line-​length issue, some have sug­gested set­ting column widths in “ems” so they will expand and shrink with text size. How­ever, em-​width columns can quickly extend beyond the width of the browser window after just a few incre­ments of text-​resizing, result­ing in the awk­ward hor­i­zon­tal scroll bar. And even though this solves the line-​length prob­lem, we still have a “fixed width object inside liquid container” problem.

Filed under: Web design

Next:
Previous:

Related

  • http://www.9rules.com/whitespace/ Scrivs

    Or you could use a layout whose width is based on ems so when the user resizes the font the design adjusts accord­ingly. This may be the happy medium that we are striv­ing for.

  • http://www.heisel.org Chris Heisel

    True, that addresses the font re-​sizing issue, but leaves out the issue of what size is the browser viewport?

    Not every­one surfs at full screen, not every­one has the same amount of chrome, etc.

    A liquid layout allows the user to adjust to what­ever their sit­u­a­tion may be — no designer can figure out all the pos­si­ble per­mu­ta­tions of the vari­ables involved in a Web design and find a solu­tion that fits well with them all.

    With liquid layout you can make a site that looks nice, solves prob­lem AND lets the user adjust it to their par­tic­u­lar view­ing whim.

    Fixed lay­outs feel like a step back­ward — taking some use­ful­ness 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 cor­rect choice for the vast major­ity of sites out there.