mh 05 May 05

I don’t think there’s anything wrong with fixed-width designs. I understand the arguments, don’t get me wrong. I once had some bonehead at the company I was working for whom I had just met, ask me (he was an expert: he taught classes in DreamWeaver, you see), “Why on earth would you EVER make a fixed width page?”

I don’t buy the argument of “all that wasted screen space—hey I paid a lot for this 22” monitor!” I think it’s a design decision. I don’t think either fixed OR liquid should be a default. I know we used to consider it anathema, but studies have come out showing that people don’t mind scrolling.

There are obvious cases where fixed is the wrong choice: If you have something that needs to display 5 columns of data or something, then hell yeah, it should take up as much space as possible, but for a lot of sites fixed is just fine, thank you.

I’m not trying to start a flame war, or even advocate for either position—I just wish people wouldn’t get all worked up over something so ridiculous.

mh 05 May 05

Oh, forgot to mention: Backpack is fixed width…

Garrett Dimon 05 May 05

My interest in liquid lies in how quick people are to toss it out the window. As with anything, the fixed vs. liquid decision really depends on the context. It’s not an absolute answer.

It just seems that most people toss out liquid because it is significantly more challenging to execute a complex design with flexibility. I’m just afraid that most are taking the easy way out I guess without really giving liquid a chance.

Danny Hope 05 May 05

Creating good looking liquid layouts is more time consuming and difficult than creating static layouts. Most designers are too unskilled and lazy to bother creating liquid layouts.

Also liquid layouts tend to cope better when the user decides to increase the size of the body text.

Darrel 05 May 05

My interest in liquid lies in how quick people are to toss it out the window.

Interesting angle to take. I tend to agree

Creating good looking liquid layouts is more time consuming and difficult than creating static layouts.

I doulen’t say that. It CAN be, but as long as you start with that in your mind, designing around it isn’t terribly hard.

In the end, of course, it all depends…

Jase 05 May 05

Sometimes you can have the best of both worlds.

For example, my company’s intranet home page is a very structured fixed-width layout with certain visual elements that are designed to take advantage of predictable column widths. But once you go further into the site, you’re generally dealing with forms, search results, and so on — and the liquid layout on the inner pages takes advantage of your browser screen width.

Since the site shell is consistent, users don’t really notice the fixed-width/liquid change — they just see content taking up the space they’d expect it to.

Brian 05 May 05

The above comments are sharp — what’s the purpose? And design for that. Super-wide text blocks are ugly. If it looks stretched, it looks bad. I like the idea of max width.

Dan Boland 05 May 05

Jameson, I couldn’t possibly agree with you more.

I’ve discovered that sticking with a fixed width allows me the greatest control over what I’m doing. For instance, I don’t have to worry about things looking dopey and wrapping weird because everything got stretched out. Now the project that’s been owning my life for the past few months, my company’s online database, has a liquid layout for obvious reasons. But for a regular ol’ website, fixed gets my vote.

One of the commenters on one of the articles brought up a good point that maybe a liquid width format would be seen a lot more often if there were better (that is to say, universal) support for min- and max-width properties.

To me, the whole argument is an indicator of what do with centered websites. Left-aligned websites are so 90s. =D

Danny Hope 05 May 05

Super-wide text blocks are ugly. If it looks stretched, it looks bad. I like the idea of max width.

Liquid layout does not equate to Super-wide text blocks

zakhar 05 May 05

Back in 1999-2000, we were fixating over liquid layouts at the company I was working at.

I think it just got a little harder to do 3 column liquid layouts with CSS (no tables).

I prefer fixed as it is easier to make a page look the same across all browsers / platforms.

Jameson 05 May 05

Liquid layout does not equate to Super-wide text blocks

Not at all. But a lot of liquid layouts offer that as their main feature. I think the point that’s being made here is to employ liquid layouts intelligently, so that they do a lot more than just super-wide text blocks.

And, absolutely, I’ll re-think most of my fixed-width layouts once min- and max-width gain broader support.

Michael Lykke 05 May 05

All this talk about liquid designs and why?

I mean i can only see one place where a liquid design is an advantage and thats in something like an ecommerce site where you then can show more products side by side, or a photogallery or similar.

