We are pleased to announce that Friday 10th October will be Boagworld discount day at the Head Conference site. Signup to attend on that day and you will get 20% off!
Liquid Vs Fixed Design
Published on: 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.
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
Post by Simon on June 23, 2005 11:13 AM
Post by C Montoya on September 25, 2005 11:16 AM
Post by Paul Boag on September 27, 2005 7:01 PM
Post by Jriven on November 2, 2005 4:00 AM
Post by Catalin on November 12, 2005 10:04 PM
Post by jyoseph on December 7, 2005 2:03 AM