ASWD_001121.qxd
11/27/00
11:18 AM
Page 112
112
T h e A r t & S c i e n c e o f We b D e s i g n
in existence, how do I deal with the infinite possibilities for sizing their actual browser window? How I cope with this dilemma is telling. I could demand users yank their window out to the size I require for my layout, or I could build layouts that respond to any size. One way to accomplish this is by simply using relative values when defining my layout, creating “liquid pages.” Let me explain. Web pages are often designed using HTML tables for layout. While this may not have been the intent of the architects of the language, there are certain advantages to using tables to position elements on the page. Tables follow a set of heuristics for how they take up screen real estate when displaying your page. The individual cells of a table will expand to accommodate their contents. By doing so, the effect is one of dependencies—each cell is constrained by both its contents, and also by the contents of the adjoining cells in the same row and column. Add to this the ability for cells to span multiple rows or columns, and you get a sophisticated method of developing page layouts. Especially when you consider this key fact: cells can take a percentage value for their width. How does this relate to rule-based design? Easy. I’ve already talked about how we’re going to let the user’s environment determine the layout of a page. So by creating a table that contains percentage values, you are essentially letting the user set the layout of the page to be whatever fits the browser window the most efficiently. Look at this example:
Chapter Four - B e h a v i o r
a column of navigational links taking up 20 percent of the left side of the page, and paragraphs of content filling up the other 80 percent on the right. It’s a simple example, but one that gives us a glimpse of a whole system of rules that could be put in place for a particular page layout. The navigation, for example, could be locked to a specific width, while the content area could be flexible. If this were being developed for a commercial site, ad units could float to the right moving with the edge of the browser. Margins could be created around a document and dynamically scaled with the size of the window, and on and on. On Stating The Obvious (stating.theobvious.com), Michael Sippey uses a similar technique to create a liquid layout. His interface is one of minimalist elegance. An unobtrusive brand logo coupled with a careful eye for type leads to an inviting and intelligent page layout. This layout is also a great example of the ease at which pages can become liquid with a few simple tweaks to the underlying code.
<TABLE> <TR> <TD WIDTH="20%">Page Navigation</TD> <TD WIDTH="80%">Page Contents</TD> </TR> </TABLE>
Type that into an HTML page and view it in a browser, and you’ll see a two-column page-layout that expands and contracts as you resize the window—a liquid page. Imagine
Michael Sippey’s “Stating the Obvious” uses a very simple table structure to accomplish a liquid design.
113