Otherwise there isnt a single compelling reason to do it. Most sites(not all but most) are designed with a comfortable line-width. Why on earth would i want to change that. The answer is that i wouldnt, hence a fixed width design is better in 95% of the cases as far as i can tell.

Also it seems a lot of people arguing for liquid design use an argument of people witg big screen resolutions. Fact is that 98% of people i know who use a screen with a resolution larger than 1024x768 dont have their windows maximised, but rather have more windows running side by side and overlapping. Hence liquid design in those cases dosnt really add any benefit either.

I myself runs currently on a laptop with a 1600x1200 resolution and i dont have ANY window maximized except for my development IDE but that has nothing to with a website.

My vote is for keep using fixed width design and use liquid designs in the few places where it actually makes sense(ecommerce, photo galleries and similar sites which needs to show more things side by side.) and not for sites like blogs or other sites which mainly shows text.

And then all of the sudden there isnt that many cases where a liquid design provides a real benefit. I mean, even in ecommerce sites i would in all cases want a max on the width. I dont want to look at 15 products side by side. Id rather have 3 lines with 5 in each.

You also have to deal with the fact that alot of the time when a websites uses the entire browserwindow to fill it with text, images and so on it makes it a lot harder for the human mind to keep a good overview, while a fixed width design which has a bit of empty space on both sides(for example) makes it easier to keep a good overview and also gives the eyes somewhere to rest so they dont wander confused around.

All in all i only see a very small percentage of sites which can use liquid design with a real benefit that dosnt cause new problems to arise in the effort to try and solve a problem which really isnt there.

David 05 May 05

A vote for “fluid layout is ok, but don’t make the content wider than 10-15 words”. If you can do that, then I’m fine with your fluid layout, otherwise your content is a pain to read.

Mike 05 May 05

I chalk up these “this versus that” discussions as simple trends. Liquid was in when I started designing sites in 97, then fixed width seemed the way to go (forced to the left of the screen, then centered), then right hand nav, then CSS, etc. The newest trends I see are double column sidebars, fixed widths spreading their wings toward 800 px and more, and blogs having a certain… sameness to them.

That’s all fine in the end. Just believe in whatever you’re doing. Take each project on its own merits and make decisions based on that. I don’t think you have to feel pressure to go with the trend simply because everyone is doing it. I know peer pressure can be a tough thing to combat- I’m certainly guilty of it. My site is fixed, centered, built with CSS, and features right hand nav. However, my site is a playground for me to experiment and so I take the developing ideas and new concepts and put them into play just to see what happens. No harm done, eh? I can only come out ahead in the end.

For client projects, though, I take a much more rigorous approach. Goals, audience, and so on create the box within which I work. Those parameters then inform the decisions I make as a designer. Nothing is sacred unless it makes sense to make it sacred- and that’s only on a case-by-case basis.

Ah, but I do love the discussions, don’t get me wrong. “Crazy ideas” and alternate viewpoints can only make us better designers and thinkers in the end.

Dave Williams 05 May 05

I used to have philosophical objections to non-liquid pages, but HTML (etc.) has changed so much since the mid-’90s that my objections are either outdated or totally moot.

One thing I do hate, though, is fixed-width pages that are wider than my window. There’s no good excuse for a page where I have to widen my window or scroll horizontally to read a single line of text. Not everyone has all their windows set to maximum size. I never have, and never will.

If anything, one bad thing about liquid layout is that it tends to make lines too wide, without decent margins for readability. Fixed-width pages are more readable when they keep the text fairly narrow. Having one that’s wide is just pointless.

Ashley 05 May 05

Wow, fascism is in these days, apparently. You want to control to the nth degree how a user views your site. What if a user wants a wider page? The little dictators are going to tell him/her they cannot have it, that it will look too ugly, that s/he is only supposed to have 10-15 words per line. What if a user wants a wider screen and a bigger font, perhaps because his/her eyes aren’t as good as yours? The little dictators are going to tell him/her tough, you’re not part of our demographic!

You talk about keeping control for yourselves. What about the idea of participation and allowing the users to determine their own viewing experience? The web is not a print medium, so stop treating it as such!

