David Emery Online

I would generally agree with the fact that the reason we don’t see more liquid-layout sites is indeed laziness—that is to say, liquid sites are harder to do well, and we usually don’t put in the time to do it.

But, I think we have to look at another factor, too: the lack of real, tangible benefits of liquid layouts. You can call it laziness if you want, but I’ll call it a business decision. If a liquid layout is going to take me additional hours to get right, and there are no tangible benefits (or whatever small benefits there are don’t outweigh the extra time), then I’m not going to make a liquid layout.

I like liquid layouts, but I fail to really see how they’re better than fixed ones. Both work quite well in most circumstances, and one comes a lot easier than the other (at least with complex layouts—with simple ones, liquid may not be much more difficult). Unless there’s a very specific reason to go liquid one a particular project (and sometimes there is), I’m going to choose the path of least resistance. That may be lazy, but I’d say it’s also business-smart.

Hi Jeff, thanks for commenting.

It’s true that liquid layouts don’t have a huge amount of ‘business’ reasons for implementing them, but where do you draw the line?

Is it worth using css and semantic html when you could maybe get it done quicker with tables in Dreamweaver?

How about a good design – is that worth taking the time over considering sites like MySpace have proved successful with utterly rubbish designs?

Personally, I strive for the best and most ideal solution to each problem, and for the vast majority of cases liquid layouts are the best solution. Sure, sometimes due to time constraints (or having to make a ‘business-smart’ decision) I might have to use a fixed layout, but I think we should always aim high.

There’s one other (albeit tiny) factor involved, too (at least in my case): Control. I’m a bit OCD with not having things move around too much. I don’t care how easy or hard it is to do liquid, I can do liquid just fine – I just choose not to. =)

“Is it worth using css and semantic html when you could maybe get it done quicker with tables in Dreamweaver?”

That’s taking the issue to an absurd extreme, how many times have we heard the business arguments against this?

As far as “good design” – I think most of the time businesses Don’t invest in this and need to start – providing a good user experience has plenty of benefits. I think fluid designs fit into the “good user experience” category but fall low on the priority list.

Any time I’ve done a liquid layout, it’s been for the site’s audience that still has an 800×600 screen size. However, that number is consistently dwindling, and so too is my desire to do liquid layouts.

There’s a certain point when a site is TOO wide (readability being the main issue). For those of us with widescreen monitors (mac people, especially), we don’t stretch our browser window to the edge, do we? I think there’s a certain limit to how wide we need to make a website with readable content. And I think we’ve reached it at around 900-1000 pixels.

It’s the same reason you don’t see a bunch of really wide books out there. People are comfortable with a certain size when it comes to reading text. Just because we can make it wider (or support wider screens), doesn’t mean we always should.

I’ve worked mostly for the big corporate side of web development. Their primary interest is consistency—both in terms of making a site look the same everywhere and making it look exactly as the art director planned it. Big companies want the same level of control over their web presence that they get in their print materials.

The art directors, for their part, tend to over design the layout in order to get that polished, branded look that’s being being pushed by the marketing and corporate side. Their layouts are so tight, and have such structured, precise graphics that any increment in the font size will break it. Forget fluid…

The point is that some web developers make fixed layouts not because they’re lazy but because they’re powerless.

@Anton – oh I’m the same, getting things to all line up is tricky, but can be done. Grid layouts are particularly entertaining trying to create when you’re doing a fluid layout.

@Adam – make no mistake, I was deliberately going too far when using the tables comparison, but where exactly do your draw the line? I think it’s important to at least aim at doing fluid widths, even if you end up having to be pragmatic and go with a fixed width for time reasons.

@Joshua – I agree totally about making sites that are too wide, max-width is definitely your friend in this regard. The real issue is one you touch on though – many people don’t maximise windows, and many people still use 1024×768. Combine those two things together and you end up needing a fluid site, as if you’re doing a fixed width one 1000px width you’re still going to hit problems.

Fluid width designs aren’t just for people on 800×600, they’re for everybody that doesn’t maximise their window.

@pixelslave – I do sympathise with this situation; and I will readily admit that if you’re just writing the code and not involved with the design you could well be stuck up the creek. Of course, the solution to this situation is to either have better designers that are more aware of the constraints and complexity of the web or to make the person that does the design and html/css one and the same.

This is my favoured option – I honestly don’t think that people that can’t write html and css should be designing web pages, as it’s just as much about interaction as it is design.

Thanks for all your comments folks!

@David: I think maybe you kind of missed my point.

You keep saying things like, “it’s important to at least aim at doing fluid widths,” but you’re ignoring my question: WHY?

Why should we try to do fluid? What’s better about it?

Because I can’t think of anything. :)

Hi Jeff.

What’s better about fluid width designs is they adapt to whatever size browser window your user is using, and using a fixed width that works for all of the audience is very restricting.

