Screenshot from the site "Cool Site of the Day" circa 1998

The (Mostly) Complete History of Layout on the Web Part 1: Liquid Cool

The web, as a visual and interactive medium, is still pretty new. Designing for the web has always meant striking a balance between influence from other mediums like print and brand new attitudes. The most revolutionary techniques in web design managed to find that balance, and pushed the web forward in leaps and bounds. Little by little, breakthrough after breakthrough, layout on the web has advanced.

Let’s start with A Dao of Web Design.

A Dao was written by John Allsopp in the spring of 2000 for A List Apart. Allsopp understood the web as a diverse, malleable and unprecedentedly far-reaching experience. It was accessed by millions of users around the world on any number of devices. Windows or Mac computers, small or large screens, and black and white or color monitors. Yet when he took stock of common techniques, he found that designers often tried to fight against the web, setting font sizes to rigid points so they couldn’t be changed by the user, or creating fixed layouts that only worked on large resolution displays. He saw a community that was still reaching into the same bag of tricks that worked for print design. But flexibility, Allsopp argued, was an instrumental feature of the web.

The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.

Allsopp made an appeal to his fellow designers. Stop trying to control the web. Cast off the shadow of print design. Instead, let designs flow from the grain of the web. Embrace its flexibility and find ways to hand off control to the user.

He followed up his ideological plea with some practical advice. He suggested using relative units like ems for fonts. He asked that designers make accessibility a priority as not everyone experiences the web the same way. And perhaps most saliently, he challenged designers to turn away from the fixed-width tables that were the fashion of the day and use CSS to construct fluid, flexible, percentage-based grid layouts.

Even before A Dao of Web Design was published though, there were attempts in the design community to reverse the trend of fixed widths. One of the first was known as liquid layout.

As far as I can tell the first liquid layout was used on ProjectCool in 1996. The site itself hosted resources for web designers, and was launched to early Internet celebrity status for its once-daily updated gallery called (rather self-explanatorily) “Cool Site of the Day.” The site was created by Glenn Davis, a co-founder of the Web Standards Project (WaSP), who firmly believed that if your site was broken for even a single user, it wasn’t worth having a website at all.

Instead of setting width in pixels, Davis advocated for the use of percentages when constructing table grids. For instance, a sidebar might be 30%, and the main content 70%. By using percentages instead of pixels, the browser was able to decide how wide to make each column, and designs stretched and squeezed based on where it was viewed. It was a forward thinking and resolution independent way of doing things.

The principles of flexible design

Liquid layout was a pretty massive hit among standards advocates and Internet pioneers. It was one of the first techniques that really felt of-the-web and shook up the standard way of doing things. In the years that followed, designers put their own spins on liquid layout. Some added a single fixed-width column that anchored the whole design. Others wrapped the whole thing in a larger, pixel-width table to emulate a sort of max-width attribute for the design. And the web kept on tinkering.

A few years later, when Allsopp published A Dao of Web Design, he added a single crucial ingredient to the mix: CSS.

Like Davis, Allsopp was a member of WaSP. His biggest takeaway from that organization was the importance of separating style from structure. At the time, there were very few ways of doing that. The HTML of a page more or less dictated both a webpages content and presentation, mostly thanks to a lack of alternatives. But CSS offered a way to move the presentation of content out of HTML. So when Allsopp made the case for liquid layout, he was drawing on the impressive efforts of those that came before him, but he was also necessarily making the case for CSS itself. That proved to be a radical move.

It was also all the motivation a lot of designers needed to start digging into CSS, resulting in a sudden rush of new techniques and clever hacks.

In 2003, the web community was introduced to an interesting trick for flexible images. Several designers noticed that if you set an image to a max-width of 100%, then it would never spill outside of its parent container (even if the width of the image was set in CSS). So that was one headache cured.

Another was solved not longer after. One of the attributes in CSS is called float, which allows for elements to be “floated” inside of other elements (to the left or right). The cool thing was, when you stacked two floated elements next to each other, you were actually able to construct a pretty basic grid. The problem was, unless everything was perfectly aligned, the layout started to break apart. With a few lines of CSS, this could be solved in what became known as the “clearfix,” an elegantly simple hack that forced floated elements into place. I doubt very much grid-based design on the web would have lasted long without the clearfix.

In 2004, Cameron Adams proposed another interesting trick that he called resolution dependent layout. Using a bit of Javascript, Adams devised a technique to detect the resolution of the monitor a user was using, and then swap out entire stylesheets based on the result. So a user with a 1280 pixel monitor might get a larger grid and typography, while a 640 pixel monitor might get a tighter grid or one-column layout. The technique was never widely adopted, but it certainly foreshadowed what would ultimately become media queries (more on that in the next part).

By that point, there were quite a number of differing, though still complementary, approaches to web design. It was a bit of a struggle for some designers to wrap their head around exactly what to use and when. Zoe Gillenwater, who added a number of techniques to the mix herself, organized these disparate tactics into two groups, liquid and elastic, under the umbrella of flexible design. Liquid layouts, like their earliest predecessors, depended on percentages for grid constructions. Elastic layouts were derived from the more controlled ems units to give a consistent rhythm to pages.

Gillenwater eventually compiled her tutorials and code samples in the book Flexible Web Design, which served as a handbook for web developers looking to make the switch to fluid layouts. It represented over a decade of collective knowledge and experimentation, and offered cutting edge best practices for an evolving web.

But just on the horizon, there loomed a new device. One that fit into the palm of your hand, that would change everything.


Added to the Timeline

December 11, 2008 - Flexible Web Design Zoe Gillenwater publishes her book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, a compilation of tutorials and techniques for approaching liquid grids and elastic web design. The book becomes a handbook for designers looking to make a switch to more flexible designs.
September 21, 2004 - Resolution Dependent Layout Cameron Adams publishes a new technique on his blog which uses Javascript to detect the resolution of a site visitor's monitor, and swap out different stylesheets based on the result. This allows designers to change the layout of their site based on resolution, and foreshadows the techniques of responsive web design.
December 1, 1995 - Liquid Layout A new approach to laying out designs on the web, Liquid Layout advocates for the use of percentage width tables over the predominantly fixed-width designs of the '90's. When set in percentages, websites are able to expand or narrow based on the resolution it is being rendered in.
View the Full Timeline

Sources