Web Standardistas - HTML and CSS Web Standards Solutions

May 2010 Archives

A Dozen Questions for Mr Collison

Colly | The Celebrated Miscellany [Detail]

Simon Collison is a designer, speaker, author and bon viveur with a passion for Victoriana and assorted miscellany. He lives and works in Nottingham.

A co-founder of Erskine Design, he recently left the company to pursue gainful employment in a freelance capacity. A regular public speaker at international design conferences, Colly, as he is affectionately known, has been invited to share his experience at events worldwide including: The Future of Web Design, DIBI and @Media.

A gentleman that stands by his word, it is a measure of his dedication, that he answered our - admittedly late - questions at 10,000 feet, somewhere over the Atlantic between Manchester and New York.

We asked Mr Collison a dozen questions.

Simon Collison, Self Portrait

Where did you learn your craft?

I needed a web site for my art stuff back in 2000, so I made one, and it was shit. Later my knowledge blossomed whilst employed at an agency for a few years. For the most part, I have worked my arse off way beyond the 9 to 5, year after year; learning, experimenting, reading, listening, playing. Later, I learned about the business side of things whilst building Erskine.

A lot of what I value comes from art school in the 90s. It’s one thing to learn how to use Photoshop or craft exemplary CSS, but designers need to know about the fundamentals - balance, composition, colour, patterns, textures, movement - and how to react to the real world.

Who inspires you?

Manic creative people who just have to get it out of their system. Take Nottingham’s own fashion designer Paul Smith. He takes influences from everywhere, scrapbooking the world he sees, appropriating all of this into his designs. His studio is a treasure trove; he’s like an excited child showing off the things he’s collected and is inspired by. A brilliant man.

Simple Scott; the man who designed Obama. Listening to him speak so passionately about his work, his belief, his motivation, the detail. I couldn’t get a word in edgeways, but I didn’t care.

It’s the ones who push the boundaries, look at things sideways, have artistic sensibilities. So, plenty of Jason Santa Maria, a bit of Brendan Dawes, and a sprinkle of my good friends Greg Wood and Malarkey. Lately, Trent Walton for his effortless design sensibilities. I often think that what the best people do is ignore a lot, and exploit a little.

What are your influences?

Art and design movements like Modernism, Futurism, Abstract expressionism; German and Russian design schools, Swiss design; painters and theorists like Picasso, Miro, Kandinsky, Klee, Peter Lanyon, Richard Long, Olafur Eliasson. Modern design classics; Mini Coopers and bakelite goods, Peter Saville.

Popular culture. TV and film. Humour is a huge influence. Music — lots of music, all the time. Alt stuff, noisy melodic bands. New Order’s ‘Substance’ and ‘Technique’ albums (visually and aurally) made me want to be professionally creative.

The real world. I can’t stand looking at the internet for too long. Mountains, rivers, rain, buildings, tiny little details. Everything that happens above the shop fronts in our cities.

A Dog and A Beetle

Your recently redesigned personal web site is a firm favourite of ours. There are clearly some Victorian influences in evidence, both visually and in tone of voice. What would be your favourite, hitherto unexploited, era to pillage for design inspiration?

Is anyone exploiting Neolithic? Cretacious? What about The Plague? One thing I like is that I do see quite a bit of stuff inspired by the Industrial Revolution, the idea of machines, foundries, letterpress etc., although I’m not sure the designers themselves are always aware of that influence.

Language is a fundamental component of the designer’s toolbox. Can you tell us a little bit about the role it plays in your process?

Some people fail to design with language at all, fail to think about words. I often go on about rhetoric, and using language to persuade, win an argument, perhaps at the expense of the facts. We can be incredibly creative with words, with intended and perceived meanings. We can play tricks, impress, amuse, disappoint, force emotional responses. I love all that. I’ll sometimes lose a whole day labouring over the infinite variations of one sentence.

One of the fundamental principles of Modernism is the importance of ‘truth to materials’; that the nature of the material shouldn’t be hidden and, equally importantly, shouldn’t pretend to be something it’s not. Can you see this principle applying to web design?

