February 8, 2010

[books] Handcrafted CSS

0

Two weeks ago I managed to order a new pile of books and one of them happened to be Handcrafted CSS.

The author of the book is Dan Cederholm, a well known designer in the webdesign world, and writer of the bestseller Bulletproof Web Design. It also features one chapter by Ethan Marcotte, one of the people who worked on the recent redesign of the W3C website.

The target audience of this book are experienced webdesigners and developers, people who are pretty familiar with HTML and CSS and who'd like to take their skills to a higher level by getting up to date with some of the more recent features available.

The book is nicely designed with plenty of colored illustrations and images, which makes it a quick and easy read of about 200 pages. All examples are explained in function of an entertaining website for the fictional Tugboat Coffee Company. (Code available.) You'll get plenty of opportunities to grab a coffee!

What you'll learn

Chapter one deals with improving flexibility by chosing floats over absolute positioning. It is aptly called "Always ask, what happens if...?". What if the text is too long? What if the font-size is changed? Things we often have to deal with when working with a CMS where content is beyond our control.

Chapter two, three and four handle about "progressive enrichment": how you can use vendor specific extensions with propietary properties that aren't really standard yet. In short, these chapters deal with border-radius, rgba backgrounds,  text-and-box-shadow and webkit transitions, all properties we start using today. Rather than making websites look the same in every browser, we better choose to give visual rewards to those browsers that can handle these advanced properties.

Chapter five, Modular Float Management, deals with some of the pains we go through clearing floats. It makes us think about a more semantic name for our typical clearfix class and invites us to create our own simple base framework to start our projects from.

Chapter six is written by Ethan Marcotte, a senior designer at Happy Cog. Using the more recent redesign of the W3C website as a starting point, he shows us the magic of the often ignored world of the "Fluid Grid".

Chapter seven, Craftmanship Details, is the last chapter and puts us on the track for even more goodness: think typography (mentioning Bringhurst), think modern font-embedding with font-face, think jQuery (a short introduction).

Our book ends by explaining the nifty parallax effect used on the Silverback website and applying this to the Tugboat example.

Some minor critique

According to the back cover of the book, the book level is intermediate to advanced. Same for who the book is for: the css designer who wants to go the extra mile, the one who's already familiar with CSS, HTML and the concept of semantic markup and Web standards.

This makes me wonder though: which css designer who wants to go the extra mile isn't already familiar with most of the stuff explained in this book? I tend to think that people passionate about what they do are already aware of all this, either through their network or by just reading on the web. Of course this book has been published in August 2009 and at the time it was being written all this was probably hot news. The word spreads fast in the online world though.

The verdict

My relationship with CSS books is a mixed one. Years ago I've learned tons through Andy Budd's CSS Mastery, which at the time (and perhaps even now) was a great guide and introduction into modern CSS techniques. Other books I've read since were more of the same, some even less.

I'm not saying this is a bad book: it's got great design, great ideas and tries to convey a great message. I'm just not convinced that advanced CSS designers who try to keep up to date will learn much here.

After spending hours in front of a screen this is a nice read though, so if you're looking for something quick with plenty of understandable examples I do recommend it. Personally I just expected something even more advanced.

This post is about , , , filed under books.

Post your comment

You can also tweet a reply using the following hashtag: #dio5_1119

Your details and comment

Some html allowed, see code-help

Pressing ENTER 2 times makes a new paragraph. Some HTML allowed:

  • Bold: <strong>text</strong>
  • Italic: <em>text</em>
  • Link: <a href="http://www.website.com" title="My title">My website</a>

URL's with http:// are automatically converted to links.

Get the RSSFeed for the comments on this article.

Search