I received a copy of The Zen of CSS Design: Visual Enlightenment for the Web from the authors, Dave Shea and Molly Holzschlag, and have been getting an intimate peek into the world of web page design the last few weeks.
This is a beautiful book, with an elegant and clever layout, and featuring many examples of the famous CSS Zen Garden. With each design, Dave and Molly have focused on one specific element and used this as a basis for whatever is the topic of that chapter: Imagery, Layout, Typography, and so on.
“Zen of CSS Design” isn’t a book for beginners, as it doesn’t cover the basics of CSS or HTML. It’s a book for someone who has worked with both and wants to take their web design beyond the basics–to explore, but to do so in a way that is cross-browser compatible, accessible, and that validates.
For instance, chapter 4 provides techniques to replace the text of a header element with a graphic, but still have the text accessible to screen readers, and search engines–something that was new to me. In fact, I thought I knew CSS quite well, but I found out there’s a whole new level of tweaking I wasn’t aware of, primarily because I don’t keep up with the many design and CSS mailing lists. Luckily Dave and Molly do, and have gleaned the best of it in the pages.
As for my design, I’ve finally been inspired to clean up my stylesheet and use the ID and CLASS selectors correctly. I’ve also been fairly weak with fonts, falling back on Verdana or Arial most times. In the book there’s a whole chapter on typography, and I have now discovered georgia, which will be appearing in my pages in the days to come. This will make Joe Clark happy.
An interesting coincidence: this week Dave wrote a post about accessibility and the “aaa” Bobby rating that’s shown in the CSS Zen Garden HTML template. A group of Italian designers had challenged this rating because some of the designs do fail with accessibility, primarily through the use of color. However, as he pointed out, in the post, this is addressed in the book, which includes a decent discussion on all the nuances that can make a page less than accessible. There’s more to accessibility than labeling your images and using headers correctly; for instance, one suggestion is that text in hypertext links should be able to stand alone without the context of the surrounding text. Something that doesn’t work very well within a weblog.
After my first glance through of the book, I was inspired to try my hand with the CSS Zen Garden template, using my own Floating Clouds as model for the design. You can see the result in this page*.
As you’ll see, I’m using Georgia, and it is a pretty font. I’m also using the Floating Clouds open page body blocks and have left the sidebar items unconstrained. Rather than force all of the items into a tight, squishy box, the proximity of the elements serves as grouping — providing a balance while still allowing an openness in the design. Well, at least that’s my philosophy.
I’ve also managed to incorporate my background switching code, and do it while not touching Dave’s HTML — a requirement for CSS Zen Garden. I did this by using an import on the PHP file as the first line in the CSS file:
import “photographs.php”
The header file returned by the PHP program sets the result to CSS:
<?php
// declare the output of the file as CSS
header(’Content-type: text/css’);
?>
In addition, I also use the CSS3 “opacity” attribute for the quick summary element. This is supported in Safari and Firefox, and for those browsers where it’s not supported, the element is a solid white. Since the text is just as readable with both, and the solid white doesn’t disrupt the design, it seemed a good use of ‘edgy’ CSS. It also validates.
It’s a rather quiet design, but very readable–and at least it doesn’t hurt when you look at it, as can happen in this rather humorous look at the good old days of web design (note, lots of animated gifs in the page that opens from this link).
“The Zen of CSS Design” has been an eye opener for me and I’ll never approach web page design in the same way, again. I can strongly recommend this book — it’s definitely worth breaking into the piggy bank to buy.
*Note: I am not a designer**
**Further note: whole-hearted agreement with this statement will result in my hunting down and hacking your site. Consider the CSS Zen Garden entry I linked to. Now, think how your site would look with blooming peonies in the background.