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

Designing For Flexibility

From the beginning, one of the primary goals of the markup was maximum flexibility to allow for design variation. It was essential for the Zen Garden to provide as many extra markup hooks as possible so that each individual element on the page could be modified and adjusted as necessary. Without the extra bulk, selecting specific elements of the page is impossible. Descendant selectors allow generic selections like so:

#quickSummary p {
color: red;
}

But with that style, all p elements within #quickSummary turn red. What if you wanted to modify only the second paragraph within #quickSummary? Without a unique class on each paragraph inside it, the only way to accomplish that is with advanced CSS2 selectors:

#quickSummary > p + p {
color: red;
}
#quickSummary > p + p + p {
color: inherit;
}

This is about to get confusing: The first rule is a combination of child and adjacent selectors that says, roughly, "Apply this rule to any paragraph element that is immediately preceded by another paragraph element that is also a child of #quickSummary. Which means all paragraphs within #quickSummary except the first one in this case, so the second rule overrides it by going an extra step and undoing the rule to any paragraphs that follow two other preceding paragraphs in a row, the first of which must be a child of #quickSummary, which means all paragraphs are reset except for the first two.

Tip

Find more on CSS2 selectors at W3C's "5 Selectors" (www.w3.org/TR/CSS21/selectorl).

Whew! That's a mess of confusing logic for the simple sake of element selection; thankfully, CSS3 introduces a much easier way to do it:

#quickSummary p:nth-child(2) {
color: red;
}

Tip

Find more on CSS3 Selectors at W3C's "Selectors" (www.w3.org/TR/css3-selectors).

But after all that fun, there's one more thing you need to know: Neither of these methods works in Internet Explorer! You can pretty much forget they exist for now, unless you have a pressing need to use a style that much of your audience can't see; Internet Explorer use may change over the next few years, but at the time of publication its market share was hovering around 90 percent.

This talk of advanced CSS selectors has been a rather long way of making a simple point. It should be obvious why the extra classes were necessary, if maximum flexibility was a major design goal. The reasoning for the extra span elements was similar: Providing interior elements for each paragraph on the page means extra elements available for styling.

Tip

A great tool for deciphering any complex CSS selector is the OPAL Group's SelectORacle (http://gallery.theopalgroup.com/selectoracle).

Image Replacement

The spans had a further purpose: image replacement. When the Zen Garden was built, a brand new method floating around the CSS design world was the idea that if you had a header (say an h3) and you wanted to replace the text in it with a typographically rich image, then you would need two elements surrounding the text. One would be the H3, the other a span.

By hiding the text within the span using a style rule like display: none, you were left with an H3 that you could apply a background image to, completing the illusion of a graphical header. Since each element on the Zen Garden has an inner span, the possibilities are wide open for this type of experimentation.

Why so much trouble when an img element would do just the same? Once again: flexibility. Swapping style sheets to dramatically alter the page just wouldn't be possible if images were hard-coded into the HTML. Image replacement has its own set of problems, though, which we'll talk about later in the book.

NoteWhat if flexibility is a design goal? Some projects do require flexible styling options, and a fairly frequent question is how one might maximize styling potential in their own markup.

The methods within the Zen Garden are a good start, provided they're used with discretion. We'd recommend starting with a set of very basic HTML elements to define your contentparagraphs, headers, lists, essentially. As necessary, add extra container divs in logical spots with unique ids, and if needed, appropriate and minimal classes applied to the elements they contain. The gratuitous spans of the Zen Garden are probably not necessary, and we'd recommend them only if there is a real need to do so.

Lighten Up

Some decisions were made according to the best knowledge available at the time. They required more markup than newer techniques that have come to light since, and it's not hard to see places where the bulk could be reduced in retrospect.

Since the launch of the Zen Garden, image-replacement techniques that don't require a span have become available, so most span elements in the markup are no longer necessary. And the extra classes aren't used in 98 percent of the designs submitted, so they're mostly redundant and unneeded. The list of empty divs and spans at the end of the document are useless except for the extra visual hooks they give a designer.

It's probable that these elements wouldn't make sense for other Web sites. They have a specific task on the Zen Garden: to allow for maximum flexibility. It's not necessary to account for such wildly varying designs on every site.

If you use the Zen Garden's HTML as a starting point in your own work (which you are allowed to do, with our blessing), keep in mind that a large goal of standards-based design is to eliminate unnecessary elements. Using the occasional div element to surround a logical group of elements is appropriate use; wrapping a span around every single paragraph and header on a page is overkill. We'll discuss structuring a document properly later in this chapter.