Archive: January 14th, 2010

There Is No “There” There

This article appeared in the second issue of Scroll magazine. The theme of the issue was “place.”

This article was written for Scroll magazine number two, on the theme of “place”, where it appeared in edited form as Disrupting the Conceptual Metaphors of the Web.

Distance is a bother. While we might enjoy arriving at our destination, the process of getting from A to B can be tedious. This problem is thrown into sharp relief in the speculative realm of science fiction.

The sci-fi sub-genre of space opera can be roughly divided into two categories. Stories that abide by Einstein’s theories of relativity can never transgress the speed of light. Getting from star system A to star system B is not only tedious, it brings with it all the problems of time dilation. The narrative difficulties of constructing a story in which characters age at substantially different rates are extremely challenging. The second category of space opera avoids the time dilation problem by circumventing the light barrier.

Theoretical MacGuffins like Einstein-Rosen bridges and Schwarzschild wormholes are brought to bear on the bothersome business of interstellar travel. The details may differ but these plot devices work in much the same way. They warp space.

Take a piece of paper. Make a mark somewhere on the paper. Now make another mark somewhere else. Getting from one point to the other usually involves travelling across the sheet of paper. The superluminal solution is to fold the paper so that the points are touching. If space can be warped like a piece of paper then travel becomes meaningless. Not only are points A and B connected, every single point in the universe, from A to Z, are potential neighbours. Distance collapses. This is how the web works.

The internet is a physical thing. It is made of machines. Distributed across the planet, it is laden with the baggage of mass: resistance, latency and lag. The internet is the physical vessel of the world wide web. But our consensual hallucination is not hampered by the restrictions of space. Cyberspace, like hyperspace, collapses distance. Hyperlinks are the wormholes that can potentially connect every single resource on the web.

Our brains have evolved over millennia to deal with the physical world. Our thinking is bounded by the spatial dimensions of our environment. When we are confronted with theoretical constructs, we employ conceptual metaphor to map them onto physical space. Time, for example, is intangible. But we talk about time as if it were a physical thing. We take it, make it, and save it. We have used conceptual metaphor since the birth of the web. We talk about web “sites” and information “architecture.” We use verbs of movement like surfing, browsing, and visiting. Faced with the limitless potential of an unbounded medium, we use language to erect our own boundaries.

Occasionally, a technological shift is so great that it requires a corresponding change in our conceptual metaphors. Ajax is a linguistically disruptive technology. The traditional web is “navigated” by the user / visitor / ugly bag of mostly water, moving from location to location. When Ajax is introduced, the metaphor must change. Now the user’s location remains constant. We apply verbs from the world of the desktop: creating, editing, deleting. In a faint echo of Ted Nelson’s ideas of transclusion, it is the information that is moving now, called up by a stationary user.

My definition of Ajax is fairly broad. Anything that can communicate with a server without refreshing the entire document is Ajax in my book. It could be JavaScript-driven but it could just as well be implemented with Flash. Every time you embed a YouTube clip on your blog, you are opening a wormhole to the YouTube cosmos. A visitor to your site can peruse content from YouTube without moving from your URL.

Many of the design challenges thrown up by Ajax aren’t technological problems. Instead, they are caused by a clash of conceptual metaphors. Why doesn’t the back button return me to the previous state of the current page? Why can’t I bookmark the changed state of the current page? The back button and bookmarking both rely on the browser’s history stack. But the history stack is an artefact of the conceptual metaphor of the web as a place. It is a map of your travels. If, thanks to Ajax, you no are no longer travelling, you don’t need a map. There are no maps for these territories.

The web is not a tangible place. Without physical dimensions, there is no way to convey presence. Presence is a by-product of location. In our everyday three-dimensional world, our senses are attuned to notice when others are sharing the same space as us. We are aware of their presence. We can further subdivide presence into units of proximity: near, far, and everything in between. That subtlety is lost in the dimensionless realm of the web.

There have been quite a few attempts to attain presence in non-dimensional space. Virtual worlds like Second Life go to great lengths to replicate the concepts of near and far. Most of the effort involves producing a three dimensional environment on the two-dimensional plane of a screen. The more convincing the graphics, so the thinking goes, the more realistic the environment.

This same thinking drove development in another area where “virtual reality” has historically been chased as the ultimate goal. The gaming industry has spent years in a Red Queen’s arms race of ever-increasing visual realism and graphic complexity. While Microsoft and Sony were locked in this battle of the polygons, Nintendo took an entirely different approach with their Wii console. Despite the comparatively weak graphics, the experience of wielding a wiimote as a tennis racquet, a guitar, or a steering wheel can be incredibly immersive.

Immersive online experiences are not necessarily going to be found in virtual worlds like Second Life. The feeling I get when I check Twitter is the closest I’ve ever come to jacking in to The Matrix. Twitter isn’t graphically rich. It isn’t even textually rich; communication is limited to 140 characters or fewer. Yet those nuggets of text, distributed by people I care about, convey more presence than I could ever get from the Metaverse. Where Second Life seeks to reproduce the physical boundaries of the “real” world, Twitter is making good use of the distance-collapsing nature of the web.

