To answer that, we can look at how history has accepted new technology and replaced old. It tends to happen abruptly and create revolutions — at least to the people embracing the change. Whether it’s electricity, horseless carriages, or our ever-increasing means of communication; new tech makes existing products more focused and gives us the opportunity to romanticize them. For example, when television took over drama and comedy, radio refocused on programming consumed on the move. Electric lights changed candles from necessity to atmosphere.

So what has the digital web done to print? Pragmatically, it has concentrated print on the places we can’t (or don’t) have connected devices — newspapers on the subway and books on the nightstand. It also serves as means for those who aren’t yet connected, but only for the moment. But to wax romantic, I think printed material will continue to exist as physical milestones of passing time. When I see the years of brightly-colored Wired Magazine on my shelf, I recall a connection to the insanity of the Dot Com Boom. “Perl in a Nutshell” is more easily searched online, but the dogeared pages reflect a time of exciting possibilities.

Far more effective than an expired RSS feed, this magazine may serve as a marker — embodying a time and a place, the way we thought, the things we were wrong about, and our hopes for the future.

But then again, I just may be nostalgic…

If you’re playing the movie on a telephone, you will never in a trillion years experience the film. You think you have experienced it, but you will be cheated. It’s such a sadness that you think you have seen a film on your fucken telephone. Get real!

— David Lynch, film maker

Artists don’t know better – they know different. But with access to creative tools such as mobiles, who isn’t an artist? Creativity can be enhanced with our mobiles to become a seamless, everyday activity. Mobiles, and online life generally, challenge and expand our notion of ourselves by increasingly exposing our relationship with art, making us virtually abstract. Through our presence on Flickr, RSVP, Gaydar, Myspace, Twitter, Facebook we become processes of still and moving images in constant flux across physical and virtual worlds. Photos and videos of events, things and mates; avatars, blog posts and status updates all add to our broadcasted selves – merging our virtual existence with physical presence. David Lynch’s creativity has had a significant impact on our screened culture, and the ideas in his films become increasingly important as we lead increasingly screened existences. With our mobiles we have the ability to position his ideas in our virtual personas. Just as we personalise media, why should cinema be different? Lynch’s art might no longer be perceived as two-hour shrines to the director at the cinema, rather his films can be adapted and accompany our existence on our own screens.

Think about the following. My parents proudly display Van Gogh’s Sunflowers in the form of two gold-framed posters in their living room. How would Van Gogh feel about seeing a reproduction of his art among Ikea furniture? Would he be like Lynch and oppose this appropriation? But that poster has a profound significance and function for my parents. Lynch’s distaste towards mobiles lies with missing out on details that make up cinematic experience: lighting, mise en scene, vast establishing shots etc. But by this purist argument, would we have never watched films on television? Film itself is in an ongoing process of absorbing other media. Now is the time to absorb film across our own individual screens. We will always associate Lynch with cinema, so appropriating his art into our creative and increasingly screened selves simply exposes how his products enrich our screened lives. The bizarre worlds and characters of Eraserhead, Blue Velvet, Twin Peaks or Wild at Heart are too rich to live only on the silver screen.

Mobiles carry and produce, but are hardly the end product of content. Instead they make it more of a continuous, non-linear experience. By translating content into our individualised existence, and exposing it to others, mobiles show us that content never dies. The Lynch quote above lives on YouTube – an opinion open for others to discuss. Why can’t Lynch’s creativity be treated in a similar fashion?

It’s the improved modernization of the Avant Garde. Together with color and grid, typography is one of the major building blocks in a design. This means that Chalet 1980 isn’t always the perfect choice for any design. Each design has a visual communication with which the typeface should go hand in hand. My blog’s design is an expression of who I am, it reflects my personality and I believe this typeface makes it complete.

It has a lot of femininity because of the round curves. With its style that leans towards minimalism it gives any design a very contemporary look, which is exactly what I wanted. The thin line of Chalet Paris 1980 made the design still look light, attracting attention without distraction. When properly used, you get a ‘less is more’ effect, where the text becomes the design itself. Looking closer at the character set of the alphabet, my attention is drawn to the beautiful curves of the ‘f’, ‘r’ ‚’t’ and ‘y’. Also the fact that the letters ‘t’ and ‘d’ have the same cap height as an ‘h’ or ‘l’. This breaks the traditional guidelines of typography, but how I love when rules are broken only to reach the ultimate perfection. The creator did a splendid job. To me it is the perfect typeface.

And then you pull out the chips.

The bag doesn’t open easily, and the crinkling breaks the calm like a skater through thin ice. After a few seconds of noisily tearing through the foil, success at last: you pop a few chips into your mouth, crunching loudly as the onion flavouring does ungodly things to your breath. Still, you couldn’t care less what they do to your breath, much less your overall health – they taste amazing, and you’re not above licking your fingers a bit to get at the last bits of savoury flavour.

