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. 
Comments (3)
Oct 02, 2007 at 10:40 AM
Celebrating Four Months of Blogging with a new Design | Web Development from the Front Lines:
[...] The Controversy Continues: Fixed Width or Fluid Design [...]
Jun 01, 2010 at 10:42 AM
jeremy clarke:
I've found that the max-width and min-width CSS properties work in most browsers these days, and its okay to let ie6 live without them (most ie6 users have low resolutions anyway, so the 'its too wide i can't read it' problem doesnt' apply to them very often). By limiting your site within reasonable bounds (say 750 min-width and 1100 max-width) you get a much more manageable range of sizes to deal with, and avoid the extreme problems of radically squished content and ridiculously wide paragraphs. I'm still stuck on ads though! The only solution I've found involves having a fluid-compatible design of every ad. The way I do it is to set up the ad to have all its important content (title, logo, whatever) on the left hand side, and fitting in the smallest potential box (defined by the % of min-width that the column can squish to). The rest of the right-part of the ad I fill with background color or pretty pictures or whatever else might work. I then use overflow:hidden to hide extra image. It's not a perfect solution but if you have enough control to manipulate the ad images it has a pleasant effect.
Jul 21, 2010 at 05:52 AM
Venkatesh:
East or West Home is the Best!!! Why i told this proverb is designing and developing a website is not a matter.. It has to be a user friendly and search engine friendly so that the website user will get benifit.. Venkatesh - Gulfwebstudio.com