Liquid Web Design: Build it right and it will work no matter what the container.

In: Articles

By Nick Finck

Published on August 29, 1999

Glenn Davis once said, “Webpage building is a lot like bar tending. Build it right and it will work no matter what the container.”¹ I think he was either very drunk when he said that or really on to something. Some people consider the web to be an information resource while others swear up and down that it’s a form of entertainment. Web interface design has taken a giant leap in the past few years from the all-too-haunting gray backgrounds and bulleted lists to colorful interactive interfaces and eye-candy. A good web designer knows how to blend just the right amount of interface with information, so that it appears seamless and the navigation almost transparent to the end user. This is where Davis’s idea of liquid design comes into play. Through his years of web development, he has come to a conclusion that there are three elements of interface on the web today: those that are Liquid, Jell-O, and Ice.

Ice: Let Sit and Thaw
Ice is probably the most common element found on the web today. We often see it without even realizing it. Ice designs are not really a bad thing, but they do tend to take away from the user’s experience of the site and remind us of the limitations of the web. “Ice is an element that is frozen solid. Nothing about the element will change if a page is resized. There are a lot of Ice designs on the web in which the entire site is carved from it. Those are the sites that are frozen to the left side of the browser and only look best at a certain size.”² A few good examples of ice designs are ZDnet, HighFive [editor’s note: link removed], The Webby Awards, CNN, and Adobe–most any news or corporate type web site. In fact, come to think of it, my own site used to be ice designed–tightly wedged in a 600 pixel-wide table and carved into the left side of the browser. One of my goals for Digital-Web.com has been to get away from the ice, as far away as possible.

Jell-O: Just Add Water
Something of a rarity, there really isn’t a whole lot of Jell-O out there for the feasting . Only a few sites make use of this kind of style in web design. It’s not much different than Ice design, however. Just add some center tags, that’s it when you get down to the nitty-gritty. Davis describes it as, “…a bit more flexible. It is a design that, if the browser window is resized, it will center itself to fit the display.”³ A few good examples of these types of sites are The Web Standards Project, DigitalThread, and HeadSpace. There are certainly more out there, but these will satisfy the point.

Liquid: Just Add Water
Liquid is perhaps one of the most difficult styles of design one can possibly develop. “Liquid is the epitome of good web design and the fluid that should be used to hold web pages together. A liquid page will resize to fit whatever size browser window (within reason) that the user has available,”⁴ Davis mentions. That kind of design typically involves a lot of forethought in designing a webpage. The developer must consider not only typical web issues such as complex layout, text wrapping and all the browser inconsistencies , but also any screen’s width and height. A few good examples of sites that have tackled the liquid design concept successfully are Builder.com, Falkon Design and ProjectCool. Jeffery Zeldman also mentions how he used some of the ideas of liquid design when he built A-List-Apart in the article “No Blue: Design Notes on Alistapart.com.”

The Four Inch Rule
Zeldman writes, “We’ve debated the issue for four years, but the truth is, nine times out of ten, the ‘best’ web layout is the one which fully embraces the medium, by allowing itself to reflow as it is poured into different readers’ individual computing setups.”⁵ There is an unspoken rule in print which states that text should not exceed four inches in width on a page. Any text less than four inches is more readable than any text over four inches–the reader’s whiplash will speak for itself. In following this rule we can incorporate the same concept into web design with a fixed-width table inside of a 100% width table, as is the case with Digtal-Web.com. Doing this not only allows for better readability at higher resolutions, but it also allows the designer to incorporate the proper blank space needed to make the page appear more aesthetically pleasing to the eye.

Making it happen on Paper
If you plan on doing a redesign and you want to try to develop a liquid site, you must first have a firm grasp on the general concept of the site. Will it have a left or a right side navigational bar? Will there be headers and footers? Will the interface be complex and if so will all the graphics need to butt-up against each other to make the interface look and work right? These are just a few questions to ask yourself. The best way to approach this is by drafting your site on paper, stick to a grid design and think original. Two things you must accept are, first, designing a liquid site will be a huge pain but that it will all pay off in the long run; and second, the design can not be perfect in order to be totally liquid. If you want to see perfection in design, the web is not the place to look. When sketching tables out on paper, consider that each button in a horizontal navigational bar should be in it’s own cell. This will keep the design from bunching up on the left side of the screen. Also keep in mind that buttons may drift a little, especially in the distance between each one going across horizontally. You may have to go back to this step if the design fails once you start building and testing the site.

Testing and more Testing
Once you have the layout down and the basic tables sketched out, you can start on development. This is the point where you will either make or break your design. The best method to test your design’s success is to load it in several different browsers on several different operating systems, at several different desktop resolutions. It gets really hit or miss at this point. Validation will also play key here in that it will help you to find standardized solutions to issues in various browsers, rather than proprietary work-around which may need to be patched up at a later time. You will know your design works when it will expand and contract to any screen size in any browser, on any platform. Once you’ve made it to that level, you will have succeeded at liquid design.

Keep the Goal in Mind
So why do it? You’ve been struggling for hours trying to get that design to expand just right and there seems to be no light at the end of the tunnel. Just remember your goal: seamless interfaces to information. If your user does not comment on your interface, that means you’ve succeeded at pulling off a transparent user interface–leaving you one step closer to the ideal web page.

---

Footnotes
¹ Zeldman, J. (8 July 1998). “15 Questions for Glenn Davis” Jeffrey Zeldman Presents: 15 Minutes. (Online).
http://www.zeldman.com/15/davisf.html
Back to content

² Zeldman, J. (8 July 1998). “15 Questions for Glenn Davis” Jeffrey Zeldman Presents: 15 Minutes. (Online).
http://www.zeldman.com/15/davisf.html
Back to content

³ Zeldman, J. (8 July 1998). “15 Questions for Glenn Davis” Jeffrey Zeldman Presents: 15 Minutes. (Online).
http://www.zeldman.com/15/davisf.html
Back to content

⁴ Zeldman, J. (8 July 1998). “15 Questions for Glenn Davis” Jeffrey Zeldman Presents: 15 Minutes. (Online).
http://www.zeldman.com/15/davisf.html
Back to content

⁵ Zeldman, J. (1999). “No Blue: Design Notes on Alistapart.com” A List A Part. (Online).
http://www.alistapart.com/stories/noblue/
Back to content

Related Topics: Web Design, Liquid Web Design