The third or fourth time you shove your now-greasy fist into the bag, you realise your friends’ eyes aren’t closed anymore: after your impromptu snacking fit, they’re staring at you with equal measures of annoyance, shock and disgust. The view, the moment, the experience you shared – gone. And all for a few handfuls of salted starch.

Still. They did taste amazing.

To whom does design address itself: to the greatest number, to the specialist of an enlightened matter, to a privileged social class? Design addresses itself to the need.

— Charles Eames

Dispensing some wry advice to a young pupil, the writer Samuel Johnson once quipped, “Read over your compositions, and where ever you meet with a passage which you think is particularly fine, strike it out”. Now, most readings of the quote focus on the wonderfully sarcastic contradiction in the sentence: that your favourite passages should be the first on the editor’s chopping block. But the larger, more serious question is one of intent, that you should avoid keeping anything “which you think is particularly fine” in your final draft.

Granted, Johnson was speaking of the written word and the importance of editing – and in all likelihood, he was just trying to rid himself of a pesky admirer – but his advice resonates with designers. Whether designing a site, an application, even a single web page, the success of our work is measured solely by how well it meets the goals of its users; as Eames said, “design addresses itself to the need”.

Sounds easy when he says it, of course, but the rest of us mortals know what a balancing act it can be to create something at once aesthetically pleasing and intuitive.

The costumes had to serve the choreography.

— Colleen Atwood

My first “real” encounter with the internet was in the mid-1990s, when I moved off the dial-up binges of local BBSes in northern Vermont and on to the wider web afforded me by my college’s T1 line. Faced with actual bandwidth for the first time, I was like a hyperactive kid in a candy store, devouring URLs and tutorials as fast as my copy of Netscape 3.0 Gold could download them.

Dreamless Stuidos

An inspiring “design collective”

One of my earliest design heroes was Dreamless Studios, a design collective formed by Eric Dinyer and David DeCheser. Spanning multiple media, from illustration to interactive design, broadcasts and books, their portfolio was a perennial favourite of mine. An amateur designer such as myself found a lot to love about their work. In those early days, most of my online efforts were pretty feeble attempts to ape the elements of their work that inspired me most – the tension between sweeping, textured ornaments and tightly set bitmap fonts, the richly saturated palettes.

Dreamless Studios

An entry in Dreamless’ web portfolio

A few weeks ago, while beginning work on this article, I rediscovered links to a few favourite sites from that era, including Dreamless. Reacquainting myself with old, forgotten sources of inspiration was tremendous fun, though it’s interesting to see the difference a decade can make in your tastes. Much of what I admired during that era skewed to a focus on aesthetics, rather than their users’ needs.

Dreamless Studios

The Dreamless store

For example, in the Dreamless store, where one can purchase products that feature their design work (and presumably earn them a slight referral fee from Amazon), much of the navigation is custom-designed, JavaScript-driven scrollbars—which, while snapping attractively into the rest of the Dreamless site’s aesthetic, don’t actually work if JavaScript is disabled, and won’t respond to the mouse wheel or keyboard.

This isn’t a criticism of Dreamless’ portfolio; years later, I’m still in awe of what they produce. Rather, it’s a reminder that our work is a partnership between designer and user, producer and consumer. Ideas conceived during the design phase need validation not from our own assessments, but from our users, otherwise, we’re just being “clever”.

Hypothetical questions get hypothetical answers.

— Joan Baez

Cuil

The Cuil.com homepage

At the end of July 2008, a new search engine named Cuil launched, claiming to index more web pages than Yahoo, Microsoft and Google combined. Founded by some former Google employees, Cuil was heralded by the tech media as a possible “Google-killer”, a site that could possibly unseat Google from its dominant position in the search market.

Of course three months’ later Google is still alive and well. In fact, Cuil has received no small amount of criticism since its launch, as it often returns incomplete or broken search results – which is, of course, less than optimal for a search engine, much less a so-called “Google-killer”. A search for this author’s own name, or the name of his weblog, returns nothing relevant for pages; searching for “Web Directions” fares a bit better, though random images are occasionally associated with different entries.

Cuil

Cuil places the Web Directions North logo next to the entry for Web Directions South, and the Microsoft logo next to Web Directions North

But putting the current state of the site’s functionality aside for a moment, Cuil’s design is worth discussing. Given its ex-Google pedigree and aspiring competitor status, it’s interesting to note how each of its design decisions seem diametrically opposed to Google’s. The black homepage, the multi-column layout, the faux-frameset layout, incorporating images into search results: taken in total, this is about as close to an Oedipal complex as a site’s design can get. That is, it would seem that Cuil’s design isn’t looking to distinguish itself as a unique entity, as much as it is trying to distinguish itself as not-Google.

Cuil

A client-side “toggle” to change the layout of Cuil search results

