Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Usability Tips You Can Use: Designing Flexible Layouts

Last updated Oct 17, 2003.

By Sarah Horton

Flexibility is one of the more vexing aspects of designing for the web. The hours we spend tweaking colors and fonts—only to have users come along and apply their own settings to our pages. Humph! And when we see our designs compromised—for example, by large text or a narrow browser window—all we can do is mutter, "Well, it looks great on my computer." Now, we could avoid unpleasant surprises by creating sites that are image based. Images are largely impervious to user modification, and many sites, including those of Apple and J.Crew, rely on images almost exclusively. This approach provides a measure of design integrity, but at significant cost. Users who can’t access images, or who must make modifications in order to access content, cannot use these sites. And when push comes to shove, a compromised but usable design is better than an unusable one.

From another angle, flexibility is a feature, not a bug. It relieves the pressure of always having to make the right choice. For example, page dimensions—640×480, 800×600...what’s a designer to do? We want to make the right decision, but with Internet access built into everything but the kitchen sink, there’s no such thing as the "right" page dimensions. On the other hand, if we design flexible layouts and let users determine page size, we have made the right choice. Free your pages and the rest will follow.

Let’s now examine the three fundamental qualities of flexible layouts: device independence, liquid layouts, and scalable type. These sections cover the basic concepts with only a bit of how-to. For those who want more, the article concludes with pointers to great resources.

Device Independence

The most basic component of flexible design is device independence, in which access to content is not contingent on the device or method used. Device independence allows for customized display of content, with different designs for different devices or no design whatsoever—Google doesn’t give a hoot about tiled backgrounds, and neither does your web-enabled air conditioner!

The basis of device independence is the separation of content and presentation, where content is divorced from presentation details such as color, font, and dimensions. To design for device independence, all content and functional elements must be coded using structural HTML as in Listing 1, and all presentation details must be coded using CSS as in Listing 2 (see Example 1).

Listing 1 Structural HTML for content.

<body>

<div id="content">

<h1>The Swarm</h1>

<p>We will now, so as to draw more closely to nature, consider the different episodes of the swarm as they come to pass in an ordinary hive, which is ten or twenty times more populous than an observation one, and leaves the bees entirely free and untrammeled.</p>

<p>Here, then, they have shaken off the torpor of winter. The queen started laying again in the very first days of February, and the workers have flocked to the willows and nut-trees, gorse and violets, anemones and lungworts. Then spring invades the earth, and cellar and stream with honey and pollen...</p>

</div>

<div id="navigation">

<ul>
<li><a href="#">On the Threshold of the Hive</a></li>
<li><a href="#">The Swarm</a></li>
<li><a href="#">The Foundation of the City</a></li>
<li><a href="#">The Life of the Bee</a></li>
<li><a href="#">The Young Queens</a></li>
<li><a href="#">The Nuptial Flight</a></li>
<li><a href="#">The Massacre of the Males</a></li>
<li><a href="#">The Progress of the Race</a></li>
<li><a href="#">Appendix</a></li>
</ul>

</div>

</body>

Listing 2 CSS for presentation.

body { font: 100%/1.5em Georgia, serif; }

#content
{
    width: 60%;
    float: left;
}

#navigation
{
    width: 40%;
    float: right;
}

h1 { font: bold 1.4em Verdana, sans-serif; }

#navigation ul { font: .8em/1.6em Verdana, sans-serif; }
Figure 1

Figure 1

When content is unfettered by formatting, not only can users make choices about how to access pages; designers can make choices about how to present content. For example, we no longer need to design pages that display well both onscreen and printed. Instead, we can use style sheets to tailor our designs for different contexts, including printing. Here, the CSS is adapted for printing, with print fonts taking the place of screen fonts (changes marked in bold) and with the navigation links hidden (see Example 2):

body { font: 100%/1.5em "Times New Roman", serif; }

#navigation { display: none; }

h1 { font: bold 1.4em Arial, sans-serif; }
Figure 2

Figure 2

Liquid Layouts

The second and most visible characteristic of flexible design is liquid layouts: pages that expand and collapse with the browser window. Liquid layouts are more versatile than fixed layouts, in which pages are confined to a certain width, as are the elements on the page. With fixed-width layouts, pages are sometimes wider than the browser window, forcing users to scroll horizontally to see the contents of the page. On the other hand, pages designed using liquid layouts adapt to the browser window. Well-designed liquid layouts also adapt more gracefully than fixed layouts to user modifications, such as enlarged text.

Liquid layouts can be accomplished in a number of ways. The most common method is to use percentages to define the width of elements on the page, such as a text column and navigation bar. Example 1 uses percentages for the content block and the navigation block—return to that example and resize your browser window to see how the page fares at different window widths.

Scalable Type

When it comes to type, size matters. Large type isn’t necessarily a problem, but small type can be difficult or impossible to read. But one person’s "small" is another’s "just right," and with this conundrum we arrive at the third component of flexible design: scalable type. With scalable type, we make decisions about type size that are based on user defaults, and that adapt to user modifications.

Scalable type begins with the user-defined default setting. Honor this default by setting the overall type size to 100%, and using a proportional measure for line-height (shown in bold), so that the distance between lines of text scales relative to the type size:

body { font: 100%/1.5em Georgia, serif; }

Then size other text elements relative to the default setting. Many designers use the "em" measurement to size text, but keywords and percentages also work (again, notice the settings in bold):

h1 { font: bold 1.4em Verdana, sans-serif; }

#navigation ul { font: .8em/1.6em Verdana, sans-serif; }

To see scalable type in action, revisit Example 1 and adjust your text zoom.

Resources

To learn more about the three basic attributes of flexible layouts, check out these sources:

In case you prefer one-stop shopping, Dan Cederholm covers all three of these topics in his book, Bulletproof Web Design.