Transcending CSS: The Fine Art of Web Design

7 comments | Posted: 4 June 07 in Books, by Yannick Lyn Fatt

Transcending CSS: The Fine Art of Web Design Transcending CSS: The Fine Art of Web Design is written by internationally recognized speaker, designer and Web Standards Project member, Andy Clarke. I’ve always admired his work and enjoyed reading his blog, so needless to say, when I first heard he was writing a book I was pretty excited. Now that I’ve finished reading his book, I can definitely say I am happy that I picked it up.

This book is broken down into four (4) main sections, Discovery, Process, Inspiration and Transcendence and each contains a wealth of information that is beneficial to anyone who does design and XHTML/CSS. The book certainly encourages you to think outside the box at a new way of doing things (that was my experience at least). Below is a bit of what you might find in each section.

Discovery

Discovery is all about introducing you to transcendent CSS and what makes it possible today. Andy encourages you to use all available CSS selectors, even CSS 3 where possible and use JavaScript and the DOM (responsibly of course) to plug the holes in CSS. You are also introduced to the content-out approach and how you should always structure and order markup meaningfully rather than according to how it looks or its visual layout.

You should always start writing a document by first using only structural elements such as headers, paragraphs, lists and quotations. You should then work out in circles, a little like an onionskin, adding any divisions only to group related areas of content into meaningful containers.

Andy then goes on to give examples of good, semantic markup by using scenarios from various photos in a quiz-like fashion.

Process

This section extends on the content-out approach and you will get a fresh look at the design and development process. Andy takes you step by step through the process of turning a design into a prototype for an example website called ‘Cookr!’. I found the process described rather interesting as I would normally have just gone straight to Adobe Photoshop/Fireworks to whip up the static design without first considering the content or doing wireframes.

Inspiration

Here you are introduced to the wonderful world of grid-based design. I’ve always heard people mention it but never really grasped it or tried to use it. Now I’m hooked and certainly plan to use it more in my work. It’s quite interesting how helpful it can be. Andy says it rather nicely:

Designers often think working with grids can be restrictive rather than a creative process. They think basing a design on a series of columns and fields will limit their ability to make designs that break out of the literal box; in reality, the opposite is true.

He goes on to give you a few of his personal favourite sites that use grid-based designs and even shows how newspapers use grids.

Lastly, I’m sure we have all had times when we were seeking inspiration when designing a new website. Andy shares a few of his techniques for getting inspiration from unexpected places and keeping a collection of design inspiration for later use.

Transcendence

This section brings together all that you have learnt from the previous sections. Andy works through a few more examples to illustrate Transcendent CSS techniques and also demonstrates various positioning and layout techniques. He then delves into a few of the modules that are present in the CSS 3 specification. There is no doubt that there are quite a few things to look forward to and the creative opportunities each will offer.

Conclusion

Though I didn’t mention it earlier, the book is very beautiful and has stunning imagery from various photos found on Flickr. Andy uses these photos in his examples and they really helped to make this book come alive. The overlay of code on some of the screenshots and photos also helped to get the message across about which elements are most appropriate for certain pieces of content. With that said, there is so much to like about this book and so much to learn. Without a doubt I wholeheartedly recommend Transcending CSS: The Fine Art of Web Design.

Discuss This Topic

  1. 1 Rick Curran

    This book sounds good due to its strong focus on visual design rather than just semantic structure. Grids and typography are something things I’ve been trying to focus on more recently so I think I need to pick this book up and give it a read, I’ve read a lot of good reviews about it.

     
  2. 2 José Carlos

    I couldn’t agree more. I’m currently reading the book and it never ceases to amaze me. It has changed many thing in my work process.
    Andy did a trully fantastic job.

     
  3. 3 Nate Klaiber

    You summed this book up perfectly. It is very different from other CSS books due to his approach. However, it has changed the way I approach projects and CSS (making them easier). As far as the grid – I am still intrigued at different options and layouts and aligning them to the grid (mixed with typography and vertical rhythm.

    Overall, his book was a challenge – a challenge to go beyond the basics. I like how he pointed out: ‘how can it be progressive enhancement if we haven’t moved in the past few years?’

    There is so much more available at our fingertips – and it’s time to move on and start utilizing the tools/methods where possible!

    I also like how clean and semantic your markup is after you take the content out approach – you learn how to use your elements wisely.

    Everyone needs to have a copy of this on their shelf.

     
  4. 4 Tony Scialdone

    I have the book, and it’s as awesome as you say (and then some). In addition to being visually inspiring, it’s a catalyst that forced me to look at my own processes and improve them.

    What I liked most was being able to get into a world-class designer’s head and to see what he sees. I’d never considered putting a headline and a paragraph and an image in a single list item before, and now I can see that it would have simplified my life had I done so. That’s one of a dozen or more examples.

    After finishing the book, I went right out and made my first grid-based design. If I stick with it, my sites will be more balanced and visually appealing than before…and I’ll probably make them more quickly and easily, too.

    It’s not a book for beginners, though…I’d recommend that everyone get beyond the beginner phase as quickly as possible so they can get the most out of this book.

    Thanks, Nathan!

     
  5. 5 Nathan Smith

    Tony: I think in this case you mean – Thanks Yannick! While Transcendent CSS looks like a great book (I’ve thumbed through it), I haven’t actually read it (yet). Yannick did a great job writing up his thoughts on it though. So, I’ll say it too – Thanks Yannick!

     
  6. 6 Michael Montgomery

    Excellent book, and excellent review.

    Thanks, Yannick.

     
  7. 7 Eric Versluys

    I really enjoyed his approach to developing design from a strict semantically correct approach. It taught me to take the content and build the site design around it, instead of vice-versa.

    The book had great examples, a really easy to read layout, and was in general just a fun book. I highly recommend it.

     

Comments closed after 2 weeks.