Benefits of Layout Methods
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 Layout Methods
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.
Resolution
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.
