Liquid Layouts Revisited

Massive desktop monitors and diminutive displays on mobile phones mark the extreme edges of modern screen resolution. The disparity in screen size, which can be greater than 1,500 pixels has renewed interest in a decade old layout philosophy.

At the turn of the century, liquid layouts were a hot trend in Internet design, as proponents of the technique sought to make websites more accessible and flexible. Liquid design encouraged the use of the CSS block model rather than non-data tables for layout, and—in its purest form—used only percentages or relative increments for all element widths.  But enthusiasm for the design philosophy waned and, now, very few modern websites, particularly in the ecommerce space, use truly liquid layouts.

What Are Liquid Layouts?

"The term 'liquid' [in liquid layout] implies that a website should flow smoothly into whatever space it is given," wrote Nick Wilson in a 2002 article for SitePoint.

According to the liquid layout philosophy, website navigation, images, icons, and content should—like water poured into a glass—seek to fill up the screen's horizontal width without forcing horizontal scrolling. Likewise, the content should be able to expand to meet the demands of larger screens without looking empty.

Key aspects of liquid design were, in fact, adopted. For example, using tables for layout is now generally considered to be a cardinal sin in the web design community since it impedes accessibility for visually impaired site visitors, unnecessarily slows site performance, and is far more difficult to maintain. But many designers did not see the value in creating expanding and contracting sections with dimensions defined only as percentages.

Fixed-Width CSS Layouts

One problem with liquid layouts had to do with visual consistency. If you are really going to make every aspect of your page layout fluid, you can in no way expect that layout to look consistent across platforms. This problem of inconsistency, particularly in the wake of years of struggling with browser incompatibility, led most site designers to create fixed-width layouts while adopting liquid design's aim of greater accessibility. This meant that CSS did (and does) replace non-data tables for layout, making it easier for screen readers to interpret a page and speeding up site performance, but generally designers still do use dimensions in pixels to describe element widths.

Examples of this now dominate design approach are easy to find, and include leading online retail outlets like the Tommy Bahama Official Store. The store's home page is beautiful. It uses several large images (try reloading the page to see the different images) that perfectly convey the company's brand.

Because these images are a fixed width, it would be more difficult to design the page using liquid layout's ever changing dimensions. So the designer no doubt aimed at a typical user's screen size.

Average Browser Size

While liquid layouts are agnostic to screen or browser size, fixed-width layouts live and die by them. A few years ago, most site designers made web pages 780 pixels wide, then 800 pixels wide, and so on until now most web layouts are 960 pixels wide. These page widths reflect the growth in average browser window size.

In fact, browser size has become so important that Google created a tool to help designers identify how wide and tall a page should be to be visible to most Internet users. This tool "is a visualization of browser window sizes for people who visit Google" that was originally created to help Google's engineers understand why Google Earth was not performing to expectations.

Google's Browser Size allows you to submit a site URL and then view that site with an overlay showing the percentage of users that would be able to see the page without scrolling.

The Tommy Bahama store, for example, is 990 pixels wide and should be visible to slightly less than 90 percent of Internet users, assuming that a Google user and a typical Internet users have the same average browser size.

Liquid Layout on the Rocks

Some web designers have sought a compromise between pure, percentage-driven liquid layouts and pixel-specifying, fixed-width designs. This hybrid approach sets the width for some content blocks, usually navigation or side bar blocks, and uses relative widths or percentages for other flexible content sections, which may have minimum widths, but generally not maximum widths.

To continue the liquid analogy, you can think of the fixed-width elements as ice cubes in a glass. The ice cubes will be the same size, regardless of how large or small the glass is. Other fluid elements can still be poured into the glass, flowing around and between the cubes.

Amazon's popular retail site serves as, perhaps, the most recognizable example of a hybrid approach to liquid layouts. The site's central content section is fluid. It can expand from a minimum width of approximately 300 pixels to fill a massive 1920 pixel wide browser. I write approximately because of the unusual way Amazon has chosen to implement this flexibility using JavaScript and a brutal non-data table, rather than just CSS. If Amazon visitors do not have JavaScript enabled, the site falls back to a series of iframes.

The left and right columns on the Amazon site have set widths of 180 pixels and 300 pixels respectively. So these "ice cubes" are always the same size in spite of how large or how small the browser size is.

An Example of Liquid Layout on the Rocks

In December of 2003, Russ Weakley wrote a great article about liquid layouts for Max Design. In his article, Weakley described a method for developing liquid layouts. I generally follow Weakley's method when I create fluid layouts, like the example that follows.

While, I won't describe Weakley's method in detail, just know that before I wrote the CSS, I created a grid pattern in pixels, including gutter space between elements, and then converted those pixels to percentages for the layout elements that I wanted to be fluid.

The HTML follows:

<!doctype html>

<html lang="en">

<head>

<title>Liquid Layout on the Rocks</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<header>

<div>Header</div>

</header>

<section><div id="left-col">Left</div></section>

<section><div id="right-col">Right</div></section>

<footer>

<div>Footer</div>

</footer>

<script src="js.js"></script>

</body>

</html>

And this is the required CSS file.

body {margin: 10px 10px;}

#header{ height: 50px; margin-bottom: 10px; padding: .25em; background:#6B90BF;}

#left-col { float: left; width: 200px; height: 500px; margin-bottom: 1.04%; padding: .25em; background:#A0BED9;}

#right-col { margin: 0 0 1.04% 220px; height: 500px; padding: .25em; background:#A0BED9;}

#footer { clear: both; height: 50px;margin-bottom: 10px; padding: .25em; background:#6B90BF;}

The right-col section, header, and footer will each expand and contract to match the size of the browser. Meanwhile the left-col section will always be presented at 200 pixels in width.

[caption id="attachment_8016" align="aligncenter" width="500"] Screen capture of liquid on ice wide[/caption]

Liquid and Ice in Your Site Design

As desktop monitors expand, and mobile phones and mobile Internet devices become more popular, fluid site layouts may deserve some consideration. As you develop new ecommerce site designs, try to decide if there are some sections of the site that could, in fact, be liquid, resizing depending on the user's browser size.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.