top of page

Liquid Vs Fixed Design

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, centered 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.

2 views0 comments
bottom of page