“Liquid Layout”. I picked up the term a few years ago from a tutorial by Lance Arthur of Glassdog.com. Liquid layout describes a website with a variable width, depending on how big your browser window (and screen) is. For example, open CNN.com, close the annoying popup window that asks you what continent you are from (!?!), and then try stretching and squishing the size of your browser window. Notice how the content of the site stays the same width regardless of the browser width. Now try Search.com. Notice how the content stretches and squishes to fit your window without introducing a horizontal scroll bar.
Who cares? Very few people, apparently. I do. A good liquid layout ensures a good visual experience for users on a wide variety of screen sizes. It’s harder to do for the designer and involves some sacrifices and limitations, but some of the best design comes from within strict constraints.
Imagine a print designer who claimed that to truly see his masterpiece coffee table book at its best you had to look at it in natural light and with 20/20 eyesight.
“Colors look a little washed out and the type is small.”
“Fluorescents won’t do. I designed it to be seen in the light of nature. Maybe you need glasses.”
Expecting someone to change their computer configuration (particularly screen size) is like expecting people to buy a new car to go to the drive-in. Rather than clinging desperately to control of each and every pixel with white knuckles, web designers should embrace the openness of the web.
For those web developers who struggle with browser incompatibilities and nested tables for the perfect liquid layout, I appreciate it (for what it’s worth). Below are a few examples of fine liquid layouts I’ve come across. If you know of a good liquid layout let me know (firstname.lastname@example.org).
- Blogger.com – One of the best I’ve seen. Designed by Derek Powazek of Powazek.com (currently a k10k news contributor).
- Amazon.com – Kings of the useable web. Their related products features are frighteningly effective. One of the few major sites that still works at a 640 by 480 resolution.
- Search.com – One of Cnet’s few remaining liquid layouts (along with Cnet.com). R.I.P. Gamecenter.com and the formerly liquid News.com.
- Sapient – Monster web shop. Creativity and originality on an assembly line (they must use macs). Nicely liquid pages, although they start quite wide (defeating the purpose somewhat).
- Slashdot – Ugly but distinctive. Coders must think designing with white space is like writing inefficient code.
- Send me more: email@example.com