Resilient Web Design

Gutenberg’s printing press would not have been invented if it weren’t for the work already done in creating the screw press used for winemaking. Technologies aren’t created in isolation. They are imprinted with the ghosts of their past.

The layout of the QWERTY keyboard for your computer— and its software equivalent on your phone— is an echo of the design of the first generation of typewriters. That arrangement of keys was chosen to reduce the chances of mechanical pieces of metal clashing as they sprang forward to leave their mark on the paper.

The hands on a clock face move in a clockwise direction only because that’s the direction that the shadow cast by a sundial moves over the course of a day in the northern hemisphere. Had history turned out differently, with the civilisation of the southern hemisphere in the ascendent, then the hands on our clocks would today move in the opposite direction.

The reason why floppy disks wound up being 3 ½ inches in size is because the disk was designed to fit into a shirt pocket. The icons in our software interfaces are whispering stories to us from the history of clothing and fashion.

The world of architecture has accrued its own set of design values over the years. One of those values is the principle of material honesty. One material should not be used as a substitute for another. Otherwise the end result is deceptive. Using TABLEs for layout is materially dishonest.

Writing CSS within JavaScript materially dishonest too?

Each new medium begins its life by imitating its predecessors. Many early movies were like filmed stage plays; much early television was like radio with pictures or reduced movies.

John Culkin put it, “we shape our tools and thereafter our tools shape us.”

In his book Where Good Ideas Come From, he explores an idea called “the adjacent possible”: At every moment in the timeline of an expanding biosphere, there are doors that cannot be unlocked yet. In human culture, we like to think of breakthrough ideas as sudden accelerations on the timeline, where a genius jumps ahead fifty years and invents something that normal minds, trapped in the present moment, couldn’t possibly have come up with. But the truth is that technological (and scientific) advances rarely break out of the adjacent possible; the history of cultural progress is, almost without exception, a story of one door leading to another door, exploring the palace one room at a time.

Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They’re holding us back. Start designing from the content out, rather than the canvas in. This content-out way of thinking is fundamentally different to the canvas-in approach that dates all the way back to the Book of Kells. It asks web designers to give up the illusion of control and create a materially-honest discipline for the World Wide Web.

Robustness Principle, also known as Postel’s Law: Be conservative in what you send; be liberal in what you accept.

That’s a pattern that repeats again and again: a solution is created in an imperative language and if it’s popular enough, it migrates to a declarative language over time. When a feature is available in a declarative language, not only is it easier to write, it’s also more robust.

XHTML 2.0 died on the vine. Its theoretical purity was roundly rejected by the people who actually made websites for a living. Web designers rightly refused to publish in a format that would fail completely instead of trying to recover from an error. Strange then, that years later, web designers would happily create entire websites using JavaScript, a language that shares XML’s unforgiving error-handling model. They didn’t call them websites. They called them web apps. That distinction was cold comfort to someone who couldn’t complete their task because a service relied on JavaScript for crucial functionality.

In his classic book How Buildings Learn Stewart Brand highlights an idea by the British architect Frank Duffy: A building properly conceived is several layers of longevity. Duffy called these shearing layers. Each of the layers moves at a different timescale. Brand expanded on the idea, proposing six alliterative layers: Site— the physical location of a building only changes on a geological timescale. Structure— the building itself can last for centuries. Skin— the exterior surface gets a facelift or a new lick of paint every few decades. Services— the plumbing and wiring need to be updated every ten years or so. Space plan— the layout of walls and doors might change occasionally. Stuff— the arrangement of furniture in a room can change on a daily basis.

The idea of shearing layers can also be applied to our creations on the web. Our domain names are the geological sites upon which we build. At the other end of the timescale, content on the web— the “stuff”— can be added and updated by the hour, the minute, or even the second. In between are the layers of structure, presentation, and behaviour: HTML, CSS, and JavaScript.

Decisions made in haste at the beginning of a project lead to a cascade of issues further down the line.

Carl Sagan put it best in his book The Demon-Haunted World: It is far better to grasp the universe as it really is than to persist in delusion, however satisfying and reassuring.