The Zen of CSS Design: Visual Enlightenment for the Web

The Zen of CSS Design: Visual Enlightenment for the Web

I can’t quite remember when I stumbled on the CSS Zen Garden web-site but I do remember thinking, “Why bother when you can just put all the image and colour code in the HTML”. I had done some HTML coding at work and had stumbled on a CSS file on the server, but all it had in it was just about every tag you can imagine, with just the font family being set. That wasn’t much help. I didn’t even know what the id and class selectors were in aid of. It was all just a mystery to me even though I knew about web-sites, ftp, javascript and of course HTML.

Then I read Jeffrey Zeldman’s book Designing with Web Standards and it all became clear. Being a programmer by trade I was interested in creating web-sites that conformed to a certain standard. It is no doubt all part of me being slightly obsessive about being organised both in my work and my personal life. Reading that book did make me see things completely differently. I, knew from past experience, that IE and Netscape would render pages differently, which is always a major headache. Do you create two sites for both browsers and then have to maintain both versions? I started to look at web pages and their design in a new light. I would almost constantly be checking the source code of sites to see if they were using cascading style sheets in any way. The number of web sites still using ‘font’ tags to define font families, sizes and colours is amazing.

The bottom line to this is that a web page designed with the structure and the content in the HTML file and the visual design in the CSS file will have a smaller total file size, will therefore load faster and should render the same across browsers. Of course Microshites® Internet Explorer doesn’t conform to the web standard and Opera has a few glitches but there are ways around these problems by using CSS hacks that you can find on the web.

With all this new found knowledge I viewed the CSS Zen Garden web-site differently. I was constantly amazed at how these designers had managed to create wonderful and completely diverse web-sites using the same HTML code.

The book describes how Dave created the web-site and how he carefully created the HTML code so that web designers had enough ‘hooks’ to latch style sheet elements on to. There would obviously be no chance to change the HTML at a later day once web designs had been received. The bulk of the book analyses submissions to the Zen Garden site and are de-constructed in chapters on design, layout, imagery, typography and special effects. Reading through the book I was constantly thinking, “So that’s how they did that!”, all these neat little tricks are pulled apart and dissected so that you can see how they work. I had kept a notebook at the side of me to note down web-sites to checkout but thankfully Dave Shea already has a book links page on his site mezzoblue.

Dave and Molly have to be congratulated on producing a book that is so understandable and easy to read. The publisher New Riders have done a wonderful job with the layout and design. But the book, and the web-site for that matter, couldn’t have been possible without the talented designers who took up the challenge in the first place.

It’s certainly given me the impetus to try to create a design myself and, if I think it’s worthy, you could be seeing my name under that <h2 class="select"></h3> tag.

  • Reviewed on Tuesday, 30 August 2005
  • Tagged with book review