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 replaces liquid, but there are still come major advantages to a liquid layout if designed properly.
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.
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
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.
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)
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.
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.