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


Patrick Griffith, Designer

www.csszengarden.com/063

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.

Figure 1. The fixed-width layout of this site by Kevin Davis (www.alazanto.org) looks great at 1024 by 768 ...


Figure 2. ... but you'll see a scroll bar in a smaller window.


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.

Figure 3. With a variable-width layout such as the one for Digital Web Magazine (www.digital-web.com), pages look great at 1024 by 768...


Figure 4. ... and they also look great in a smaller window; notice that there's no scroll bar.


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.

Figure 5. A smaller font size means a narrower main column.


Figure 6. A slightly larger font size also increases the width of the main window.


Figure 7. An even larger font size increases the main window's width, and the margin above the yellow title text is enlarged.


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

Note

Aspect 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.


Note

Griffith 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.

Figure 8. The grass tiles of Elastic Lawnbright green for the body background, brown for the sidebar, and dark green for the main body area.


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.

Figure 9. Repeating tile with visible seams.


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.

FIGURES 10-12 show the process of covering it with sampled bits of the surrounding grass, and FIGURE 13 shows the results. How you do this is up to youwhether you use the Clone Stamp tool or the Healing Brush to clone pieces of the nonseamed areas to cover the seams, the painting techniques discussed in Chapter 4 to smudge and paint your way through, or any other method appropriate for the image you're adjusting.

Figure 10. One tile, offset and showing a tonal discrepancy that creates a seam where edges meet.


Figure 11. Cloning surrounding areas covers the seam.


Figure 12. The completed tile.


Figure 13. The hard seams are much less obvious.


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.

Figure 14. In Haiko Hebig's weblog, more or less of the left-hand photograph is revealed depending on the amount of space available. Here is the image at a window resolution of 800 by 600.


Figure 15. The same photograph at a window resolution of 1100 by 600. Note how it is proportionately wider.


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 >    <img src="/books/3/82/1/html/2/skyline.jpg" width="600" height="200" alt="Skyline" /> </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(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).




    The Zen of CSS Design(c) Visual Enlightenment for the Web
    The Zen of CSS Design(c) Visual Enlightenment for the Web
    ISBN: N/A
    EAN: N/A
    Year: 2005
    Pages: 117

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net