Good. Evil. Bratwurst.

Reactive Layout part 1, The Principles

Posted on by arlen

I’ve been rethinking my approach to web design starting from First Principles going forward, and I think it’s coherent enough to be exposed to the public.

Before I begin, I think I ought to tell you what it’s not.

Principle the First: The Web Is Not Paper.

It seems obvious, but I’ve seen too many pixel-driven print designs on the web to not start from this point. An analogy I’ve used for many print designers is that the web is like print, except you control neither the size nor the quality of the paper used in printing. Some folks will have newsprint the size of a postcard for you to print your design on, others will have D-sized vellum, others B-sized linen, and still others A-sized card stock. Your task is to create a design that works on all those papers. (OK, I admit I love seeing them cringe at the thought of printing a production design using whatever paper the printer has loaded.)

Some immediately throw up their hands and declare design isn’t possible under those circumstances. That’s the sound of a paradigm shifting without a clutch. The good ones recognize an opportunity for creativity when it comes a knocking. What you can’t control, you have to control for.

Principle the Second: The Web Is A Two-Way Medium, Except When It Isn’t

How can you control for the uncontrollable? By listening. Not only to the customer, but to the customer’s browser. The browser knows what the window is, what it can do. It knows about its environment and user than you do. So listen to it. How? With Javascript.

Javascript can tell you what the browser knows. It can tell you what the window size is, so you know whether you’ll fit, or what you have to do to make yourself fit. It knows what has happened to the boxes you have so carefully stacked on the screen.

To fully exploit this second principle, you need to change your metaphor. You need to let go of the illusion that you have control. Take delivery from the Cluetrain; a website isn’t a broadcast station, it’s not a monologue, it’s the beginning of a conversation between you and your audience. Perhaps an even better metaphor is it’s a dance.

Let’s Dance

It’s far too simplistic to say that when two people dance together, one leads and the other follows. Technically, that’s true, but there’s far more to it than that. The leader starts the whole thing, yes, and indicates what the next step or direction should be, but that only works if the follower agrees to it. If the follower either can’t or doesn’t want to perform the step or direction change, and the leader tries to force it, tragedy ensues. Instead, there’s a subtle negotiation on the dance floor, and while the leader leads, the leader also reacts to the way the follower follows, adjusting the lead so that both have a maximally enjoyable time on the floor.

Dance is best when both partners are familiar with the other’s tendencies. But imagine two strangers dancing. If the leader goes in for just the basic forms, and the partner is actually a great dancer, the partner will be disappointed and neither will get the enjoyment they might have received from the dance. And if the leader insists on advanced steps and maneuvers when the partner is only up for the basics, again neither will enjoy the experience. But if the leader offers the opportunity for the advanced partner, and is sensitive enough to the abilities of the partner to back off if there is resistance, the experience will be delightful for both.

This is the way our websites should work. There’s a definite lead on the part of the designer and developer. But the capabilities of our dance partners in this, the audience, is varied. By using a soupçon of javascript we can listen to our dance partner effectively, and adjust our steps to their capabilities.

But some people insist on surfing with javascript turned off. What then? They form the exception to the second principle. Those people, for reasons of their own, are telling you they don’t care to participate. To relate to our dance metaphor, they’re the people who walk stiff-legged out onto the floor. For them, we can only follow the few signals they’re willing to give us, and for the rest, simply be prepared to handle what might happen as safely as possible.

Principle the Third: Unity is not Unison

You’ve spent a lot of time, effort, and even money developing the message you’re presenting. Whether the message is about service, products or knowledge, you need that message driven home; you need a unified approach to delivering it, no wasting time or wandering about.

But why does that mean every browser should see exactly the same website? Imagine a large choir, each and every voice in it singing the melody line. That’s unison. Now imagine the same choir, with some voices following the melody but off by a consistent interval, and still others ranging far with beautiful counterpoints. That’s still unity, but it’s not unison; it’s harmony.

No, I’m not suggesting a return to the bad old days of developing and maintaining multiple websites. I’m talking about developing one website, but reacting to the cues you receive from the browser while delivering it. Returning to the dance metaphor, I’m talking about listening to your partner and while not asking them to dance the advanced steps unless they want to, making sure they still get the good experience they deserve.

This principle has shown up in various forms before, parts of it can be Graceful Degradation, parts of it can be Progressive Enhancement, but there’s more to it than just that.

Principle the Fourth: Above All, Do No Harm

This principle guides the response to those above who choose not to fully take part in the dance. They are not to be neglected nor despised. Give them the best you can hope for them to get, and the best you can do without the benefit of the javascript feedback.

This is just an enunciation of the basic principles behind the practice. Next time, I’ll talk about some practical measures that express those principles.

One Response to Reactive Layout part 1, The Principles

  1. Pingback: Theodicius » Reactive Layout, pt 2, The Beginning

Leave a Reply

Your email address will not be published. Required fields are marked *

May 2009
« Apr   Jun »