Fixed vs. Liquid Layouts

When designing a web page, you will stumble upon two different ways on how to do a layout. You can either go for fixed width layouts, in which the width of the whole page is set within a specified numerical value, or liquid layouts, where the width of the page moves depending on how wide the viewer’s browser is.

Both kinds of layouts provide benefits to the web page you are building, but in order to make either or both of them effective, you must first understand the benefits and drawbacks of each approach. Through this information, you can make a sound decision on which method to use.

Fixed Width Layouts

Fixed width layouts, or simply fixed layouts, are the type that begins with a specific size that is designated by the web designer. The layout stays at the specified width, no matter what size the viewer’s browser uses in viewing the page. Fixed layouts give the designer more freedom to work on the page, so that it can adapt with different situations. This kind of layout is preferred mostly by designers who have a background in print media, since it remains consistent across different browsers and open doors to last minute adjustments and improvements.

Liquid Layouts

A liquid layout on the other hand is the type of layout that relies on the percentages of the viewer’s browser size. It is more flexible and adapts to the size of the window, even the viewer changes the browser’s size while viewing the site. Liquid layouts provide an efficient use of the space in any screen resolution, and they remain consistent with the size and page weights regardless of who views the page. This kind of layout is chosen by designers who want to make the most out of the little space given for them to work on.

Pros and Cons of Fixed and Liquid Layouts

With fixed layouts, the most prominent benefit you can get is the freedom to build pages that will look the same regardless of who is looking at them. Another important benefit is that fixed width elements will not dominate the text on smaller browsers, since the width of the whole page will include those elements. Lastly, the scan length will not be affected on large segments of text, regardless of the size of the web browser. Continue reading

Bookmark and Share