General

Web Design: Fixed-Width vs. Liquid

There has been quite a lot of discussion recently on various tech- and webdesign-related blogs about major sites being redesigned with fixed-width layouts. See this and this and this and this and this, among others.

Personally, I prefer to at least try to design liquid sites. If you design a fixed-width site, you have to make sure that it’s viewable at 800×600, as forty-something percent of your viewing audience will tend to have that resolution. At a very large resolution, however, that layout will leave an awful lot of blank, wasted space, with a cramped-looking content area.

It depends on the site, I suppose. If the visual design of the site is paramount to the message that you are trying to convey, then yes, a fixed-width CSS design is MUCH, much easier. Most of the sites on CSS Zen Garden are fixed-width, for very good reasons…liquid designs using a lot of graphics that have to fill an exact amount of space are a stone bitch to design. It takes a lot more work to make them liquid. Just try to deconstruct any of the designs there, and make them liquid, and you will see exactly what I mean.

The designing for the web isn’t an exact science, and you never have control over what your visitor will see. But that is part of the beauty of it, to me; part of the challenge resides in designing for all possible combinations of browsers and resolutions and operating systems. Sometimes, when you know that your audience has a certain configuration, as on a company intranet, you can design exactly for that. Sometimes you have a sterling client who says “forget the Netscape 4.X people, design for modern browsers,” and then you can fall down on your knees, kiss their feet, and go happily to work.

What is your personal preference (for the techies in the audience, who are the only ones who have made it this far, anyway)?

11 thoughts on “Web Design: Fixed-Width vs. Liquid

  1. Personally, I prefer a mixture of the two as stupid as that may initially sound. What I mean is that I have areas that are of fixed width, then areas that are fluid. So, for example in this design which is a prototype I did months back for a site I’m working on, the left and right menu panels are of fixed width, wheras the content area is liquid.

    I agree with you when you say that for really visually rich sites, especially when you’re going for convoluted table layouts with spacer .GIF files, shaped table edges, and lots of visual interface “junk” it gets painfully tricky when you start doing that with a fluid layout in mind.

    If you really want to complicate matters, put site usability and accessability into the mix with this argument as well! ;)

  2. I can see the arguement for both.

    Fixed width not only allows more control over the look *spit* but allows you to control column width – all the readibility tests I’ve seen say we cope best with 50 – 70 character wide columns for reading. I hate websites that look at my 1024 wide screen and decide to spread the text all across that – it makes it much more difficult to read than otherwise.

    On the other hand, I’m a librarian geek rather than a designer geek – the design should adapt to the reader, not the reader to the design.

    *sigh*

    This is why I don’t do web design any more – it’s far easier to sit in the peanut gallery and carp. :-)

  3. I think its a question of who the site is for-I’ve found that more minimal content works better with a fixed width, whereas more menu/link intensive sites work with a fluid design. Its horses for courses, and with the question of monitor ratio and platform still an issue, its hard to plum for one over the other.

  4. Add usability and accessability? You’re a masochist, aren’t you? lol…actually, I suppose if you’re using a CSS layout, it should be accessible anyway, right? A screen reader, for example, will be a lot happier with a CSS layout than one using nasty nested tables. Usability is another matter. :(

  5. You’re quite right, with CSS in theory it would be accessable as it’s going to get really. As for usability, my Web Usability Lecturers at Uni who each have a Phd, are typical “Usability Experts”. All criticism and no solutions. It makes me wonder if anyone knows about usability beyond the basic “Don’t put pink text on a pink background” type stuff… ;)

  6. Thanks. I’m really not a designer at all, I’m a programmer and database person to be quite honest. I can just about do enough design-wise to get by.

  7. I think he makes some valid points about usability, although I disagree somewhat with his views on Flash. I think his site, useit.com is one of the ugliest sites I have ever seen (I may be missing some point that he intended to make). No matter how usable and accessible a site is, if it’s THAT ugly, the message will lose both impact and credibility. Any new web designer that honestly wants to try to build usable sites will look at that and say “well, if they have to look like that, I don’t want to try it.” But, as I said, I may be missing something.

  8. I believe that Jakob Nielsen isn’t especially knowledgeable or talented, he was just fortunate enough to be the first self-professed usability “expert”, and is therefore always accredited as such.

    I don’t hate him, like many designers do (I wouldn’t class myself as a designer anyhow!), and I think that some of his work is useful. The problem with Nielsen is that he’s taken his idea of usability too far, and has ended up being a polar opposite of the very sites he despises, turning him into a great example of how not to make a site, and how not to promote a cause.

    Ask any designer about “usability” and they will usually groan, then refer to Nielsen’s awful looking site, then say “well, if usability means my site looking that bad, then fuck it!”. Promoting a cause as just as usability on the web has been dealt a killer blow by Nielsen’s implementation of his idea of usability if you ask me.

    Fundamentally, I think that he is the usability “expert” template, that all usability “experts” try to follow. Pick fault, tear the subject matter apart, but don’t for one second offer a constructive method to facilitate a solution.

Leave a Comment

Your email address will not be published. Required fields are marked *