It’s about time we stopped making compromises. Andy Clarke sits down with Oliver Lindberg to explain his theory of “hardboiled web design” and how we can use CSS3 to its fullest extent
Andy Clarke wants to do away with the idea that websites need to look the same in every browser. He feels that this convention, which web designers have lived with for 15 years, gets in the way of us making use of the new creative opportunities offered by CSS3, so it’s time for a rethink. Clarke stresses this point again and again during our interview with him and in Hardboiled Web Design, the long-awaited book he released a few weeks ago with Mark Boulton’s publishing company Five Simple Steps.
“Not every browser supports the same CSS at the same time. We need to accept that that’s just a fact of life,” Clarke says. “We have to learn to live with it and realise the hard, cold truth: websites can’t look the same in every browser. To expect that a website will look identical in Safari on an iPad and in IE6 on a PC is crazy. There will always be differences in the ways that browsers render CSS. All the browser vendors have different release schedules and agendas. The second thing is that there will always be older browsers. This whole conversation about when we can stop supporting IE6 is exactly the same as the one that we were having five years ago about IE5 and IE5.5. If we’re going to really allow ourselves to move ahead with using CSS3 stuff in particular, we have to let go of this idea that there will ever be a level playing field. The problem isn’t older browsers – it’s that there will always be browsers that have different capabilities.”
Realign yourself
He argues that the dilemma stems from the way we’ve historically pitted design departments against developers. “We’ve structured our design process so that design comes before development. Designs are done in Photoshop and signed off by a client, who will obviously expect the website to look the same as the comp, otherwise what the hell was the point of giving it to them in the first place?”
Starting with a Photoshop document and basing the HTML on it is the wrong thing to do, according to the gospel of Hardboiled. “It creates a world of pain from the very beginning,” Clarke says. “Clients needn’t understand all that stuff that’s involved in web design, particularly in terms of the differences between browser rendering. But when you show a client a Photoshop comp, you’re showing them a blueprint of how this design should work. I’m not suggesting you should design in a browser. Design in Photoshop or on the back of a cigarette packet – it doesn’t matter. But once you’ve finished the work, resist the temptation to show it to the client and spend a couple of hours making that page up in HTML and CSS. Do the best job that you can and show them that. They will sign off what they see.”
That way, his argument goes, clients can interact with the design directly, which is a lot more powerful. It’s an approach that can actually save you time. These days, Clarke, who says he still does client work 80 per cent of the time, works through a layered design process and goes straight to the HTML, even producing all his wireframes in it.
“I used to spend days making Photoshop comps of every design template,” he sighs. “So much time is wasted in that program. If you use design tools for what they should be there for – to show look and feel – and spend your time in code, you’ll actually spend less time overall. Your HTML should be written for the content, not for the page layout. We should look at our content and the functionality of the page first, independent of any visual design, and write the HTML based on that. Then we should look at our visual design and try to accomplish it just using CSS, without adding in presentational elements or attributes. If we do that, we make the HTML and CSS a lot more flexible and adaptable to all these different environments. And if you don’t know HTML and CSS, work with somebody who does. Sit next to each other and build it together before you show the client.”
Bad religion
Controversially, Clarke blames some of the biggest buzzwords of recent years for our reluctance to make the most of CSS3. “We think about progressive enhancement like a religion,” he claims. “It’s almost like a doctrine that can’t be challenged. But the first articles on progressive enhancement were written by Dave Shea and Steven Champeon in 2003. While almost everything in the notion is still relevant, the problem is the way that we’ve continued to interpret it and how we’ve applied it to visual design. The idea is that you start off with the lowest common denominator, create for the worst browser first and then add in things for people that use better models. Well, it’s not surprising that we’ve only managed to put in rounded corners and drop shadows, because when you start at the bottom, there’s only so far that you can reach up.”
Instead, Clarke suggests, we should start at the top, design for the best browsers first and then think about different capabilities. “A few people have asked, ‘Isn’t that approach just graceful degradation?’ and, of course, it is! But to hell with being graceful! We need to be really ambitious.”
Clarke advocates working around browser differences rather than resorting to hacks, and advises against using Microsoft filters. “When we started getting excited about CSS3, some people realised that we could accomplish some of the same or similar results with Microsoft’s proprietary extensions. That’s actually a really dangerous route to go down. Those filters are a legacy of the first browser wars. Why would we even want to use something that was written in 1998? They also have an amazing performance hit. Every single time the AlphaImageLoader filter, which people often use for fixing transparent image support in IE6, is used for example, it freezes the rendering of the browser until it’s rendered the image. They reinforce the idea that websites should look the same in every browser, and that we should try and accomplish that through any means necessary – even at the expense of standards. That’s terribly wrong. When you put them in the same conversation as CSS3, you reinforce the incorrect idea that, somehow, Microsoft filters and CSS3 are the same. They were never part of any standards development process and they never will be. To somehow suggest that they are equal is very dangerous.”
Look to the future, now
Many clients quote browser market shares (“only five per cent of people use Safari!”), but Clarke says it’s wrong to look at today’s figures. “I always say to my clients that you’ve got to ask what the proportion of people using Android or iOS devices will be in six, nine or 12 months. Look at the trends. We’re not designing for now, we’re designing to be ahead of the game. Does this mean we have to go back and change our CSS? Hell, yes! We should be doing that all the time anyway. We should be constantly re-evaluating whether we can make our CSS better, faster and more optimised and leave behind a lot of the hacks that we might have put in there in the past. Sure, some things are changing constantly. Gradients are really in flux at the moment. But it doesn’t mean that we should wait and not use them. That would be a real waste of an opportunity.”
All of these thoughts make up Hardboiled Web Design, for which Clarke has assembled a team that reads like a who’s who of web design: cover illustration by Kevin Cornell, inside illustrations by Elliot Jay Stocks, foreword by Jeffrey Zeldman, tech editing by Tim Van Damme… the list goes on. An iPad version that will make the demonstration of code interactive is on the horizon. Clarke wants to turn it into the kind of CSS3 learning tool that nobody has ever created. He’s also preparing content for Hardboiled workshops, which will start in January, and include examples that aren’t in the book, as well as a series of short CSS3 video tutorials. Web design is about to get Hardboiled.
