Rethinking our assumptions on web design close

In praise of Hardboiled Web Design

For years, there has been a consensus that great web developers are those who can make pixel-perfect replicas of Photoshop-made designs inside Web browsers, from Internet Explorer 6 to more modern browsers. The markup didn't need to be good (hell, clients don't even see it!), and it didn't matter what dirty tricks you used to make the design come to life, or even if it actually was usable, as long as it was working in IE6.

Today, techniques like "progressive enhancement" or "progressive enrichment" prevail. We have got used to building for the least capable browsers first, and improving the experience where possible for more modern browsers. Dumbing-down the experience, we felt lucky when we could squeeze in a few CSS3 rounded corners.

But that needs to change. There is more to CSS3 than rounded corners and drop shadows. Rewarding viewers using modern browsers isn't enough anymore. This is why I got so excited when a few weeks ago, Hardboiled Web Design, a new book from Andy Clarke, was released.

Hardboiled web design is about never compromising on creating the best work we can for the web. The postulate is simple: it is possible to give clients what they want and at the same time use new technologies such as CSS3 and HTML5 to expand creative options. This is the new Bible of Web development. Quoting from the book:

"The reality is that the web has changed, and our work and our clients' expectations must move beyond the one-size-fits-all approach we have laboured over for so long if we're to make the most of what it has to offer. No two browsers are the same, so to make the most from emerging technologies such as HTML5 and CSS3, we need to banish the notion that websites should look and be experienced exactly the same in every browser."

It is no longer about progressive enhancement or even graceful degradation, it's about acknowledging the browsers' differences, and offering the right experience, appropriately crafted and responsive to the capabilities of the browser. Do websites need to look exactly the same on every browser? No. Do websites need to be experienced exactly the same in every browser? Nope.

Potentially this is a radically different work process, where the Photoshop design phase is skipped, and the site is directly designed inside the browser, using the latest technologies available, and with a strong focus on quality, meaningful markup. Development time is reduced, quality improves, clients get to see the design in action very early on (instead of flat images, which fail to represent the browsers' rendering differences), and users benefit from tailored experiences.

This is obviously not a "one size fits all" approach, but it is definitely worth experimenting with.

Paraphrasing Hardboiled Web Design one last time, the question to be asked for your next Web project is and should be: would you rather have developers spending your budget hacking around issues for older browsers like Internet Explorer 6, or spend this time future proofing the website to look the best it can on better, modern desktop browsers, as well as on a whole host of mobile devices?

So what does this mean in practice?

For Desktops:

• The modern browsers (Safari, Chrome, Firefox, Opera and IE9) get the best experience - the one we design for, right from the start. Webkit browsers (Chrome and Safari) get the best experience of all, as they provide the most advanced CSS3 features.
• IE7 and 8 get a simpler version (this generally means no rounded corners, no drop shadows, and little to no eye-candy effects)
• IE6 gets a custom version of the site, different from the other (possibly very different), to accommodate with its rendering capabilities. Simply put: same content, but different form

For Mobiles:

• Depending on the type of site, modern mobile browsers (iOS and Android browsers) can be served the same version as modern desktop browsers, but with a tailored experience adapted for mobile use (using CSS media queries for instance)
• Older and less capable mobile browsers should be served a different website (to save bandwidth and cut down the load time for the user), requiring separate development

Click here or here if you would like up-to-date statistics on browsers market share.