UI Patterns and Techniques

Liquid Layout

From http://www.saila.com
Use when:	The user might want more space -- or less -- in which to show the content of a window, dialog, or page. This is likely to happen whenever a page contains a lot of text (as in a Web page), or a high-information widget like a table or tree, or a graphic editor. It doesn't work so well when the visual design requires a certain amount of screen real estate, no more, no less.
Why:	Unless you're designing a "closed" UI like a kiosk, a handheld, or a full-screen video game, you can't predict the conditions under which the user is going to view your UI. Screen size, font preferences, other windows on the screen, the importance of any particular page to the user -- none of this is under your control. How, then, can you decide the one optimal page size for all users? Giving the user a little control over the layout of the page makes your UI more flexible under changing conditions. It may also make the user feel less antagonistic towards the UI, since they can bend it to fit their immediate needs and contexts. If you need more convincing, consider what happens to a fixed-layout "non-liquid" UI when the language or font size changes. Do columns still line up? Do pages suddenly become too wide, or even clipped at the margins? Generally, pages engineered to work nicely with window size changes will also accommodate these other changes.
How:	Make the page contents continuously "fill" the window as it changes size. Multiline text should wrap at the right margin, until it becomes four or five inches wide (at which point it becomes too hard to read). Trees, tables, editors, etc. at "center stage" should enlarge generously while their margins stay compact. If the page has anything form-like on it, horizontal stretching should cause text fields to elongate -- users will appreciate this if they need to type in anything longer than the text field's normal length. Likewise, anything scrolled (lists, tables, etc.) should lengthen, and possibly widen too. Web pages and similar UIs should allow the body content to fill the new space, while keeping navigational devices and signposts anchored to the top and left margins. Background colors and patterns should always fill the new space, even if the content itself cannot. What happens when the window gets too small for its content? You could put scrollbars around it. Otherwise, white space should shrink as necessary; outright clipping may happen when the window gets really tiny, but the most important content hangs in there to the end. A well-behaved Liquid Layout can be difficult to implement in Web pages, especially if you want to dispense with tables and use straight CSS. It's also hard in Visual Basic and Visual C++. Java, however, provides several layout managers that can be used to implement it. In The Design of Sites, van Duyne et. al. refer to this pattern by the name "Expanding-Width Screen Size." They contrast it to "Fixed-Width Screen Size," also a pattern.
Examples:
From a file-open dialog in Mac OS X. Mac OS allows you to resize the standard "Open" dialog, which uses a liquid layout. This is good because the user can see as much of the filesystem hierarchy as they want, rather than being constrained to a tiny predetermined space. (The Cascading Lists pattern is used in this dialog, too.)