Liquid Vs Fixed Design
Posted in Design on: Thursday, June 23, 2005 by Paul Boag
One of my clients recently requested a redesign of their web site so they could move from a fixed width site to a liquid layout. As we discussed the issue, I came to realise that the pros and cons of each were not obvious to all so I thought it was worth laying them out here.
Definitions
Traditionally there have been two basic layouts for the web: fixed or liquid. A fixed design is one that has a specific width and does not scale to fit the browser window. Fixed width sites can be aligned to the left, centred or occasionally aligned to the right.
A liquid design (also referred to as a fluid or dynamic design) fills the entire browser window by using percentages rather than pixel values to define the width.
To complicate things still further you also get a hybrid approach that uses both fixed and liquid elements. Take for example a three-column layout where the left and right columns might have a fixed width while the central column scales to fill the intervening space. This central column would expand and contract as you resize the browser, or when viewed at different screen resolution.
Pros and Cons
Each approach has its own benefits and drawbacks. As with many things in life, the trend for different approaches has changed over the years. Personally, my preference has always been towards fixed width design but it liquid design has many benefits too.
Liquid layout
One of the main advantages I perceive in liquid design is one of accessibility. Liquid design adapts better to whatever screen resolution or device a user happens to be working with (within limits). It makes use of the entire browser window and so maximises the amount of content being shown on screen at any one time. A consequence of this is that you do not have empty space like that found on fixed width sites, especially when viewed at higher resolution.
Liquid layout does have its downsides. Unlike fixed width design, you lose control over line length, flow and placement of page items. Line length in particular can create serious legibility problems at high resolutions when the eye scans back and forth repeatedly. In addition, the loss of control over layout means that it is very hard to lead the user visually to the content you wish them to focus on.
Fixed design
In contrast, a fixed design gives the designer significantly more control, in that he or she has fixed space to work with. Text line lengths are easy to control as are the placement of text and images.
On the downside, fixed design does tend to leave empty space either side of the design especially at higher resolution. This can give the impression the design is floating on the screen or that it appears dwarfed by the browser window.
Hybrid approach
In many cases, a hybrid approach works best. This is where the majority of the design is actually fixed but the design visually tricks the user into thinking that it fills the whole screen by having background elements scale. Take for example the page you are reading now. Although there is a fixed reading area, the blue fade in the background helps to give the illusion that the design scales.
So there you are. Pay your money and take your choice. Both approaches have clear advantages, both have obvious drawbacks. I will leave it to you to decide.
7 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
I have yet to view a liquid design that works (show me one please). This is confounded by the fact that I normally work with my browser maximised on a wide screen 1680 x 1050 display. To me, producing liquid designed websites is like providing well laid out printed books, magazines or a newspapers in their “proper” format but also providing alternative versions printed on a toilet rolls. Not a good idea!
Liquid layouts that work:
http://liquid.rdpdesign.com
It’s not impossible!
Hell, we all know its not impossible. I guess some of us find it too much like hard work sometimes ;)
I believe the only layouts that “work” at the site below are actually hybrids. I have yet to see a purely liquid layout that makes sense.
http://liquid.rdpdesign.com
great fluid design: http://www.vivabit.co.uk/ it also has a max-width defined so lines don’t get to long and hard to read. Unfortunatelly that does not work in IE
:)
Wow, great link up there, I’ve never seen that site. I’m used to fixed width layouts, I think it gives you a lot more control. Paul, an interesting point that you brought up that I haven’t thought about before. The loss of control over the layout and how you can lose the ability to lead the user visually across the page.
That’s a great point and one that I will definitely consider. I guess you would be able to combat that by testing in all screen sizes as you develop the design.
Really great points, thanks.
At WWF International we work with an interesting implementation of a liquid layout in our design (done by Clearleft and implemented by Getunik) that has proven quite effective, specially in readability.
We noticed, for example, that time spent on page has practically doubled since this design was launched about a year ago.