There isn’t much consideration shown for the user; the interface isn’t poor, by any stretch, but it’s loaded down with unhelpful elements. One example of this is the column toggle on the bottom-right of the screen, which allows the user to change the layout of the search results from two to three columns via JavaScript. Presumably, this is to accommodate lower screen resolutions, so that users browsing at 800x600 aren’t forced to use a layout designed for 1024x764, and vice versa.

However other, better solutions than JavaScript exist: if Cuil had ditched a table-based layout for a CSS-/float-driven one, they could have come up with a resolution-independent layout that reflowed as the window size changed; or, at the very least, it’s easy enough to detect the size of the browser with JavaScript, and change the layout when it reaches a certain size. Asking the user to do the work doesn’t seem like the most empathetic approach, rather we’re left with an idea that seems borne out of novelty, rather than an attempt to address a need.

Whoever said that pleasure wasn’t functional?

— Charles Eames

A few weeks ago I stumbled across www.bartleboglehegarty.com, which had been recently redesigned. Normally, I rank the all-Flash sites of global advertising firms right next to Darth Vader and tax forms, but BBH had my jaw on the floor. The design is gorgeous, of course, but once I got past the initial visual impact, I found myself returning to the site frequently over the next few days.

BBH

Bartle Bogle Hegerty home page

The BBH homepage is aesthetically striking, to say the least. The sheer amount of white space is almost a design element in and of itself, forcing the eye toward the few items on the page: the sheep trotting casually across the bottom of the screen, the sleek logotype, and of course, the three-dimensional globe spinning slowly in the centre of the page. The most prominent element on the page, the globe is essentially a more stylised version of the text navigation beneath the logo: as the user moves their mouse across the globe, it spins in that direction, with skylines of the different countries gradually coming into view, famous landmarks in prominent relief.

BBH

The navigation text colour changes when the user hovers over a city on the globe, and vice versa

But what saves this element from being just another superfluous, over-designed Flash widget is the way that it interacts with the text navigation above it. When the user places their mouse above a particular region of the globe, two things happen simultaneously: the city is ringed with a particular colour, and its name is similarly highlighted in the navigation above; if the user opts instead to use the horizontal navigation above the globe, mousing over a country’s name will cause it to glow on the globe. To me, this perfectly resolves the balance between art and interface: the user decides which navigation element to use, the three-dimensional globe, or the text links across the top, but the design leaves both models as an option, while subtly reinforcing the connection between them whenever the mouse hovers over a link.

Design is directed toward human beings.

— Ivan Chermayeff

In the end, the line between a successful design and a clever one is pretty fine. Much of our work is based on assumptions, some better researched than others – we create personas, interview our clients, and so on. But in the end, those assumptions need to be acknowledged as such, and ultimately vetted by real-world users. No matter the design element we’re working on, we need to consider if we’re serving our users, or simply being clever.

If it’s the latter, maybe it’s time to strike it out.

Web Directions began in Australia. People outside Australia might not realize that the country is geographically very large (almost identical in size to the contiguous US), with a relatively tiny population (roughly the same as that of New York State). It’s also geographically highly isolated. The nearest country, New Zealand, is 3 or more hours from the main population centres, while South East Asian countries are 8 to 10 flying hours away. So an Australian conference must attract attendees from across a huge geographical space.

In 2000, only 4 years before our first conference, a return airfare from Sydney to Melbourne (about the distance of Los Angeles to San Francisco) that did not include a Saturday night stop over cost in the order of $1,000. Airfares had to be booked in person at travel agencies. Information about prices, itineraries and ticket conditions were only available through travel agencies. Changes to travel once booked were costly and time consuming. Couple this with the associated cost and inconvenience of organizing accommodation, and the likelihood of someone traveling even as short a distance as from Melbourne to Sydney to attend a grass roots conference was small. At best, any Australian conference of this nature could rely only on city level audience.

In 2008, you can fly return from Sydney to Melbourne for as little as $160. You can book months in advance, or hours before you fly, and do so anywhere you have an internet connection. Itinerary changes are simple and self service, and relatively inexpensive. Information about pricing and conditions is transparent, and available directly and easily from the airlines.

In 4 short years, it became feasible to hold a conference like Web Directions, because the size of the market grew 300%, simply with the increase of the geographical catchment area from Sydney, to the whole of Australia and beyond. What happened in those years? In one sense the answer seems banal: the web became a central part of the way people conducted all kinds of commerce. But the web didn’t simply make existing businesses more efficient, allowing them to pass on their cost savings to their customers. Critically, it enabled new kinds of businesses, and new ways of doing business in even very established industries.

It’s hard to imagine that Tim Berners-lee would have envisioned that his World Wide Web project in 1990 would little more than a decade later change aviation, and many other industries. John Ross’s expression “the law of unintended consequences” seems to capture these developments perfectly.

A Law of the Web’s Unintended Consequences?

Do the consequences of the web have a discernible pattern? Can we understand and predict how the web will wring such changes into the future? Can we even take advantage of these patterns?

