Liquid Vs Fixed Design | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Thursday, 23rd June, 2005

Liquid Vs Fixed Design

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.

Design:
The estimated time to read this article is 3 minutes


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.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.