One of the earliest decisions that you need to take when you start designing your website is whether you want to opt for a fixed width layout or a liquid layout for your site. Both these layouts have their advantages and disadvantages. However, the fixed layout is more popular among designers. This article will tell you why the fixed layout is the more preferred kind of layout among people and will also discuss the advantages and disadvantages of the liquid website layout.
What is Liquid Website Layout?
The liquid website layout is also known as flexible or fluid layout. It is a kind of design layout in which the content of the site can be resized to fit the screen depending on its resolution. This can be done using Cascading Style Sheets (CSS). Such a layout will help to reduce the requirement to scroll down a page to see content. Though liquid layouts have a number of advantages, there a few disadvantages of this kind of layout as well. Given below are some of the advantages and disadvantages of using liquid website layouts.
Advantages of Liquid Website Layouts
Liquid Layouts are User Friendly
It can be annoying to scroll down pages of a website. Many times, parts of a web page are left blank due to the high resolution of the screen making the visitor to the site scroll down the page to read the content. Liquid layouts can help reduce such scenarios. Since liquid layouts are meant to make content fit according to the size of the user’s screen, the content can be rearranged to fit the width of high resolutions, thereby reducing the requirement to scroll up and down the pages.
Liquid Layouts can be Appealing to the Eyes
It is not nice to see a page with inconsistent spaces. If you use the liquid layout to design your site, then all the empty spaces on the screen will look consistent on all browsers and hence, will appeal to your user’s site.
Horizontal Scrollbars can be Eliminated using a Liquid Website Layout
One problem that a designer may face if using fixed width layout is the horizontal scrollbars. These scrollbars may appear if the resolution of your user’s screen is lower than the resolution that your site has been designed in. However, since the content will rearrange itself to fit the resolution of the user’s screen, this problem may not appear if you use liquid layouts.
Disadvantages of Liquid Layouts
With liquid layouts you have less control over the look of your site
One thing that a person should be concerned about while designing a website in liquid layout is how the site will appear on extremely high or low resolution screens. If the site does not appear properly, it can cause a very bad user experience for anyone visiting the site on such resolutions.
Liquid layouts can cause trouble for flash, video, etc.
It is not possible to resize all elements of a website. Most of the times, videos, images, and other elements like flash media come in fixed sizes that cannot be changed. For example if the website’s masthead is made in Flash, then it would have to be designed in a specific size only.
Liquid layouts may not look very good on screens of very high resolution
If a site that is created using a liquid layout is seen on a very high resolution screen, it can make the white spaces on the page look even more large, thereby taking away all the visual appeal from the site. The white spaces can also look like the site has very little content.
Liquid website layouts can cause problems in readability
The width of a column of text can become wide on high screen resolutions making all the lines look very long and making it difficult to read. Similarly, the width of the text columns can become very narrow on low screen resolutions making it difficult to read what is there on the screen.
A liquid layout can lead to problems during printing
It can become difficult to print a default page that has been designed in liquid layout. This problem can be solved by adding separate print style sheets to print the pages. But this means another step will get added in the entire process that needs to be managed.
Hybrid Layouts – A little Bit of Both the Layouts
Websites can be designed using a combination of both the fixed width layout and the liquid layout. Though most of the elements of the website in such a design will have to follow a fixed width layout, some of them can use the liquid layout. Using a combination of both the layouts will ensure that the site looks good and visually appeals the users on all screen resolutions. Such a design will make sure that there are no empty spaces in the middle of the page like the ones found in a liquid layout or on the sides like the ones found in a fixed width layout. Due to this convenience, many web designers are now choosing hybrid layouts which are a combination of both the fixed width layout and the liquid layout.
How to choose the best resolution for your screen?
A designer will have to decide the width of the screen on which the content will appear even if the site is being designed in the fixed width or hybrid layout. In order to do this, the designer will have to find out what is the most common screen resolution of the people who visit the site.
You can find this information on the global screen resolution statistics that are given by websites like W3Schools. In some cases, if you already have a website and you are planning to redesign it, then you can take a look at the statistics of the users who visit your site to determine the most common resolution.
CEO, Flying Cow Design
Attended University of Auckland
Lives in San Francisco Bay Area