Absolutely. I think web designers have strong Modernist spirit. Think about how the architects of the 20s and 30s would marvel at the simple functionality of the water tower, its clean lines and honesty of construction. We’re like that, us web designers. We love the grid, we love rhythm, we produce very self-referential work at times, we ‘show our working’ as maths teachers would say. We admire our own building blocks and we’re not afraid to show them off.

Thinking about the materials we use, I guess it’s all about that Modernist view of the machine and mass production, and the need to avoid useless decoration. What we make is made of pixels, on a screen, actioned by chips and electricity. I, and many others, have enjoyed the fakery of web design, the pretend coffee stains, decaying stickers and labels, the websites made of masking tape and paper and so on. I actually love that collaged, hand-made approach, but so often it looks like it’s been cobbled together thoughtlessly, and I hate that.

I’m not suggesting we take the web into an austere and drab future, I’m just keen that when it comes to the motivation for our designs, we think twice about exactly what we’re trying to achieve. If it’s a handmade, nostalgic direction, then great, but why exactly? Why make a site look like it was made in 1874? For the sake of it, or because it’s sympathetic to the subject, and there is a well-considered, potentially exciting motive? Ultimately, people will do whatever they want. Like cats.

DIBI Presentation - Overview

Your departure from Erskine Design was, to many, unexpected. You’re now operating in a freelance capacity, allowing you to rediscover your love of designing, writing and speaking. Do you ever see yourself returning to a company, or does the freelance lifestyle hold too strong an appeal?

So many people tell me it was a huge surprise, but if you’re not happy, you have to change something.

To directly answer the question: no, there’s as much chance of The Beatles reforming as there is me employing even one person in the future. I’m always interested in short-term collaborations and partnerships, but chiefly I’m settling for a simpler, more focused, liberated life now, and can’t imagine compromising that for anything. I’ve got my mojo back.

You’re just back from FOWD London where you took the stage to predict the future. Can you give those readers unable to attend a brief summary of the state of web design in 2012?

I found the topic of the FOWD presentation difficult, so I decided to suggest my own personal view of the future I might like to see.

The essence was that I feel we are at a super-congested, very busy phase of web design right now, with so much going on, so many new things to try and cram into our work. So, I was banging on about how we’ll begin to simplify, reduce, and distill. How we’ll perhaps think about relaying meaning with less, be more economical.

We have an opportunity to throw out all the crap, and move forward only with what we need. For decades, new industries have appeared, blazed forward without thinking, misappropriating and stealing ideas, only to forget everything that previous industries learned. For example, it’s not simply about learning from print design, it’s about learning from the mistakes made in print design.

You drive a 1977 Datsun 120Y. Is it good for picking up chicks?

The Datsun is not really an effective chick magnet, which is a shame. Well, maybe a few have fallen under its spell.

Mainly, it tends to attract taxi drivers. For the previous generation of Asian immigrants, the Datsun was the car of choice, so I find taxi drivers start talking to me at traffic lights, shouting about how their Dad had a 120Y, and they sometimes offer me money for it on the spot, or follow me home.

Most rusted away in the 80s, so you never see them any more, thus mine gets people talking wherever I go. People are easily pleased. It’s shiny black and chrome, and therefore an absolute bastard to keep clean.

DIBI Presentation - Grids

What’s your favourite typeface?

Being a fan of all things modernist, I love the good, honest everyday-jobbing grotesques. So, classics like Akzidenz Grotesk, and lately I discovered Founders Grotesk (especially the Bold in uppercase), which I want to use in the new book somehow.

I don’t have an all-time favourite. Horses for courses. Other typefaces I use often in my work are Clarendon, Trade Gothic, Franklin Gothic, plus good old Georgia. Oh, and Times on my site, though I’m first in a queue of one on that.

What’s your favourite plain text editor?

TextMate. I’ve been persuaded to try numerous things since, but I’ll stick with Textmate, thanks very much.

What’s your favourite tea?

I recently discovered that caffeine was making me ill, and there’s loads of it in tea. I feel better without it. So, for the past two months I’ve fallen back in love with fruity blends, and any minty teas. I’m also partial to some good old Russian Caravan. I’m on a plane to the US right now, and I can tell you that I have a bag of Strawberry and Mango teabags in the hold; looks like a bag of drugs.

