Jonathan Saipe

Are Liquid Layouts the Way Forward?

16 January 2008, Jonathan Saipe


Whilst the majority of websites adhere to a fixed width layout, some web designers still maintain that liquid layouts tick many of the boxes presented in a creative or technical brief.

What is a liquid layout?
A liquid layout is an approach to web design using the full width of the browser window. The immediate benefit is noticeable among viewers with higher resolution monitors as there is a conspicuous lack of white space around the website. In contrast, fixed width websites can display a great deal of white space when viewing at larger resolutions.

In liquid layouts, the content stretches across the full width of the browser window; the by-product of this is that much more content is visible above the fold.

Who is using liquid layouts?
Given this, liquid layouts are often popular among etailers as they can display more items, promotions or just navigation in the viewable area above the fold, enabling them to engage more efficiently with their customers and either improve conversion rates or average order size.

Examples of websites adopting a liquid layout include: amazon.co.uk, dabs.com and maplin.co.uk.

Web design issues:

1. Design control
Mention liquid layouts to designers and they will generally express a preference for fixed layout since this approach will give them more control over the content height and width and hence general behaviour across difference resolutions. Fixed layouts are therefore still the preferred approach amongst most creative teams.

Bear in mind that liquid layouts will need to be functional at lower and higher resolutions to appeal to all audiences. There are some instances where liquid layouts at larger resolutions do not work as well – see smile.co.uk for example.

You may want to consider adopting an adaptive layout using CSS to adjust the position and behaviour of different screen elements depending on the viewable screen resolution.

2. Increased expenditure
There is no doubt that your HTML/CSS developers will need to spend more time getting liquid layouts right which will incur additional cost.

Furthermore, the design team and client will most likely have strong opinions on which parts of the screen should expand and which should remain fixed which means there may well be revisions across many templates.

Factor all of the above into your initial planning and estimating.

3. Test, test and test
Whilst every web project should undergo extensive testing including platform, browser, accessibility and usability testing, liquid layouts will add a new level of complication to all of these.

It may also reveal problems among content managed websites or ecommerce sites where content is dynamically generated, so again be prepared for additional testing and hence increased costs.

4. E-marketing
A designer following best practices should always wear his/her e-marketing hat, especially among ecommerce sites, where the focus will be on increasing conversion rates, up-take on promotions and basket or order sizes.
Whilst website design encompasses the visual element, persuasion-based design for commercial gain cannot be ignored.