Planting the Seed

In late 2002, Zen Garden creator Dave Shea started thinking about this problem. How could those who were capable of producing real beauty with CSS be inspired by examples that were less than beautiful? Because he had a background in both coding and visual arts, Shea recognized the potential of CSS as a design language. And he realized that the people who should be using it weren't.

An idea began germinating: If only there were a central repository of great CSS design work. Simply aggregating what existed clearly wasn't going to work; not much did exist. Encouraging designers to create new, great-looking CSS work was going to be the key to growing this idea. The seed was planted for a new project.

Note

It's important to note that Web standards aren't standards in the traditional sense of the word; compliance is not mandatory, and the W3C itself merely labels them as "Recommendations." However, many people recognize them as standards in practice, if not in name. For more on the naming convention, see What is a Web Standard at (www.webstandards.org/buzz/archive/2004_10.html#a000463).

Influences

In an article written in 2002, Web Standards Project cofounder Jeffrey Zeldman implored those who understood the benefits of designing with Web standards to quit spending their time selling others on the benefits, and instead to just start using them. This was the best way to demonstrate the advantages, and "Show, don't sell" became the mantra of the project. Zeldman went on to write the definitive guide on the subject, Designing with Web Standards (New Riders, 2003).

Note

You can find Zeldman's original article at The Daily Report (www.zeldman.com/daily/0802c.html#Evangeline).

A project called Daily CSS Fun was created by Web developer Chris Casciano in 2002 (FIGURE 2). The idea was that over the course of a month, Casciano would release a new style sheet every day that would modify the underlying HTML in wildly different ways. He made no claim of being a graphic designer, but the results were compelling for their unique insight into what was possible by relying on CSS alone for layout purposes.

Figure 2. Example style sheets from Daily CSS Fun.

Due to the continued popularity of Netscape Navigator 4, a browser with insufficient CSS support, these lessons were nice in theory but far from practical for everyday Web use. All that started going away as the market share of Netscape Navigator 4 plummeted, and by 2003 that browser barely registered on the radar anymore. It was time to move on.

Note

See Daily CSS Fun at www.placenamehere.com/neuralustmirror/200202.

Early Thinking

The ideas for the Zen Garden coalesced, and in May 2003 Shea launched the result on his personal site, www.mezzoblue.com, and then quickly moved it to the domain where it now lives, www.csszengarden.com.

In late 2002, Shea had already begun creating preliminary prototypes for the Zen Garden that switched between four style sheets, each themed for one of the four ancient elementswood, water, fire, and wind. The idea hadn't been fully developed at the time, and images weren't a large part of the equation. As pictured in FIGURES 36, the first Zen Garden drafts were far from inspiring.

Figure 3. Pre-Zen Garden prototype, Earth.

Figure 4. Pre-Zen Garden prototype, Fire.

Figure 5. Pre-Zen Garden prototype, Wind.

Figure 6. Pre-Zen Garden prototype, Water.

The designs were boring because they lacked much imagery. Background images were added by making use of the background-image property. Foreground images, on the other hand, were not possible. If the img tag were used, there wouldn't be any flexibility; you'd be confined to a single set of images and continuously have to work around those. And background images alone wouldn't cut it, because design work often relies on imagery that is emphasized alongside text, rather than behind it within a piece. Clearly, background images were only a half-solution.

The workaround for the imagery problem clicked when Douglas Bowman published his now-infamous article "Using Background-Image to Replace Text". After this method was publicized, the final key had clicked into place: Foreground images could easily be placed by hooking into the many text elements within a page and swapping them with graphical equivalents. CSS and a little bit of extra, customizable markup allowed the replacement of inline textual items with background imagessimilarly to how an img tag with proper alt text behaves.

Note

If you read Bowman's original article at Stopdesign (www.stopdesign.com/articles/replace_text), you'll notice it mentions that the technique it advocates has some basic accessibility problems. This is the same technique used for many Zen Garden designs. We'll cover this technique in more detail in Chapter 4.

In April 2003, planning for the Zen Garden began in earnest. A single HTML file was built that would serve as a master, and five initial designs were created to launch with the site (FIGURES 711).

Figure 7. #001, Tranquille.

Figure 8. #002, Salmon Cream Cheese.

Figure 9. #003, Stormweather.

Figure 10. #004, arch4.20.

Figure 11. #005, Blood Lust.

Note

Since the Zen Garden's HTML file would be impossible to change once submissions started coming in, extra time was spent ensuring that the markup and wording of the written text was acceptable, and that there were enough unique class and id elements for the style to modify. After the launch, additional markup considerations became evident that would have been impossible to predict in advancewe'll cover this a bit later in the chapter.