Web Design Series: Fixed Width Vs Liquid Layouts

As every experienced web designer should know, there are two types of layout that you can choose from when designing web pages. One is the fixed width layout and the other is the liquid layout. The fixed width layout sets the width of the web page at a specific value, no matter how wide the viewers internet browser window is, whereas liquid layouts adjust their width depending on the width of the visitors browser window. The choice between these two layouts is not always an easy one and we will explore in depth the factors that will influence your final decision.

Fixed width layouts mean that you have a preset width which you will design the rest of your web page around. The main advantage of this approach is that it gives you greater direction and control over the eventual organization of your web page. Fixed width layouts are best used with print backgrounds, because these help maintain a consistent appearance even across different internet browsers and operating systems. In a liquid layout, however, the overall layout of your page is a percentage function of the size of the browser window being used to view it. They are useful for maximizing the use of space provided by any screen resolution or browser window size. Web designers who are tasked with conveying as much information as possible in a limited amount of space will often choose a liquid layout. It is important to both you and your web design company that you understand which layout would suit the needs of your client better.

Which layout you eventually choose will greatly affect the final look and feel of your web site, not to mention the functionality of the site. The ease with which visitors can scan through your site for relevant information and identify the content that they wish to find is largely dependant on your choice of layouts. It is thus absolutely essential that you understand the needs of your client and the kind of website that they want you to build in order to design a web site that reinforces the marketing strategies of your client. Your web design company is also likely to stress the importance of choosing the right layout when you take on any projects.

The Web Design Benefits and the Drawbacks The pros and cons of each layout type are listed below, so you will be able to make a better-informed decision regarding which type of layout you should use for a particular project.

Fixed Width Layout
o Pros
Pages that you design look exactly the same when viewed using any internet browser or operating system.
Images and other non-textual objects will not overwhelm the textual content of the page, regardless of the size of the browser window or viewing monitor.
The scan length of your pages stays constant no matter how wide the viewers browser window is.
o Cons
Viewers using smaller browser windows or monitors to view the site will probably have to scroll horizontally to see the entirety of the page. This tends to annoy online visitors.
A large amount of whitespace is usually generated when viewers use large browser windows to view the site, resulting in wastage of otherwise useful space. Also, more vertical scrolling may be required than should be necessary.
Font size changes can adversely affect the overall layout of the page. Large increases in font size can cause the layout of your page to become distorted, making it messy and unappealing. Liquid Width Layouts
o Pros
Layout adjusts its size to fit any browser window size.
All the available space in the browser window is utilized, enabling larger windows to display more information while not compromising the viewing experience using smaller window sizes.
You can achieve consistent relative widths, ensuring that your web page can accommodate your clients varied design requirements such as font size changes.
o Cons
Liquid layouts do not allow you to fix the width of the page and other elements on the page, making proper organization difficult in some situations.
Columns containing text may become either too wide or too narrow for comfortable viewing of the text.
Fixed width elements on the page may not be correctly displayed. Some browsers may attempt to correct for a lack of space for fixed width elements by increasing the width of the element, thus disrupting the order of the other elements in your layout.

Often, the best approach to use is to use both types of layout within the same web site or even within the same page. The type of layout you use may be dependant on which part of the site you are currently working on. A good example is fixing the width of the central column of the page so that text contained does not become distorted while allowing the layout for the rest of the page to be liquid, making viewing of side-bars and other elements more flexible. With practice and diligence, you will eventually learn the best combination of both layouts to use in any situation that you encounter.