Reactive Layout part 1, The Principles
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.
- It’s not a checklist. I don’t believe in checklists for anyone beyond the apprentice stage in any craft. Between our ears is one of the better information processing and decision making engines on the planet; I firmly believe in using it to the fullest extent. If you need a literary allusion for this, try Nero Wolfe’s advice to Archie (on numerous occasions): “Use your intelligence, as guided by experience.”
- It’s not the be-all and end-all set of engineering principles for the craft. We don’t collectively know enough about the craft to presume to use the term “engineering” for it.
- While I consider the principles to be logically derived and valid, concrete expressions of these principles can vary, so I am neither prescribing a design/development methodology nor proscribing one.
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
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.
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.
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 is just an enunciation of the basic principles behind the practice. Next time, I’ll talk about some practical measures that express those principles.
Pingback: Theodicius » Reactive Layout, pt 2, The Beginning