A (not so) jilted English professor’s guide to creative web design

Responsive design has some definite buzz of late, and with good reason. It promises to simplify the increasingly complex task of adapting websites for the countless new devices multiplying by the minute.

By considering a few common variables like screen size, adapting a site to its visitors’ particular needs becomes a matter of some clever CSS planning and Javascript rather than the detailed design of numerous, parallel sites. For anyone whose faced the logistical minefield of multi-site coordination, responsive design is, to put it mildly, a very good thing.

As you may know, the concept itself is actually borrowed from architecture, another discipline that focuses on the relationship between people and created environments. The crossover makes sense.

According to Steven Johnson’s book Where Good Ideas Come From (2011), this kind of conceptual cross-fertilization has been responsible for numerous key breakthroughs throughout the history of thought and invention. This insight gave me an idea. Although I’ve been casually designing sites for almost as long as the internet has been around, until about six months ago most would have thought of me primarily as an English professor. A recent career shift to full time developer/designer, in combination with my background in literary studies, has given me a unique and perhaps weird perspective on the world of design.

Now I wish I could pause here to blast the cold-hearted bastards that swore I’d never set foot in a university again, because that would be so badass, but the fact is I actually left teaching on purpose and on good terms. I did it to explore the relationship between technology and culture, something that has fascinated me at least since I first sat down and played King’s Quest II in 1986. When I was asked to write this article, I got to thinking about the productive cross-fertilization between design and architecture. I wondered what — if any — concepts from literary studies might be usefully applied to web design.

After some musing, I’ve compiled a list of six possibilities. These represent only a first pass at the question, but I hope they can at least be suggestive and perhaps provocative. In literary geek terms, I’m doing a little ratiocination. On with the concepts…

1. Metaphor

This one’s almost too obvious, but last I checked metaphor is still largely the expertise of English professors. Brace yourself for one of those annoying zingers people always says about their profession: believe it or not, the web is all metaphor! Burn! (No, not really). Metaphor — a comparison using two items that appear to have no relation — is the chief (and some would say only) paradigm we use to process new technical media.

The idea of a link is a metaphor — it could have just as easily been called an IP transfer node, but that would take the average non-technical user much longer to understand. When Tim Berners-Lee was trying to conceptualize the Internet itself, he explored metaphors of mines and meshes. The Web, Windows, Tweets, Digg, Facebook, Canvas — these are all metaphors (and Reddit’s a pun).

Here’s really the main thing to take away from this one: being aware of one’s metaphors is a great route to successful design. The secret of numerous well-known websites is that they are fully aware of the metaphors they use: they pull ideas down to earth from the ether of code (interestingly, at least to me, the point of comparison in a metaphor is actually called the “ground”). Metaphors appeal to people’s visual and tactile senses, and this makes them much easier to remember, particularly because we live with increasingly visual and tactile technologies.

To make the word more palatable to the executive ear (tsk, tsk), you could introduce it as “visual coherence” or “tactile consistency.” They would eat it up like a dog’s breakfast (oops, simile).

2. Signature

When I used to teach first year composition classes, signature was the single most important concept I worked on communicating. It doesn’t just mean putting your John Hancock at the bottom of something. It refers to the unique trace of the person that peaks through the words and ideas. Closely related is the idea of voice: the vital, unique force that speaks through a particular project.

Best practices can take you a long way, but good design usually has a clear signature and a voice, and again, the best coders are the ones who are conscious of their unique style. While a cranky client may seem to relish nothing more than the thought of destroying your signature entirely, it peeks through in everything from color palate to font to layout to cross-browser solutions (and, yes, even your particular implementation of responsive design). It’s not quite the same thing as brand, because it is always implicit rather than explicit. To look for its traces think about how you’d redesign Google or Facebook.

If that’s all a little too abstract, you can always see how the buzzwords “design subtext” or “sub-theme” or “implicit scheme” or “subscaping” roll off your tongue.

3. Busting the Cycle

Okay, this one’s not strictly from an English classroom. I actually stole it from an episode of The Show with Ze Frank, but I often applied it to lessons on how to write A+ papers. The most brilliant papers are those that not only identify current ways of thinking but also take them a step further.

Although I’m still in love with the curvaceous joys of CSS3’s “border-radius” attribute, for instance, I noticed that Twitter’s new rollout actually did round corners in a scaled-back, toned down, 3px kind of way. Along these lines, very few designers have explored the possibilities for asymmetric curves in an effective way (somebody get on that!).

True creative talent resides in the ability to spot and explode a cliché — to swerve at the last moment away from the creative dead end. If you’re just copying what’s out there, then you’ve already fallen behind. The people who designed current hot sites are already working on their next phase.

There’s only one sure-fire method for spotting the clichés and busting the cycle: research. Before you groan and writhe in agony, just stop and realize that research in this case means surfing a lot of what you consider to be really fantastic websites. Steven Johnson notes that research is so effective because it leads to improved generation of what’s called the “adjacent possible” — the possibilities that lay just beyond the limits of current ways of looking at things.

I’ll term this one “predictive development” or “proactive design” or “tactical border-trashing”, just for kicks.

4. Nonce Taxonomy

What, you may be asking yourself at this point, does this guy have for all these random terms? Let me explain.

