Liquid Website Layout – Is it a Good Idea


liquid-website-layout Liquid Website Layout – Is it a Good Idea

Choosing which website layout to use, liquid, fixed, elastic or hybrid, is something all web designers struggle with at some point during the web development process. The final decision is made on how flexible the website will be for the user. Each layout has advantages and disadvantages.

Some of the major decision factors are:

  • Resolution
  • Browser
  • How the website looks when the browser is maximized.
  • How many toolbars are open making the screen larger or
  • Which operating system and hardware are being used.

What is Liquid Website Layout?

The liquid website layout, also known as flexible or fluid layout, when the content of the site can be resized to fit the screen depending on its resolution. Resizing a website to meet the resolution is also called responsive website. Using Cascading Style Sheets (CSS) to design your fluid website will help reduce the requirement to scroll down a web page to see content. Though liquid layouts have many advantages, there a few disadvantages 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

Internet users can easily become annoyed when they have to scroll down website pages to find the information they are looking for. Many times, parts of a web page are left blank due to the high resolution of the screen making the site visitor scroll down the page to read the content. Liquid layouts help minimize 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 are Appealing to the Eyes

It is not easy on the eyes 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 therefore, will appeal to your user’s site.

Eliminate Horizontal Scrollbars using a Liquid Layout

One problem a web designer faces with a fixed width layout is the horizontal scrollbars. These scrollbars may appear if the resolution of your user’s screen is lower than the resolution your site was designed. 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

Web designers should be concerned about how the liquid website will appear on extremely high or low-resolution screens. If the site does not appear correctly, it can cause a bad user experience creating an adverse effect on your Google Analytics results and search engine ranking.

Liquid layouts can cause trouble for flash, video, etc.

It is not possible to resize all elements of a website. Most 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 with high resolution

If a site that is created using a liquid layout is viewed on a very high-resolution screen, it can make the white spaces on the page look larger than they actually are, 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 readability problems

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 also making it difficult to read.

Liquid layout can lead to printing problems

It can become difficult to print a default page that was 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 Mixture of Both the Layouts

Websites can be designed using a combination of both the fixed width layout and the liquid layout. Most of the website elements will have to follow the fixed width layout, however, some of them can use the liquid layout. Using a combination of both the layouts will ensure the site looks good and visually appeals the users on all screen resolutions. Such a design will ensure 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?

Your web designer will decide on 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. To do this, the web designer will need to research the most common screen resolution of the target audience for your website.

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.

For more questions on website layout design contact Flying Cow Design today!

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.,