Yes, liquid layouts require more thought and more skill. But if you consider yourself a professional in the medium, you’ll learn the skills and invest the thought.

You say “it’s too ugly” or “it’s too hard.” Well I say stop whining and start respecting your users!

Keith Donaldson 05 May 05

I think multicolumn layouts are a nice compromise. The Firefox implementation looks really promising:

http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html

Santiago Bustelo 05 May 05

I also used to think that fixing a design was “fascism”. That the user had to be always in control.

Over time, I learnt that most users not only don’t care, but thay also don’t know what to do having control on certain aspects as layout width.

If a designer sees an exaggerately wide browser window, that in a certain layout gives paragraphs of two dozens of words per line, he/she knows enough to resize the window = control the layout.

Many users don’t. So they end reading kilometric lines of text.

It also works the other way round. I have seen a secretary working with a mail client with all the button bars, panels & etc opened in a small screen, giving her just a few lines of the message to read. She was accostumed to scroll in that tiny space -like peeping through the keyhole to read the newspaper-, without ever noticing she could close some of the panels, and use just her eyes instead of the mouse to get the full content.

We have to design not only the site aesthetics, but also the user experience. That doesn’t mean fixed layout is the only answer, as we now can make sites that accomodate wisely to the environment. For example, we can have two or more fixed & fine-tuned layouts, for 800x600, 1024x768 and above, and a javascript that switchs between them accordingly to browser width. And we also can support layouts for people with low vision (bigger fonts, more contrast, etc), or visually impaired (offering a different navigation scheme, more suited for aural user-agents).

A single layout can’t fit all. And the fact a full liquid layout can accomodate to a variety of window widths, doesn’t mean it may be a good layout even on one of them.

IMHO, “traditional” liquid layout, that spans 100% of whatever browser width you have, had sense when resolutions where 640x480 and 800x600. Today, there are few layouts that may benefit from a full liquid layout. And given the effort that takes to do “multi-fixed” layouts, only few websites, with a lot of content to show and time/budget/caring, can afford it.

Nick Fitzsimons 06 May 05

I find it amusing that the URL in Keith Donaldson’s post overflows the boundaries of this fixed-width column (on my browser, with the text size I’ve set). Makes the case for flexibility, IMHO.

Darrel 06 May 05

the biggest problem I have with the fixed-width ‘zealots’ is their argument that long line lengths are the worst possible thing to inflict on the population.

Ie, they use a baby with the bath water argument. Long line lengths!? Well, we can’t have THAT! So I’ll ignore all the benefits and just blindly not consider that option.

The reality is that there is *no* ideal line length on the web. It all depends on personal preferences, the size of the type, the size of the browser, the particular task the end-user is performing, etc.

And, perhaps the bigger point, no one is reading novels online. If you have so much text that you’re finding a wider line length is preventing people from getting to your content, consider hiring an editor or copywriter.

Many of our recent clients have told us that a majority � a bare majority, but still a majority � of their site visitors have monitors set to 1024 or higher.

Have you considered explaining to your clients that screen resolution has no correlation to browser viewport size?

I think ashley nailed it. If you are so fixated on DESIGNER control of the layout, then you are simply not a web designer. Web design is suggestion…not dictation. ;o)

And, finally, I have nothing against fixed width designs (provided they’re not over 700 pixels wide or so) if there is a valid argument. ‘It was just quicker’ is a valid argument. Tossing out a long explanation about line lengths is not. That’s just an excuse. ;o)

elv 06 May 05

If the choice is to be made between “fixed” and “liquid layout than stretches the same page to 100% whatever the screen size”, I’d choose fixed.
“Web is not print” doesn’t necessarily mean it should be the exact opposite.

The drawbacks of what people usually call a liquid layout are :
- difficult to achieve. Quite true, and fixed size bitmaps can be a problem too if you try to keep a visually nice layout;
- text columns can be way too wide to be legible. True, and the broken min/max width in IE makes this even more difficult to deal with.

But the world is not black or white, fortunately. A good way to go may be “semi fixed” (or “semi fluid if you prefer :)
An simple approach could be to have only the main text column liquid.
As said above, a line should be 12-15 words long (a bit more or less in languages other than english). Just size your text column in ems so people can resize the text and keep a good words per line ratio.
30-35 ems wide seems good to me.

