Handcrafted CSS: More Bulletproof Web Design (Voices That Matter) [Englisch] [Taschenbuch]

The new release from Dan Cederholm is a great complement to his previous work in Bulletproof Web Design. For those who haven't read Bulletproof Web Design, it's premise was creating flexible websites and keeping a clear separation of your markup (HTML), styles (CSS), and behavior (JavaScript). It took examples of sites that weren't bulletproof, and showed the process to make them bulletproof. All great things. The landscape of browsers, CSS, and HTML has changed slightly since Dan wrote Bulletproof Web Design, and this book is focused on bringing those aspects to the forefront. This book assumes you have knowledge of developing with web standards, and therefore bypasses the why of adhering to web standards.

The entire book focuses on building a fictional site, the Tugboat Coffee Company. Each chapter builds a new layer into this site, with clear instruction of how each aspect progressively enhances the user experience, while not explicitly leaving other browsers in the dust. Here is a quick breakdown:

Introduction
This chapter is a quick example of why we need to be flexible with our designs and development. Using a list of menu items, Dan walks through how to best organize your markup and CSS. To me, this chapter was about first putting on your thinking cap and planning for how your sections should be organized within a site. Think about how the end user will experience and interact with your site. Even with a simple menu list, he shows how things change when text is re-sized, or simply making your clickable link area larger in a given area. While this chapter had a specific example, and code to work through--I really saw it as something to begin challenging you to think about your architecture.

Round and round we go
Most of us are familiar with the previous way of creating rounded corners, and each of those ways had their drawbacks. Using 4 images, then you had superfluous markup. Use 2 images, then it didn't scale well in both directions. This left us to educate ourselves and then choose the best decision based on our context. With CSS3 this process is made much easier. Using border-radius and it's browser specific counterparts, we can begin to work with rounded corners now--and have it work in standards aware browsers. This chapter not only discussed the organization for this in your CSS, but also some of the finer points of using rounded corners in the first place. Background clipping with images inside of a container and applying this to form elements were two specific examples.

Now, don't start throwing vegetables at me just yet. This is the beauty of this book. This is the premise of this book. The ability to use features in CSS3, while still providing an experience for all of your users. Those with advanced browsers will see everything in it's shining beauty. Those without may be missing a few things here and there. It's not all a loss--they can still access the content. In this example, your rounded corners simply may not be rounded. You have many options available to you if you wanted to do some extra work to make rounded corners in all browsers. It's all about your context and your goals. Again, going back to the first chapter--put on your thinking cap and weigh the goals and costs.

RGB eh?
Specifying colors has always been easy. You have several ways with css, including color, hex codes, and RGB. Now, we also have the ability to specify a fourth parameter to control the alpha transparency. Yes, you could achieve some of these same effects with PNG's, but that's the point--now you don't have to. This isn't just in reference to a text color or background color. This can also be applied to your borders and pseudo elements for some nice effects all around.

This chapter again builds on the example site, and shows the process for implementing this into your site right now.

But it doesn't look the same!
I have often heard this cry from many different web developers. Dan points to his wonderful site, Do Websites Need To Look The Same In Every Browser? While this may seem somewhat sarcastic (what an incredible domain name), he created this to prove his point. Even this site alone doesn't look the same in every browser--and that's OK. This chapter goes into a little more detail into the questions posed in the first chapter. We need to think about the end user experience, and let that be the driving factors into our design decisions. While these tools are great, and it's great to start experimenting with them now--they might not be right for all scenarios and contexts. To me, this chapter was a challenge. It was a challenge to be more forward thinking with the front-end architecture decisions. Thinking about the different aspects that users, analytics, and browser market share bring to this decision making.

Some techniques discussed in this chapter were text-shadow, box-shadow, and adding some smaller animations via CSS. Again, we use these things to build into the example website.

