Transcending CSS: The Fine Art of Web Design (Book review)

If you’re looking for a Web design book that you can put on your coffee table without feeling like a geek, look no further. In Transcending CSS, Andy Clarke combines technical expertise with graphic design skills to create a book that is as beautiful as it is inspiring.

This book is a bit hardcore with regards to progressive enhancement. The principles of Transcendent CSS include going all the way with CSS 2.1 selectors and the parts of CSS 3 that have been implemented in browsers. Yes, that means using them now instead of waiting for all browsers to catch up. These are the principles of Transcendent CSS:

  • Not all browsers see the same design.
  • Use all available CSS selectors.
  • Use CSS3 where possible to look to the future.
  • Use JavaScript and the DOM to plug the holes in CSS.
  • Avoid using hacks and filters.
  • Use semantic naming conventions and microformats.
  • Share your ideas, and collaborate with others.

These are all great principles to follow when designing or developing for the Web, and the entire book is focused on these principles.

I have a couple of quibbles, as always. First, I do not agree with Andy’s statement that element id:s like header and footer are presentational. At least they aren’t the way I think when I use them. To me, “header” means “the first thing in the document” and “footer” is–you guessed it– “the last thing in the document”. My second quibble is that Andy suggests using absolute positioning to create columns, and to use JavaScript to make sure whatever comes next gets cleared properly. That’s fine, but I didn’t see any mention of how you would make sure that users with JavaScript off would not get a page that is partly unreadable.

Don’t let my nitpicking stop you from buying Transcending CSS though. It is very refreshing to see a book that is mainly aimed at graphic designers focus on content and structure first, and visual design later.

Transcending CSS: The Fine Art of Web Design
Author: Andy Clarke
ISBN-10: 0321410971
ISBN-13: 978-0321410979

Posted on April 20, 2007 in CSS, Reviews, Web Standards