In thinking about the role of the web in the origins ofScroll, it seems to me that at numerous points the web reduced friction.

Think of the cost, and effort, in arranging travel and transportation to the event as a huge source of friction, limiting the number of people who’d go to the trouble to attend.

Imagine, for a new airline, the cost and effort of developing a “distribution channel” (travel agencies, and corporate accounts) as huge sources of friction impeding their growth. The web helped airlines (in the way it has a huge range of other industries and professions) reach a far larger audience with far less cost.

For the traveller, the web reduced the inconvenience of making the trip to a travel agency, waiting, the nagging doubt that you weren’t really getting all the information you required unfiltered. All these are sources of friction impeding a potential traveller at each step from ultimately making the decision to fly.

“Make it Virtual”

In the “web 2.0″ world, the instinct of so many entrepreneurs, pundits, bloggers and bull artists is, to recast Ezra Pound’s exhortation to the modernists, “make it virtual”. Rarely do we stop to question the assumption underlying this — that something online is always better per se. But if we return to air travel and conferences, there is something about their physical nature that is intrinsic to them. The web has augmented, or improved, rather than replaced them.

Our exhortation then should be not “make it virtual” but “make it better”. And to me it’s the interweaving of the real and “cyberspace”, rather then the replacement of the one with the other which offers the greatest opportunity for the web to improve our lives.

Let’s return toScroll, which (figuratively, or literally) you have in your hands right now. In the age of the instant, low cost, online world of blogs, where every form of traditional media is scrambling to get online, why on earth would anyone print a magazine? One reason Joe Clark captures so well in his essay “Unreadable” in these very pages. For many kinds of reading, and many contexts in which we read, it’s hard to imagine a purely electronic experience replacing the tactile, rich, sensuous experience of the printed word.

But how might the web “augment” traditional ways of reading? At the end of this article you’ll find a URL. Follow it, and you’ll find notes, links to ideas, people and works explicitly and implicitly referred to in that article. The friction involved in looking up a word or phrase, learning more about Ezra Pound, is dramatically reduced, because the authors and editors have done a lot of the work for you. You’ll also be able to see how other readers have responded, and add your voice to that conversation. Reading has traditionally been a largely individualistic experience. The web can augment it by making it more social, by reducing the effort, the friction, involved in connecting with people who share your interests.

But even then, simply typing a url into a device like a web enabled mobile phone (which increasingly we’ll all have with us almost all of the time) is a source of friction — it’s frustrating and time consuming. So, at the foot of every article you’ll find a semacode (a two dimensional barcode) that encodes the URL for this article atScroll’s web site. Many mobile phones are already equipped to use these — just take a photo of the semacode, and your phone will open the encoded URL in its browser.

Dissolving capital

The risk of upfront capital expenditure is a huge impediment to any business venture. In the world of print, an enormous risk is the cost of printing. There are significant start up costs, and then unit costs that even with runs of thousands, will typically be many dollars per unit. Even if you don’t pay writers, designers, editors and so on, to even ship a single copy of a single issue requires the upfront investment of thousands or tens of thousands of dollars. How can the web address this enormous source of friction in the print publishing industries?

Scroll is available via the print on demand service of MagCloud. There are no setup costs, and a fixed cost per unit, that the purchaser pays when they buy a copy of the magazine. The web dissolves the need for a very significant part of the capital required to start such a venture. But with print on demand not only is this impediment removed, but so too the friction of traditional distribution bottlenecks (only a limited number of books or magazine titles will appear on the shelves of bookstores and newsagents).

Rather than being the long expected deathknell for print, the web, by facilitating print on demand, may well drive a renaissance for print, by making the cost of production dramatically lower, by reducing the financial risk of experimenting with print publication significantly.

I suspect (and hope) such apparent ironies will abound in the coming years, as we increasingly understand how the web transforms and augments, rather than destroys and replaces. By looking at businesses, industries, processes, media, and the way we communicate, and seeking out the points of friction, which impede decision making, the ability to deliver a product or service, or even undermine the very feasibility of an enterprise, and then asking how the web might reduce or remove this friction, I’m certain we’ll see the transformation for the better of everything from the political process to the “price of tea in china”.

And I hope, and have every faith that the fear and misunderstanding of the web that drives many strange, futile and frustrating decisions among law makers and business leaders around the world comes to be replaced by the same sense of excitement, optimism, and opportunity that we who come to be involved professionally with the web share.

This is a problem.

We started out hoping the web would make it possible and easy to distribute documents, especially public documents and other ‘important’ but dull works that were formerly hard to locate. Later on we decided that what we’d really wanted the web to do all along was to make it possible to upload low-quality video snippets and pack cleverness and pith into 140-character lozenges.

We realise now that long documents do not work on the web. We should never have thought otherwise. But all those short documents we’re reading instead are poisoning our ability to read long documents. You used to have the Yahoo ‘portal’ and Geocities homepages; now you have your own blog, 1470 RSS subscriptions, needlessly duplicated accounts on every social-networking site, Flickr photos you feel obligated to update, and the trifecta of instant messaging, Twitter, and email (which you gave up using properly when you signed up for Gmail).

