Liquid Layout Pros and Cons
When starting the design of a website, one of the early decisions you should take is whether you want a fixed-width layout or a liquid layout (also called flexible layout or fluid layout) for your website. Both the styles have their pros and cons although the fixed-width layout is by far the more popular and preferred layout. This article explains the pros and cons of opting for a liquid layout and why a fixed-width layout is a safer and more preferred option.
What is a Liquid Layout?
Using Cascading Style Sheets (CSS), a website can be designed in such a way that its contents resize themselves to occupy the entire width of the screen, depending on the resolution of the person visiting your site. This can be an effective way to minimize the need for scrolling, especially if your website does not use technologies that do not lend themselves to resizing easily. The image shown here is a good example of a liquid layout. Depending on the screen resolution, the website contents get rearranged to occupy the entire screen width. While there are distinct advantages to using a liquid layout, it also has its limitations. Below are some of the pros and cons of using a liquid layout for your website.
Liquid Layout can be User Friendly
No one likes to scroll through pages on a website. Many times, with higher screen resolutions, there is a lot of space that is left blank on a web page, making the user scroll down to read content. This can be minimized with the use of a liquid layout. Since a liquid layout site will rearrange the content to occupy the available screen width, the content can be distributed to occupy the width of higher resolutions, thereby minimizing the need for scrolling.
Liquid Layouts can be Visually Appealing
Most industry-standard browsers will render a page with a fluid layout similarly. In other words, the white spaces between columns will appear the same on most browsers. This means that, although the page layout varies depending on the screen resolution of the user, it can still look visually appealing and uniform across browsers using the same screen resolution.
Liquid Layouts can Eliminate Horizontal Scrollbars
One common concern with a fixed-width layout is the possibility of horizontal scroll bars. If the screen resolution of a visitor to your site is lesser than what your website is designed for, it can result in horizontal scroll bars appearing on the pages of your site. With a liquid layout, this can be eliminated because the content would rearrange to the available width on the browser.
Liquid layout gives you less control over design
Shown here is the same website on a smaller screen resolution – the main heading on the left starts to break awkwardly when the screen resolution reduces. When designing a website using liquid layouts, there is the threat of overlooking how the site would render on very high or very low screen resolutions. This can actually result in a very unpleasant browsing experience for the visitor to your website.
Liquid layout can pose problems for video, flash, etc.
Many elements used in website design today cannot easily be resized. Images, videos, flash elements and other media usually render in a fixed size that is pre-defined. For instance if your masthead is a Flash animation, it would have to be designed to a certain dimension. Resizing this in a fluid layout can pose challenges.
Liquid layout can look weird in very high resolutions
When a site designed using a liquid layout is accessed using a very high screen resolution, it can create large blank areas and white spaces that can actually diminish the site's aesthetic value. It can also make the site look sparse and lacking in content. For instance, the gutter spaces (spaces between columns of content) can look abnormally wide and ugly on very high resolutions.
Liquid layout can cause readability issues
On very high screen resolutions, because the width of a column of text widens, it can make lines of text look very long and hurt the readability. Likewise on very small screen resolutions, the column widths can become so narrow that very few words fit in a single column. This also can make readability of the text difficult.
Liquid layout can cause problems with printing
If someone decides to print a page designed in a liquid layout, the default page printing can become a problem. While this can be fixed by using separate print style sheets, it adds one more complication and variable to manage while designing your site using a liquid layout.
Hybrid layouts – Best of both worlds
The VTech SEO website is designed using a combination of fixed width and liquid layout. Although most elements of the website follow a fixed width layout, there are many elements that 'seem' to have a liquid layout.
For example, the black bands at the top and bottom of the page shown alongside, and the red bands containing the links seem to expand and occupy the entire width of the screen regardless of the resolution.
All the rest of the content on the page is designed to best render on a screen resolution of 1,024 x 768.
This technique of combining fixed-width and liquid layouts to create a hybrid layout ensures that the site looks aesthetically pleasing on all screen resolutions. There are no ugly spaces either within the page content as created by liquid layouts or on the sides as created by fixed-width layouts. Because of this, many websites are increasingly using this technique to create hybrid layouts that incorporate the advantages of both fixed-width and liquid layouts.
Deciding on the ideal screen resolution
If you decide to opt for a fixed-width or hybrid layout, you still need to decide what width your content should appear in. For this you need to know the most common screen resolution among the likely visitors to your website.
One way to determine this is by looking at global screen resolution statistics shared by sites like W3Schools. Stat counter shows you trends in global statistics across various metrics including screen resolutions. Shown here are the most commonly used screen resolutions as on July 2011, as per W3Counter.
If you already have a website that you are planning to redesign, the usage statistics of visitors to your existing website would be the best indicator of what screen resolutions the visitors to your future website also are likely to be using.
Raghupati is the COO and Director of Operations at VTech SEO. VTech SEO provides high quality outsourced SEO services, web design services and content services to growing businesses around the world. We also offer white label SEO services to web design firms, digital marketing firms and advertising agencies.
VTech SEO is among India's leading SEO firms for growing businesses from around the world. VTech SEO offers outsourced SEO services, HTML based web design services, content services, and other outsourced services from our offices in India and USA.
WRITE TO US
Webdesign Articles