Comments

  1. Though I absolutely loved this book - I had one of the same qualms. Absolute positioning is great, but there was no example of users without JS (maybe this sticks with his strict principle of progressive enhancement). Also, he briefly showed the inman way of clearing things - which is fine - but it still felt hackish to me.

    I agree that absolutely positioning items is the best route. I usually do it in headers where I know the specific height that will be used - but for content areas it is a little trickier.

  2. I loved the book too, Andy’s obviously poured his heart and soul into it.

    The only niggle I had, apart from the method of clearing floats using JavaScript, was the occasional inconsistencies between code snippits and their accompanying text. For example, a negative top margin said to be set by margin: 0 0 -100px -70px; (pg 291). This should be no problem for the majority of readers though.

    The book is well worth the money, I found the section on the Advanced Layout Module especially interesting. Highly recommended.

  3. April 20, 2007 by Mattias Lundmark

    Absolutely fantastic book, one of the best I read about designing for the web. If you feel that you’ve read pretty much the same stuff over and over again in code-centric books like Web Standards Solutions and CSS Mastery, this is a book for you. A lot of thinking outside-the-box going on inside these covers which is very refreshing.

  4. I absolutely love the book, with all the beautifull images and web page samples. The most interesting for me was the part about grid. 10 out of 10!

  5. @roger and @nate — I had the same reaction to Andy’s recommending the use of absolute positioning for columns and what clearing them with JavaScript means, particularly when the book is so pro-progressive enhancement. The more I thought about it, I wonder if Andy recommends them in the prototype phase (which is where he talks about them, IIRC), but not in the final product. This is the only thing I can conclude since the later examples often (if not always) use floats for columns. Regardless, it’s confusing to the reader and the only reason I was hesitant to recommend it to some friends who wanted a CSS book that was more accessible to visual designers.

  6. Hi guys, thanks for the nice comments.

    Travis, you are spot on there! I was really recommending positioning foe everything (inclusing columns) in the prototyping phase and not always for a final layout.

    That will need to be made clearer in the next printing. I already have that earmarked with the publisher.

    Take care

    Andy

  7. Beautiful looking book, and I’ve been very interested in spending some quality time with CSS selectors and with CSS3. I will take a look at this next time I am at Barnes and Noble.

  8. It’s a great book - that sits next to my computer all the time at the moment. I think it’s more of a designers book than a developers (coder) book per se…but I know it’s meant to invite the two disciplines to work more closely (the best of both worlds right?)

    The book really gives solid form to the ‘prototyping with CSS’ concepts that Andy et al have mentioned at numerous times over the past year (at least - maybe more) and it is a great idea, and there are other good suggestions mentioned in the book too. Designing with Grids is hot right now - and that is a significant part of the book as well (big shout for Jeff Croft!)

    My only problem with the book is that many site users on the web are still using IE6 (or older browsers) - which doesn’t support PNG Transparency unless using javascript hacks…and that hasn’t been discussed in the book at all (unfortunately). So, even though I’m a fan of the ‘css positioning with Z-values’ concepts discussed in the book, and I have no problem using PNG images myself, I think the problem of PNG Transparency has been brushed under the carpet a little (pg.136).

    Working with a browser (like Firefox) that supports PNG Transparency is all well and good…but you can’t expect all site visitors to be using the same browser. Without using the hacks that Andy advises us not to use, lovely PNG images lose all their magic in IE6 (and older browsers). If PNG images can’t be used - then almost half of the examples in the book wouldn’t work. I think that’s a problem that needs far greater discussion on the web right now.

    Aside that matter…the book is fantastic! Thoughtfully written and filled with excellent presentation of the topics. I would recommend this book to anyone who is even slightly interested in raising their css skills up a level. Great job Andy! :)

  9. Nice to see this post —-I’m currently reading this book.

    I would categorize this book as a great “next step” book for people who’ve already read about the fundamentals and want to take things further.

    Coming from the Java/plumbing side of web development and being someone who didn’t go to Design School I’ve enjoyed reading about how web designers work: The Divine Ratio, readable column widths, grids, color palette tools, —-a lot to think about, and some of it easily applied.

    I was working on some “product overview” pages today and found myself setting the line-heights to 1.62, applying max-widths to the containers (width:(expression) for IE) and suddenly things were looking designed (a lowercase D).

    Recommended!

  10. I’m currently reading this book and I think it’s one of the best I’ve read about the subject. And the graphic quality of the pages is something to be amazed.

  11. At first i’ve been a bit disappointed with this book. I was expecting something more technical to learn from, but it’s more of an insight in what is ahead of us.

    About positioning, i find absolute positioning great, but as everybody says how do you clear the footer without javascript.

    I think Andy’s view is not to use this technique exclusively but to use it as a mean of development and prototyping quickly without going into float problems.

  12. Transcending CSS is very inspirational and a pleasure to use. It is a permanent fixture beside my design computer. Truly a step and a half above most cookbook CSS publications.

  13. Its on my Amazon wish list :)

  14. Thanks a bunch for this advice! Book is already ordered via amazon in germany and is hopefully coming in the middle of next week ;-)

    Cheers, Mic

  15. I agree with Yannick above. This book is more of a statement than an actual book to learn from. It won’t teach you CSS or HTML, and if you already know it, you won’t find much useful stuff in it.

    I also really hated the fact that there are a few places in the book where a paragraph ends midway at the end of a page, and when you turn the page there’s a completely new section. This puzzled me for a while, and then I found out that three (or four) pages later the paragraph continues. In a book like this I’d expect better usability!

    That said, the book looks great, has a few humorous parts and the final part about CSS3 is enlightening.

  16. Will it ever be in Italian language? Just to know…if they plan to do that, or I’m gonna buy it in english right now, cause I MUST HAVE IT!

  17. @ dandyna: I think that there is an Italian translation in progress along with several other languages.

    @ Peter Bex: That was a printing error where the background colour of the page should have altered, but doesn’t. That should be fixed in the next printing.

  18. April 24, 2007 by helaene

    just ordered it through this site, and i’m really looking forward to reading it.

    andy, i’m a big admirer of you (and molly too), thanks to your work at lynda.com. now that i’m an ‘official’ web developer, i’ll be keeping this book on my desk and enjoying it over many a lunch break.

  19. April 24, 2007 by Reed

    “Transcending CSS” blows past even the honored standardistas with its advocacy of pure, simple semantic markup. Andy accomplished what the best designers inspire us all to do: see beyond surface appearances to the power of the structure underneath. Bravo!

  20. Just have to agree with everyone above. Very nice to learn about grids and where and how to get inspiration.

    Absolutely a must to have prior CSS knowledge though. Now I’m just wondering who will be the first to put up a (giant) post on how to make all the examples in the book work in IE ;)

  21. I read this book only last week, and I thoroughly enjoyed reading it. I really liked how he stepped through the process, as well as the section on grids.

    The visual examples were great, and the code was generally pretty good.

    A special mention has to go to the photos: awesome!

    There were a few times through the book where the page order was jumbled, however, and that really ruined the flow temporarily.

    Overall I really recommend the book.

  22. Great book and I can surely say this is the book which changed the way I used to write CSS/xHTML. Content out markup technique is really good. Overall a great book for every web designing professional.

  23. Alas I am saving up for next semesters text books for uni so have to forego the reading of this one until at least late in the year. It sounds interesting. Maybe Santa will drop me a copy lol :)

  24. May 5, 2007 by Mike

    One of the best books I’ve ever read. I have been carrying it back and forth to and from work with me for about 1 week now.

    Read it once, now I need to read it again and make notes.

  25. I feel that more and more books in the matter of CSS and XHTML are the same, I am for the moment reading ANdy Budds Css MAstery and it give me some directions in the right direction but, its similar to the DOG, BULLETPROOF and the standard book.

    I guess this will be next investment… I am really eager to see something innovative in the way of thinking…

    michael

  26. This is an excellent book, although I do agree with the small niggles mentioned by various people above.

    A niggle no-one’s mentioned is the title: Andy uses the term “Transcendent CSS” throughout the book (complete with a capital T), yet the title uses the word “Transcending“. I’m not suggesting this is a mistake and of course there are plenty of arguments for the usage of this title, but if only for the sake of continuity, I would’ve preferred “Transcendent CSS”.

    That’s only me being extremely fussy, though. I love this book, and Andy’s got one of the best (and most witty) writing styles in current web reference books. I’ve written a summary of what I consider to be the book’s three main points / lessons here: http://elliotjaystocks.com/blog/archive/2007/transcending-css-by-andy-clarke/

  27. Personally, I think all CSS books are outdated. Moreover, authors often try to push their believes which might be incorrect and often readers think that the book was send by the God. I see it so often on IRC help channels, people having ugly broken code saying “uuu, I took it from my book”

  28. Hi,

    you now just something about the Italian translation?

    If you are interested I can hep you. I speak italian, but not so good english.

  29. June 7, 2007 by Selkie

    I am reading Andy’s book and trying to learn with the exemples that often have mistakes…Going to the book’s web page, download the exemples and see the code is the best solution I have found…The book is great but the code mistakes and some mixed pages with broken paragraphs puzzle me too much :(

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.