November 05, 2003 | View Comments (6) | Category: Design
Summary: Liquid vs. Fixed...the battle continues.
Liquid vs. Fixed width layouts is one of those holy war type discussions that designers always seem to get into at one time or another. I will try to explain my reasoning behind why some sites should stick with fixed and others would really benefit from a liquid layout.
Everyone understands the benefits of liquid design include the ability to scale with the resolution of the screen. This can be very beneficial because then there is not so much whitespace or more appropriately, "empty space" filling up the screen. The major downfall involves line-length. With CSS we were supposed to be able to use the max-width property to its full effect, but as usual IE had to go and screw everything up. Yes, it is possible to trick IE into using the rule with the help of Javascript, but the point is we should not have to use Javascript like we should not have to use hacks in CSS.
So if legibility is the main issue with liquid designs why shouldn't we all just stick with fixed layouts? Well it really depends on the content. Yes as usual I am telling you that the content of your site should dictate the design. Liquid designs work really well for sites that have to cram a lot of content onto a page. Although it is preferable to have less, sometimes you can not get around the fact that you are building the next Amazon. In these situtations liquid layouts can work very well.
In the case of 9rules I would generally say that the type of content presented (that which required a two-column layout) would best be suited for a fixed layout. However, I was being stubborn when designing the site and made myself stick with a liquid layout and I believe it works very well. The reason it works so well is because of the use of percentages to control paddings and margins. The percentages help to prevent the main content from flowing out of control. Even on my 1600x1200 resolution, I think the line-length is very acceptable. Of course it also helps that I do not force the reader to go through many lines of text and the font-size used is very generous.
Simon uses the liquid design and it does not hurt my eyes because of the large text size. However, I still believe that content that causes someone to read line after line of text and only has two columns may best be served with a fixed layout.
I will admit that for me it is much easier to design a page knowing it is going to be a fixed width. I am sure many designers choose fixed width layouts solely on the fact that when their layout increases in size the rate of ugliness seems to increase as well.
Whitespace had to have a fixed layout because otherwise my long entries would fill the whole screen. This width allows the reader to more quickly read through my entries. It also helps that there is nothing else that the reader's eyes have to focus on. However, with the fixed width comes all of the "empty space" that I spoke of earlier. I used this empty space to my advantage and it indeed helps to draw focus towards the content. I really can't explain why whitespace works sometimes and other times it doesn't. When it works, it should be called "whitespace", when it doesn't work, call it "empty space".
Besides the content on your site, your audience should always play a large role in deciding whether to go liquid or fixed. Do you want people to view your site on screen sizes smaller than 800x600? Then liquid may be it for you. Do you only care if they have a resolution of 800x600 or 1024x768? Then fixed may not hurt.
I would encourage everyone to try to make their designs liquid because for me it just seems more like the "web ideal". It makes the information the users'. However, as discussed, liquid designs just do not always work. They are very challenging to "beautify". Why do you think most of the sites (all of them at the moment) in the CSSVault are fixed? Because it really is easier to make an eye-pleasing site in a fixed layout, especially when you are dealing with large images.
So the debate will continue on for many years to come. I do not have a preference for one or the other. Fixed can look nice, but on a 1600x1200 res sometimes the "empty space" takes over. Liquid can look nice, but on a 1600x1200 res sometimes my eyes just get lost. It is possible to make both kinds of layouts work on this res as I have shown with 9rules and whitespace. It is up to you to make whatever layout you choose work.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/45
But with IE maxwidth does not work, so wouldn't that mess up your beliefs, unless you just didn't believe in IE? I kind of wish fonts were like vector graphics in that they would scale accordingly to the resolution and still look spectacular. The same with layouts. However, I guess on larger resolutions that would leave us with some billboard type pages.
Scrivs (http://www.9rules.com/whitespace/)
Ah! Won't it be nice if the world was a perfect place?!
I think that for blogs, as long as the main content is fixed, it doesn't really matter about the layout. Blogs work well if they are using 40-80 rule, because reading is very crucial here and thus line lengths have to be generous. Else it is just like watching a tennis match from the sidelines, swing your head left and right. That said, my blog is liquid. Before you call me a hypocrite, sun report will be undergoing a complete overhaul.
But for sites like Amazon, who need to pack in as much info and ads as possible, liquid layouts would be the choice.
That said, is it possible to send different stylesheets depending upon each individual resolution? May not be very effective, but still.
Of course one way to use fixed layouts and not hamper the viewing experience of folks with higher res is to use relative font-sizing. But it does nothing for the fat chunks of space all around.
The day is not far when we really have to consider liquid layouts. As PDAs and Pocket PCs become more commonplace, we need to address the issue. I mean sideways scrolling gotta suck.
Sunny (http://www.thesunreport.org/)
Actually Paul, I didn't even know there WAS a maxwidth attribute already, that was my wish list. Maxwidth and Minwidth.
Obviously since it's my wish list it'd be a widely supported thing, too.
But I didn't just mean in CSS, it should have been a part of the HTML 3.2 or 4 spec... especially things like tables. And maybe a similar thing for fonts... maxsize and minsize... ways to set upper and lower bounds while allowing flexibility inside those bounds.
JC (http://www.thelionsweb.com/weblog)
"is it possible to send different stylesheets depending upon each individual resolution"
Kinda... if they have javascript enabled you can catch their browser size and change styles based on that. I've never done it, but I know it's possible.
Of course, one "easy" way to do it very cleanly is to do the site in Flash... have it fill the full browser window and it'll scale to whatever size they view it at.
JC (http://www.thelionsweb.com/weblog)
I think it would be cool if a paragraph could grow even after it has reached it's maxwidth. Paragraphs should be able to become multi-columned. If the paragraph is wide enough to contain two columns, each at least as wide as the the minwidth of the paragraph, and is greater than the paragraph's maxwidth, it should then have 2 equal width column's. And the width of the space between the columns could be derived from the paragraph's padding or margin. This way you get less white space in a liquid design when it gets wide at higher resolutions. From this I would make the 'multi-columned' CSS property which could be true or false. It would only work if the maxwidth property is also given. And it would goto 2 coulmns as soon as the maxwidth has been passed if the minwidth is not given.
Oh and I also endorse the liquid design. It's not just the programmers choice but the usability choice as well. http://www.useit.com/alertbox/20031110.html
Brian P (http://lwww.lostagain.net)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
It is my very firm belief that there should be a maxwidth and minwidth (and the same for height) attributes for anything that can be sized.
That would fix some of the problems with liquid layouts and make them more useful
JC (http://www.thelionsweb.com/weblog)