1275071400 · Web Standardistas · Follow Us on Twitter

Talking Typography

Ulster Festival of Art and Design [Detail]

Following the success of our first collaborative event, screening Justine Nagan’s acclaimed documentary Typeface, we’re delighted to announce the second Standardistas + Build Presents… event: Talking Typography on Wednesday, 16 June, 2010.

Run in conjunction with the Ulster Festival of Art and Design, Talking Typography features internationally renowned designers Jon Tan and Elliot Jay Stocks, speaking in Ireland for the first time.

Reprising some of the themes from their celebrated SXSWi web typography discussion ‘Quit Bitchin’ and Get Your Glyph On’, Tan and Stocks will discuss the overcoming of constraints on the web to create elegant, legible, and expressive typography in a medium that is changing almost daily.

Jon Tan is a founding member of Analog, and co-founder of Fontdeck. He serves on Smashing Magazine’s Experts Panel and is a member of the International Society of Typographic Designers.

Elliot Jay Stocks is a designer, illustrator, speaker, and author whose portfolio includes work for an international roster of clients. He is the creative force behind 8 Faces, a new printed magazine dedicated to typography.

Book your ticket for Talking Typography now.

1274992800 · Christopher Murphy · Follow Us on Twitter

Unit Editions

Unit Editions [Detail]

A collaboration between Tony Brook and Adrian Shaughnessy, Unit Editions is, “a progressive publishing venture producing high-quality, affordable books on graphic design and visual culture.”

With an intention to produce three or four books a year, Unit focuses on the idea of the book as a highly designed artefact with rich visual and textual content. Be warned, however, their beautifully designed books and journals are tempting in the extreme. (Credit cards should be withdrawn with caution.)

1274992680 · Christopher Murphy · Follow Us on Twitter

Has UX Lost its Meaning?

52 Weeks of UX [Detail]

Joshua Porter wrote an interesting article in 52 Weeks of UX recently, discussing the current overuse of the term UX to describe anything remotely design related. Suddenly everyone is a UX designer; putting the letters UX in your job title is as of now de rigueur. But, in the words of Mr Porter: “If everyone is using the term UX does it lose it’s meaning?”

“If UX is being used by anybody remotely close to design, then it undermines the original goal of the term to focus more attention on the people we design for.”

It would be unfortunate if people would start to see UX as a cliché, just another acronym to baffle and win clients with. But, as Mr Porter aptly puts it, the term is not what’s important, the work is:

The only thing that matters […] is that you are improving the experience of your users day in and day out. It doesn’t matter what you call it… call it IA or UX or Design or whatever. Those terms are merely navigation cues for discussion, contextual indicators people use to orient themselves initially. After that initial orientation, the terms don’t matter, the work does.

Truer words were rarely spoken.

1274984040 · Nicklas Persson · Follow Us on Twitter

Web Design Is Not Graphic Design

Michael Dick's Website [Detail]

Good distinction between different disciplines of design from Michael Dick:

“Graphic designers have the intention to grab an emotional response visually, while interface designers have the intention to grab a logical response mentally.”

A short, but worthwhile read.

1274973360 · Nicklas Persson · Follow Us on Twitter

Getting Quick and Dirty

Quick and Dirty Remote User Testing – by Nate Bolt

In all of the, admittedly deserved, hullabaloo over Ethan Marcotte’s excellent Responsive Web Design, published yesterday in A List Apart No. 306, Nate Bolt’s equally excellent Quick and Dirty Remote User Testing was unfortunately somewhat overlooked.

Artfully outlining three tried and tested methods for conducting user testing - Method #1 (if you like people); Method #2 (if you like machines better than people); and Method #3 (if you like people, just not talking with them) - Bolt has gathered together a comprehensive introduction to user testing that covers all the bases.

User testing is all too often overlooked in the design process, thanks to this timely article courtesy of Mr Bolt and A List Apart you’ve now no excuse not to include it as an essential part of your workflow.

