1. Computing

Discuss in my forum

Fixed Width Layouts Versus Liquid Layouts

By

How to Decide Which Design Style is Right for Your Site

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.

Current Status

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.

Stake

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.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Web Design
  5. Principles of Design
  6. Layout
  7. Fixed Width Layouts Versus Liquid Layouts - CSS Web Layouts

©2014 About.com. All rights reserved.