Our fault

Events are unfolding almost exactly as Nick Carr said they would in his now-notorious article for the Atlantic Monthly, ‘Is Google Making Us Stupid?’ Google isn’t; the web is. For anyone who works on the web all day, and for a lot of teenagers, there is no way you’re going to read lengthy single documents online. It’s partly our fault, partly intrinsic to the structure of hypertext and partly due to the inability of a mammalian visual processing system to deal with reading off a screen all day.

It is just barely practicable to read a long document on screen if the document is pretty much the only thing on that screen. How often do you see a page like that? Almost never.

A typical commercial site has a ‘content well’ of some sort, but also multiple toolbars; headers and footers; sidebar content; and a search box.

A typical personal site resides on a hosted blogging platform like Blogger or WordPress. These too have a content well, but also a lengthy list of previous postings; archives; a search box; and various bits of fluff and branding.

A typical social-networking site barely has any content. It’s a 1999-style portal by another name, with links to all your friends (often with photos), autoplaying music (as on MySpace), and a ‘lifestream’ of little bons mots from you and your friends.

A typical government site packs as much on to a single page as a typical government paper document does.

A typical search site may show barely anything (that’s the Google model), but a search-results page has a stream of graphically undifferentiated links and ‘excerpts’ surrounded by branding, UI elements and ‘unobtrusive’ text ads.

With so many design elements on nearly every page we ever visit, we develop a kind of blindness that extends well beyond banner blindness – the well-known phenomenon in which site visitors never even notice a web advertisement. Eye-tracking studies show that most parts of a page are simply not noticed. The remainder might be noticed for a few milliseconds at a time. One or two items might attract prolonged attention, measured in seconds.

Through our insistence that any page make everything possible (search, click the third-last blog post, read everything from April, log in, buy, comment, Digg™, subscribe), we train site visitors to read as little as possible and get the hell out of there.

The fault of hypertext

Links make it possible to get the hell out of there. Even if a page is so brazen as to contain no links, our browsers helpfully give us a ‘back’ button, a search box, tabs (including methods of displaying 40 tabs at a time), and unlimited bookmarks. HTML gives us a special kind of link, the alternate RSS link, which provides ‘a river of news’.

A link means it’s possible to go somewhere else. Links are intrinsic to the web (and to certain predecessor technologies such as gophers). Links make it seem like you’re doing something wrong if you rest motionless on one page too long. The hyperlink is a Freudian construct – an oral fixation of continuous consumption delivered by automated software. Open wide.

Reading’s fault

And now the unstoppable force of the web confronts an immovable object: the human body. Your eyes, your face, your neck, your nerves and your brain were not built to sit up straight and read from a screen all day. But that’s exactly what we’re all doing.

If we exclude for a moment incidental types of reading like signage and billboards, throughout most of the past 500 years it has been possible to get reasonably comfortable with the object you’re reading. You can move it closer or farther away, sit down, stand up, or lie down, change the lighting to some degree, and, if you really have to, use a magnifier or some other aid. I challenge you to ‘get reasonably comfortable’ with reading from a computer screen:

It’s a fixed distance away.

It offers a glowing, low-resolution panel, probably silhouetted against a darker background.

You’re sitting bolt upright, and neither your seating angle nor the screen angle is easy to change.

Much of the time, you have to read your screen for work, somewhere you might not want to be in the first place. And you’re spending the entire workday doing all this rather than choosing to devote an hour or two – at most – reading a novel, a magazine or a newspaper.

People respond to the difficulty of onscreen reading in three ways: they suffer without really knowing why; they give up the reading task as soon as possible; or (for the elite) they use every trick in the book to reduce discomfort. I fall into all those categories at different times, especially the last – I put unreasonable effort into printing out web pages so I can read them comfortably over double espresso the next morning.

For the people who merely sit and suffer, the best we can do is improve their computer’s defaults, as with better and smoother fonts and better screens. But testing shows that really good fonts with really good smoothing increase reading speed by about 5 per cent. That may add up over a workday, but it isn’t make-or-break. And most people cannot alter, let alone improve, their workplace reading environments. There’s little we can do for this group.

Those in the second category are in thrall of a mad desire to spend as little time as possible on any given page of any given site.

This desire to get in, get it over with and get out spills over into other forms of reading. Maybe you can just barely endure a quick flip through one section of a newspaper, but could you even read a book of short stories? I ‘read’ 200 books annually, yet even I barely manage to begin five fiction books a year; of those, I might finish one. I manage the other 200 books solely because the books can be skimmed over or simply flipped through, as though they were a fashion magazine.

I know people complain that long-form video doesn’t work on the web. But nobody who likes short videoclips online has lost the ability to watch a full television program or motion picture. In fact, people clamour to do just that on a mobile device. ‘Watching long’ isn’t a problem.

