For the last 10 years the question of whether to use fixed or liquid layouts when designing a website has raged on in the web design world, with major design players on both sides of the proverbial fence.
Recently though, as screen resolutions have increased dramatically, fixed layouts have all but replaced liquid, but there are still come major advantages to a liquid layout if designed properly.
Preliminaries
When I use the term “containing” elements, I’m referring to the columns or boxes that hold the text, images, and other content. Containing elements may have borders and background images, but are usually just the visual containers for the important content on the screen.
Fixed width layout
In a fixed layout, the size of each “containing” element on the webpage is specified exactly. The page will not change when you resize your browser window. It will essentially look the same on any browser or computer.
Liquid layout
In a liquid layout, the size of the 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.
Advantages and Disadvantages (pros and cons):
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 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 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?
A. Most web designers don’t, they use a fixed layout that’s 800 pixels wide and call it good. With that said, I have personally designed and 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 then 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 widescreen. 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.
Add to Del.icio.us | DiggThis | Yahoo! My Web | Furl
About the Author
Solomon Rothman is the CIO for Social Media Systems; an online marketing company that helps its client succeed by providing web development bundled with search marketing. He authors numerous blogs including 3net Search Engine Marketing Blog and loves the ongoing challenges of the online marketing world. Besides technology, Solomon’s other passions including filmmaking & screenwriting.
