Liquid Vs Fixed Design


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. 









Let's Discuss What's Next

Website Design & Digital Branding
Call us at 1 855.246.2372  or email us at
North Carolina Headquarters

110 Corcoran Street -

Fourth Floor 

Durham, NC 27701


8801 Fast Track Park 

Raleigh, NC 27617

Join Our Social
Linked In
What We Do
  • Branding/Positioning

  • Content Marketing

  • Email Marketing

  • Inbound Marketing

  • Local Listing

  • Marketing Automation

  • Marketing Consulting/Strategy

  • Pay-Per-Click

  • Reputation Management

  • Search Engine Optimization

  • Social Media Marketing

  • User Experience/User Interface

  • Web Design

  • Web Development

GoCGM is a full-service branding and digital agency that partners with modern companies to launch, grow and reinvent brands. For just under a decade, we’ve moved brands from ordinary to extraordinary so they can stand out from the pack with fearless ideas, great storytelling, and epic design. From startups to medium sized business in consumer goods, tech and music, our clients are disruptors—the ones who don’t play by the rules but change them.

We use cookies to personalize and enhance your experience on our site. Visit our Privacy Policy™