The Controversy Continues: Fixed Width or Fluid Design

Designus Fixedwithidus: A web design that has a standard and measurable width, where the content is laid out in a fixed state, and does not change orientation when resizing the browser window.

Designus Fluidious: Sometimes called a 100% width design, full width design, variable width design, etc, this web design does not have a standard measurable width. Rather, the width varies depending on width of the containing window, and the content in the design shifts in accordance with this to fill the entire space.

Fluid Design Pros

• It fills up the space in the browser, never hear a client say, "Why is there all this empty space on the sides?", again! This alone is almost worth it.
• If designed well, it can work good with most monitor sizes.

Fluid Design Cons

• It's difficult to design this kind of design well, because, in reality, when you start placing ads or images around content, there is a minimal width that the browser can go before it scrunches the text to only a few words per line. There is nothing more annoying that a huge ad block or image that pushes the text to only a few words per line next to it.
• Since it fills up the browser, you can't control line length and text can become harder to read.
• You'll have a harder time designing the placement of other items on the page because you'll need to account for the fluid design. For instance, if you have two images embedded in the content, both floated left or right, you'll need to test how it looks at high resolution and low resolution to make sure the images don't mess up the design.
• All in all, fluid designs are more difficult unless you are doing a largely textual site.

Fixed Width Pros

• You have a definite format which can really help when laying out ads and other elements on the page.
• This is a subjective one, but I think that a fixed width helps to frame the visitors mind in the structure of your site. In other words since it is always the same, they will have an easier time navigating, and understanding the layout of the site.
• You can develop a fixed width design faster (at least I can). This also includes development after the initial design, like content design.

Fixed Width Cons

• It will only look good at your target resolution and above. Anything smaller will have the dreaded horizontal scrollbar. Some designers have created designs where the main content is 780px wide, and there is a 210px bar on the right of that. This makes the content fill the space at 800x600 and 'hides' the extra content for people who are privileged enough to have a larger monitor. I don't know what I think about this approach. On one hand its cool, but on the other hand, if that information can just be ignored, then why is it there?
• You'll get the annoying, "Why is there so much empty space on the sides, other websites aren't like that". You can either go into a lengthy speech about browser widths and target audience, or indulge them in the secrets of fluid design.
• If you have a large table of data, then putting that in a fixed width can be a problem, but with new techniques like LightWindow javascript, this doesn't have to be an issue anymore.

So what is my take on this? Well, I've been advocating the pros of fluid design for awhile, but after working with 3 fluid designs on a regular basis, I can tell you that they are kind of a pain in the ass. Especially if you have an eye for design, I think the fluid width is going to mess with your brain because you just can't lay out content and have it stay that way. Also, regarding ad placement, lets say your content is 500px wide at 800x600; perfect for a 468x60 banner at the top or bottom of it. Well if you choose a fluid design, that ad is going to look really awkward if the content is 720px wide at 1024x768. You might want to stick a larger ad on top of that content, but you'd be messing up the design at smaller resolutions.

My current recommendation is to stick with static designs. The worst con for this is that you are leaving people out who have lower resolutions, but don't kid yourself, your fluid design might not be very usable at small resolutions either. If you have a fluid design, look at your stats to see what people are actually viewing your site at. No one, and I mean zero people view this site at anything less than 1024x768 (I was shocked when I saw that, because I'm used to at least 20% at 800x600). So why create a fluid design when I think the text becomes hard to read at resolutions above 1280px wide, and the text gets crunched at 800px wide? It's just not making much sense to me anymore.