1274913060 · Christopher Murphy · Follow Us on Twitter

The Design Cubicle

The Design Cubicle [Detail]

With a, “fresh coat of paint and some detailed body work,” some collaboration on, “under-the-hood development using HTML5 and CSS3,” and, “two years, some odd months and endless hours of starting over from scratch,” Brian Hoff is delighted to announce a long overdue redesign of The Design Cubicle.

Put simply, it’s been worth the wait.

Helpfully, Mr Hoff has written a thoughtful article, The Dawn of the Redesign, on the development process, providing an insight into the ideas underpinning the site’s new structure, look and feel.

1274900460 · Christopher Murphy · Follow Us on Twitter

Video JS

Video JS [Detail]

Video JS is an HTML5 video player built using JavaScript, sporting support for H.264, Ogg and WebM video codecs, using the Video for Everybody Embed Code. It is free to download and use, and is fully skinnable using nothing but CSS.

The project is built upon a tutorial, How to Build an HTML5 Video Player, so if you feel adventurous, you could just roll your own using Steve Heffernan’s tip-top step-by-step instructions.

1274889840 · Nicklas Persson · Follow Us on Twitter

Good Web Fonts

Who has time to test web fonts? Relax. We’re doing it for you. [Detail]

As font-face takes hold and a variety of services establish themselves to iron out the kinks in font delivery, the focus of our attention as designers is shifting from the mechanics of font delivery towards choosing appropriate fonts that work well on screen and lend themselves to the medium we’re working in.

In a timely move, Laura Franz, an Associate Professor at University of Massachusetts Dartmouth, has created Good Web Fonts, designed to highlight, “lively, subtle, perfectly legible fonts for the web.” Franz states:

You’ve read Bringhurst. You keep The Elements of Typographic Style on your bedside table. You can’t wait to use more fonts online… but you want to do right by your clients and your readers.

To assist you in this noble task, Good Web Fonts, “Tests fonts for online text so you don’t have to.” With a comprehensive selection of well-crafted fonts, each including its own Web Font Specimen, Franz has created an excellent resource that should find itself occupying pride of place at the top of your bookmarks.

Excellent and very much appreciated work.

1274880420 · Christopher Murphy · Follow Us on Twitter

HTML5 Asteroids

Asteroids [Detail]

HTML5 Asteroids - enough said.

1274816400 · Christopher Murphy · Follow Us on Twitter

HelvetiNote™

Death to Marker Felt™ [Extreme Detail]

Love Helvetica? Hate Marker Felt? Own an iPad? If the answer to the preceding three questions is yes, you’ll appreciate HelvetiNote™.

A collaboration between multidisciplinary design studio cypher13 and mobile development house Rage Digital, HelvetiNote™ is designed to simplify and improve the note taking experience and, equally importantly, proclaim ‘Death to Marker Felt™’.

Two, goals worth celebrating.

1274812140 · Christopher Murphy · Follow Us on Twitter

A Few Beers, Well Earned

21st May, 2010 [Detail]

Christoph Zillgens - “an Interface Designer, Web Designer, Web Developer, Graphic Designer, Media Designer – down to his whim and according to requirements” - has just unveiled a new version of his personal website. It’s lovely and well worth a bookmark.

Zillgens writes briefly about the process, in particular how he used the redesign to experiment with HTML5, CSS3 and an @font-face implementation via Typekit and - worth a visit alone - integrated an animated bookshelf using CSS3 3D Transforms.

A few beers, well earned Mr Zillgens.

1274810700 · Christopher Murphy · Follow Us on Twitter

Google Font Preview

DROID SANS, REGULAR [Detail]

Eager to test out Google Font Directory? The Font API and Font Directory beta - that sadly signalled the untimely demise of the @font-face team’s efforts - now has a Font Preview service to typetest samples and automagically generate the required CSS.

1274803560 · Christopher Murphy · Follow Us on Twitter

PAC-MAN Rules!

Cosmic 140 [Detail]

If you enjoyed Google’s 30th birthday PAC-MAN Google Doodle, good news, it’s back. Marissa Mayer (Google VP Search Products and User Experience), states:

