Liquid Website Layout – Is it a Good Idea?


liquid-website-layout Liquid Website Layout - Is it a Good Idea?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.

fb50c5bf790872a8ecad33a6bd15d358?s=100&d=mm&r=g Liquid Website Layout - Is it a Good Idea?

CEO, Flying Cow Design
Attended University of Auckland
Lives in San Francisco Bay Area

October 18th, 2016


Need help with Web Design?

Write to us with your project details and we will get back to you shortly.


Related Articles
Self-hosted WordPress sites are versatile platforms for building a business. The secret to WordPress' flexibility
If you are a business owner looking to grow your business online, here are three
A payment gateway facilitates online credit card payment processing on your website. The software and
An iframe or inline frame is essentially a browser window set within the web page.
Content marketing creates organic traffic, but it requires sound strategy. Separating the two is like
When we look back over the last 10 years, it is amazing how corporate websites
When one mentions browsers, most instinctively think of Internet Explorer, Mozilla Firefox and Google Chrome.
Not often are CSS and typography used in the same sentence and in many ways,
It's rare to find a website to be completely free of errors. This is usually
What are web fonts? When designing for offline media like brochures, billboards, press advertisements, etc.,