As a designer, I have 3 web page layout options: fixed, fluid or Elastic. I’ve learned that any one of these will make a successful website layout, as long as I keep usability in mind.

Why is this so important? Now a days there are so many variables to design for: Screen size/resolution, browser choice, if the browser is maximized or not, and the operating system and hardware. Below are pros and cons to think about when considering layouts for web page design.

Fixed Website Layouts

A fixed website layout has a fixed width wrapper and the components inside it have either percentage widths or fixed widths. This  container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.

Example of a Fixed Layout

Fixed layouts are preferred over fluid ones because they’re easier to make and assurance that what the designer sees, the user sees. When working with a fixed width design, be sure to at least center the wrapper div to maintain a sense of balance (margin: 0 auto; usually does the trick). Otherwise, for users with large screen resolutions, the entire layout will be tucked away in the corner.

Pros

• Fixed-width layouts are much easier to use and customize.
• Widths are the same for every browser, so there is less hassle with images, forms, video and other content that are fixed-width.
• There is no need for min-width or max-width, which isn’t supported by every browser anyway.
• Even if a website is designed to be compatible with the smallest screen resolution, 800×600, the content will still be wide enough at a larger resolution to be easily legible.

Cons

• A fixed-width layout may create excessive white space for users with larger screen resolutions.
• Smaller screen resolutions may require a horizontal scroll bar, depending the fixed layout’s width.
• Seamless textures, patterns and image continuation are needed to accommodate those with larger resolutions.
• Fixed-width layouts generally have a lower overall score when it comes to usability.

Fluid Website Layouts

A fluid layout, also referred to as a liquid layout, has a majority of the components based on percentage widths, and thus adjust to the user’s screen resolution.

Example of a Fluid Layout

Pros

• Because it adjusts to the user’s set-up — a fluid design can be more user-friendly.
• Extra white space is similar between all browsers and screen resolutions and can be more visually appealing.
• A fluid layout can eliminate horizontal scroll bars in smaller screen resolutions.

Cons

• The designer has less control over what the user sees.
• Images, video and other types of content with set widths may need to be set at multiple widths to accommodate different screen resolutions.
• With incredibly large screen resolutions, a lack of content may create excess white space.

Elastic Design

There is a third option when working with Web page layouts. An elastic design mixes the two other main layout types. It works by sizing all elements with em‘s. The goal is to have everything grow larger or smaller in proportion with the user’s preference. The quote below explains exactly what an em is and why it can be beneficial.

“A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size. Because font sizes vary, the em is a relative unit that responds to users’ text-size preferences.”
– Patrick Griffiths, A List Apart

Pros

• If implemented correctly, this layout style can be very user-friendly.
• Elastic layouts are perfect for designers who love both fluid and fixed designs, because the pros of each are found in elastic layouts.

Cons

• Even given the first pro above, this type of layout can create a huge problem with usability. It takes a lot of savvy and testing to get the layout right for all users.
• This type of layout is much more difficult to create than the other two.
• Depending on the specifics of the layout, some elastic designs may require supplementary style sheets and cheats for IE6.

Resource: Smashing Magazine: Fixed vs. Fluid vs. Elastic Layout: What’s The Right One for You?