Fixed Or Liquid Design

One of the first choices you’ll invariably make when it comes to designing your website is whether to use a fixed or liquid layout. Both design options have their pros and cons along with their supporters and detractors. Neither is automatically a better option and the nature of the site and the goals of the site should probably be the determining factor in the fixed vs. liquid design decision.

A third design approach which I like to refer to as semi-liquid is another choice and perhaps the one the might ultimately work the best. This hybrid design approach offers many of the advantages of each of the fixed and liquid layout options while minimizing many of the disadvantages.

Fixed Design

Pros: The main advantage of a fixed design is the control it gives the designer. Using fixed widths makes it much easier to place your page elements exactly where you want and be assured they will remain in the same relative position to other page elements regardless of the browser resolution of the viewer. Fixed designs are generally quicker to develop and often make it easier to use background images which by nature will have fixed dimensions.

Cons: The most obvious disadvantage of a fixed design is that they leave a lot of empty space when viewed at higher resolutions. What looks good with a few pixels of space outside can looked very cramped when most of the browser is empty. There is also the issue of what resolution to to choose for the design. Should your choice be 800×600 since that’s the likely minimum resolution your visitors will have or should you choose a 1024×768 resolution since that’s the most common resolution? Do you redesign the site every few years to account for better resolutions? It can also be difficult to fit everything into the smaller screen real estate of a fixed width layout. 3 columns can seem very tight at 800px.

Liquid Designs

Pros: The major benefit of a liquid design is that the layout will adjust to fill a variety of resolutions. You can create a site that will work well at both low and high resolutions without all the empty space outside of the design. A liquid layout with it’s use of ’em’ or percents instead of pixels will be more accessible to viewers with poor eyesight as they can more easily resize the text. It can also be easier to fit all of your content into the design for those viewers with higher resolution monitors.

Cons: A liquid design does have it’s drawbacks though. You do lose a certain amount of control over how everything will look and some of the empty space of a fixed design will work it’s way internally into the liquid design. There is also the issue of line length growing to wide which will make you text difficult to read. Using max-width is an option for browsers outside of Internet Explorer. IE will need it’s own workaround to keep your lines of text from becoming too wide. A liquid layout can often be more difficult and time consuming to develop and test.

Semi-Liquid: A Hybrid Approach

The third design option is the hybrid approach where certain parts of the page are fixed and there’s enough liquidity in other elements to keep the whitespace from looking too empty. Some examples you might see are where the page header might stretch to the edges of the browser while the main contain area remains at a fixed size in the center of the window. Sites will sometimes use a gradient background color to give the feel that the page continues beyond the fixed parts.

A design I’ve seen less frequently though one that has worked well when I’ve come across it is a semi-liquid design where the site will be fluid within a given range of resolutions. The site for example might be designed to work at a minimum 800×600 resolution and expand fluidly until it reaches some upper maximum resolution such as 1600×1200. For larger resolutions the site remains in the center of the browser window and space is created outside the design. This option eliminates some of the cons of fixed designs by keeping the empty space to something workable even at high resolution while eliminating the liquid layout con of the text lines growing too wide. It also allows for enough control over your page elements to feel confident they will display where intended.

Recommendations

So which is the recommended design approach? There really isn’t an absolute recommendation since the choice can depend on a variety of factors that are unique to a given site. If you’re constrained by time or need precise control over your design then a fixed layout is probably the way to go. If accessibility is more important or your visitors use a variety of resolutions, particularly higher resolutions, the liquid approach will most likely the better option. With fixed designs I highly recommend centering the overall page in the browser window to balance the empty space on both sides of the layout. With liquid designs I recommend designing the site to look it’s best at the common 1024×768 resolution while making sure the site still looks good at lower and higher resolutions.

For my own site I’ll be using the semi-liquid or hybrid design more and more where I can. I think it’s a very good compromise and allows enough of the benefits of both fixed and liquid designs while minimizing the cons of each. I suspect too that hybrid designs will become more common and popular with designers given the wide variety of monitor resolutions. In the end though you can create good designs from any of the layout options and your choice may simply come down to the particular project or your own particular style.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.