Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

Elastic Lawn: Visual problem solving sometimes goes further than skin-deep

Patrick Griffith, Designer

www.csszengarden.com/063

[View full size image]

A SIMPLE DESIGN AGENDA SPARKED Patrick Griffith's imagination: try a new layout technique, and let it define the graphical elements. It didn't take Griffith long to discover that this bottom-up approach can result in a chaotic and unstructured design process. Starting with a pencil and sketchpad, he quickly moved straight to CSS as a way of working out most ideas for Elastic Lawn. Images were added as the design came together.

There is no 'right' way to build a CSS layout. Some designers build all of their ideas in a graphical editor like Macromedia Fireworks before committing to code. Others shape a site using CSS and build graphics for it as they go. When you consider the wide variety of code editors and graphics utilities, the possibilities for arriving at the final result are limitless.

Paper or Plastic?

When building a site, the designer often chooses between two layout techniques: Either a specific pixel width is set for the content area and the site is built within the constraints of that width, or the site is allowed to fill up the entire browser window, unconstrained.

Each technique has various names: The former is called fixed width, constrained, or ice layout. The latter is called variable width, full screen, or liquid layout. Whatever your choice of naming convention, these are the two fundamental layout techniques that today's Web sites are built around.

Each has its pros and cons. One of the more frustrating issues graphic designers face on the Web is that it provides a variable-sized canvas; when designing for print, you always know in advance the size and proportions of the final work. On the Web, the site visitor could be using a non-maximized browser window at a resolution of 640 by 480 pixels, a full-screen browser window at 2048 by 1536, or anything in between.

Fixed Width

Fixed width allows a measure of control over the final canvas size by constraining the layout's width to a specific pixel value. This is perfect for instances where precise control over proportions is required for images, which don't scale or change width, and type, which does, but unpredictably. But constraining to a specific size means that users running a smaller browser window will get a horizontal scroll bar because the layout extends beyond the window's edges (FIGURES 1 and 2). Users running a larger browser window will see lots of useless empty space.

Variable Width

Variable-width layouts, on the other hand, fill the entire window regardless of resolution (FIGURES 3 and 4). This is theoretically an ideal solution for handling differing window sizes, but it's never easy to balance the vast difference between a 600 pixel width and a 200 pixel width, or any size in between. Frequently the compromise results in a design for the lowest common denominator, allowing scaling within larger windows but not optimally filling the extra space with other visual elements. Designer Cameron Adams has experimented with ways around this problem using JavaScript (www.themainblue.com/experiment/Resolution-Layout/) but pure CSS solutions are usually limited.

Liquid layouts are also problematic for proportions, which become completely unreliable as widths scale. A 1.6:1 aspect ratio between a photo and a colored area beside it will stretch to 2:1, 3:1, and beyond as the window scales larger horizontally. Images don't stretch, so the only way to deal with this is to design with it in mind, and avoid ultra-precise proportion requirements.

Elastic Design

All this talk about layout techniques, but isn't this supposed to be a special-effects chapter? It is: Elastic Lawn demonstrates an effect called 'Elastic Design' which is neither fixed nor variable-width, but instead a blend of the two.

The theory behind Griffith's combination technique is logical. Type is allowed to scale larger and smaller within a browser when specified using relative units like % or em. Thus, if the measurements of various block-level elements are managed using the same units, shouldn't the design itself be scalable? This is what elastic design allows.

The following code is a small sample showing a few of the relative units Griffith applied to Elastic Lawn. Widths, padding, margins, and all other specific measurements are given em unit values instead of px, which allow them to scale along with the font size. FIGURES 5-7 show how Elastic Lawn's proportions negotiate the changing size of a browser window.

body {
padding: 0 0 6em 0;
}
#container {
width: 48em;
}
#preamble, #supportingText {
width: 32em;
margin-left: 16em;
}

NoteAspect ratio refers to the comparative sizes of two objects. A ratio of 1.6:1 means that if the first object is 1.6 inches wide, the second is 1 inch wide.