I don’t see many people complaining that long texts don’t work on the web (a few people, but not many). Yet many of us have lost the ability to read a lengthy text anywhere, even in conditions less hostile to reading than sitting at a computer desk all day. Reading long is a problem.

The future of the web is one of an initially unwitting species-wide rewiring of the brain. The western world has carried out a Tuskegee-style experiment in which citizens’ neurology is permanently – and involuntarily – altered. At the dawn of the web, we could rationally have claimed not to know what we were doing. We don’t have that excuse anymore, but the experiment is still under way. In fact, it’s full steam ahead.

If you’re looking for a T-shirt slogan (a nice concise pithy bit of text from which you can glance away immediately), try ‘This is your brain on RSS. Any questions?’

Did you really make it all the way through this article? But only with effort, and only because it was printed out?

The McD.L.T. (which stood for McDonald’s Lettuce & Tomato) was a brilliant concept: it quarantined the hot hamburger patty in one compartment and the cold, crisp lettuce and tomato in the other, leaving the consumer to combine the two halves for the full McD.L.T. ‘experience’.

Through this separation, McDonald’s was able to create a much more enjoyable product and we, as web designers and developers, can learn a little something from this concept.

Separation is at the heart of the web standards movement.

Separation of content from presentation came first, and we began swapping FONT elements for style sheets. The next major movement was the separation of content from behaviour, which urged us to write unobtrusive JavaScript. Unfortunately, the final member of the web standards separation triumvirate – the separation of behaviour from presentation – has yet to take hold, but the tide is starting to turn.

Where’s the beef?

JavaScript (and CSS, for that matter) first became popular as components of DHTML. It was in the context of DHTML that styles and scripts first become entangled and, regrettably, the knot they formed has proven particularly difficult to untie.

As you know, DHTML was not a language unto itself, but rather an application of JavaScript for manipulating the DOM, to generate and alter both markup and styles on the fly. Here’s a ridiculously simple example of early DHTML:

Maintenance of code like this was a nightmare because any change in the behaviour required you to muck about in the markup.

If tasked with creating this same interface today, the obvious choice would be to add

to an external stylesheet and avoid using JavaScript altogether; so, why didn’t DHTML coders do the same? Well, the likely answer is that CSS was so poorly understood at the time that the folks writing DHTML weren’t aware of the other options available to them. But we know better … don’t we?

It’s better here

Modern JavaScript, even the unobtrusive sort, still employs the same basic means of style manipulation. The only difference is that in today’s JavaScript, the STYLE attribute manipulation is likely to exist in an external file, where you’ll find something akin to this:

This example was taken from the JavaScript library used on the current Microsoft homepage, but you see this sort of code in practically every JavaScript library and tonnes of one-off scripts. I chose this particular little code snippet because it introduces a known accessibility issue: most screen readers will not read content that is hidden using display: none or visibility: hidden, whether it is written in your stylesheet or set via JavaScript.

Currently, the best practice for hiding content in an accessible way is to absolutely position said content way off the left-hand side of the page

But what if the best practice was to change? It would be far easier (and much more economical) to maintain this sort of style information in declarations like this:

We could then update our code to activate/deactivate them as needed:

Additionally, if best practices changed, we’d only need to update our CSS and not the JavaScript.
But how do we maintain style rules associated with our scripts? That’s the $10 million question.

Do what tastes right

There are currently only a handful of options available for separating presentation from behaviour, but they fall into two broad categories: externalising and embedding.

Externalising

