Responsive web design Zen gardening

This article first appeared in issue 235 of .net magazine – the world's best-selling magazine for web designers and developers.

Not long into the current millennium, design for the web was in transition. The methods and techniques we had used to make our first mark on this new communications medium were becoming staid and unsustainable. New possibilities in separating content from the presentation layer were permeating their way into the industry, and cascading style sheets were the way forward for the responsible designer. Adoption was neither universal nor instantaneous. There was resistance, confusion and some very vocal debate throughout the design community.

From the haze came Dave Shea’s CSS Zen Garden. The site, if you don’t know it, accepts CSS submissions and applies them to a core HTML file, demonstrating how separating content from its presentation facilitates a beautiful, effective flexibility. In 2003 it marked a sea change. It enlightened many designers, including me, and put the argument for the jump to CSS beyond debate.

We are in similarly epochal times today. Technology, hardware and software combined have presented us with another fork in the road for online design. The flagship approach to these new challenges has an official name: responsive web design, a term that packages up a collection of techniques. A banner of convenience it may be, but it at least suggests a direction. Its greatest achievement has been coalescing the design community in a way that links circulated on Twitter or hundreds of disparate, fragmented blog posts – no matter how insightful – do not. RWD offers a sense of unity.

There are a number of other, less celebrated concepts in circulation that are often confused as interchangeable with RWD: future friendly. One web. Content out. Number wang.

The smoke signals coming out of the industry simply add to an air of confusion; strangely, it’s a topic that sets designers at odds. I say strangely, because any forward-thinking designer must see the accommodation of multi-device access as a necessity. In that sense I am an advocate of RWD. And yet I am also wary of sliding towards a ‘the answer’s RWD, now what’s the question’ stance.

Uncomfortable reality

In practice, we can face an unenviable choice on commercial projects: do we deploy a visually unappealing but responsive website, or a highly engaging fixed-width site? An exaggerated distortion perhaps, but one that I believe represents the uncomfortable reality for a large proportion of designers trying to integrate a responsive approach into cost-sensitive projects. Implementing RWD techniques can occasionally detract from the user experience, specifically in the area of visual design. Is compromise the ultimate price we pay for progress?

RWD may not be perfect. It may not be suitable for all projects. But it is evolving. Ben Callahan’s excellent post ‘The Responsive Dip’ references Seth Godin’s ‘dip’, the “long slog between starting and mastery”, and applies Burch’s four stages of competence to responsive web design. We’re all in there somewhere, and I’ll willingly place myself in the ‘conscious incompetence’ category. And like many others in the profession, I’m working hard to bring sense and order to the new device landscape we now operate in. I believe that in essence the argument is settled. We all want what’s best for the user, right? We’re just fussing over the minutiae of technique.

So what do we need? I believe we need a new focal point for the design community, in the spirit of Shea’s original proposition. We need a centre where we come together to work, to grow, to tend and to nourish. We need … a garden.

Why? To create a bridge between the zealots who imply we should all, as individual designers, just get on with it, put up or shut up, and the deniers who have their heads in the sand, sensing that RWD means a further loss of control over the visual layer.

This is not a new proposal by any means, and the practical challenges are many, but I have not seen an outright call for an RWD Zen garden. So let this be it. Our industry should work together to progress the craft of design for the web. Dig for victory!

Discover 20 steps to the perfect website layout, over at Creative Bloq.