I have recently been redesigning my website and found myself having to decide what if my website design should be a flexible (liquid) design or a fixed width design. Lets have a look at the positive and negative points of each design.

Possible Layouts

There is really more than just flow and fixed width designs.

• Flexible (Liquid)
• Fixed Width
• • Relative width
• Hybrid mixture of fixed columns and flexible columns

Fixed Width

A fixed width design has a specific width that does change size when the browser is larger or small. They are often aligned center, to the left, or in some cases to the right.

The fixed width design allows more control on how the web page looks, and the designer can control the average number of words per line, the scannability of page items and make the page look the same in all browsers.

On the downside, a fix width layout does not cater for a wider range of user specified font sizes and can be hard to read on extremely small or large monitors.

Relative Width

With the help of dynamic measurements like EM, a fixed width design can be a bit more flexible. The EM units allow the width of a site to be set in proportion to the current font size. This means that the site can become larger as the user changes the default font size on their browser. 

Flexible Width

A flexible width design ( also referred to as a fluid, liquid or dynamic design ) fulls the entire browser window by using percentages rather than pixel values to specify the width.

A design with a flexible width tends to be a lot more accessible, allowing the user the increase or decrease the font size without significant disruption to the layout. 

The problems with a flexible width design is that there is less control on where things are placed and appearance will be different on each browser and at each font size. Also the lack of control means that you can not control the average number of words per line and the scannability of page items.

Hybrid

To complicate things still further you also get a hybrid approach that 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.

Summary

From my point of view, the best design would be centered in the window and have the width based on the size of the font. This would mean that as the user increases font size, the layout becomes larger, and there is still the same number of words per line. It should also stop expanding when it fulls the window so that the user will never have to scroll sideways. As this is not possible in all browsers yet, this will have to be left for the future.