External stylesheets are probably the most widely used form of stylesheet, and with good reason: they have the benefit of being cached, allowing them to be used across an entire site without incurring a download penalty as a user moves from page to page. (Many folks coming into JavaScript programming with a CSS background also prefer this method because it’s more familiar to them.

When working with external stylesheets in JavaScript, you have a few options. First, you can package all of the styles your script requires into a single stylesheet. Anyone implementing your script would then be required to include the CSS file whenever they include your script:

This approach gives you all of the benefits of externalising your styles, but the main drawback is that someone needs to remember to include that CSS file whenever they include the script.

A second, closely related method, requires that anyone implementing your script add your script’s styles to their own stylesheet(s). When making a recommendation like this, it is best to advise the implementer to clearly label the group of styles you’ve supplied to avoid confusion when she, or someone else on her team, edits the file later on:

This approach is less likely to cause implementation issues unless someone accidentally removes the styles from the stylesheet. (It happens).

A third approach is to take the external stylesheet from the first method (above) and add it to the document when your script runs. To accomplish this, you simply determine the directory housing your script, using a function like FindPath()

and then add a dynamic LINK, referencing the CSS file, to the HEAD of the document. Here’s an example of one such implementation within an object literal:

With this in place, WickedCool.initialize() will not only trigger the script to work all of its wicked cool magic, but it will also dynamically add the CSS file to the page. The real benefit with this approach is that users without JavaScript enabled will never download that extra stylesheet, saving them both bandwidth and time. It’s also easy on the implementer because they simply need to ensure that the CSS and JavaScript files for the script reside in the same directory.

Embedding

The other category of approach utilises embedded stylesheets and involves placing style blocks into a dynamically created STYLE element, which is, in turn, added to the HEAD of the document. You can do this using a script such as:

This function, a slight modification of one developed by Nicholas Zakas, allows you to supply a text string of style rules for insertion into the head of the document. Implementing this method is pretty straightforward:

While, technically, the styles are not separated from the script itself, I don’t think anyone could argue that this approach is worse than directly manipulating STYLE attributes on elements. The benefit here is that you only need to maintain a single file when making updates to your script; but the downside is that the styles will not be cached, as they would if you were using an external stylesheet.

Note: this approach is far more manageable when working with a limited number of styles.

Think outside the bun

But it’s not all about technique; there are other things we need to keep in mind when striving to externalise our styles from our scripts:

1. #1 What you want is what you get

   When you are adding CLASS or ID attributes to elements, you want to avoid applying unwanted styles to those elements, so strive to keep their names unique. For instance, consider pre-pending the name of your function or object to the CLASS or ID: “button” becomes “WickedCool-button”. Following a rule like this will virtually ensure you never experience a style conflict.

2. #2 We don’t make it until you order it

   If an element already exists on a page and you want to apply some styles to it when the script runs, consider adding a new CLASS to the element to indicate it is “on” (or otherwise ready to receive the script-related styles). This is especially important if your script styles are in a statically linked stylesheet, as you don’t want styles intended for the JavaScript-enhanced page to be applied if JavaScript is not available. Here are some examples:

   At Rest	Activated
   .tabbed	.tabbed-on
   .auto-submit	.auto-submit.active
   .replace-me	.replaced

3. #3 Have it your way

   Most dynamic interfaces require some set of core style rules to function, but there are other aspects of the interface that should remain flexible. Separating your script-related styles into “core” and “skin” groups can make it really easy for you, or others, to redesign your interface. Obviously, you’ll want to offer some sort of default skin, but you shouldn’t lock yourself or other implementers into that design forever. Providing documentation of what properties are safe to manipulate is also a good idea, both for your own knowledge and to assist others who may work with your script.

We love to see you smile

It’s not always easy to maintain perfect separation between your scripts and styles, but it should be your ultimate goal. The benefits are obvious – reduced maintenance headaches, reduced bandwidth, and reduced conflict – so we have little reason not to give each their own space. And, when maintaining your scripts starts getting easier, you’ll be happy. And, when you’re happy, who knows, you may burst into song…

“Keep the C-S-S on the STYLE STYLE side, and the SCRIPT [clap, clap] stays clean!”

]]> http://scrollmagazine.com/number-1/keeping-the-hot-side-hot/feed 6 http://scrollmagazine.com/number-1/intelligence-versus-understanding http://scrollmagazine.com/number-1/intelligence-versus-understanding#comments Mon, 01 Sep 2008 00:50:46 +0000 Indi Young http://westciv.com/scroll-magazine/?p=6 A hummingbird lands on the ground outside your window and sits there, still.

Then she flops over, struggles and sits upright again. This is so unlike hummingbirds that you react: what’s wrong? Are you okay? Can I help you?

You can feel your reaction: your heart might beat a little faster and your eyes might get a bit misty. You think about the things a hummingbird might need to stay healthy: nectar, water, warmth … what else? Since you’re at your computer, you do a quick Google search to see if you can learn a bit more about helping this tiny bird outside your window. Then there’s a movement at the corner of your eye and you look over just in time to see the hummingbird fly off. Again, a palpable feeling engulfs your body: relief, relaxing of muscles. You turn back to your computer able to focus on work again.

There’s a new message in your inbox. It’s your boss sending you the requirements document for the new product. Next Monday is the start of the project. You open the document and flip through it, trying to get a sense of the structure of the information, seeing how everything is organised. There’s a chapter that catches your eye about the end customer. You read the first paragraph, curious about the general nature of the problem. The customer is someone contributing to a superannuation fund to save for their retirement. They need to know rate of financial gain over the years to calculate how much they will end up with by age 65. The customer needs to be able to choose different funds that have different rates of return and also be able to move their money from fund to fund as rates of return change. You move on to another section of the document, then look up from your computer and think about getting a cup of tea.

Where’s the Empathy?

These two events, the hummingbird and the requirements document, couldn’t be more different. And yet, they should be the same. I believe that you cannot develop a good solution for someone without empathising with that person, without feeling something about their situation. Sure, you know that the customer needs to be able to switch their money from fund to fund, so you could create an application that has three fields to specify the fund to transfer from, the fund to transfer to and the amount. But why are they transferring those funds? What variables govern their decision to transfer funds? What’s going on in their life? If you knew the customer’s brother just told them to get out of the high-risk fund, could you support them better than just those three fields? Is there a calculation to help them decide how much of their funds to transfer out, and how much to leave, based on fees they might incur and losses they might take if they stay in the one fund? Is there historic data you could show them that might give them confidence that a downturn is always followed by an upturn in the market? What else do they need to know? How can you help them?

