Looking back at CSS Nose Garden

I can’t believe it’s been 10 years since the CSS Zen Garden project started.  For those of you who don’t know about the project, this was an effort to push get folks to separate design from form on the web and to get folks to push the limits of CSS.

Around the same time, my confidence in my CSS skills was growing. I knew the importance of semantic and accessible web development, and this project was a perfect venue to test my skills.

I decided to create an entry

I had two goals for my entry: (1) to make it an elastic design, and (2) to make it  funny.

Elastic design was an effort to move away from pixel definitions and using relative EM units.  This allowed the entire design, including layout, to scale when you zoomed in and zoomed out and allowed for greater accessibility at a time when browsers had less control over scaling.  At that point in time, pretty much the only folks using EM units and attempting to do elastic design were the folks who were focusing on semantic and accessible web design.

The part about making the design funny was just to make it a little more interesting to me as I built the assets.  Since it was personal project, I wanted to satisfy the goofball inside of me. Oh, and yes, I find nose picking funny.

Check out a live copy of the project

The project turned out to be challenging

Getting the design to look exactly the same across all the supported browsers turned out to be complicated due to it being my first attempt at an elastic layout and browser testing in the lack of consistent browser support.  When I got my design to work across all the browsers, I was relieved and felt I had accomplished my goal but since I wasn’t out to prove anything to anybody, I never submitted my work.  A few months passed and remembered to make my submission, but by this time, IE6 had come out and my design shifted a little.  Whenever I’d fix the issue in IE6, it would break in IE5. I’m not sure if I ever fixed all the bugs, but I do know that I never submitted the entry.    In retrospect, I probably would have been fine if submitting the entry, but it was a time when I expected the designs to look exactly the same across browsers and it was right before I learned about early IE hacks.

Screenshots