CSS Zen Garden Submission

The design has become official! See the new blog post for more.

The CSS Zen Garden is a gallery of all that is good and great in CSS and XHTML web design. It was started by Dave Shea to showcase the potential of CSS based design. CSS based design separates the content (text, images, information) from the presentation (layout and style) so that the content can be repurposed for any device or browser.

I finaly got around to my own submission: The design is called Leggo My Ego. The 'Leggo' was inspiried by those great Danish blocks of plastic. Lego comes from the Danish 'leg godt', which means to 'play well'. It seemed apt for the 'Garden. It also doubles as a prompt to proprietory mark-up and the browser-specific tools that used to be rife in web design before the Web Standards Project helped stop the browser wars. 'Leggo My Ego' could always be 'Support Standards' but it just doesn't sound as good.

Leggo My Ego has not been seen or approved yet but you can see the example.

I used some of my favourite themes: Lego, pixel graphics and multi-layered ideas expressed in images. Lego was always a childhood favourite. Hours were spent creating castles and forts from the little bricks on the floor of my Grandfatherís house in Singapore. My brother dutifully sorted all the bricks in to piles and we kept building until we ran out. Moving the idea of Lego to pixels was one of my earliest projects and with little commercial use for the concept, a Zen Garden submission seemed like the perfect chance to get the bricks out.

One of the ideas behind the design is that knowledge is like Lego: Small bits of information that we pick up and manipulate. Design is the skill with which we use our knowledge. Leggo My Ego represents life long learning, picking up bits of knowledge and reforming them to apply to different situations. The constraint of working with set bits or bricks is similar to designing with web standards and accessibility recommendations. It forces designers to be creative within certain rules that maximise the usefulness of the end product. Not only that, but it leads designers to solutions and ideas that use the constraints themselves creatively. Interweaving the good design standards into the final creative output, often with surprising and excellent results.

The colours and theme of the composition came from the time of year. Autumn colours as the days get shorter and the breeze turns cooler. Itís the time of year of fresh, crisp morning sunrises in clear skies. A time of rich autumnal colours and the cosy warmth of our homes. Thereís something warm but sharp about this time of year which I was trying to capture in Leggo My Ego. Dave Shea has stated that its time to drop the pseudo-oriental / Zen theme from submissions but with my Chinese-ness (probably not a word) close to my heart I couldnít resist at least a hint of it in the design. Itís barely noticeable but the garden could be seen as Zen-like. However, itís disguised in the hard pixels and lines and very far from the tranquillity that other excellent designers have chosen to express the idea.

The design called for some radical re-arranging of the document structure. Elements were hidden and replaced with images that display outside the actual order of the mark-up. I didnít want to over-use the CSS to get clever effects or a unique layout. In fact the CSS is minimal. The styling was purely an expression of the composition and the images, not a showcase of coding by itself.

In the end it was fun and I guess thatís the idea. Designing with CSS without barriers always is and the Web is a much better place because of sites like the CSS Zen Garden. I heartily recommend it to you if you havenít already been there and loved it.

• Leggo My Ego

More articles