We have often said in the pages of this magazine that some books carry with them the Zeitgeist of their era. Examples are Bruce Tate’s “Beyond Java,” Joe Armstrong’s “Programming Erlang,” and Toby Segaran’s “Programming Collective Intelligence.” Such books have a tremendous impact upon publication, freezing in words not only a valuable body of knowledge, but also the spirit and promise of a new direction for the industry. Even if the APIs they describe become obsolete over time (which is mainly unavoidable), they remain as hallmarks of an era, valuable witnesses of the preoccupations and needs of practitioners at the time of their publication.
This month we will review another of those books, “Transcending CSS: The Fine Art of Web Design” by Andy Clarke, published in 2006 by New Riders. Those were the times of Web 2.0, a rebirth from the ashes of the excesses of the dot-com boom of the previous decade. A moment to start anew, to apply the lessons learned, and to rebuild a new Web.
In those days, the state of the Web was not pretty; Internet Explorer 6 was already showing signs of decadence, yet it was far from being a priority for Ballmer’s Microsoft. Its support for standards was mediocre at best, and upcoming products such as Apple Safari (whose WebKit rendering engine was a fork of KDE’s Konqueror) and Mozilla Firefox (the most visible result of the “open-sourcing” of Netscape’s code in 1998) were showing that alternatives were not only possible but also desirable.
Those were the times of Prototype.js, script.aculo.us, and jQuery. Jesse James Garrett had just given the Ajax name to “a new approach to web applications.” Peter-Paul Koch (also known as “PPK”) was busy explaining how Quirks Mode worked. New cross-platform JavaScript frameworks were helping developers work around the quirks of IE 6, unifying experiences and reducing development times. Frameworks like Ruby on Rails or Django were breaking waves, enabling unprecedented productivity and making the Web a fantastic place to make things again.
But in terms of design, who am I kidding; many of us still used the <TABLE> tag for the layout of our pages. I know it very well; I was one of those wannabe designers stuck in the past. In our defense, Your Honor, I will argue that those who started designing web experiences in 1997, like me, well, we did not have many tools at our disposal back then when Netscape 3.0 was still around. So, well, tables it was. Mea culpa: for a long time, CSS was, for me, just a fancy way to remove <FONT> tags and ALIGN= attributes on paragraphs. Ouch.
Fast-forward 10 years, and in 2007 the landscape was different and much more promising. We were at the point where CSS 3.0 was starting to become widely available on browsers, which meant we could leave behind tables for layout altogether. And Andy Clarke’s book was precisely the book that showed me how.
Andy was part of a larger group of web designers who started understanding the power of standards to make better websites. One of the most striking examples of that era was, without any doubt, Dave Shea’s CSS Zen Garden. Maybe some of the readers of this piece will remember; it was a website whose premise was to showcase what CSS was capable of. Every link would load a different CSS stylesheet, always applied to the same standards-compliant HTML5 website. CSS Zen Garden is still online at the time of this writing, and you can visit it just like fifteen years ago. Viewing the HTML source of the site shows a clean construction of intertwined <DIV>, <UL>, and <SECTION> tags, neatly woven into one another, describing the hierarchy and structure of a web page.
Not its look and feel; its structure. The core seed of progressive enhancement as a design principle was laid out for the first time.
This is a fundamental concept: it felt like we were beginning to understand what this HTML thing was helpful for, finally. CSS was not only able to provide font-family or align information, but also to lay out those elements on a page, next to one another, on top of another, fixed on a specific position, or flowing as the user scrolled. The possibilities were endless.
Andy Clarke identified a significant problem with CSS, however. Designers are not developers, and CSS as a language was not a designer-friendly technology. He takes time to explain the meaning, the inner working, and the logic of CSS to an audience he knows very well; the book seems to be written for him, primarily, or at least for a younger version of himself. Such is the working progress that leads to many masterpieces, and this is no exception.
“Transcending CSS” is another work of art comparable to “Designing Interfaces” by Jenifer Tidwell, which we reviewed precisely one year ago. The book is profusely illustrated and delightfully printed.
Dave Shea’s work led to the 2005 book “The Zen of CSS Design” written together with Molly Holzschlag… Molly edited and wrote the foreword to Andy’s book, and Dave wrote the preface. We are all in good company here.
The evolution of CSS did not stop after the book’s release; far from that. “Transcending CSS” was released the same year as the iPhone, an invention that would put a fully-working web browser in people’s pockets for the first time. In 2010, Ethan Marcotte coined the term “Responsive Web Design” to describe a technique consisting of using media queries and rules to select different stylesheets depending on the viewport size. The stage was set to create beautiful, flexible, and accessible user interfaces for any device, from the largest of TVs to the smallest of smartphones.
Andy Clarke revisited his book in 2019, and this new edition is available for everyone to read online. If your work involves generating HTML content of any kind in any way, you owe it to yourself to take the time and dive into the mind of a man who can fight against King Kong and save the world. And then read everything else he has written; you will thank me later.
(And I promise I have not used a single <TABLE> to lay out any HTML page since I read this book.)
Cover photo by the author.
