Hardboiled Web Design

**** Jan252011

Author Andy Clarke packs a lot of information and quite a bit of swagger into Hardboiled Web Design. He encourages us to strip our HTML down to lean, semantic HTML5, to test the boundaries of what is possible with CSS3, and to challenge conventional web design wisdom.

While the first six chapters of this book are spent justifying its own existence (explaining why web designers need a new approach, that websites don’t need to look the same in every browser, and what exactly the author means by “hardboiled”) I can save you some time. The hardboiled approach to web design can be, er, boiled down to 3 main components:

  • lightweight, semantic HTML5 which incorporates WAI-ARIA roles
  • advanced selectors and other new modules in CSS3
  • and modernizr.js to tailor websites to browsers’ capabilities.

In addition, the author proposes we present designs to clients using working web pages, rather than static mockups (Chapter 7).

HTML5, WAI-ARIA roles, CSS3

Mr. Clarke introduces hardboiled building blocks in Chapters 8-10. He presents many of the new elements of HTML5 (though not quite as charmingly as Jeremy Keith), and also includes information on microformats (though not as thoroughly as Emily Lewis) and WAI-ARIA roles. All of this is included in the book to lay a solid foundation for Parts 3 and 4 (a little under half the book) on CSS3 techniques.

The author hits on all the most significant modules in CSS3, from web font embedding to multiple background images to animations. CSS3 is covered in more depth here than in A List Apart’s brief book CSS3 for Web Designers, including things like border-image and the nth-of-type pseudo-element selector (cool!).

These clear and thorough chapters on HTML5 and CSS3 are reason enough to buy this book, but I take issue with parts of the overall approach Mr. Clarke is advocating.

Progressive enhancement is for wusses

Beyond explaining these individual components, Mr. Clarke puts forth his own methodology for web design: the “hardboiled” approach. He presents the concept as a departure from currently accepted best practices, and essentially concludes that “progressive enhancement” is for wusses and only philistines would let their sites “gracefully degrade”.

Andy Clarke declares that by using CSS3 techniques simply to enhance or add niceties to a site for the most capable browsers, web designers are limiting themselves unnecessarily. He suggests that we design for the most capable browsers first, and then consider how lesser ones will render our design. But crucially, rather than simply letting designs degrade naturally in lesser browsers (so-called “graceful degradation”), web designers should tailor the design for them as well, with the help of modernizr.js. Let’s use an example from the book to analyze this approach.

One of the included samples is a store page, where a user can view and purchase hardboiled detective novels. The page looks nice enough in all the major modern browsers. However, in Safari, the interface is much “whizzier” (technical term). Upon being clicked, the covers are animated, and flip to reveal a bit of information and an “Add to basket” button, accomplished with CSS3 transitions and 3d transforms. While this provides a nice “Look ma, no Javascript!” moment (for anyone who cares to examine the source code, that is), I think a solid argument could be made that this actually decreases the usability of the page.

Let’s assume, though, that the extra “whizziness” at least does no harm. Unless you have the luxury of designing exclusively for web designers, can a business case be made for taking the extra time and effort to create a design that only Safari users can see? Mr. Clarke himself states on page 71: “When I asked why people visited my websites I learned that most came for content”. Isn’t that, then, where more resources should be invested?

What’s more, since this solution relies on javascript anyway, to deliver specific CSS to browsers with different capabilities, and if the improvements are truly more than “enhancements”, why not make them available to everyone with some cross-browser JQuery?

Lastly, while one of the main tenets of the hardboiled approach is not to let sites “gracefully degrade” at the mercy of lesser browsers, in this store page example I think the design is more degraded than if it had been limited to a less whiz-bang layout in the first place. Chapter 5 of this book is titled “Browsers don’t limit creativity”. Mr. Clarke is absolutely right: working within constraints, even those imposed by lousy browsers, is not the cause of bad design. The fact is, you could have a beautiful and effective website without a single rounded corner, drop shadow, or gradient.

Conclusion

We need people to push website design forward, to see what can be done with the new tools offered by CSS3 and what methods we can use to adapt websites to ever-changing browsing environments; Andy Clarke in Hardboiled Web Design certainly does that. Whether or not you agree with his “hardboiled” methodology, the book is a good one-stop resource for information on HTML5 markup, ARIA roles, and CSS3 and will make you rethink and examine conventional web design wisdom.

Respond to this review

Author(s)Andy Clarke
PublisherFive Simple Steps
Pages390
Published2010
Category
Tags
Rating****

8 comments so far…Your thoughts?

Brian Crumley Jan 25 2011

I just got my copy of the book last week and am looking forward to diving in myself.

I see the value in both schools of thought. I’m in a position were generally the sites I work on can’t be “hardboiled”, but the ones that give me the opportunity to push the limits I would look to do so with this book at my side. Generally it would boil down to a case-by-case basis – at least for me.

Overall a very thorough and thoughtful review!

Thanks!

Nora Brown Jan 25 2011

Good point Brian, there are definitely sites where an argument could be made for getting all cutting-edge with your CSS. A case-by-case approach is wise.

Thanks for reading, and thanks so much for your comment!

webecho Jan 25 2011

Good review. I’m still waiting on the hardcopy of Hardboiled but ploughed through the PDF straight away.

I have to say I stand on Andy’s side regarding “serving different CSS to browsers that support it”.

“why not make them available to everyone with some cross-browser JQuery?”

A fair question, but by doing that it means that website will always rely on using Javascript for that particular function / effect – whereas using the CSS3 method, as browsers improve and grow to support these CSS3 ‘features’ the website gets to remain lighter and quicker while offering an ‘improved’ look or feature set to all browsers.

Brian makes, for me, the important argument that it should be on a case by case (or budget by budget) basis.
I don’t think critical elements of the site should rely on unsupported techniques, but offering extras to browsers that support them is a good way to make sure we don’t limit our creativity.

A good review though and as much as I enjoyed the book, it’s nice to see someone questioning Andy’s ideas rather than just saying how great it all is.

Nora Brown Jan 25 2011

Thanks so much Webecho. You’re right, with CSS3 we can hope that at some point in the future, when all these techniques are supported well, then the javascript could be dropped altogether using Andy’s approach.

And thanks for that vote of confidence as well. I have to say, with all the glowing everything about this book, I was hesitant to post something even slightly negative.

Thanks for reading and commenting.

Michael Slater Mar 01 2011

An excellent book for those who want to push the leading edge of web design. With the highly uneven browser support for most HTML5 and CSS3 features, it’s common practice to use them only as embellishments. Andy advocates cogently for designing for the best browsers first, and then creating lesser experiences for lesser browsers. It’s not quite the same as graceful degradation, mostly in that this approach dispenses with the “graceful” part (i.e., serving a simple typographic stylesheet to IE6).

I’ve posted a more detailed review here:

http://www.webvanta.com/post/264513-hardboiled

Nora Mar 02 2011

Michael, I appreciate that your comment is contentful, and the description at the link you posted is accurate. However, you haven’t really responded to anything in my review. Give us your opinion! Let us know what you think about Hardboiled!

Michael Slater Mar 14 2011

Nora, I plead guilty to thinking more about promoting my own post than commenting on yours. You’re providing a great service here and it deserves better. Mea culpa.

I think the “hardboiled” approach is most important for shaking up our thinking a bit, rather than for any of its specifics. I agree that the “enhancements” do not always enhance the effectiveness of the site, and there’s some of the same risk with CSS3 that existed when people overzealously used JS effects a decade ago.

With regard to your comment about “is it worth doing this just for Safari?”, while this example may work only in Safari today, it will apply to more and more browsers as time goes on. For me, that is the central argument for “designing for the best browsers first” — it yields designs that render at their fullest on more browsers all the time, and eventually on virtually all of them.

Nora Mar 19 2011

Hi Michael, Thanks for coming back!

Yes, if nothing else this book makes you evaluate your approach to web design. It spurred me to try designing in the browser (not for me, at the moment anyway) and has made me rethink the way I present designs to clients.

Comments are closed for this article.