A liquid page will resize to fit whatever size browser window (within reason) that the user has available. … the real goal in building a website is to provide the user with a seamless interface to information. The site should not intrude on the user’s thought processes, but should gently guide them to their desired destination. If a site doesn’t look right because it doesn’t fit the user’s browser window, then the design has become intrusive to the user.?—?Glenn Davis, quoted in 15 Minutes, sometime in 1997.
TWO DECADES before Responsive Web Design, we dipped our toes in Liquid Layout?—?a similar but necessarily less refined concept. Glenn Davis of Project Cool fame coined the phrase in 1995 or 1996. (Glenn also came up with“Ice” to describe fixed-width layouts, and “Jello” for layouts that combined some fixed with some flexible elements.)
Liquid Layout was mainly what John Allsopp had in mind when he wrote A Dao of Web Design for A List Apart (quite possibly the most influential article we ever published). The most famous paragraph in that famous article explains…
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”
Everything new is old
Modern designers look back at Allsopp’s article and think John must have been a time traveler who had seen the future of responsive design and mobile devices. In fact, though, John was simply a highly skilled (and extremely articulate) mainstream developer. As such, he was familiar with Liquid Design and frequently used it in his work, along with other ideas mentioned in “Dao,” such as not forcing users to see a particular type size or typeface. To a good developer in those days, what mattered was making something that worked for everyone. (That should still be what good developers care most about, right?)
Liquid design was part of a “works for everyone” approach to web design, but it had limitations. For one thing, breakpoints hadn’t been invented. CSS layout was in its infancy, used by almost no one, except in experimental work. The ability to separate content and behavior from presentation was nonexistent, unless you limited “presentation” to setting type in a single column, letting the user override the type setting, and letting the column reshape itself to fit any viewport.
With so few controls available, Liquid design tended to become unusable in certain settings, and was almost always ugly.
Liquid design was Responsive design’s rough draft
Liquid design was immediately popular with developers when they were given permission to just make stuff?—?i.e. when they weren’t constrained by overly rigid Photoshop layouts. Designers almost never used Liquid design because the layouts moved so quickly into ugliness and unusability?—?too wide to read, or too narrow, or with overlapping columns in early CSS layouts. Designers also disdained Liquid layouts because most of us see our job as imposing brilliant order on ugly chaos, and fixed proportions always seemed to be part of that order.
Fig 1. The Web Standards Project: a liquid layout as seen on a wide computer screen. Designed by Andy Clarke in the early 2000s.
Fig 2. The Web Standards Project: a liquid layout as seen on a narrow computer screen. On the narrow screen, type overlaps and the page becomes unusable.
Ugly on one side. Unusable on the other. It took a special breed of designer to forge ahead with Liquid Layout anyway.
Were it were not for the iPhone and the phones and tablets that rose quickly in its wake, the W3C would likely not have invented breakpoints. And without breakpoints, there could be no Responsive Web Design. And without Responsive Web Design, created by a visually gifted designer and with tools to satisfy his peers, the idea that drove Liquid design back in the 1990s would not, at long last, have caught on.
It’s easy to view our current design thinking as more evolved than what we practiced in the past. And in some ways, it is. But if you read between the lines, it’s fair to say that our thinking was always advanced. It’s only now that our tools are beginning to catch up.
Read more about Liquid and Responsive Web Design
- A Dao of Web Design by John Allsopp, A List Apart, April 2000
- Liquid Web Design: Build it right and it will work no matter what the container, by Nick Finck, Digital Web, August 1999
- What is Liquid Design? By Nick Wilson, November 2002
- Flexible Foundations by Trent Walton, 2013
? Illustration by Justin Dauer. Follow me @zeldman. A version of this article appears on Medium. The 11th Annual Blue Beanie Day in support of web standards takes place November 30 on the internet.
