Hardboiled changes everything
Read our first impressions of the new Hardboiled web design book from Andy Clarke.
If you're a web designer in any capacity, there's a pretty fair chance you've at least seen some detail about "Hardboiled on Twitter" so I'm writing up these thoughts assuming you at least know what I'm referring to. (More info here just in case).
I managed to grab a copy from Fivesimplesteps and here's some initial thoughts on the first read.
I'm sure I'll dip back into the book over time and will make any relevant updates then so this is very much a first impression of the content.
There's been a lot said about the design of the site and the layout of the book as well but to be honest, it's produced by a top notch designer so I don't think there's much need to say anything other than it's beautifully designed.
Hardboiled as an ethos
As an agency, we really want to fully embrace progressive web design and make great things for those who use the best browsing tools but do also have to balance that work with building websites for our clients and their customers so it's a delicate balancing act particularly with existing, older websites.
It's something I'm sure many other agencies stuggle with and have the constant "discussion" with clients about why it's not necessarily a bad thing that sites look and behave differently according to viewing medium/browsers.
Hardboiled makes a serious attempt to address this part of our job and give designers some of the tools needed to help "sell" progressive development to new and existing clients.
Selling Hardboiled to your clients may still be a bit tricky
Hardboiled is roughly split into three parts, firstly an introduction and an overview of what it is covering the progressive side of web design. Second, the actual nuts and bolts of how to discuss with clients the benefits of this approach over the " old fashioned it's got to look the same in every browser" mindset and then a very comprehensive and detailled look at some HTML5 markup and some great CSS3 examples and how to add modern CSS3 effects while keeping degraded fallbacks in place for older browsers.
I'm also comparing Hardboiled with another book we recently bought for the office which is also about changing how we work and how we interact and manage our client jobs. That book (and the process) is called Kanban by David J Anderson. We found it extremely useful in the depth it went to dealing with common objections and how to answer those effectively.
It's all about changing how you work, embracing progressive and dynamic working practice and as such, while not covering the same material, is I believe, the same sort of approach that sits well with the Hardboiled ethos and dealing with client objection is a very big and well written part of the book that works very well for us in providing crib material to counter a huge range of questions and objections.
Share discussion and ideas?
Hardboiled does perhaps suffer a little on this front in comparison because it's a newer subject but it's something to consider and it would be great to see theHardboiled website consider opening up a discussion forum to help bring designers together on this topic and share advice and answer the more specific questions and client examples we might all have.
Written from a lofty perch
In some respects Andy is a lucky man who can probably pick and choose clients(p41) who hire him based on reputation and past (excellent) work and possibly practically beg to use the latest cutting edge technology to be used as part and parcel of hiring him and that the whole Hardboiled discussion is possibly a short one with those type of clients :)
Sadly I don't think everyone is so lucky in that respect although I do understand why we should all do our bit.
I'm sure most people can also relate to the classic Oatmeal cartoon How a web design goes straight to hell and relate to the pain of trying to use the best tools for the job, do the most progressive work possible only to be told "I'm the client - do it my way anyway" and know there's not much you can do in some situations.
Sterotypes like this unfortunately exist because they're very real and happen a lot. I'd love for just a bit of expansion on what the best way to deal with this sort of client is and if there are some that simply can't be convinced in the authors opinion.
Common objections - more, more, more!
While the code samples are well written and considered for their practicality instead of being just pointless eye candy, as an agency, we bought the book very much for the "business" side of things and for best advice and I was almost hoping for a more extensive guide to common objections and how to counter them as the Kanban book above does which we used to great effect at a recent client meeting which resulted in us overhauling our internal process and that of the client in how we manage work.
There are several points well raised about how we should be progressive and push the web forward but we're very much stuck at a junction in the web world with the push to wider use of browsers like Firefox and Chrome but with the stubborn refusal of Internet Explorer to actually come up to date.
In many cases, clients themselves are still on outdated technology, (IE7 being a common culprit) and while the arguements for creating better experiences for better browsers is sound, it's also difficult to show and sell it to a client when they themselves can't see what you're talking about. I don't think I missed the part where this is covered and how to get around what I'd imagine is a common objection. (If I did, let me know!).
Killer pages and updating existing clients
I'm sure like most agencies, we're not alone in having to support IE6 to a certain degree and wishing we didn't and Hardboiled does address this.
There are some real killer pages from 39 through to 56 covering the whole thorny issue of older browsers and while it's pretty extensive, I'd have loved to have seen some examples of how clients have been "converted" to the Hardboiled way of life from the "must look the same" school of thought.
We're in need of a little help here
Ideally, I'd have liked more real case studies and while I know it's impossible to cover every scenario for every agencies client list - seeing an example of a client who's been working in the old way being taken through an extensive "upgrade" of their site would have been a great addition a real objection killer.
Apart from that, I'd say when dealing with new clients in particular, selling the "Hardboiled" approach is pretty well covered and logical. It's something we're going to be embracing here with new clients whenever possible.
You'll be able to read lots of other reviews and discussion about the quality of the code examples in Hardboiled. I'm not going to bother covering these even though they actually account for nearly 2/3 of the book because basically they're written by someone who is, quite literally, world famous for writing progressive and practical code. You can safely expect more of that standard in this book.
I'm keen as an agency to make every effort to embrace the newest technology and I'm confident Hardboiled web design will help us as an ongoing guide in our efforts to produce great work for our clients.
Right now, I'm still struggling to figure out how best to update our main client to help them make the jump from old to new because we're talking about a site with hundreds of template elements, tens of thousands of pages and other ongoing business priorities in one of the most competitive markets around but we'll figure that one out!
I guess that's probably something I can't reasonably expect to be covered in a book aimed at a wider community of designers and agencies but I'm sure I wouldn't be the only person who needs some pointers on that particular scenario.
We are however going to do our best to balance Hardboiled progressive development with the day to day requirements of the clients we work for.
I've only recently started looking at developing in HTML5, partly because our main workload is still very much based on existing XHTML templating and a historically entrenched "must look the same" client approach. I'd have to admit some of the things about HTML5 and IE still bother me a bit because of the lack of support for some of the new elements like <aside> or <section>.
I guess that's another blog post altogether though!
Despite that, we're pushing on! A lot of folks seem to be building up some sort of "boilerplate" they can deploy on projects which brings together some common functionality, css and setup rules and either building that themselves or using one of several good systems out there in much the same way as people use a CSS framework to speed up workflow.
Some link goodness
So, in no real order, here are some links I've collected from reading the book and generally reading up on HTML5 and CSS3 development.
- BUY THE BOOK - Hardboiled web design
- HTML5 Boiler Plate system
- Modernizr - Vital for IE + HTML5
- Selectivizr - CSS3 selectors for IE
- HTML5 Fallback strategy for IE
- CSS Grid - A highly configurable (down to mobile) CSS grid
- CSS3 Please - Play around with CSS3 rules in browser
- Do all websites need to look exactly the same?
- hCard creator - Microformats.org
- Fluid images - Ethan Marcotte
- Universal IE6 stylesheet - Andy Clarke
Your thoughts and suggestions
Much of this review has been written looking at how we can implement all the great things outlined in the book into our workflow for our existing clients as well as new ones and as such, some of my requests for more detail I appreciate are pretty specific to us but I hope not things nobody else in the world has come across!
As such, I do appreciate it's impossible to cover everything in the book but it does give some top quality jumping off points and leaves scope for expanding in the future.
I hope this has been a helpful overview of the book that most people feel will define the next big step in web design. Time will tell on that one but if you've got any thoughts or suggestions for things I've missed or links I should bookmark, feel free to pop them in the comments or get in touch via @offroacode on Twitter.