Basics of the ‘Liquid VS Fixed’ Website Layout Debate in Modern Website Design
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.