The term “nonce taxonomy” is borrowed from a woman who died way too soon, my literary-critical hero Eve Kosofsky Sedgwick. Nonce means “for the once”, and a taxonomy of course is a system of naming. So a “nonce taxonomy” is a system of concepts and terminology that’s tailor made for the project at hand, and disposed of or redeveloped as soon as it becomes cumbersome or meaningless.

Not only does this way of thinking about a project allow for a good supply of fresh ideas, it also allows you to tailor each project to the particular (and peculiar) demands of the client. A simple way of inventing a nonce taxonomy is to work for awhile and then whiteboard a list of terms, themes, ideas, recurring patterns, and code elements that seem most relevant to the project at hand. See if these lend themselves to any further patterns or terms, and regularly add and subtract from the list as you see fit. The idea here is to befriend the mobility and flexibility necessary to any creative project.

As a further note, XML and OOP languages are nonce taxonomic systems of sorts, though they’re obviously a little more rule-bound. In terms of more specific practices, nonce taxonomic design can be incorporated into everything from variable names to documentation, and certainly can be used to spice up client interactions (Jargon is sexy). You could say it provides a “soul” for the project, if you’re into that kind of thing. I’d come up with a feisty buzzword here, but I think this one’s a thing of beauty in itself. R.I.P Eve.

5. Contact Zone

This term was developed by a critic named Mary Louise Pratt in response to the idea of frontiers (as in Wild West frontiers). She claimed that frontiers are the wrong metaphor for the situation, because they only suggest that action occurs in one direction from one perspective. The fact is that even in situations of extreme power imbalances, such as that between cowboys and Indians, multiple perspectives and motives from both sides shape the outcome. By acknowledging the influence of these multiple desires, a more realistic assessment can be made of what leads to successes and failures in a given situation.

So what does this little revisionist history lesson have to do with web design? A web site is a contact zone in the sense that you have a designer and a user, and it is generally a very unbalanced interaction. Although Web 2.0 sites offer a bit of theme customization, and of course platforms for communication, they are a far cry from handing over the reins to the code and letting anybody do whatever they want. So why do some fail and other succeed?

The strength of a site like Reddit is that its creators keep its users in the loop of creation and modification. It is as unintrusive of a site as possible in terms of privacy and even layout, and thus the feel of its being a contact zone remains at the forefront. I mean, have you ever really looked at Reddit? There’s nothing there (but thousands of Redditors). The designers and users create a feedback loop that self-designs the site.

Although the term “contact zone” is pretty decent on its own, let’s throw out a few more fun design buzzwords: “permeable interface” or “generative feedback.”

6. The medium is the message

Famous techno-visionary Marshall McLuhan articulated the idea of “hot” and “cold” technologies. If a technology is “hot”, it gives you almost all the information you need, leaving little up to the imagination — think 80 inch large screen TVs or 3D movies. The colder a technology, the more it requires participation and involvement (Reddit is cold…so cold, babe).

When McLuhan said that the medium is the message, he meant that media transform the way we think and know the world. As we become so totally immersed in cold technologies on the web, they literally start to reshape our perceptions. What’s would the world be without Facebook? I don’t want to live in that world. Well, maybe. It’s heated up a little much for my tastes lately.

Before I retreat too far into the rantings of a fuddy-duddy technophobe here, let me get to why McLuhan’s observations matter. It gives us a new terminology for thinking about the impact of a website. For the most part, as the web has developed, it has turned increasingly from a hot technology to a cold technology, particularly with the surge of Web 2.0 design in recent years. Now you can customize much more of what you’re seeing, and interact with and produce content in ways that were unimaginable a short while ago. It’s not over yet. With smart phones in particular, the medium/message changes again, I think for the hotter because the interface becomes so seamless it’s hard to escape.

There will always be those who crave the opposite of the dominant “temperature”, and this is wise to keep in mind when trying to buck old trends with new web design. It’s also worth considering what the comfortable temperature range is for your clients and their clients — do they want a lot of interaction, or are they the kind who long for the good old days when people would just tell them what to buy? Are they the immersive Flash type? Crazy for the dynamic content offered by PHP and others? Or throwbacks to some good old-fashioned static HTML? As you approach design for a new medium, it may also be valuable to consider questions of how the medium itself transforms the user’s expectations and capabilities and how this affects the overarching purpose of the site.

If we need a design concept here, perhaps we could call it something like “media gauging” or “hot messaging” and “cold messaging.”

Parting Shot

All in all, the genius of responsive design is the way it imports a foreign but uncannily relevant concept into a completely new context. When you do this, old ideas spring to life in new ways. The cross-fertilization of ideas is what drives forums like TED, IFTF, and this very eZine. If you spend too much time cycling through the same buzzwords over and over, you stagnate and your work suffers — things must evolve or die. By offering these ideas up here, it’s not at all my intention to try and force unwanted suggestions on a field of already smart and motivated designers. The main aim is just to be a little provocative. If we expanded this type of cross-disciplinary exploration into Philosophy, History, Politics or Psychology — those oft-disdained liberal arts — just imagine the host of new concepts that would become available.

Ryan Melsom

Ryan Melsom is a freelance web designer and the founder of lintropy.com, a start-up based in Ottawa, Canada. His love of all things technology and culture has brought him everywhere from a PhD in English to PHP development. You can follow him on twitter at @lintropy.