Designing With Web Standards (Second Edition)

Spot the difference:

Designing With Web Standards (First Edition) Designing With Web Standards (Second Edition)

In the three years since Jeffrey Zeldman wrote his first edition of Designing With Web Standards his book cover has now turned green, the content has been printed in full technicolour and it appears (from the cover photo at least) that he now looks like Bob Carolgees in a beanie hat!

My copy of the new edition arrived last Saturday and I’m really looking forward to the opportunity to get into it. Not literally, I mean “read it”. I took the first edition on holiday with me, a few years back, to Tenerife. While Jane and her parents explored the island I sat on a balcony reading about the importance of Web standards. It’s not as sad as it sounds.

Well, okay, maybe it is but I certainly learned a HUGE amount from that book. I don’t think I’m exaggerating to say that that one book turned my life around entirely and helped to make me a completely different person.

Well, okay, maybe I am exaggerating a little, but that book gave me a new insight into what was possible with Web design. It gave me an insight into the importance of writing good, logically structured documents which are then displayed using Cascading Style Sheets. I’d read alot about both before but no-one had explained it to me quite so clearly and entertainingly as Mr Zeldman did on that balcony in the Canaries.

If you already have the first edition you probably don’t need this one (except for completeness) as you’re probably aware of the importance of standards and are keeping up with what’s going on (at places like A List Apart, for example). But this edition has been brought completely up to date. It even talks about Internet Explorer 7.

I thoroughly recommend this book to anyone vaguely interested in Web design and standards, and particularly if you are the kind of person who thinks that it’s okay to write Web pages with a class or div for everything and who uses H1, H3 and H4 tags without H2.

CSS walk-through tutorial

Snippet of CSS code
Snippet of CSS code.

For those who’ve ever wanted to get into Cascading Style Sheets (CSS) coding, but never quite got around to it, or couldn’t quite grasp what it was all about; or perhaps you just want to know what it is that some of us coders are going on about, Albino Blacksheep’s Live Design tutorial is for you.

What is CSS?

In recent years there has been a drive to separate the content from the design of web pages. That way updates to the look of a site can be made quickly and efficiently. This is done largely using Cascading Style Sheets: text files that explain to the web browser how to present the information on a page, eg make all links blue and underlined, make all headings black, Arial and 24 pt, etc. That way one change of the code in one file can update the look of an entire website.

There is a really good introduction to CSS at www.cssbasics.com. To see a website being transformed step-by-step with CSS look no further than Albino Blacksheep.

In 18 steps Albino Blacksheep (for that must be his/her name) walks visitors through the redesign of the ABS website.

From…

You can see how ABS started like this, with a basic, ‘no-frills’ marked-up page…

screenshot

To…

… to this, graphically pleasing offering. Using nothing more than the power of Cascading Style Sheets (CSS).

screenshot

CSS Zen Garden

Another impressive site, for those who’re unfamiliar with it, is the CSS Zen Garden. The premise of this site is that within each design the HTML page code is always the same, all the designers are allowed to change is the CSS file. Impressive stuff.