Tony Dewan

Details

In reviewing the CSS Zen Garden designs, we noticed that official designs were either strong aesthetically or technically complex. We decided that focusing on both a unified aesthetic and a technically difficult concept was the way to go. We also decided that a strong submission should tell a story. The content of the Zen Garden lent itself to a narrative of transition from darkness to light. So we settled on a concept where the user visually creates this transition whilst scrolling through the content.

Story

We spent quite a bit of time brainstorming on the elements of the design, and how they might serve the narrative, and it took several iterations before we were happy with both the meaning and aesthetic value of the design elements. In the meantime, we worked on solving the technical problems we knew we would encounter. So, what kind of problems?

Well, there were some difficult positioning issues inherent in the design. However, the most notable thing was that everything just plain exploded in IE6. This was of course due to inadequate CSS and 24 bit PNG support. I won't go into to much detail about how we overcame these issues, as Chris has written extensively on the topic already. Suffice it to say, we ultimately ended up creating a different version of the design for IE6. IF you don't have access to IE6, you can see screenshots of the IE6 version here.

Why?

So, the CSS Zen Garden was 4 years old when we created our design, and over 5 when we finally submitted it. Everyone already knows that CSS is the way to go. So, why the heck even bother? Well, to be completely honest, it was an assignment. We both had extensive experience in client and server side development at the time, and realized that the only way to really get something out of it was to challenge ourselves. So, we resolved to make the strongest submission we could, both aesthetically and technically.