We’ve been overwhelmed — but not surprised — by the success of our 30th anniversary PAC-MAN doodle. Due to popular demand, we’re making the game permanently available at www.google.com/pacman.

Game on.

1274744940 · Christopher Murphy · Follow Us on Twitter

The $1.6 Million Mistake

6pm.com [Detail]

In typically open form, Inside Zappos have a short, but fascinating piece on an expensive mistake the company’s sister site, 6pm.com, took on the chin last Friday. (A $1.6 million mistake, to be precise.) Aaron Magness, Zappos’ Director of Brand Marketing and Business Development, states:

Every day, 6pm.com highlights discounts on products ranging up to 70% off. This morning, we made a big mistake in our pricing engine that capped everything on the site at $49.95. The mistake started at midnight and went until around 6.00 am PST. When we figured out the mistake was happening, we had to shut down the site for a bit until we got the pricing problem fixed.

While we’re sure this was a great deal for customers, it was inadvertent, and we took a big loss (over $1.6 million) selling so many items so far under cost. However, it was our mistake. We will be honoring all purchases that took place on 6pm.com during our mess up.

Whilst the short term loss is no doubt painful, the long term gain might prove worth the loss as consumers respect the company’s integrity over its decision. The comments bear this out with support for the difficult decision to honour their inadvertent error.

The last word has to go to Magness: “The actual dollar figure of our loss is accurate - over $1.6 million. Let’s just say this was not a boring weekend for us.”

1274737500 · Christopher Murphy · Follow Us on Twitter

CSS3 Abuse

NEW LENS FLARE [Detail]

David Desandro is at it again, this time, “abusing the text-shadow property to turn [a] ho-hum bit of text into a magnificent, radiant beacon of allure and awe.” Desandro states:

Getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo.

Indeed. It would appear that white hot glowing text is the new lens flare.

1274724480 · Christopher Murphy · Follow Us on Twitter

Cosmic 140

Cosmic 140 [Detail]

The talented team at iA have once again excelled themselves. This year’s Web Trend Map with a difference - the Cosmic 140 - is truly a thing of beauty. As iA put it:

No Metro lines. No URLs. This time, it’s the 140 most influential people on Twitter, sorted by #name, #handle, #category, #influence and #activity. Plus: When they started tweeting and what they first said.

Just like the previous Web Trend Map, it’s going to be another A0 Poster. Super high quality paper, the parts that appear in grey on the file are PP-Varnish. So in the end the whole poster is going to be black and white (no grey).

In a word: lovely; and with only 1,000 copies on offer, limited.

1274715960 · Christopher Murphy · Follow Us on Twitter

Future of Web Design, London 2010

FUTURE OF WEB DESIGN [Detail]

With The Future of Web Design, London 2010 just around the corner, we’re looking forward to 48 hours of inspiration from, amongst others, Dan Cederholm, Jon Hicks, Elliot Jay Stocks and, of course, yours truly.

Our presentation, cunningly disguised as a UX Masterclass, in fact digs a little deeper. Determined to deliver more than a UX recipe book we’ve created a presentation that not only explores the complex world of user experience, but also looks deeper to uncover the secrets of successful designs and the designers behind them.

Building on Simon Sinek’s excellent TED presentation How Great Leaders Inspire Action, the presentation’s ingredients also include: liquid nitrogen, stereo gramophones and Belgian elephants. There will of course also be the chance to win spot prizes from the obligatory Standardistas’ ‘Big Bag of Schwag’®.

We’re looking forward to seeing you there.

1273881840 · Christopher Murphy · Follow Us on Twitter

Potato Gun, Lightning and Sonic Magic

Google Chrome Blog [Detail]

Not content with simply listing the results of their speed tests for the latest beta of Chrome, Google have put together a short video showcasing a series of fun, unconventional speed tests designed to showcase the browser’s speed.

Watch web pages load at 2,700 frames per second in Chrome vs. Potato, Chrome vs. Sound Waves and Chrome vs. Lightning. It is, indeed, fast.

1273160760 · Christopher Murphy · Follow Us on Twitter

@standardistas: Follow Web Standardistas on Twitter.