Liquid VS Fixed Layout has been argued for a lot of years now. As screen resolutions have increased fixed layouts have gotten a lot of use, but there are still major advantages to a liquid layout in some situations.

Referring to the columns or boxes that hold the text, images, and other content - these can be called containing elements. They may have borders and background images, but they are the visual containers for the important content on the screen. In a fixed layout, the size of each containing element on the webpage is an exact amount. The page will not change when you resize your browser window. It will essentially look the same on any browser or computer.

With a liquid layout, the size of these containing elements changes depending on the browser size and user preferences.
The container size increases when viewed at larger screen resolutions and decreases when the browser is resized.

There are advantages and disadvantages to both layouts:

Fixed width layout

Pros

* Guarantees an easy-to-read line length
* Allow images to be placed exactly in relation to other elements and type sizes
* Allows the designer full control over how the page is displayed (as opposed to the user)
* Allows for predictable default printing behavior.

Cons

* May create a type size that is not optimal
* Takes control over page size and text size away from the user.
* Doesn’t take advantage of screen real estate and may produce large unused portions of window space that could potentially increase the amount of scrolling that users have to do (this is especially true at higher resolutions)

Liquid layout:

Pros

* Allows for maximum use of space or screen real-estate. Also allows the most control over sizing by the user, because
a user can resize the website to their preferences.
* Allows text size to be changeable by user preferences, making it easy for people with vision problems to increase or
decrease the text size on the page while the layout adjusts around the increased size automatically.
* When designed correctly, it sets your website look slightly apart from competitors, considering most websites use a fixed layout.

Cons

* If the screen-size becomes too large or too small it can produce unreadable text, or hard to read/scan line lengths
* Can cause problems with default page printing. (A separate print style sheet can be used allowing for perfect printing
from any page despite a liquid layout, but if a separate style sheet for printing is not provided this con is valid)
* As the website size changes, the image size to text proportion may create a less desirable look.

Modern Screen Resolutions and the Prevalence of Fixed Width Layouts

The problem facing layout design in modern web design is the huge variance of common screen resolutions among potential website visitors. The smallest acceptable and still common modern resolution is 800 pixels wide by 600 pixels tall. With the recent surge in wide-screen and large monitors resolutions, a screen width of 1280 pixels plus is also very common.

Q. So how do you design a site that looks good with both a 800 pixel width and a 1280 pixel width?

Most web designers don’t, they use a fixed layout that’s 800 pixels wide and call it good. With that said, I have seen some beautiful layouts that look good and are readable at both those resolution extremes. The specific details of these layouts are beyond the scope of this article, but most of the designs I’ve seen or created that successfully accomplish this task use multiple content columns in combination with “padding” that is defined as a percentage of the screen. So when the screen is small, the multiple columns are very close together, but when the screen is large the padding increases proportionally and the columns are spaced further apart.

Recommendations and Analysis

Most websites should probably be designed with a fixed or “semi” fixed layout. It guarantees readability and perfect presentation of content. With that said, if your website contains a large amount of text based content (more then 3-5 paragraphs per page) or if the website would greatly benefit from a non-standard design scheme use liquid.

If you’re still not sure, choose fixed. A fixed layout is easy to maintain, and assures readability by all users and is easier for a web designer to code perfectly. A poorly done liquid layout will cause more problems than it will fix and annoy potential users. For example, one of my personal pet peeves is when a designer uses a single column liquid layout. My personal computer workstation consists of two monitors a 19 inch, and a 17 inch wide screen. When a website is designed with a single liquid column the width of the page usually is way too wide for easy reading, so I have to manually adjust the window size.

Totally Awesome,

Arthur Browning