Fluid Width v Fixed Width Layouts

Web page layout can be done in two different ways:

• 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 upon 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, determined 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 layout 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 their browser size as they’re viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution. They are often preferred by designers who have a lot of information 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.

The method chosen for your Web site design will have an impact on more than just your design. Depending upon which you choose, you will affect your readers’ ability to scan your text, find what they are looking for or sometimes even use your site. As well, the layout style will affect your efforts at marketing your Web site through branding, real estate availability, and the aesthetics of your site.

Benefits of Fixed Width Layouts

• 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 impacted on large segments of text, no matter how wide the Web browser is.

Benefits of Liquid Layouts

• 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

• Fixed width layouts can cause horizontal scrolling in smaller browser windows. And most people don’t like to scroll horizontally.
• They can also result in large expanses of whitespace 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 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 can have problems 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 will cause overlaps in text and images to achieve the correct percentages.

Many sites that have a lot of information they need to convey in as little space as possible would work well with a liquid layout. This allows them to take advantage of all the real estate that larger monitors provide while not shorting smaller displays.

Sites that require precise control over how the pages look in every situation would do well to use a fixed width layout. This provides more assurance that the branding of your Web site is consistent and clear no matter what size monitor it’s viewed on.

My Layout Preference

Actually, I prefer a mixed approach. I don’t like using liquid layouts for large blocks of text, as that can render the text either unreadable on a small monitor or unscanable on a large one. So I tend to make the main columns of my 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.

The About site (which I didn’t design) uses scripts to determine your browser window size and then changes the display elements accordingly. For example, if you open an About site in a very wide window, you may get an additional column of links on the left side, that customers with smaller monitors might not see. Also, text wrapping around the 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.