December 12, 2003 | View Comments (22) | Category: Design
Summary: Liquid designs are beginning to fade it seems, is there death soon to follow?
I first talked about liquid designs in Liquid vs. Fixed. Then I saw two articles this week discussing fixed layouts at NotesTips.com and elementary. The final coincidence occurred when StopDesign and SimpleBits went fixed in the same week. With all of this occuring in the span of one week it has left me wondering what really are the benefits of liquid design?
If you seriously ask yourself that question and begin to take into account usability, legibility, aesthetics, and minimalist design you begin to see that maybe fixed is the way to go.
The ability to scan is key to any site. That is one of the major reasons for this site's new design. With a liquid layout, the ability to scan a page becomes increasingly difficult at higher resolutions. I tried to scan the Amazon homepage and failed miserably. By the time I got to the right side of the page I had forgotten what was on the left side of the page. Not scannable. But there is a lot of information on that site so it would be advantageous one would think to have a liquid layout so users of larger resolutions could better soak in all the information. Place a sponge under a waterfall and see how well it holds up.
Let's face it, there are only a handful of liquid sites that offer good legibility. People complain about the size of ine-lengths because it hurts their eyes to have to move across the whole screen. I would argue that it is easier to retain what you read when the lines are shorter. I write lengthy posts sometimes and when the reader is done I would like her to retain most of what I have said. With long line-lengths many times you will find yourself having to go back and scan if you wish to make a comment on the article.
The Vault makes all my arguments for me on this one. There is an exponentially higher number of fixed width designs in comparison to liquid designs. It is a challenge to make a liquid design look good. You have to be an expert in the use of whitespace just to make that "empty space" not look so blank.
No matter whether the design of a site is considered minimalist or not, no site should have elements on there that do not enhance the site. With liquid layouts you will find many times that designers glue trinkets on to the site so that it doesn't look as plain. These are filler elements that do absolutely nothing for the design. They are a waste and they were put there because of the liquid design.
I am all for letting the user decide what to do with a site. However, I am not going to take the chance that the first impression the user gets is that there is no way they are going to able to read the site. Fixed layouts gimme the power of a first impression that I can control. Fixed width in em's allows the user to control the site just fine. After the first impression the user can change whatever they want, but the user doesn't control the first impression they get. I do.
Am I trying to push fixed layouts on people? No. I am all for liquid designs because they can be very beneficial. However, I do not think long line-lengths are beneficial at all. It really does take a keen sense of design to no how to work with a liquid design. Sort of like working with a blob of clay. For now though, this site will remain fixed because that is what works best here.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/74
I'm a little sad to see Stopdesign go fixed. It was the one example of a fluid layout that REALLY worked. Now there is a huge black expanse, and what feels like a claustrophobic tetxt column on the left.
If IE ever supports min-width, max-width, then I think we'll be seeing more liquid layouts. Like THAT's going to happen!...
Jon Hicks (http://www.hicksdesign.co.uk/)
I agree with all the usability arguments in favor of fixed line-length designs, but a layout that doesn't survive having it's fonts blown up huge or a dinky little monitor is falling short of full accessibility. This is one of those rare standoffs between accessibility and usability. In the end it's going to come down a compromise and striving to best serve both the content and the audience.
I'm currently working on a site for the BioSurgery division of a major international corporation who might not know it yet, but they are getting a highly accessible site ("skip to text" link and everything). Right now I'm doing some experiments with using a combination of em's and %'s for margins and padding. I'll share the results when it hits a public server.
Nils Devine (http://www.nilsdevine.com/)
What about flexible width based on em's such as what is suggested in this article:
http://www.maxdesign.com.au/presentation/em/
This article is one of the few places I've seen discussing ideal column widths for reading.
Justin (http://www.bluealpha.com)
"With liquid layouts you will find many times that designers glue trinkets on to the site so that it doesn't look as plain."
Huh? I didn't get thins one, as my experiences are that with liquid designs, a more minimalist design is often pushed as the graphical eye-candy is harder to do technically. Which is good.
Alexander (http://shelter.nu/)
Patrick Grifiths of http://www.htmldog.com demonstrates a happy medium with his cssZenGarden design "Elastic Garden" (http://www.csszengarden.com/?cssfile=/063/063.css&page=0). This design lets you scale the entire design up or down based on the font size.
Perhaps this type of hybrid is what we should be looking toward. The only problem is with Patricks example is that he doesn't supply a method for increasing the font-size for IE users with in the design but that can be added.
More detail at Patricks DogBlog: http://www.htmldog.com/ptg
Joshua
Correction: I tried it in IE 6, IE 5.5, IE 5.01 and I was able to scale the design up and down using ctrl + (scroll up/down). And it looks exactly the same in IE 5.01+ and Mozilla!
I'm really impressed with Patricks design!
Joshua
It sounds like several of your reasons are based on the premise that users with large screen sizes browse the web in a maximized window. Is this true in general?
Micah (http://msittig.blogspot.com/)
Well I know I browse full-screen on a 1600x1200 resolution. I can see the point of saying that not all users maximize their windows when they are browsing and so having a fixed layout may mess up their experience. But I would argue that since they don't mind resizing their browser window they will accomodate for the fixed width.
Scrivs (http://www.9rules.com/whitespace/)
I know I always browse maximized in one monitor on the PC... laptop is osx though, and steve jobs doesn't like things to be maximized, so you're pretty much fucked on that. I tend to have the window about 3/4 of the 1024x768 screen and that's usually sufficient.
JC (http://www.thelionsweb.com/weblog)
Can we define what everyone is thinking of in terms of "liquid"? When I was following a similar piece on http://www.7nights.com/asterisk/archives/fixed_width_vs_liquid_layout_your_take.php#618 I found that most peoples take on what a liquid design was, was actually a hybrid of fixed and liquid where a sidebar or some secondary content was actually of a fixed width. Surely a liquid site design is one where all the divs resize as the window changes in size?
pete (http://www.monkiboi.net)
Oops! sorry about the overlong url. The preview page is still in the old template which spans the browser.
pete
Liquid Layouts and long line lengths, eh? if the line is too long make the browser smaller! Not everyone has 1600x1400 pixels some of us have 200 odd on a PDA, take a look at our site, it ain't perfect but it has enable us to deliver a web site that works in a PDA ; 640x480, 800x600; optimised for 1024x768 and viewable in any resolution above that subject to a level of intelligence of the user to adjust the width of the browser.... oh and I think my decorative objects look good glued on or not.
Robert Campbell (http://www.ecommnet.co.uk)
Robert: The thing with PDAs is that they shouldn't use the same stylesheet as a monitor does. And the user shouldn't have to change the browser window just to accomdate your site. Looking at your website don't you think it would be beneficial to go to a fixed layout so that users can get a clearer message? Do you think it is possible to clearly define a message with a liquid layout?
Scrivs (http://www.9rules.com/whitespace/)
What about those of us using tabs? We'd have to resize our browser window every time we switched tabs.
Hemebond
robert: sorry to say your site looks pants on my palm... didn't have time to have a look on the PIE or opera browsers...
scrivs: I personally like fluid layouts which make use of min-max widths, I guess these aren't truly fluid but they aer able to stretch somewhat without sacrificing readability. (as for getting around IEs lack of min-max support, well you can use unobtrusive js, to make a width tag work like a max-width, or any number of other solutions which could degrade to either fixed or fluid on the absence of js)
As for handhelds using the correct stylesheet... if only! So many handheld browsers ignore these declarations, it gives me many headaches!
scottbp (http://www.positionrelative.com)
Well, I think that achieving good design is finding the best possible answers to business problems, framed by a great deal of constraints like users needs, economical factors, and design-specific constraints, to be brief.
The choice between fixed and liquid design should be decided on a per project basis, since those business problems and constraints vary from a project to another.
Having said this, we can't make the "line-width" issue the main design problem to address. We should also take into consideration the relationships among the page elements, their hierarchy, and so on. Sometimes, having a fixed-width text block just gives us the right answer, if considered in relation with the whole.
Although "best practices" and "usability & accessibility guidelines" are good, they can't serve all purposes.
There's really no point in looking for the Truth in this case.
Finally, if the choice between one of the two solutions is really that painfull, why not just hand the decision to the user? For example, by offering two style sheets, one fixed and the other liquid, operated by a styleswitcher?
Renato Feijo (http://www.webaliza.com)
I'd like to point out what I see as being a few fallacies with the arguments made above:
Legibility:
"With a liquid layout, the ability to scan a page becomes increasingly difficult at higher resolutions."
This is not true. In fact, it is only true in the case of *badly designed* liquid sites. It seems unjust to tar all liquid sites with the same brush just because many get it wrong.
As you point out yourself:
"It really does take a keen sense of design to no[sic] how to work with a liquid design."
As for fixed layouts being more legible: that's hardly true if you visit a fixed width site with a browser that is narrower than the fixed width. There's nothing very legible about horizontal scrolling.
Which brings up another point: whenever this discussion comes up, the emphasis always seems to be on large resolutions. For me, the greatest issue with fixed-width designs is not how they look at wide resolutions, but how they look at narrow resolutions.
Aesthetics:
"There is an exponentially higher number of fixed width designs in comparison to liquid designs."
That doesn't automatically mean that fixed width is more aesthetically pleasing. This seems like the same kind of herd mentality to led to the web being filled with Flash intros just because "everyone else is doing it: so should we".
One look at the popular music charts should be evidence enough that force of numbers does not equate with quality. ;-)
As for this statement:
"You have to be an expert in the use of whitespace just to make that "empty space" not look so blank."
Surely that applies *more* to fixed-width designs than liquid designs? With fixed-width designs, you are resigning yourself to having large, uncontrollable portions of whitespace on one or both sides of your fixed content.
Minimalist Design:
"With liquid layouts you will find many times that designers glue trinkets on to the site so that it doesn't look as plain."
I'm sorry but I have absolutely no idea what this is referring to. :-(
Are you sure that the glueing-on of trinkets is related the liquid nature of the site?
Let the user decide:
"I am not going to take the chance that the first impression the user gets is that there is no way they are going to able to read the site."
Again, this is based on the false assumption that liquid layouts are automatically going to have unreasonably long line lengths. As I said before, this may be the case with many, not very well thought out liquid designs but it is not true for all of them.
This debate comes up again and again and always seems to centre on two assumptions:
1) That when we talk about fixed vs. liquid design, we're only interested in how they look at wide, not narrow, resolutions.
2) That X amount of words or characters is an "ideal" length for reading.
Line length is *one* criteria for legibility but it is far from the only, or even the most important one. It becomes more and important in the case of very long or very short line lengths but to fix one set width as being ideal smacks of being a Nielsenesque commandment rather than a well reasoned argument in favor of fixed or liquid widths.
In my experience, many designers reject liquid designs not because of well-reasoned arguments against them but simply because they are harder to do well.
Personally, I find many fixed-width designs to be quite "unwebby" in the way they make the user adapt to the site rather than the other way around.
Just my $0.02
Jeremy Keith (http://adactio.com/)
Legibilty
To quote:
"Certain aspects of usability have been researched for over 120 years. One active area of investigation has been the influence of line length on the speed of reading prose text. Weber (1881) made the first research-based recommendations when he suggested that an ideal line length was 4 inches (100 millimeters). He stated further that the maximum never should exceed 6 inches (150 mm). The same year Javel (1881) reported that line lengths should be no longer than 3.6 inches (90 mm). Two years later, Cohn (1883) confirmed that 3.6 inches (90 mm) was the best length, and that 4 inches (102 mm) was the longest admissible line length."
Don't missread that. We are not talking about fixed vs. liquid. We are talking about text, regaurdless of how the layout of the web page is designed. This 4 inch rule can be applied to both fixed and liquid web designs with equal ease.
Usability
As far as how easy it is to scan and such, this has more to do with the design of the page than the width of the layout. For example a 2000 word text article would be hard to scan without titles and sub-titles. With any design it is always important to design for where you want the eye to go to. Many studies have been conducted on this, too many to list here. Pick up a design book and you will be likly to find some information on this in there... at least, if it covers the basics of design.
Aesthetics
I really don't think "extra whitespace" has anything to do with the width of the design. It has much more to do with how the actuall layout grid is constructed. Also keep in mind that few sites actually allow for a proper margin for optimal reading. THe other factor is that most sites have poor implementations of liquid and fixed designs where the columns do not properly strech forcing extra white space to appear. White space should be your friend, not your enemy... work with it and use it to your advantage. Again, design 101.
Minimalist Design
"gluing trinkets" is an interesting thing to say about liquid web designs because I find more of this happening in fixed width designs than liquid. Often either from the white space left over on the right side of the page or from over desinging in general now that all of the grid areas are know widths.
Let the user decide. I couldn't agree more. What is the point of redesigning a site if you haven't even surveyed your users yet? How do you know if there is a problem with the existing design without asking the users or at least conducting some user testing? Remember, we (the designers) are not the users, as much as some of us would like to think.
Nick (http://www.digital-web.com)
Liquid layouts are a whole different ball of wax. If you think simply setting up a fixed layout to change with window width is fluid design, IMHO, you are mistaken.
Fluid layouts work really well when you think of a page's content as many little blocks that float around each other... Instead of changing blocks' widths, divided the content into many small blocks that are a fraction of normal content bloack width and float 'em!
More floats make for really interesting variations across various browsers and display sizes!
A couple examples are:
http://MARSorange.com/ (only 2-blocks rights now)
http://lifeknives.digitalhandyman.info/gemhandled (lot's of little blocks; still in development)
Fluid designs have the power to morph in beautiful ways. Embrace the differences between different viewports!
Mars (http://MARSorange.com/)
Frankly, I think the reason why liquid design ruled for a while, was due largely to the 640x480 resolution jail we were in. We didn't worry about the text block being too wide to read. With the advent of new monitors and the increasing majority of users setting their resolutions much higher, I believe we will see a shift to fixed width. The higher the resolution, the more difficult it is to read blocks of text that are set to liquid. It is a known rule in Print Mdia that you don't want the reader to get "Reader's Whiplash" caused by forcing the reader to read a line longer then 4"-4.5". Desktop Publishing Pros will tell you the preferred width for readable text is narrow as compared to the full width of the page. This rule translates to the web as well. But as you said, it depends on the content. Btw, white space is considered a required design element to make the content stand out and the overall look much cleaner. I like the new design! Very well done and easy to read!
Marie
I agree with everything you said! Amazing!
Fixed vs. Liquid is a sticky issue. I think it just all depends. It depends on how much text you have, how much whitespace you want, and other things.
I personally like the fixed design because of the ability to know how large you can make your images.
Alex (http://pixul.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
Good points!
donny (http://www.visualgui.com)