Users are nor designers, they shouldn’t have to ask themselves if their window is too large or not. Just give them the (semi fixed) that is adequate for the content.

Nick Gould 06 May 05

“Have you considered explaining to your clients that screen resolution has no correlation to browser viewport size?”

I would, except there is absolutely a correlation between monitor resolution and the number of horizontal pixels that a user is capable of seeing without scrolling. No, a 1024 x 768 monitor resolution does not guarantee a 1024 pixel wide browser window, but it’s a pretty good indication of what the user would see if they stretched or maximized the window (which they are likely to do if the page is cut off and / or a scrollbar appears).

The point is that any design makes generalizations about user behavior. A liquid layout is the only approach that would satisfy your standard of “fits well in any size window.” And liquid layouts are simply not an option for many sites. Not because they are difficult, but because they don’t satisfy the business objectives of the design in the first place (e.g. multiple large images, required positions for ad units, etc.). Doesn’t the assertion that a fixed width layout prioritizes the Designer over the User leave the client out of the equation? We are certainly designing for the user, not for ourselves, but we try to make sure that the client gets what they need as well.

dmr 06 May 05

Core to design is control. We trust designers to employ thoughtful control over elements in order to give literal shape and context to an idea. Allowing software, or even a “user”, to reform this shape is an awful idea. If the designer is truly serving as a filter between the content and the reader (user) then how can we dare reshape this information without being an expert ourselves?

Design has always been fixed. Unless we’re dealing with scaling an entire layout (graphics, type, photos, etc) then fixed layouts should be considered design hackery.

dmr 06 May 05

Ahem. That should read “…then *liquid* layouts should be considered design hackery.” Pardon that.

Michael Ritchie 06 May 05

Designs that are not fixed width (liquid or otherwise) are not hard they just require more knowledge effort. I believe the fixed width craze was a direct result of limited knowledge and intentional reduction of effort in a design. Nothing else.

Darrel 06 May 05

I would, except there is absolutely a correlation between monitor resolution and the number of horizontal pixels that a user is capable of seeing without scrolling.

Uh…no, there isn’t. The correlation is with the browser VIEWPORT size.

One could say that, in practical theory, the monitor resolution is an indicator of the largest possible browser viewport size that a person could have on that monitor. But it totally ignores things like the fact that not everyone browsers the web with a giant monitor with just one giant, fully maximized browser with their bookmarks/history pane hidden.

The problem with assuming a direct correlation is that as the monitor resolution increasing one of two completely different things could happen:

- the person may use one browser, but larger
- the person may use many more browsers/app, but each individually smaller

No, a 1024 x 768 monitor resolution does not guarantee a 1024 pixel wide browser window, but it�s a pretty good indication of what the user would see if they stretched or maximized the window (which they are likely to do if the page is cut off and / or a scrollbar appears).

The point is that any design makes generalizations about user behavior.

Absolutely. But web design has a LOT of generalizations. And there’s no real reason to exclude folks just to make an easier profile of an assumed user. (Not saying you are doing that, but that’s the danger of using stats such as that to make a user profile decision).

We are certainly designing for the user, not for ourselves, but we try to make sure that the client gets what they need as well.

True, true. IDEALLY, giving the user what they want is the best for the client. Clients don’t always see it that way, of course. ;o)

Core to design is control.

To an extent.

Allowing software, or even a �user�, to reform this shape is an awful idea.

I’d say that’s a core concept to good design. Call it ergonomics, customization, skinning, decorating, personalization, whatever…but it’s a key element to a lot of good design.

8500 06 May 05

I have yet to discover a well designed web site when I use a maximized browser window on my 23” monitor.

Anyone have any good examples of flexible sites that are stellar when viewed with big screens and high res?

dmr 06 May 05

Darrel, design isn’t “customization, skinning, decorating, personalization, etc”, it’s translation.

Let’s assume designers read the text they set. Let’s also assume they serve as a filter to the uninitiated of the subject and text they’re shaping. Under these assumptions there’s an absolute and critical concept at work: control. The designer is regulating the flow of information, controling the shape, density, pace, context, tangents, etc. This control is absolutely core to all design. We, the reader, rely on designers to translate; this translation relys on control in order to be effective, articulate, thoughtful and seasoned to perfection—ready to eat.

