Liquid Layout

Problem

People want to see content in a size appropriate for the form factor they’re using.

Solution

Treat your content like liquid and have it expand to fill the shape of its container.

Context

You are designing for a customizable form factor.
Your technology supports adjusting layout on the fly.
Your content can adjust without losing fidelity or readability, or at least it can to an extent.

Rationale

Software content that surfaces on personal computers, mobile devices, and other non-traditional computing devices usually demands the ability to adapt to the form factor that it is displayed in. You can design for a perceived fixed minimum form factor, but that will often degrade the experience for those who can view the same content on larger form factors.

Those with larger devices (widescreen monitors, for instance) usually want to take advantage of the additional space and have software that intelligently adapts. The inverse is true for smaller devices such as ultralight laptops, phones, and other handhelds—they don’t want to do a lot of scrolling, especially horizontal scrolling.

This pattern helps to optimize the experience for these different form factors. Also, using liquid layout can help when localizing to other languages or changing the font size of content.

Implementation

You need to devise a strategy for how your content’s layout will change as its container’s size changes. This should be informed by taking a holistic view of your content and breaking it into sections, usually based on an initial Grid Layout (these layout approaches can and should be used together). Often this results in some combination of columns and rows.

You can then determine if there is a minimum height and width for the various sections. This is usually constrained by images of some kind, though you should also consider legibility for text-based sections. Having a few words per line is usually not ideal.

The next thing to do is determine if there is a maximum width for the sections and what it is. Again, this is often based on imagery, but it can also be based textual content. Just as having a few words per line is not ideal, having too many also reduces readability. The optimum textual line length is usually said to be 55-60 characters with a maximum of 90. You may also want to constrain a section based on its purpose, e.g., your navigation column should not exceed 300 pixels, in which case you might let the other columns on the page continue to take up more space while that one fixes at its maximum width.

Another consideration is alignment, that is, how should your content flow when resized. Should it have its top and left fixed and expand out to the right and bottom? Should it expand equally in all directions (being centrally aligned)? Usually for left-to-right languages, the answer will be to flow to the right and bottom, being anchored and aligned to the top and left.

Another strategic question is whether or not particular areas of the view have items that can show or hide based on the space that they have available to them. If it is, for instance, a list of links or buttons, you could have them progressively hide and show, using a “more” affordance to allow people to get to the hidden options via a Drop Down Chooser.

Finally, if you’re designing forms, you need to think about if and how the inputs will flow. Multi-line text inputs should grow both horizontally and vertically, but specialized controls such as a Date Picker and fixed-length text fields probably shouldn’t. Usually buttons should not resize, and often they will be anchored in a different way (such as the bottom left or right) from the form inputs.

Once you’ve defined your strategy, it is a matter of implementing it on the target technology platform. Many desktop technologies such as Java Swing, Windows Forms, Windows Presentation Foundation, and RIA technologies like Silverlight have special capabilities that make liquid layout easier. Unfortunately, it can be more challenging to do this in HTML and CSS, but it is doable.

Usually your technology choice will also constrain some of how you implement this pattern. For instance, it may provide you with scroll viewers that will automatically show and hide scrollbars as needed, but if not, that’s something you should do—only show them when needed. Similarly, some platforms and third-party vendors like Infragistics supply layout managers that facilitate creating liquid layouts.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinDockManager, WinGridBagLayoutPanel, WinFlowLayoutPanel and the WinExplorerBar (Outlook View) to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Layout Managers to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF controls: XamDockManager and XamOutlookBar. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamShowcase called xamSalesManager to see it in action.

Examples

This example from Skype 4 (Windows) shows an example of what you might call "smart" liquid layout--the actual structure itself changes based on available dimensions. The # of columns in the person info box changes based on size (here it shows from two to one), and they still provide a switcher to flip between columns.

http://quince.infragistics.com/1130