Transcending CSS: the fine art of web design by Andy Clarke is one of the best books about cascading style sheets (CSS) that I’ve read in a long time.
As a designer Andy Clarke has produced a book that’s far from the hundreds of other dull books on CSS which are packed full of dry code examples and pages and pages of text. This is a beautiful and colourful book, filled with hundreds of images, that takes a real-life approach to designing sites and writing accessible HTML and CSS code.
While this book isn’t aimed at beginners, it assumes that you have at least a good, working knowledge of XHTML and CSS, it is very easily read and if you’re looking to get into modern CSS layout methods then this book could be an inspirational introduction to the subject. Because of the design of the book it’s also more accessible than Jeffrey Zeldman’s excellent Designing with Web Standards, now in its second edition.
The book is organized into four main sections:
- Discovery
- Process
- Inspiration
- Transcendence
Discovery
In the first part of his book Andy Clarke introduces us to what he calls Transcendent CSS, that is code that looks to the future, building on current web standards to create accessible, cross-browser-compatible websites, rather than relying on outdated layout methods such as non-semantic tables.
He argues for web standards, acknowledges that not all browsers display the same design, advocates that web designers use all available CSS selectors and semantic code, use CSS3 where possible to look to the future, avoid using hacks and filters, and to use JavaScript and the DOM to plug any gaps in CSS.
One particularly useful exercise is where he takes real-life examples and shows how he would present these in XHTML, in a section entitled “translating meaning into markup”. His examples include a horse race, marathon runners, a taxi rank, books on a shelf, and a museum display of mediaeval helmets.
Process
Having set the scene over the first 100 pages (lots of pretty pictures on the way, so don’t worry!) Clarke explores a usable process for designing with web standards. It’s quite a good introduction to certain elements of information architecture, such as wireframing/grey-boxing and usability.
Taking the example of a design for Cookr! (his made-up recipe website) he adds mark-up to the design to show you how to best mark-up and organize the XHTML and CSS code. It’s a very visual and practical approach which is strengthened by excellent explanations of what he’s doing and why.
Inspiration
In the third part of the book Clarke moves away from code and gives us an insight into where he finds inspiration for website designs. And it’s not just from other websites but newspapers, magazines, buildings, streets … anywhere really.
This section offers a good introduction to grid and layout theory, and his advice about keeping a scrapbook of inspiration examples is really helpful, either a real scrapbook or something online like Flickr. He finishes off the section exploring why design is more than just creating attractive visuals.
Transcendence
In the final section Clarke brings it all together in some practical examples of how to take particular designs and mark them up using semantic XHTML and CSS. Of particular note is his extensive and creative use of lists for marking up particular content.
This section has the best explanation of relative and absolute positioning that I’ve read in any book on CSS. It’s really worth buying it just for that.
He finishes off the section with a look ahead to what CSS3 has to offer. I’m looking forward especially to the :nth-child pseudo-class which will make creating zebra-stripes on tables easy (currently available via hand-coding and jQuery), multiple background images for elements, and multicolumn layouts (currently available in Firefox via the -moz identifier).
Conclusion
I found this a really inspiring book which got the balance between code theory and practical design application right. I’d certainly recommend it to anyone who’s looking to improve their CSS coding or simply wanting inspiration about how to take their CSS to the next level.