I’ll use an example to make my point: I use OmniWeb as my main browser, which uses a sidebar to display tabs in (and sidebars can be found quite commonly in IE and Firefox). If I visit your (rather lovely) site in OmniWeb on 1024×768 I lose most of the right column and have to scroll, which isn’t a great use experience.

When I do a fixed width (which I do on occasion when pressed for time) I still use 770px as the max width, as I don’t think we can really go any higher yet and still provide an acceptable experience (and people using 800×600 is still, at least for the sites I maintain, hovering at around 4%). I’m sure you can appreciate that sticking to a fixed width of 770px is pretty limiting and looks pretty rubbish on larger screens – fluid width designs solve this problem perfectly.

Well, David, if you don’t think we can go any higher than 770px at this point, then our conflicting view go beyond liquid vs. fixed. :)

I respect your opinion, but I am still not sold on why liquid layouts are better for users than fixed ones. You’ve explained one circumstance in which my personal website doesn’t work ideally with your (view unusual) browser setup, but that’s not because mine is fixed-width—it’s because mine is 900+ pixels wide. The same would be true if I had made a liquid layout with min-widths ensuring my line lengths were all appropriate.

I certainly feel like were long past the point of designing for 800×600. Several of the most trafficked sites in the world (New York Times, CNN.com, MSNBC.com, etc., ESPN.com) have long since moved to a wider layout. If it’s good enough fo them, it’s good enough for me. But really, how wide we can go is an entirely different discussion than fixed vs. liquid.

I understand why going wider than a user’s browser area isn’t ideal. Scrolling is annoying (but it’s not an accessibility problem, and don’t let anyone tell you it is). Based on the stats for the sites I deal with, people that come to my site with a situation like yours—less than 980px of viewport area—is very, very small. So, I’ve made a business decision to serve 92+ percent of my users, instead of 8%. I think that’s fair. And, there’s nothing stopping you from closing that sidebar of yours. :)

I definitely appreciate that you like liquid better. That’s fine. In some cases, I like it better, too (there are places where it just “feels” more appropriate). But I’ve never heard an adequate explanation of how liquid truly provides a better user experience or provides some kind of meaningful business advantage over fixed-width. Until I do, I’ll consider all the liquid-lovers and fixed-fanboys to simply be cheering for the home team. I like the Kansas City Royals, but I do fully admit they’re not better than the Yankees. People like what they like, and that’s cool—but it’s doesn’t make it better.

Tricky or not, I’m just saying that I visually can’t stand the stretchiness of liquid. I prefer a fixed-size box. I don’t wear sweatpants, and neither do my websites. =)

The fluid layout approach seems to me to be an ‘all things to all people’ solution. It is an attempt to be the best it can be for every screen resolution but often ends up with average results. Structurally simple websites may best be served by a fluid layout. However, the more complicated the layout, the harder the fluid layout approach appears to be. There comes a point where a fixed layout is, as Jeff Croft says, ‘the path of least resistance’.

It’s worth remembering that the web is a publishing medium. A book or magazine publisher would think you’re crazy it you asked him to produce each publication in 10 different formats and yet that’s what we’re expected to do with websites. And the only reason this is so is because screen manufacturers make different size screens with different resolutions. If there was only one screen resolution, we wouldn’t be discussing this issue. I can remember when the UK newspaper, ‘The Independent’ changed it’s format. The board of directors and design team probably argued about it for months. We’re required to do this for different clients on a daily basis. The fluid layout is a shortcut to accommodate this very issue. As I said above ‘all things to all people’ or more accurately ‘all widths for all screens’.

I’m not convinced this is just about laziness. I agree with a lot of the comments that a fixed layout can often be visually better which after all is what we as designers are required to achieve for customers.

I reckon that fixed widths are best suited to brochure sites where branding is a key issue but it’s ultimately up to the customer. My default process is design for 1024×768.

I guess the bottom line for me is that I’ve simply never heard an argument for fluid width websites that amounts to anything more significantthan, “I dunno, I just like ‘em better.”

I’m all for trying to please consumers, but you’ll find just as many people who “just like” fixed-width better, too.

I default to fixed-width and do liquid occasionally, when it “feels right”for a particular site. Until someone can give me some great business or user experience reason to change, I’m going to continue defaulting to fixed-width.

I see 3 important business reasons for going fluid.

1
Smartphones with variable screens are a fast becoming a larger market than desktops and laptops, also netbooks only support limited resolutions where desktops just go wider and wider, hopefully to 24:9 in 2010.

2
Less sniffing because your css can cater for big and small screens.

3
Less css for complex themed systems like Drupal, because fluid grids ease css inheritance if done right.

However, working from fixed width prototypes does allow for the definition of a favored viewport. It’s smart to work from there, especially because of limitations in readable font-size, line-width and embedded media (bitmap images, flash, video).

@Grant Newman differing screens is a non-argument. If webinterfaces were 3D holograms we probably wouldn’t be having this argument either. The environment you’re in is the one you need to deal with. Just make sure to adapt when necessary.