Pros And Cons Of 6 CSS Layout Patterns: Part 1

Posted: 25 Apr 2011 05:30 AM PDT

There are a number of css layout patterns you can use when developing a website. Your design could be of fixed-width or it could be fluid or elastic. It might even be a hybrid layout or be responsive to different devices.

What are the pros and cons of some of the common css layouts available to us? Are some layouts preferred over others?

Note: While you can’t always tell from the screenshots throughout this post I’ve tried to match the screenshot with the layout described below it. You can click through on any of the images to see the site in question and then resize your browser of font size to see how the layouts react.

6 CSS Layouts

You’re likely familiar with all of the css layouts below, but to make sure we’re on the same page, let’s quickly define each.

Fixed-Width — Overall width is fixed with absolute measurements (px). They’re a solution to the lack of control designing for the web.
Fluid/Liquid — Overall width is set in proportion to the browser window (%). They’re a solution to multiple resolutions.
Elastic — Overall width is set in proportion to some design element, usually font-size (em). They’re a solution to the control issues with fluid designs
Hybrid — Using a combination of fixed and either fluid or elastic design elements. They’re a solution to the cons of all 3 layouts above.
Responsive — Using different stylesheets based on possible ranges of widths of the audience. They’re a solution to the multiple devices and resolutions of our audience.
Fluid/Elastic Grids — A type of elastic layout that makes use of a grid. They’re a solution to maintaining order inside a dynamic container.

Pay attention to the difference between fluid/liquid layouts and elastic layouts. In both widths are measured relatively.

The difference is that fluid layouts are measured relative to something external to the design (browser window), while elastic layouts are measured relative to something internal to the design (font-size).

Fixed-Width Layouts

Fixed-width layouts are static. Based on some data about your audience’s resolution you design for an optimum width.

Typically you center the design to split the external whitespace for large resolution browsers. The overall width might be based on either internal or external things.

Fixed-width layouts are probably the most common layouts you see online today.

Pros:

Greater control over the placement and display of elements
More predictable as the layout doesn’t change when the browser is resized
Simplest, quickest and least expensive to develop due to their static nature
Everything can be pre-designed to pixel perfection
Exact sizes are always maintained

Cons:

Doesn’t take advantage of space in browser window
Doesn’t take advantage of the flexible nature of the web
Can lead to excessive external whitespace at large resolutions
Designed for an average visitor and not ideal for all visitors
Removes some freedom from users
Horizontal scrollbars may appear at lower resolution

Control and cost are the main reasons fixed-width layouts are so popular.

They would also naturally appeal to anyone moving to the web after experience with print design as a fixed-width is a given condition in print.

Fluid or Liquid Layouts

Fluid layouts are usually created by setting the body to be 100% of the width of the available window and then have all other measurements expressed in some % of the body width.

The width of the design is then adjustable by adjusting the width of your browser.

All dimensions in a liquid or fluid layout are relative to the browser window. Proportion is retained with respect to browser size.

Pros:

Resizable for visitors
Takes advantage of edge space in browser window
Gives back some resizing freedom to usrs.
Horizontal scrollbars don’t appear

Cons:

Loss of control over placement and display of some design elements
Less predictable how design will be seen
More difficult to develop well
Less control over internal whitespace within and between elements
Sometimes uses min and max widths, which are not understood by some browsers

Fluid layouts solve some of the problems of fixed layouts creating new problems as they do.

The loss of control can be designed for to a point. For example the measure of a line of text in fluid designs often grow too wide to be comfortably read.

The solution is to give those areas a max-width or to somehow constrain widths in the design, which takes us back toward a fixed width-layout to some degree.

Elastic Layouts

Elastic layouts are similar to fluid layouts with one important difference. The measurements in elastic layouts are relative to some internal part of the design, usually the font-size of the main copy.

The ‘em’ is typically the unit of measurement in elastic designs, though % are mixed in where appropriate.

Pros:

Generally keeps pros of both fluid and fixed designs
Greater control than fluid designs
Dimensions are based on internal design elements

Cons:

More complicated to develop as more math needed
Images and media may not be optimized for their resulting size
May be superfluous with browser full-page zoom
May not take advatnage of complete browser window

Elastic layouts tend to look like fixed-width layouts with the ability to change dimensions based usually on the size of the font. This makes a lot of sense from a design standpoint as it offers control where necessary and flexibility where it makes sense.

Proportions are always maintained to something internal and so the design can better maintain unity. At the same time visitors can make adjustments to help them interact with the design.

Hybrid Layouts

As the name implies hybrid layouts are a mix of fixed, fluid, and elastic design elements.

By selectively deciding which areas of your design should be static and which should be flexible you can reign in some of the problems of all three types of layouts.

Fixed-Width with Fluid Background

These layouts are mainly fixed, but allow their backgrounds to stretch to the edges of the browser window. This gives the design an initial impression of being fluid, while still maintaining control over the design.

Another common approach with this layout is to allow header, footer, or both to be fluid while keeping main content and sidebars fixed.

Pros:

Maintains control and other benefits of fixed-width layouts
Gives the appearance of being fluid, creating interest over the enitre browser window

Cons:

Fluidity is mostly illusion
Keeps many of the cons of fixed-width layouts

Fixed-width, fluid background designs maintain control over most of the design, while allowing some parts of the design to be fluid in order to make the complete design seem more flexible.

Fluid/Elastic

Fluid/elastic layouts make use of min and max widths in order to allow flexibility while still having some final control over the design.

You allow your design to scale up or down, but only within set ranges of values that you define with min and max widths.

Pros:

Allows fluidity to a point
Gives greater control than fully fluid designs
Can keep content areas and font sizes from becoming too large or small
Prevents problems at end points, by removing those endpoints

Cons:

Requires assumptions about audience screen resolutions
Requires min and max properties not available on some older browsers
Requires some kind of browser detection and multiple stylesheets

Overall hybrid layouts seek to keep the benefits of fluid or elastic layouts while minimizing some of their downsides such as a complete loss of control over design elements.

Hybrid designs give up control where it’s less important to maintain in order to have greater control where it’s more important to maintain.

Summary

Fixed-width, fluid/liquid, elastic, and hybrid layouts each offer a solution to different problems designing for the web.

Multiple devices, browsers, and resolutions make control over a design more difficult. Too much control takes away flexibility from your audience.

Of the four fixed-width is probably the most common due to its predicability and ease of development. It’s how I’ve built most sites over the years and perhaps how you have as well. Personally I’ve never cared for fluid layouts as they seem to cause more problems than they solve.

Fixed and fluid will probably give way to elastic and hybrid layouts as the latter two are able to keep most of the pros of the former, while minimizing some of their cons. Though more complicated than their counterparts they each is worth the effort when time and budget allow.

Next time we’ll look at the other 2 layouts, responsive, and fluid/elastic grids. The later is less of an overall layout and more something you would add to fluid or elastic layouts to remove some of the cons of each.

I’ll also add some additional thoughts on when you might decide to use each layout.