Fixed Width Layouts Versus Liquid Layouts

Two approaches each present with varying strengths and weaknesses

Various containers and computer screens seemingly filled with liquid, title: Content is like water

Stéphanie Walter / Wikimedia Commons / CC BY-SA 3.0

Web page layout follows one of two different approaches:

  • Fixed-Width Layouts: These are layouts where the width of the entire page is set with a specific numerical value.
  • Liquid Layouts: These are layouts where the width of the entire page is flexible depending on how wide the viewer's browser is.

There are good reasons for using both layout methods, but without understanding both the relative benefits and deficiencies of each method, you can't make a good decision about which to use for your web page.

Fixed-Width Layouts

Fixed layouts are layouts that start with a specific size as stipulated by the web designer. They remain that width, regardless of the size of the browser window viewing the page. Fixed-width layouts allow a designer more direct control over how the page will look in most situations. They are often preferred by designers with a print background, as they allow the designer to make minute adjustments to the layout and have them remain consistent across browsers and computers.

Liquid Layouts

Liquid layouts are layouts that are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes his browser size as he's viewing the site. Liquid-width layouts allow an efficient use of the space provided by any given browser window or screen resolution. They are often preferred by designers who have a lot of information n to get across in as little space as possible, as they remain consistent in size and relative page weights regardless of who is viewing the page.

What's at Stake?

Your website design affects your site's responsiveness and adaptiveness. Depending on which you choose, your readers' ability to scan your text, find what they are looking for or sometimes even use your site may be helped or hindered. Your site's overall brand identity may also be at risk, especially if your brand standards follow a print-first logic model.

Benefits of Fixed-Width Layouts

A fixed-width layout is helpful in some circumstances.

  • A fixed-width layout allows the designer to build pages that will look identical no matter who is looking at them.
  • Fixed-width elements such as images will not overpower text on smaller monitors because the width of the entire page will include those elements.
  • Scan length will not be affected by large segments of text, no matter how wide the browser is.

Benefits of Liquid Layouts

A liquid layout works best in other circumstances.

  • A liquid-width layout expands and contracts to fill the available space.
  • All available real estate is used, allowing the designer to display more content on larger monitors, but still remain viable on smaller displays.
  • Liquid layouts provide consistency in relative widths, allowing a page to respond more dynamically to customer-imposed restrictions like larger font sizes.

Drawbacks to Fixed-Width Layouts

However, a fixed format is not without its costs.

  • Fixed-width layouts force horizontal scrolling in smaller browser windows. Most people don't like to scroll horizontally.
  • They leave large expanses of white space in larger monitors, resulting in a lot of unused space and more scrolling vertically than might otherwise be necessary.
  • Fixed-width layouts don't handle customer changes to font sizes very well. For small increases in the font size, they can be okay, but for larger increases, the layout can become compromised.

Drawbacks to Liquid Layouts

Liquid layouts, too, are not without their downsides.

  • Liquid layouts allow for very little precise control over the width of the various elements of the page.
  • They can result in columns of text that are either too wide to comfortably scan, or on smaller browsers too small for the words to show up clearly.
  • Liquid layouts error when a fixed width element, such as an image, is placed inside a liquid column. If the column is rendered without enough space for the image, some browsers will increase the column width, disregarding the designer's instructions, while other browsers force overlaps in text and images to achieve the correct percentages.

Layout Preference and Mixed Approaches

Some designers prefer to blend these concepts. They don't like using liquid layouts for large blocks of text, as that structure renders the text either unreadable on a small monitor or unscannable on a large one. So they tend to make the main columns of pages a fixed width, but make headers, footers, and side columns more flexible to take up the remaining real estate and not lose the capacity of larger browsers.

Some sites use scripts to determine your browser-window size and then change the display elements accordingly. For example, if you open such a site in a very wide window, you may get an additional column of links on the left side that visitors with smaller monitors might not see. Also, text wrapping around advertising is dependent upon how wide your browser window is. If it's wide enough, the site will wrap text around it, otherwise, it will display the article text below the ad. While most sites don't need this level of complexity, it demonstrates a way to take advantage of larger screens without impacting the display on smaller screens.