‘High-Noon Shootout: Design vs. Implementation’

Liveblogging a presentation at @media2007 London by Drew McClellan and Simon Collison

Andy Clarke introduces the presenters at 2007.06.07 12:06 (because somebody has to). Despite the fact that I can’t punch my way out of a paper bag – I’m a bit of a Wendy, actually – I’m a fan of heavyweight wrestling. Mr. Drew “The Dark Destroyer” McClellan and Mr. Simon “Collison” Collison.

SIMON: I’ve just found out I’ve got to use an ice cream [a handheld mike]. I’m going to be talking about design. Drew’s going to be talking about implementation. Save your cigarette breaks for that bit or whatever.

It’s a bit of an odd one for me, because I’m a Web-standards advocate. I love my code. I tend to do everything on a site, but design is what I love. I have an art background. I care about making things look good. Sometimes I achieve that, and I always try to improve design. Everything we do as designers or developers is design. We have problems and we seek to solve them. I’m just talking about visual design, and I’m quite sick of code, to be honest, at the moment.

I’m a businessman. I don’t want to be, but I kind of co-run a company with my colleague Jamie. And I’ve never been more aware of pressures of designing for clients with timescales or budgets. It’s certainly not as enjoyable for me, and it may be that design is not at the core of what I’m doing anymore. It can be a bit of a battle to bring it to the fore.

A bit of a manifesto today, really. I’m going to say a few things I can’t really believe I’m going to say, but some of them are just going to be shots for Drew to volley back later.

A campaign for:

• Common-sense approaches.
• Designing with fewer restrictions: The Web is an angry teenager that storms off to its bedroom if you don’t do things perfectly.
• Creating attractive user experiences: Let’s make the Web a richer, cooler place to be.
• Taking risks.
• Trying to actually enjoy what we do.

Programmers are ruling the roost these days. Designers are being marginalized. There are more and more regulations to follow with designing Web sites, and then suggested legislation or what is always in every single brief, like respecting Bobby and Cynthia, and some of them know about WCAG.

It’s not utopia, this. The Internet in its public form in terms of really accessible to a lot of people is probably no more than 12 years (old), and there seems to be a desire to get it all right right off the bat. It worries me a little that we’re tying to be too good; we’re starting to stifle some of the creativity.

Limitations: (Slide: If it were 1976 there would be a punk revolution).

• Timescale, budget, and (“bloody”) clients: Clients always have a preconceived idea. Blandness? There’s an opportunity to create, to move the brand forward, and it always seems to be stifled by a couple of guys in ties. Well, you’ve employed a designer and you’ve got these guidelines? You can’t just read them and let us do it?
• Platforms and agents: Macs, PCs, mobile phones with four million types of browsing systems.
• Research and resources: Is somebody on the team ill? Did somebody’s dog die?
• Accessibility and usability, which I embrace, but I do find them constraining.
• CMSs.

Andy (Clarke) is my friend, and he inspires me. He is the kind of guy who makes me think of taking risks. At my previous company, Agenzia, we did a site for Alan McGee’s Poptones, and a lot of people said it looked broken, which was intentional. The feedback we got was very split, and I enjoyed that.

There seems to be an unwritten rule that every single time you do navigation it has to be an unordered list. Andy wants do so something a little different. It’s quit clear there are three composite parts here. It could have been done with CSS, a definition list, but Andy wanted as much control as he could get, and it was his bloody site. (So he used a table.) He’s captioned it and used all the right markup, so good decision, and typical of Andy for throwing off the hackles.

Why does the Internet have to be so bloody perfect? I’d like to be. More agencies are using standards, which is great. But think about these things (books, TV, radio, magazines): Why have we got to work so bloody hard? Joe Clark down here was talking about captioning video here a couple of years ago, making it accessible, three-dimensional in some ways. TV subtitles are 3% or 5%, a guy in the edge signing – it feels like a token gesture.

Magazines: How do you copy and paste without ruining the magazine? How do you increase the contrast? It’s tricky. If you’d like a large-print version of this, please ring this really big number.

I don’t think the Internet is as cool as it could be. I think we’ve been backed into a corner. I think it should be ruled by or made for somebody like this: (The Fonz). Sadly, he’s not a Web developer. So we need somebody else: (Jon Hicks). Jon gets it. Jon picks design. He’s a visual chap. If you don’t know who he is, he did the Firefox logo. But sadly, the Internet is governed by these type of people (a nerd, Jakob Nielsen).

I don’t dispute a lot of stuff that he has preached in slightly despot style. But if we just look at his Web site (shows teletext page, then the real one). It’s dull to me. He has a particular niche, and he has every right to do this. I always feel everybody has every right to do what they want with each domain. Those blue things? I know that they’re links. So job done!

Another thing that really frustrates me is hardware, software. Which browser can I resize text in pixels with? (Mentions colourblindness simulator.) I loved that. That’s clearly a developer tool. Isn’t there going to be a point where we can stop worrying about this? I certainly hope so, but I just hope that Microsoft isn’t in charge.

What we need is a bit of a manifesto, really. Preserving our visual design integrity.

