Elliot Jay Stocks

Transcending CSS by Andy Clarke

Written at 11am on 10.05.07
Filed under Web Design / That Internet Thing / ALL CATEGORIES
4 comments (closed)

A couple of weeks ago, I mentioned Andy Clarke’s book ‘Transcending CSS‘ having a huge influence on me whilst coding this version of elliotjaystocks.com. The book is no longer that new (it was published in October 2006), but a few people have asked about this so I thought I’d explain further by summing up some of Andy’s key points. 

Before we begin, let me say this: I can’t stand book reviews on blogs. At at their worst they remind me of the poorly written ones we used to publish in the student magazine at secondary school, and at their best they’re overly opinionated and of little interest. So let’s make it clear right now that this is not a book review. Rather, an analysis of the key lessons that can be learned from Andy’s book, which may (or may not) prove useful to the potential buyer / reader.

There are 3 key lessons to be learned from this book:

1. Thinking and designing ‘from the content out’.

In order to write lean, neat, well structured and (above all) semantic code, Andy suggests that we think about our sites ‘from the content out’ before we start coding. It’s all so easy - when designing a site in Photoshop - to start seeing how this div would achieve that effect, and how much padding this element would need, etc. but this is not the best way of thinking. Instead, because we are coders as well as designers (in most cases), we should be approaching the content - not the design - and asking questions such as, “could this element technically be considered a list rather than a paragraph?” and, “should this element appear at the top of the markup when actually it would help form a neater document structure if it appeared at the bottom?”

Andy encourages readers to consider the meaning of each element in our markup, and rightly notes that many designers use divs “in the same way they used tables, to achieve a visual layout, without paying much attention to their divisions’ semantic value.” He goes on to point out that “simply replacing table cells with div elements will not help you gain the full benefits of Web Standards or CSS.”

2. Looking outside the web for inspiration.

As designers, it’s something we’re regularly taught to do, but this is not just a case of suggesting we design a page that has the same structure as that beautiful old monastery sitting outside your window; that would be too easy. Instead, Andy is trying to get us to apply lesson 1 above to the outside world. He breaks down photographs into markup; turning an image of several parked motorbikes (in one example) into an unordered list of their respective colours, and an image of medieval helmets (in another example) into a definition list and their respective definition terms (”Bassinet Helmet”) and definition descriptions (”To protect neck against sword…”).

Later on in the book, however, Andy does return to the ‘look around you’ method of thinking, and a large chapter is dedicated to design (and artistic) inspiration, from incorporating grid systems used in printed magazines into your sites, to creating scrap books and mood boards for inspiration. Forget CSS at this point; Andy’s focus here is about escaping from your computer desk and seeing things in a different light. “Create the right mood, and visitors are more likely to interact with your site, no matter how much Ajax or other interactivity you have used in creating it.”

3. Pushing forward the growth of the web by using the latest techniques: so-called ‘Transcendent CSS’.

Admittedly, using cutting-edge CSS techniques is not currently possible in the vast majority of client projects, where we have to cater for a variety of browsers and deal with the severe limitations in IE6 (and 7). But Andy suggests that we develop our sites in order to enable special features on browsers that support them. This is not about severing your support for IE; it’s about giving Firefox a treat because it’s been a good little fox. The more ‘advanced’ techniques such as adjacent sibling selectors and attribute selectors are discussed, and we’re given examples that illustrate just how much sense it makes to use them: not just to achieve ‘cool’ new effects, but to push forward the growth of the web; to say to browser developers (*ahem*), “I’m using the latest layout techniques to enable a better user experience of the web - you need to make your browser support them.”

This version of elliotjaystocks.com makes extensive use of these techniques (and general ‘ethos’), and you can read more about it in this blog article (although I must admit I’ve yet to use anything from the CSS3 specification - I feel an experiment coming on!)

It’s not just about pushing things forward for browser vendors and users, by the way. Andy suggests that we “should take advantage of these tools now, if only so you can become familiar with how they work.”

Parting thoughts

There are some very wise words contained in this wonderful book’s pages. My only real gripe is with the book’s 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”. However, it’s a small point, and it’s only me being fussy. This is an excellent, well written, and actually rather witty book. Buy it!

Oops. This appears to have become a book review. :-/

4 comments (closed)

Comments are currently closed on this entry, but you can still read those that have already been posted...

• Francis Booth

  10.05.07

  

  #

  Apologies for a tangentially off-topic post so early, but I think I’ve spotted a WordPress bug: the closing quote after “Transcending CSS” in the first para is an opening quote. Tsk!

  It’s probably as it’s after an anchor tag (also look at “Transcending” in the penultimate para).

• Elliot Jay Stocks

  10.05.07

  

  #

  Ah, well spotted, Francis! Definitely a Wordpress bug… looks like I’m going to have to hard-code those character entities.

  Interestingly, I encountered another Wordpress bug whilst writing this very post: it fails to render a tag if it appears at the end of a paragraph; e.g: the last word of one of my paragraphs was wrapped in an anchor tag, and it simply wouldn’t display as a link. Not a biggie but it forced me to re-word it…

  Again, slightly off-topic, but has anyone else encountered these bugs?

• Sean Kennedy

  12.05.07

  

  #

  I doubt I’d ever notice something like that.

• Riccardo

  25.05.07

  

  #

  Hi mate,
  Thanks to share your info with all here.

  I’ve bought the book last week.
  It’s well explained and I like the visuals.

  bye
  :)