Early last year when I decided that I just couldn’t put off redesigning the very dated-looking Orbi Software site any longer, the first skill that I knew I needed to get up to speed on was CSS. Like many programmers, I had learned the basics of CSS in a very informal way, mostly by looking at a few online examples and then studying the stylesheets of designers that I collaborated with as a coder. This limited exposure gave me enough knowledge to get by, but I always felt like I was “coding by coincidence” when I had to write my own classes. And some of the CSS files that I was maintaining became rather large and unweildy over time, with lots of unnecessary duplication of similar styles. As the promise of CSS3 slowly started to become a reality with the release of many cool new vendor-specific CSS3 extensions, I finally decided that I just didn’t want to hack my way through creating stylesheets any longer.
To remedy the situation, I began the search for a good CSS book, specifically one that was up-to-date enough to describe some of the fancy CSS3 effects that I was starting to see crop up all over the place. I ended up purchasing “Handcrafted CSS” because I had read an earlier book by Dan Cederholm called “Web Standards Solutions: The Markup and Style Handbook” a few years ago, and I remembered liking his writing style and attention to small details. Handcrafted CSS certainly doesn’t disappoint in this regard. The author really stresses the value of “craftsmanship” in Web design — not only paying attention to the small details, but also trying to focus on the most important details — and this theme is emphasized throughout the book. He also presents a whole slew of good ideas for subtle “fit and finish” details, many of which I ended up incorporating into the design of this site.
Like most good technical books, all of the examples in Handcrafted CSS are given in the context of a sample site, in this case the fictional Tugboat Coffee Company. The code can be downloaded from the project website once you’ve purchased a copy of the book. While the layout is clean and very simple, the site does a good job of presenting the techniques described in the text, many of them so subtle that you don’t notice them at first. The culmination of so many nice details really does give the site a modern feel. And it’s also a very good reference to have as you start to build your own site, providing a good example of accomplishing a lot with a relatively small number of classes.
Progressive Enrichment
One of the prominent design concepts that weaves its way throughout the book is what the author calls “progressive enrichment.” This idea suggests that we should embrace the power of CSS3 extensions offered by forward-looking browsers, while at the same time providing graceful and functional alternatives for browsers that don’t offer these features. For many, the idea of having a site render slightly differently in different browsers is a hard thing to embrace, and I have to admit that it’s been a sometimes uneasy adjustment for me as well. I’ve slowly come to terms with the idea of letting go of pixel precision across browsers, though, and with few exceptions I’ve tried to embrace this methodology for the websites that I maintain. For example, if you’re viewing this page in any recent version of Internet Explorer (6-9), the logo “orbi / software” above appears in a solid gold box. In most other browsers that support the CSS RGBa alpha channel, however, the gold box appears as partially transparent with the inner gears of the Babbage difference engine image visible behind it. If you compare the site as it renders in IE to Safari, Chrome, or Opera, you’ll begin to notice lots of little details that are slightly different. Still, the concept and design of the site as a whole seems pretty consistent even in IE.
Despite the book’s many compelling arguments for progressive enrichment, I still wasn’t able to convince the designer at my day job that this was a good idea. This is partially due to his reluctance to give up pixel precision across browsers, but also because a very high percentage of our users are still using various flavors of IE. The author does mention this problem in the text, and he ultimately advises that the progressive enrichment approach may not work in every situation, although developers should certainly strive for it. Unfortunately, at my day job we still have to use many of the same old time-consuming and inflexible tricks to achieve effects like rounded corners and alpha transparencies in browsers that don’t offer much in the way of CSS3 functionality. At the very least, though, the vendor-specific CSS3 extensions of browsers like Firefox, Safari, and Chrome can still be used for rapid prototyping, as well as creating image files from screenshots — something also mentioned several times throughout the course of the book. I followed this advice when prototyping a site catering to an older audience — a fairly high percentage of whom are still using IE6 — and I was able to create several beautiful design elements just by taking screen shots of my CSS-generated rounded corners and alpha fades and then including them as images in the markup. A very useful prototyping tool indeed.
Fluid Grids
Near the end of the book, guest author Ethan Marcotte contributes a very interesting chapter on the use of “fluid grids” for web design. The “grid” here refers to layout grids similar to those that have been used for ages in print design, and “fluid” refers to the ability of a site to optimally resize itself based on the size of the browser window. The author starts with a discussion of flexible fonts using an 100% font width on the body, and then relative “em” units for all others (as opposed to the fixed width “px” unit). He then extends the concept to working with layout grids. While I really wish that this chapter had existed back when I tried my own fluid grid design two iterations ago, a clunky attempt at best, I actually decided to stick with a fixed-width design for this iteration, in part because many of my pages simply don’t have enough content to stretch without starting to look too sparse. If I do decide to do something a little more dynamic in the future, though, I know exactly where to look. Ethan Marcotte has recently released a new book called Responsive Web Design that delves into the topic of what he’s retermed as “flexible grids” in a little more detail, and I look forward to picking up a copy soon.
Video Edition
I decided to purchase the “Video Edition” of this book which comes bundled with an approximately hour long DVD. In it, the author discusses concepts related to what he terms as “bulletproof” web designs, essentially sites that render correctly in any context on any browser or device. Bulletproof also refers to the quality of being very flexible and adaptable to change. After a relatively brief introduction to these concepts, the author outlines ten guidelines that web developers can use to help their designs live up to these bulletproof standards. Many of the ideas presented here are from his previous book, not surprisingly titled Bulletproof Web Design. Most of the examples are illustrated using the Tugboat Coffee site from this book, however, and in this sense the DVD is a bridge between the two. Four of the ten guidelines are also simple tests that can be used to guage how bulletproof a web design truly is, and they’ve become a valuable part of my web-building toolkit.
Final Analysis
Overall, I’d say this is an excellent book for getting up to speed with the latest advances in CSS. If you don’t have any CSS experience at all, though, you may want to learn the basics before reading it. After the introduction which focuses on craftsmanship and progressive enrichment, the book jumps right into real-world examples without giving much in the way of background. Any online tutorial will probably suffice as a primer, though, and once you’ve got the idea of classes and ids down, this book should take you the rest of the way to good CSS design. Verdict: a must read for Web designers and developers, and highly recommended reading for Web programmers who occasionally work with CSS.
