The Zen of CSS Design

What is the beauty of CSS (Cascading Style Sheets) design? Check What are the benefits of using CSS? Check What do they mean by separating contents from presentations? Check Wow! How do they do that? Check The Zen of Design, Visual Enlightenment for the Web, by Dave Shea and Molly E. Holzschlag.

On May 8, 2003, the CSS Zen Garden website proves to the world the power of CSS-based design. Now the book is here to provide the thinking processes behind the works, and how designers take advantage of the powerful and flexible technology to produce complex visual presentations on the web. The heart and soul of the book lies in the deconstructions of thirty-six carefully selected submissions. These examples not only inspire us, but also support the design concepts and the layout techniques presented by the authors. The thirty-six pieces are arranged into six categories: the “Design” that makes our jaws drop; (Ballade); the “Layout” that makes us glance (prêt-à-porter); the “Imagery” that makes us wonder (What Lies Beneath); the “Typography” that makes us marvel (Blood Lust); the “Special Effects” that make us feel hungry (This is Cereal); the “Reconstruction” that makes us realize how coding could be easy and fun (Hedges).

The pleasurable and insightful reading section of the book is where the authors explore the design principles. The descriptive writing is clear, and the screenshots beside the texts help readers more easily visualize the materials. One of my favorite pieces is the psychological use of shapes behind Radu Darvas’s Zunflower. As explained in the text, “Circles are most frequently associated with feminine: warmth, comfort, sensuality, and love, and the extension of those associates… Triangles are thought to be masculine, expressing qualities such as strength, aggression, and dynamic motion” (57). Darvas uses triangles and circles to give his design a sense of harmony. The outcome is a “sensual image, one that is both masculine and feminine, and that creates a very memorable emotion” (57). Although the layout of Zunflower is minimal, the level of attention to detail makes it a perfect selection to showcase the striking visual design and the legible use of typography. I am only scratching the surface here. The book delves much deeper into essential design elements, such as the appropriate use of shadow, the influence of color, and the art of using pattern.

Beside the visual design aspects, the technical explanations behind the sites are impressive as well. To keep the writing clear and focused, the authors leave out CSS 101, and cover the important codes that crafted the visual presentations. For instance, some of the topics include the various implementations of FIR (Fahrner Image Replacement) techniques, the different layout methods (fixed, fluid, vertical, horizontal), the tricks to pull off curved edges, and the use of inheritance, layering, and child selectors of CSS.

The Zen of CSS Design opens with an introduction (pays homage to the Web Standards, explains the general rules of markups, and views the source codes of the set-in-stone Zen Garden’s XHTML file), and closes with sites’ reconstructions to provide readers hands-on experiences. Dave, Molly, and New Riders have published a book on web design that I would like to see more of. The perfect balance between visual and codes describes web design today. A website is no longer an adaptation of a print design or a piece of programming without images. Web design nowadays is the combination of both sides, in addition to many more considerations such as accessibility, usability, and compatibility. My appreciation goes out to not only Dave and Molly, but to anyone who has contributed to the Zen of CSS Garden project. Your work helps making the web a better, faster and prettier place to access information.