Alas, not only is the recreation of barriers on the web seen as a desirable goal, it is often held up as the very paragon of innovation. Nowhere is this more apparent than in the creation of so-called Rich Internet Applications. Rather than making use of the limitless nature of the web, many of these applications seek instead to recreate the confined boundaries of the desktop. The desktop environment may have rich surfaces, but as Nintendo and Twitter have shown us, it’s the experience that counts.

The experience of using web applications masquerading as their desktop counterparts can feel downright creepy. There is something distinctly uncomfortable about using a web app that is almost, but not quite, like using a desktop app. Users find themselves in an uncanny valley of interaction when they must carry out desktop actions in a non-desktop environment.

Is this the limit of our imagination? Faced with a medium that has literally no limits, we seek to impose the limitations of other environments; the fixed dimensions of the printed page, the single user model of the desktop computer.

We can do better. We haven’t even begun to tap the potential of hypertext.

Further Reading:

Licence

This article is licenced under a Creative Commons attribution licence. You are free to:

Share
Copy, distribute and transmit this article.
Remix
Adapt the article.

Under the following conditions:

Attribution
You must attribute the article to Jeremy Keith.

Digital Podge 2009 - Measurable Fun | 17th December 2009

This is a gorgeous-looking website. I have no idea what it's about.

jQuery 1.4 iPhone reference app - O! Mr Speaker!

A great portable jQuery reference. No app store required — this uses offline storage.

Making Workshops for the Web

The latest Clearleft offering is Workshops for the Web. It made sense to move our workshop offerings out of the Clearleft site—where they were kind of distracting from the main message of the company—and give them their own home, just like our other events, dConstruct and UX London.

As well as the range of workshops that can be booked privately at any time, there’s a schedule of upcoming public workshops for 2010:

  1. CSS3 Wizardry on January 29th,
  2. Copywriting for the Web on March 5th,
  3. HTML5 for Web Designers on April 23rd,
  4. UX Fundamentals on June 11th and
  5. Usability Testing on July 16th.

The next workshop, CSS3 Wizardry with Rich and Nat, promises to be packed full of cutting-edge front-end techniques. Book a place if you want to have CSS3 kung-fu injected into your brainstem.

Visual Design

I’m pretty pleased with how the site turned out. When I began designing it initially, I thought I would give it a sort of Russian constructivist feeling: the title Workshops for the Web made me think of an international workers movement. I started researching political propaganda posters, beginning with the book Revolutionary Tides.

Revolutionary Tides

There’s also some fantastic propaganda material in The National Archives (and I just love the modern twist of World War Three propaganda posters). I found a treasure trove of images of American working life in the Flickr Commons collection from The Library of Congress. I started gathering these sources together and distilling some of the common components such as bold colours and diagonal lines.

Workers of the web: unite!

This was when Jon was working as an intern at Clearleft. I enlisted his help in brainstorming some ideas and he came up with some great stuff—like using Soviet space-race imagery—and we played around with proof-of-concept ideas for creating diagonal backgrounds using CSS3 transforms.

But it never really came together for me. Much as I loved the Russian constructivist propaganda angle, I ditched it and started from scratch.

IA

I scribbled down a page description diagram describing what the site needed to communicate in order of importance:

  1. The name of the site.
  2. A positioning statement.
  3. The next workshop.
  4. Other upcoming workshops.
  5. A list of all workshops available.
  6. A way of getting in touch.

The hierarchy for an individual workshop page looked pretty similar:

  1. The title of the workshop.
  2. The date of the workshop.
  3. The location of the workshop.
  4. The price of the workshop.
  5. Details of the workshop.

It was clear that the page needed to quickly answer some basic questions: what? where? how much?

I started marking up the answers to those questions from top to bottom. That’s when it started to come together. Working with markup and CSS in the browser felt more productive than any of the sketching I had done in Photoshop. I started really sweating the typography …to the extent that I decided that even the logotype should be created with “live” text rather than an image.

Build

From the start, I knew that I wanted the site to be a self-describing example of the technologies taught in the workshops. The site is built in HTML5, making good use of the new structural elements and the powerful outline algorithm. Marking up an events site with the hCalendar microformat was a no-brainer. There are hCards a-plenty too.

CSS3 nth-child selectors came in very handy and media queries are, quite simply, the bee’s knees when it comes to building a flexible site: just a few declarations allowed me to make sure the liquid layout could be optimised for different ranges of viewport size.

Workshops for the Web homepage Workshops for the Web homepage

Given the audience of the site, I could be fairly certain that Internet Explorer 6 wouldn’t be much of a hindrance. As it turns out, everything looks more or less okay even in that crappy browser. It looks different, of course, but then do websites need to look exactly the same in every browser?

Right before launch, Paul took a shot at tweaking the visual design, adding a bit more contrast and separation on the homepage with some horizontal banding. That’s a visual element that I had been subconsciously avoiding, probably because it’s already used on some of our other sites, but once it was added, it helped to emphasise the next upcoming workshop—the main purpose of the homepage.

Just because the site is live now doesn’t mean that I’ll stop working on it. I’d like to keep tweaking and evolving it. Maybe I’ll finally figure out a way of incorporating some elements of those great propaganda posters.

Propaganda