Fixed vs. Liquid Layouts

This is yet another web-related topic that gets people arguing. Not quite as bad as “Mac vs. PC,” it really gets some people going. Which is better, a fixed-width layout, or a fluid one that resizes to fit the browser window. Unlike some people, I say that it depends on the project, and that there isn’t a one-size-fits-all solution (though I do lean slightly toward fixed-width layouts). Besides, if we all agreed on standards for everything, we wouldn’t have anything to argue about..

Both sides of the argument have their pluses and minuses, and generally I would say “go with what best suits the instance.” If you want a certain look, which will require vertical tile images, and other images of specific width, you may need to go with a fixed-width layout. If you want as much control as you can get over the look of your design, or if you need your content area to be a specific size, go with a fixed layout.

Liquid layouts can adapt to the available space in the browser’s viewport, which makes a site more accessible, avoiding the annoying horizontal scrollbar that fixed-width layouts often generate at low resolutions. If you can put together a good-looking liquid layout that works well in your given scenario, go for it. However, you must rely on the CSS attributes min-width and max-width to make sure that your design can’t shrink too much, squishing your beautiful design into an illegible mess, or two wide, making for long, hard-to-read lines of text on large widescreen monitors. Too bad the attributes don’t work on Internet Explorer 6 (big surprise)!

You could also go for a hybrid layout where parts of the design are fixed, and others liquid. You could have a fixed-width sidebar with a liquid content column, for example. I’ve found that this method works better than having everything based off percentages of ems.

Unfortunately, we’re plagued by small groups of people with low-resolution monitors, very big widescreen monitors, tiny mobile web phones, and outdated browsers like Internet Explorer. We’re ill-equipped to handle all the possible scenarios, and far too many people don’t update their browsers in a timely manner, resulting in a lack of improvement in that area. All we can really do is support as many browsers and resolutions as possible, and wait for people’s computers to stop working, so they will get a modern machine, resulting in a tiny step forward progress-wise. Eventually Internet Explorer 6 will die-out, giving us better support for liquid layouts, which are becoming more and more important as screen resolutions diversify, having increasingly different aspect ratios as well as pixel dimensions.

Further Reading…

I managed to dig-up a post I found via Smashing Magazine back in August 2007. – CSS Layouts: The Fixed. The Fluid. The Elastic.

  • http://www.problogdesign.com/ Michael Martin

    I think liquid layouts are just too much hassle in most cases. There are so many different possibilities that you have to account for (All the things you listed!), that by the time you’ve taken care of them all, your design rarely looks its best on any of them!I’m happy to go with a fixed-width layout almost every time. It gives me complete control over the design for the vast majority of users, and so long as it is still reasonably good for the rest, then there’s nothing to worry about. :)

  • http://www.webmaster-source.com Matt

    @Michael, I agree with you on that. Generally I prefer fixed layouts, except in a few cases. Though I find that some liquid elements are good, like your header on Pro Blog Design, the way it always fills 100% of the screen width.

  • http://www.problogdesign.com/ Michael Martin

    Matt,I never thought of my header like that before! I always just considered it a background detail. That’s a good point. I’m definitely fond of tyling background like that, so I suppose there can be room for a little liquidity in any design. :)

  • http://www.webmaster-source.com Matt

    Yep. It may not be a fully fixed design (like Webmaster-Source), but it’s not fully liquid either. The way I see it, fully liquid layouts are where the whole thing stretches relative to the browser, and liquid elements are stretchy parts of a larger layout that is mainly fixed. Your site is a prime example of that. At least, that’s how I think of it. :D

  • http://www.WebDevelopment2.com/ Baz L

    I tend to be rather selfish on this one. It’s hard enough to get things to line up right on a fixed width, when we’re talking about different browsers.In order to do a fluid width right, it’s just too much hassle. It’s much deeper than changing widths from pixels to percentages.

  • http://www.webmaster-source.com Matt

    @Baz, I know what you mean…

  • http://www.WebDevelopment2.com/ Baz L

    You can’t please everyone all the time. So I say, for what ever project you’re working on, find your target audience and shoot for that. If you’re talking about technology and you’re shooting for a nice Web 2.0 layout; it should be safe to aim for wider.If you’re site talks about the benefits of long term life insurance, diabetes meds, prescription glasses, etc. you might was to slim it down to 800×600.A site that tries to cater to everyone (more times that not) finds that it gets stretched too thing (pun intended :))

  • http://www.webmaster-source.com Matt

    @Baz, Good advice.

  • http://www.tmdesigner.it Giuseppe

    Io sono per i layout fluidi, anche se non disprezzo affatto quelli fissi. L’effetto degli stessi, e la loro utilità varia di caso in caso a seconda dei siti web e dei loro contenuti. In general, per un CMS preferisco assolutamente un layout fluido. E’ la soluzione migliore. Ciao

  • http://www.webmaster-source.com Matt

    @Giuseppe, To each their own… :D