RSS feed

Squidoo Lens


The Zen of CSS Design Review: The Best of Both Worlds

From what I’ve found most web-design books fall into one of two camps:

Those that focus on code.

These books go into detail about how to put together the “guts” of your website (which is very important). When it comes to books on JavaScript, PHP, and other programming languages, I don’t really expect a bunch of stunning looking designs, and discussing the graphic design side of web-design would just be off-topic. However in a CSS book, or more general web-design book those things are quite appropriate.

Those that focus on visual design.

These books may be full of gorgeous examples of websites, with little or no explanation of how the design was accomplished from a coding perspective. Some of these books discuss how to approach web-design from a graphic design stand point, but others are more a gallery of websites than anything.

Now, the Zen of CSS Design by Dave Shea and Molly e. holzschlag is the best of both worlds.

This book is actually a companion for a quite well-known website, the premise of which was to have many designers create unique style-sheets for the same HTML page.
It actually does have quite a few great examples of design.

Visit the CSS Zen Garden

The book selects some of these designs to focus on, and uses them as examples of different ways to approach web-design, some of which are quite off-beat, but effective.
Both various elements of graphic design (such as color, texture, how to lead the eye etc…), and typography are discussed as is how different effects were created with CSS code.

IE6 Goodies

Your site doesn’t have to look the same in every browser.

Internet Explorer 6 has been the bane of many a web-designer’s existence. One of my favorite CSS Zen Garden designs takes advantage of IE6’s quirks. The result is a design that looks completely different in IE6 than in other browsers. So I’m glad that this design (called Gemination) was one of the designs selected to be in the book, and that how the designer accomplished getting it to look like a whole different design in IE6 is detailed. It is quite typical for designers to try very hard to make sure their site looks as close to identical as possible in every browser as they can, but this design shows that going in completely the opposite direction can work, and quite well.

You can see the Gemination design here

If you want to see how this site looks in various versions of IE I recommend getting IETester if you don’t all ready have it

Learn Basic CSS First

This book is not meant to teach basic CSS, and there’s a lot of things in it that will in all likelihood not make sense if you don’t all ready know some CSS. So if you haven’t started learning CSS all ready, get the basics down, and then dive into this book.