• 10. Visual design is not complex engineering.
• 9. Design interfaces visually, and don’t be afraid to take risks. Worry about how they’re going to be built later. What’s the centre of this page? How should it work? There’s this idea in Web design that you work on the most standards-compliant browser. I work in Safari. And then generally what you would do is then tweak it and refine for poor browsers and odd browsers and browsers that only Jon Hicks has heard of. You can do that with design – start without restrictions, then start to tweak before a soft launch.
• 8. Reserve the right to veto the decisions of “technologists.” Just design.
• 7. Think, build, and design organically. This is a pet favourite of mine.
• 6. Don’t pander to personal preferences. Work out what is an absolute accessibility must, but what is a personal preference, like a certain contrast version.
• 5. Deliver a rich, considered visual experience for all. Content is often repackaged for mobile devices or different browsers. Andy will deliver a B&W site to IE6 because he understands the limitations of it. He’s making a bit of a statement there, which I like. Just the fact that it’s a print stylesheet doesn’t mean that it has to be white.
• 4. Be expressive with Web typography. It isn’t just a case of using Verdana or Georgia, or Lucida Grande, my favourite. So long as you use replacement text, give it a go.
• 3. Layout decisions are the preserve of the designer. Fixed-width, elastic – it’s vital you achieve a good experience for all users, regardless of window width, screen resolution. I myself love elastic layouts where we can define a minimum width and a maximum width.
• 2. Visual design makes the first impression – respect it! You’ve got about 0.1 of a second to see a site and think, wow, that’s good, I’m interested. Don’t marginalize it by putting too much focus on functionality.
• 1. Build everything with Flash! Just me tossing the ball (to Drew) to smash it back into the net. I have used Flash with XML feeds to take data from a CMS to package it with real URLs. I’d be interested in seeing more inspiration from Flash sites, seeing what we can do with HTML.

I just think it’s important that we do consider design at all counts. It’s hard work sometimes, but it’s not working down a pit.

Your choice: (The Fonz or Jakob Nielsen).

DREW: Implementation. nxoc01.cern.ch: That’s the first Web server, running on a Next.

Designers have come along with the idea that it doesn’t matter how well it works, as long as it looks nice. Every branding doohickey is a layer that has to be peeled back to get to the core content. Perhaps it’s time we, the people of the Internets, did something about it – it’s time we embraced the Web for what it is, not what the turtleneck-wearing, latte-sipping (designers) think it is.

We, the people of the Internets, are implementers. It’s our job to publish things in a way that’s native to the Web. Each time we allow the frivolities of design to distract us, we have failed. Technical excellence, not pencil-twiddling guff. Therefore, we must know our enemies, and they come in various guises, enemies as such and incognito. They’ll leave your users suffering whilst the designers responsible are off snowboarding.

• 10. Fixed-width layouts. Designers like these, as they claim it gives them a bit of control. We, the people of the Internets, know this is all an illusion. They have as little control over layout as they do over their badly-driven Audi TTs. They’re taking constraints from other media and overlying them on the Web. (Runs quotes from Holzschlag, Rutter.)
• 9. Flash for non-media presentation. Yeah. It truly is a wonderful tool. There are, however, two fundamental and inescapable truths. Flash breaks the basic nature of the Web for anything other than a media player. HTML gives source to a browser to interpret in any way that fits. That Flash player has a monopoly on the content. It may look like the Web to an average designer in their orange sunglasses, but it isn’t. Every instance of the Flash player has a tangible impact on the performance of a Web browser. The nature of the Web is to be light on resources.
• 8. Text replacement. Relies on Flash’s elderly bedmate, Photoshop. Text on a Web page is a solved problem. It flows, scales, aligns, wraps. It can be read, restyled, printed, indexed, searched. It doesn’t even require CSS to communicate at a fundamental level. We’ve got more than enough faces already.
• 7. Styled form elements. Forms are the base, underlying method of interaction on the Web. You don’t want to mess with them until they fail to function as forms. User has to relearn.
• 6. Potent gets. get retrieves from server, post alters the server by placing something there. Designers try to rid themselves of forms completely. (Shows Facebook example that should be posts and forms but uses just get and links.) Google pre-caching would follow all those fake links masquerading as forms.
• 5. Controlled heights. Designers pine for the table-based era, a time that left us pretty much buggered for anything but aligning heights. If a visual effect cannot be achieved with a faux-columns-like background image, it is not a robust technical solution.
• 4. Controlled text size. The desire to control the uncontrollable. (Even worse with translations.)
• 3. Colour schemes and contrast. Corporate-branding documents, which are very expensive documents that tell you that red is big in China, tell you what colours to use. Colours often look very different onscreen than in print. Designers love low contrast and subtle shades.
• 2. The user agent. It can’t be trusted. This manifests itself as being asked to write a site just for a certain browser.
• 1. The fold. This imaginary horizontal line that designers like to draw on a page similar to what a newspaper would have at an old-fashioned newsagent’s like you’d see in 1940s films. The fold is symbolic of us as implementers folding to the will of designers. I think we all know what happens if we let designers have their own way: (Shows £400,000 London 2012 logo).

SIMON: There’s a moral to this story. But should we take a vote, Drew? All you cool people who believe that design is important, relevant, makes a first impression, helps girls talk to you, or boys or whatever it may be –

— And hates the Web.

— Who wants to vote design? (Hands go up.)

DREW: People of the Internets, people who believe in the Web and what the Web stands for and what it should be, for making things accessible to all and not just visual guff. (Hands go up.) I think it was just half-and-half.

KATH MOONAN: How about abstaining? I’m against false dichotomies.

SIMON: That brings us to the moral of this tale. These things work in harmony.

DREW: You have to know the arguments for one side and the other. You have to walk the line and decide the best balance between the hard technological line and the wavy creative line. You can’t find that balance unless you really know the arguments for and against.

— We have to be specialists in lots of things. We can’t just be a designer. We can’t just be the one who works in that horrible snow-blinding code. It’s tough, but it is fun, and now you all know about how to get.

(Scribe stopped writing at 2007.06.07 11:57.)