There is a difference between reading the intelligence about what a customer needs and understanding what is driving them. Rather than the basic needs, distilled down to hollow necessities through the process of writing the requirements document, you need to understand the richer set of ingredients that go into making a customer need to transfer funds. With this understanding, this empathy, you can design a richer set of tools that support the customer better than just three fields to transfer funds.

How do you find out what goes on inside a customer’s mind if all you get is a requirements document? Easy: ask the customers to tell you.

Make a Connection

What I mean by asking customers is not the same as what organisations have done for the past decades. Do not ask them what they want. Ask them what they are trying to get done and why. Connect with them. Try on their life for a bit; walk in their shoes for a mile. Forget for a minute that you are a designer and that you have this mechanism inside you that insists on finding a fix for a problem. Turn off that mechanism if you can, let go of your product and what you were hired to do and just empathise. After you have a deep understanding of the customer’s world, then you can fire up your brain and solve problems, but not until you have walked in their world and developed an understanding of it.

Interviewing is the best process for this. Observation is also helpful and always welcome if there is time and resources. However, to get to the reasons behind someone’s actions, you will need to ask them about it. You need to interact with a customer to discover this. Follow the time-honoured technique called non-directed interviewing. Let the customer dictate the topics, the vocabulary and the direction in which the conversation meanders.

Avoid writing any of your questions down in advance since that usually leads to recitation and a hackneyed interview technique. If you must make a list of topics to remember, write them as one– or two-noun prompts to remind you, in no particular order. Non-directed interviews are not easy to conduct. You’ll need some practice and a few guidelines.

Listen Well

Last year I was sitting in a session about storytelling by Kevin Brooks and he said something that caused a cascade in my head. He said, “Most people don’t listen to what someone is saying in a conversation because they’re too busy looking for a place to interject what they want to say about the topic.” A mortified smile crept across my face. From that day forward, I have consciously focused on what my friends are saying, putting my own responding stories on hold, or never even telling them. Instead I follow the folds and courses of my friends’ stories. I try to see things from their eyes and ask questions to extract a richer understanding.

Part of my professional life involves doing this; I don’t know why I wasn’t applying it to my everyday life. At work, I listen to people describe what they are doing then coax out an explanation of underlying motivations. The most rewarding conversations stray into new territory and my participant gets to think something through in real-time and explain it to me. It’s very satisfying for both of us, because new understanding blooms and we get a little buzz from discovering it. For example, during an interview in Melbourne, a woman kept telling us that she wanted to ensure she wouldn’t have to worry about how she was spending money while in retirement. I asked her why several times and at the end she said, “You know, I think I feel this way because I watched my parents worry and make sacrifices all the time. I don’t want to be in that position.” It was something she hadn’t enunciated before, even to herself. After saying it, she laughed and told us how that made so much sense to her now.

Look for Emotional Markers

In Paul Ekman’s book Emotions Revealed, he explains that anger is the response to interference. In a business setting, anger shows up as a simmering feeling of upset, and from there, often, to the sowing of disgruntled complaints in sympathetic ears. This kind of stuff shows up in the models I draw all the time and it is important.

While in conversation with a customer, prick your ears up if you sense frustration. This is a marker that something is interfering with the customer, keeping them from achieving what they want to get done. Dig in here; explore what is causing this and, more importantly, explore their reaction, why it goes against their habits or beliefs and all the things they do to work around it.

Capture the upset feelings and the extra steps in a mental model. When you are reviewing the model for areas to work on, these areas of emotion will be rich veins to mine. For example, several times “distrust salesperson” has appeared in models about the customers of an organisation. The customers went to great lengths to contact a technical rep whom they trusted to tell them the honest truth about how well a product might work in their unique set of constraints. The customers also sought out other people who had purchased the product to ask them what problems they ran into, or if the product was a poor fit in any way. What I suggested in these situations was that the organisation change the way it sold products. I made the appalling recommendation that they get rid of salespeople and hire more technical reps instead, as well as sponsor user groups and advertise their presence to potential customers as a source of people to contact about the product. As you might guess, these suggestions got nowhere. But given the right timing and the right set of people who are willing to see the opportunity for what it is, I predict this suggestion will increase sales by a respectable amount.

Understanding Can Guide Strategic Decisions

A deep understanding of a customer’s world gives you a wealth of possibilities, an amazing breadth of ideas to support them. The more you can think and feel like a customer, the better you can imagine what services to offer them. Replace the chapter about customers in the requirements document with a rich model of their world and your organisation will be on a new path to success.