Design Idea

Before we get into a debate about Fixed Vs Liquid, lets get to know some definitions.

Definitions:

Fixed width layout: A fixed design is one that has a specific width and does not scale to fit the browser window. Fixed width sites can be aligned to the left, centered or occasionally aligned to the right.

Liquid Layout: A liquid design (also referred to as a fluid or dynamic design) fills the entire browser window by using percentages rather than pixel values to define the width.

Hybrid Layout: A Hybrid approach uses both fixed and liquid elements. Take for example a three-column layout where the left and right columns might have a fixed width while the central column scales to fill the intervening space. This central column would expand and contract as you resize the browser, or when viewed at different screen resolution.

Pros and Cons:

As many things in life, each approach has gradually evolved on its own and traditionally each of the above approaches has their own advantages and disadvantages.

Advantages – Fixed Width:

1. A fixed design gives the designer significantly more control, in that he or she has fixed space to work with.
2. Text line lengths are easy to control as are the placement of text and images.
3.  Allow images to be placed exactly in relation to other elements and type sizes
4. Allows for predictable default printing behavior

Disadvantages – Fixed Width:

1. May create a type size that is not optimal
2. Takes control over page size and text size away from the user.
3.  Doesn’t take advantage of screen resolutions and may produce large unused portions of window space that could potentially increase the amount of scrolling users have to do (this is especially true at higher resolutions) and gives an impression that the design is floating on the screen or that it appears dwarfed by the browser window.

Advantages – Liquid Layout:

1. Allows for maximum use of space or screen real-estate. Also allows the most control over sizing by the user, because a user can resize the website to their preferences.
2. Allows text size to be changeable by user preferences, making it easy for people with vision problems to increase or decrease the text size on the page while the layout adjusts around the increased size automatically.
3. When designed correctly, it sets your website look slightly apart from competitors, considering most websites use a fixed layout.

Disadvantages – Liquid Layout:

1. If the screen-size becomes too large or too small it can produce unreadable text, or hard to read/scan line lengths
2. Can cause problems with default page printing. (A separate print style sheet can be used allowing for perfect printing from any page despite a liquid layout, but if a separate style sheet for printing is not provided this con is valid)
3. As the website size changes, the image size to text proportion may create a less desirable look.

Recommendations and Analysis

Most websites should probably be designed with a fixed or “semi” fixed layout. It guarantees readability and controllable presentation of content. With that said, if your website contains a large amount of text based content (more then 3-5 paragraphs per page) or if the website would greatly benefit from a non-standard design scheme use liquid.

If you’re still not sure, choose fixed. A fixed layout is easy to maintain, and assures readability by all users and is easier for a web designer to code perfectly. A poorly done liquid layout will cause more problems then it will fix and annoy potential users.

In many cases, a hybrid approach works best. This is where the majority of the design is actually fixed but the design visually tricks the user into thinking that it fills the whole screen by having background elements scale. Take for example the page you are reading now. Although there is a fixed reading area, the blue fade in the background helps to give the illusion that the design scales.