I don’t believe there’s room for personalization in information design. Why is there such a lack of trust… or such a demand for the personal tampering of products? Everyone’s dying to m ake things their own, even when they have no business doing so.

Design is about working within givens and offering solutions. When the givens are constantly changing there’s little room for effective solutions. Liquid layouts present too many unknowns; the space parameter can double, or even tripple. This is asking for a one-size design that fits all givens and unknowns—that’s chaos.

Core to design is control.
To an extent.
To what extent?

dmr 06 May 05

“I believe the fixed width craze was a direct result of limited knowledge and intentional reduction of effort in a design. Nothing else.”

Ha! Take a bow print designers. *applause*

elv 09 May 05

“Well, here�s what I did for Ku24� I�ll let others judge if it is stellar or not. It�s certainly flexible.”
Nice work! Seems to me a good way to explore, but it is not flexible the way we discussed here. This is no liquid layout, you switch between several fixed layouts.

Anonymous Coward 09 May 05

Darrel, design isn�t �customization, skinning, decorating, personalization, etc�, it�s translation.

Good design is all sorts of things.

I think you are fixated solely on the term ‘graphic design’.

This is asking for a one-size design that fits all givens and unknowns�that�s chaos.

Eh…that sounds more like an excuse to me. ;o)

One size fits all isn’t quite the same as accessible, flexible, accomodating design. It’s all semantics, I suppose…

Stephen for Ku24 09 May 05

elv wrote> This [Ku24] is no liquid layout, you switch between several fixed layouts.

Actually the site switches between two fixed and three liquid layouts. This becomes more obvious if you adjust the window size in smaller increments to test it. And the two fixed layouts are there only to stop line lengths blowing out. All the work happens in liquid style sheets. Then there’s another style sheet for print media and that is fixed width.

Of course, anyone coming to the site shouldn’t be aware of any of this. The aim is to present the layout that best suits their browser window without any intrusion on the experience. Darrell (from Ku24) calls this “invisible tech”, a term I rather like.

Thanks elv for the positive feedback — Stephen.

YW 10 May 05

I’ve personally led projects to implement fluid designs for a $2M/day ecommerce site and I can attest to the complexity of such a task. Not only do all pages have to be cross-browser compatible - but cross-resolution. It’s not easy and to this day (we migrated to fluid in 2001) the design team grouses that their jobs would be “so much easier” at fixed-width.

But, if you want the customer experience to be consistent across different platforms and resolutions (anyone ever look at JC Penney.com at high-res?) you don’t have much of a choice. The other factor is that as lower-res systems are discarded (remember 640x480?), you have to start all over and re-architect - as opposed to just building fluid in the first place.

Last but not least, IMHO fixed-width is often a lowest-common-denominator proposition. If 40% of my customers are @ 800x600, the choice is to either give them a horiz. scroll (build for fixed @ 1024) or to give the 1024 visitors borders on either side (build for fixed @ 800). At what point do you abandon the lower-res users and force a scroll on them? 20%? 10%?

Fluid takes more time and energy to implement but the payoff is that you needn’t comprimise and risk giving only some customers a desirable experience.

YW

dmr 10 May 05

Scaling text column widths is what current liquid layouts is all about�and I still don’t see the point. What is the problem with fixed layouts that liquid layouts solve; white space?

A few more thoughts:
- scaling raster elements isn’t possible without trite results
- extreme ratio differences (640x480 vs 30” cinema display) would require drastic layout changes and consideration for adding new content or reformatting a vertical layout into a horizontal one
- multi-column CSS text could change my mind on liquid layouts (break text into 2, 3 or 4 columns depending on screen width might be attractive and usable
- liquid layouts seem to be more about technical design, not visual design; it’s usually unmotivated and “for the sake of doing it”

Fazal Majid 11 May 05

Anyone have any good examples of flexible sites that are stellar when viewed with big screens and high res?

Google Maps… Try maximizing your browser on a 23” Cinema HD and look at the satellite picture of the Golden Gate bridge: