Hardboiled Web Design Review

10 Jun 2011

Hardboiled Web Design, by Andy Clarke is a fabulous book aimed to web designers who want to learn about the creative opportunities offered by CSS3, and who want to use it today. You don't need to know everything about CSS, but you need to be familiar with writing well-structured, meaningful HTML or XHTML markup and using CSS to implement your designs. While learning about the latest technologies on how to make your website and applications more creative, flexible and adaptive, this book also offers a fresh perspective on how to handle older, less capable browsers.

Hardboiled?

What's 'hardboiled' web design? It's a challenge. It's about never compromising on creating the best work we can for the web. As Andy says himself:

It's about never being afraid to push boundaries, break rules, or invent new ones. Hardboiled is stripping our markup to the bone to make it more adaptable.

Hardboiled Web Design, by Andy Clarke

Hardboiled is not hesitating to make the most of new technologies.

It's taking it further than using CSS3 properties as a visual reward for people who use modern browsers. It's not good enough to start at the bottom, with the lowest common denominator design for less capable browsers, as there is only so far we can reach. The 'Hardboiled' approach is turning the progressive enhancement approach as applied to visual design on its head. It's working from the top down, designing for the best browsers first. Hardboiled web design also redefines graceful degradation for the challenges we face today. It pushes graceful degradation further and demands that we use our creative talents to design experiences that are responsive and tailored to a browsers's capabilities.

Aimed to forward thinking web designers

This explains the essence and mission of the book, and the techniques you'll learn. The book is definitely not aimed to pencil pushers, but to the brave creatives who want to expand their creative options, and who aren't afraid to evolve instead of making compromises. It's about focussing on what we can do, and not on what we can't do (yet).

So if you agree with the misconception that websites should look the same in every browser, and that it's not safe to adopt new technologies until every browser supports them, than this book will definitely not be for you. As the man says himself "Living in the past is not an option".

Hardboiled Web Design book, sample page Hardboiled Web Design book, sample page Hardboiled Web Design book, sample page Hardboiled Web Design book, sample page Hardboiled Web Design book, sample page Hardboiled Web Design book, sample page Hardboiled Web Design book, sample page

Introducing CSS3

Andy starts by explaining the way standards develop, and how CSS3 is broken into modules which enables the browser makers to implement CSS3 features gradually using vendor-specific prefixes. He digs further into the matter explaining the why's, how's, and the differences.

The hardboiled approach

Next, Andy talks about why a webpage doesn't have to look and be experienced the same in every browser, and also that browsers don't limit our creativity. He shows options on how to cope with older browsers. He demonstrates this in a very practical way with a real client conversation.

A cool tool called Modernizr

One of the tools Andy talks about in his book is Modernizr, an open source JavaScript library that enables us to serve appropriate and responsive designs that are tailored to the capabilities of a browser. Instead of enabling CSS3 properties in less capable browsers, Modernizr uses feature detection to test a browser’s capabilities to render them. He shows and explains all of this with practical examples, showing how things are rendered in different browsers, with different CSS(3) support. Since this book came out Modernizr has been updated to version 2. You can read what is new in this post on the Modernizr blog.

Microformats

For all of us who cares about making every HTML element and attribute count, and want to take it one step further semantically, there is the usage of Microformats. Andy shows us in a very practical manner how we can use Microformats in our designs.

I personally find this matter very hard to remember (I just can't). Andy has a very refreshing way of explaining and making it look effortless to take the extra leap to implement these into our markup. He turns them into our advantage and uses them to bind CSS styles to.

WAI-What?

The book takes it one step further into the topic of accessibility and explains the usage of another specification called WAI-ARIA (Accessible Rich Internet Applications Suite), which is aimed to make dynamic web content processed by technologies such as Ajax easier for people who use assistive technologies.

Presenting designs in a browser

Andy also talks about the limitations of designing websites the static way, using Photoshop or Fireworks. One of the things is the interaction that is missing, the poor typographic rendering of text etc. He states "Presenting designs as static images sets false expectations and reinforces old-fashioned ideas such as websites should look the same in every browser." The way we present designs needs to adapt to meet the wide-ranging browser capabilities and emerging technologies. Andy definitely has a point here, but I can't see myself actually starting my design in a browser. I just need the design applications that I know best, and feel most comfortable and creative in. For me they are Photoshop and Illustrator. Once the design is all set, I can start thinking about how to code. I can't really put my mind around design ideas while coding, unless it's something creative towards the markup itself. Like solving a problem in a creative way. To me it seems that most of the designs I create are too complex to code them before I present them to the client. It would take too much time and it could possibly be all for nothing as it happens sometimes that the first design isn't the right design. Unless there is an application that solves this problem, and is able to combine both worlds, I'm sticking to designing in Photoshop.

HTML5 and all

You'll get more than just an introduction to HTML5. Andy goes over almost the entire list of new HTML elements. Especially the form elements are very well explained. He explains when and how to use these elements. Furthermore he show us how you can style them and how we can fix things for older browsers. Throughout the book Andy gives use more than handful of useful links and tips as follow up on the side of each article or practical example.

CSS3 boiling it hard and harder

The next 2 big chapters, which is the biggest part of the book, is where the real fun begins. It covers all the goodness there is to know about CSS3. Just reading and looking at the examples given is a true inspiration. It makes your head spin into a 'can't wait to get started' mode. Andy gives us a ton of ideas on how we can apply CSS3 in different ways all very well explained and documented.

Hardboiled Web Design - book

Exclusive!

Mark June 14th in your agenda!

A little bird told me that next Tuesday, 14th June, Five Simple Steps will be offering something special — all the digital editions of Hardboiled Web Design, including PDF and the new ePub and mobi formats — for only £14.00! That's less than the normal price of the PDF! The “Hardboiled Web Design Digital Special” is perfect for customers around the world for whom paperback shipping can be expensive. It's also perfect for PDF owners who want the two new digital formats. This offer will be for one week only.

It will be on sale at Five Simple Steps

Conclusion

It's definitely one of the best looking books for this subject matter. The beautiful cover illustration is done by Kevin Cornell, the part opening illustrations by Elliot Jay Stocks, and the cool cartoony illustrations used on the demo example files are done by Geri Coady. The design and art direction is very well executed. The book is rather thick and heavy, and contains 390 pages.

It's one of these books that is always laying either on my desk or at arm reach as I constantly use it to look things up. Especially about CSS properties like gradients. Some things are still new or are hard and complex to remember from the top of your head. This book explains things so well as it is aimed to designers like me. So it's the perfect book to keep close to you while working. Highly recommend.

Comments

  1. 1 Sachin 10 Jun 2011

    Veerle, this review is exceptional. I’m all excited about ordering this book and diving into the content. Its great to know that, with the advent of these new solutions, we are now able to push the line a bit further all the time.

  2. 2 Tony 10 Jun 2011

    OMG, really love these bubbles you had in the graphic and awesome web-kit animation too! Great article and great design. Love your work as always!

  3. 3 Mike 11 Jun 2011

    Hey, Great review, definitely thinking about picking up the book.  In a way, I do what you mentioned in regards to showing clients ideas in the browsers.  I usually take a jpeg of the comp and make it to render full page.  Takes almost no work, but gives the illusion of a site.

  4. 4 Amie 13 Jun 2011

    Thanks for sharing interesting things with all of us. I like your thoughts.

  5. 5 Jennifer Lynn 15 Jun 2011

    Awesome review ya know! I have this book and I’ve always loved it. It’s nice to find others that see the greatness in it too! On a side note, I love your blog design. Lovely details and color usage.

  6. 6 Richard Brill 02 Jul 2011

    Good to see a book that encompasses the ideal of Progressive Enhancement. Nice review Veerle, and, nice blog design! Quite different to the left aligned, much darker thing you had before.

The Deck

Ads via The Deck