Float on
You guessed it. This section focused on managing your floats. The interesting point I found here is that Dan talks about how he has altered the way he handles them. Previously, he would clear all floated elements in the CSS file. This would create a large list that would need to be managed in the CSS. Instead, he has moved to a more preferred method of applying a .group class to the elements themselves in the markup. I think I would agree, that it works well in the markup and compounding the necessary classes together. It is much more modular, which was the point he was trying to make with this section.

The Grid
This was a chapter presented by Ethan Marcotte, and an incredible addition to this book. Ethan talks about setting up a fluid grid, and shows an array of different tricks to help you achieve this. These tricks even included image sizing, which can throw a grid off if you don't necessarily know the height dimension. He shows how to keep a larger image in context, and allowing it to scale with the design itself. He showed how to keep everything in line to a specific Grid that you choose, and how to make this flexible for the end user and their experience. It wasn't just letting things move one way or another based on the browser stretching--it was about truly adapting. Some tricks took a little JavaScript love to make them work, but it was done in a very clean manner. This was the icing on the cake to the beautiful example site that gets constructed throughout the book.

The devil is in the details
Bringing things to a close, Dan dives into some of the often forgotten smaller details of a design. It's these small details that can sometimes make or break a design. He briefly discusses fonts with @font-face linking, using jQuery for a handful of small effects and to tidy up things like .last classes in lists of items, and then an example of parallax scrolling. These little details may go un-detected to most people, but are there to help enhance the user experience. I think this chapter could have even been longer--especially with the discussion of jQuery--but I liked the examples he chose to use.

Summary
This book was a great follow up to Bulletproof Web Design. It wasn't merely a replacement or update of the book--but an extension. This book wasn't about all of the small details. It was about an introduction to some of the tools you can start using today. When I finished the book, I was inspired to simply learn more and play with the techniques discussed. If you want to see--in action--how you can begin to use new techniques while still maintaining an experience for all browsers, then this is a great book for you.

I always love to read how a CSS master works and I found many of Dan's tools and tips extremely useful in furthering my already above average knowledge of CSS.

This is not a "step-by-step how to build a website using CSS" book, this is for folks who already understand CSS well. This book helped me reorganize my mind when it comes to CSS.

I'm a big fan of Dan Cederholm and will always buy his books because I like how he thinks. If I ever bump into Dan at SXSW I will buy him a beer.

The only reason I'm not giving it 5 stars is because I found it a bit short. I'd always like to read more of what he has to say.

A fan of Bulletproof Web Design, I was looking forward to Handcrafted CSS and it did not disappoint. In addition to the code examples, I appreciated Cederholm's "progressive enrichment," "re-evaluation of past methods and best practices," "80 percenters," "fluid grids," and "craftsmanship."

"Progressive enrichment," for example, uses the border-radius property to achieve the visual reward of rounded corners on buttons in browsers that can handle them with CSS. The site displays attractively in all browsers with square corners on buttons in browsers not progressive enough to display the rounded corners. This example also illustrates "re-evaluation of past methods and best practices." Rounded corners on buttons can be achieved with graphics, but they lock in color which can only be changed be manipulating the images. With progressive enrichment, the button colors can be changed easily in the CSS.

Ethan Marcotte, in "The Fluid Grid" chapter, demonstrates that the key to non-fixed width layouts is font size. By setting all font sizes in context relative to a base font size of 100% and also setting percentage-based values for the columns of the grid, the proportions of the grid stay intact as it resizes.

My favorite detail in Cederholm's final chapter, "Craftsmanship Details," is his recommendation to "use the best possible ampersand" by building a font stack in the CSS based on order of "interestingness" of the ampersand. An interesting ampersand is well worth the trouble as I found out last year before I had read Handcrafted CSS. I had developed a header for a second website without the "interesting" ampersand which I had used in the original website, and the first thing that the client said upon seeing the second header was that he wanted the same "and sign" that the original header had. What fun for Cederholm's ampersand discussion to confirm my experience!