NoteGriffith wrote an article about his Elastic Design technique that appeared on the online periodical A List Apart in January 2004 (www.alistapart.com/articles/elastic).

Is it that easy? Can you just apply em units to various width and height attributes and be done with it? Not in general. Because images are locked into a specific resolution, there is no way to gracefully scale them along with the text and proportions. A shift to elastic design requires a slight readjustment of the design process.

There are two useful methods for making fixed-width images work in an elastic context. The first involves repeating background images; the second involves clipping.

Repetition

By default, applying a background image using CSS causes it to repeat horizontally and vertically across the entire element. Most times it's beneficial to turn off one or both, but elastic design works best if the layout is designed for repetitionwhich ensures that no matter how large an element grows, the background will keep repeating to fill the extended area instead of cutting off at the end of the image.

Elastic Lawn fills the entire body element with a repeating green grass tile background image. The #linkList2, #preamble, and #supportingText elements are filled with shaded variants of the same tile (FIGURE 8). They combine to create the effect of a green background overlaid with shaded, transparent columns that contain the Zen Garden text and links.

It would be easy to leave each column as a standard boxy, rectangle shape, but Griffith extended the elastic design concept by capping them with rounded corners that scale to reveal more or less of the columns if the Elastic effect is invoked by scaling the font size.

Not just any image is repeatable, though. Unless all four edges of the graphic are exactly the same color, special attention needs to be paid to the seams that appear. FIGURE 9 shows a small tile of grass that hasn't been processed; you can see horizontal and vertical lines where the edges touch as the image repeats.

You can avoid this with a bit of adjustment in Adobe Photoshop before the tile is saved. Using the Offset filter (Filter > Other > Offset), you can specify values to push the image off the canvas and wrap it around the other side, which nicely highlights the seam that needs fixing.

Chapter 4 to smudge and paint your way through, or any other method appropriate for the image you're adjusting.

Cropping

Citing Haiko Hebig's weblog (www.hebig.org) as an example in his article "Elastic Design" (FIGURES 14 and 15), Griffith mentions that the other approach to elasticity lies in using an image that allows variable cropping. More or less of the image is revealed as space is available.

There are two easy ways of creating image-based elasticity this way: by applying overflow: hidden to an image's container that has been given a percentage width, or applying a background image to an element with a variable width. An image normally 600 pixels wide might be nested inside a div:

<div class="wrapper">
<img src="/image/library/english/10177_skyline.jpg" width="600" height="200"   />
</div>

And then if the div were given an em measurement for its width, hiding the rest of the image could be hidden with the overflow property:

#wrapper {
width: 10em;
overflow: hidden;
}

Alternatively, it may just be applied directly to the div as a background image:

#wrapper {
width: 10em;
background: url(/image/library/english/10177_skyline.jpg) no-repeat;
}

If the image is repeatable, you can easily drop the no-repeat value and allow it to tile when #wrapper expands beyond the original image's dimensions.

Bouncing Forward

Elastic design is a compelling new method of exploring the boundaries of Web layouts, but be forewarned: Because the proportions of a design change independently of the browser window, the design may potentially grow larger than the window and get cut off, force a scroll bar, or do other unexpected things. Use of the max-width property may alleviate this:

#container {
max-width: 700px;
}

Microsoft Internet Explorer 6 for Windows doesn't support max-width, though. Workarounds exist for this limitation, but they're not perfect. Troublesome quirks may discourage experimentation, but sometimes trying new things simply results in varying success; this isn't a bad thing.

Pushing the Web forward with interesting new techniques involves success and failure, which simply means there's a balance to be struck. Elastic Lawn is a great example of how one designer's experimentation can lead to beneficial results for others.

Tip

Svend Tofte has a nonstandard, but workable fix for Internet Explorer 6's lack of max-width support (www.svendtofte.com/code/max_width_in_ie).