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.

On the other hand, liquid layouts expand and contract in order to fill the free space. You get to utilize all the real estate available on the page, hence you get to display more content on bigger screens, while at the same time remain viable smaller monitors. Liquid layouts also are consistent with relative widths, making the site more dynamic to customer-imposed restrictions.

But while both layouts have their own benefits to provide, they have certain drawbacks as well. With fixed layouts, viewers in smaller browsers may experience horizontal scrolling, which is something they don’t really like. They can as well come up with excess whitespace in large monitors. Most of all, fixed layouts do not handle customer changes to font sizes effectively. Large increases in the font size may ruin the site’s overall layout.
Liquid layouts meanwhile allow small precise control over the width of the elements on the page. They can also create unnecessary columns of text that are way too wide to scan, or too small for the words to show up properly. Liquid layouts may as well overlap with fixed width elements in order to achieve the designated percentages, which too, ruin the overall layout of the site.

The layout that you will use in designing a webpage will greatly affect your readers, since this is where all the eye candy of the website begins. More than that however, the template you will use will be your viewer’s basis on how to scan the content, find the things they are looking for, as well as deciding in using or visiting your site again. Thus, your chosen layout can be used in various aspects such as marketing, advertising, and other ways in promoting your site.