Archive: April, 2013

A funny thing happened when I was in Berlin two weekends ago. I was walking down the street that my AirBnB apartment was on when I heard someone say “Jeremy Keith?” It turned out it was Andre Jay Meissner, one of the founders of the excellent Open Device Lab website. We had emailed but never met before. Small world!

The Twitter account for the open device lab in Nuremburg pointed out that it’s been one year since I wrote a blog post about the open device lab I set up:

Exactly one year ago @adactio started the #ODL movement with his blog adactio.com/journal/5433/ – wow, what a huge impact! Thanks for that! (y)

— Open Device Lab NBG (@ODLNuremberg) April 30, 2013

Much as I’d love to take credit for the idea of an open device lab, it simply isn’t true. Jason and Lyza had been working on setting up the open device lab in Portland for quite a while when I flung open the doors of the Clearleft test lab. But I will take credit for the “Ah, fuck it!” attitude that I introduced to the idea of sharing test devices with the community. Partly because I had seen how long it was taking the Portland device lab to get off the ground while they did everything by the book, I decided to just wait for the worst to happen instead of planning for it:

There are potential pitfalls to opening up a testing suite like this. What about the insurance? What about theft? What about breakage? But the thing about potential pitfalls is that they’re just that: potential. I’m treating all of them as YAGNI issues. I’ll address any problems if and when they occur rather than planning for worst-case scenarios.

It proved to be a great policy. So far, nothing has gone wrong. And it also served as an example to other people thinking about opening up device labs at their companies: “don’t sweat it; I didn’t!”

But as far as anniversaries go, the one-year birthday of the Clearleft device lab is not the most significant event of April 30th. Today is the twentieth anniversary of the publication of one of the most important documents in technological history: the document that officially put the World Wide Web into the public domain.

Open device labs are a small, small part of working on the web but I like to think that they represent the same kind of spirit of openness and sharing that Tim Berners-Lee and his colleagues demonstrated at CERN:

I really, really like the way that communal device labs have taken off. It’s like a physical manifestation of the sharing and openness that has imbued the practice of web design and development right from the start. View source, mailing lists, blog posts, Stack Overflow, and Github are made of bits; device labs are made of atoms. But they are all open for you to use and contribute to.

At UX London I had dinner with a Swiss entrepreneur who was showing off his proprietary native app on his phone and proudly declaring that he had been granted a patent. He seemed like a nice chap, but his attitude kind of made my skin crawl. It seemed so antithetical to the spirit of sharing and openness that I’m used to from the web.

James Gleick once described the web as the patent that never was:

Tim Berners-Lee invented the Web and the Web browser — that is, the world as we now know it — pretty much single-handedly, starting in about 1989, when he was working as a software engineer at CERN, the particle-physics laboratory in Geneva. He didn’t patent it, or any part of it. On the contrary, he has labored tirelessly to keep cyberspace open and nonproprietary.

We are all reaping the benefits of Sir Tim’s kindness and generosity.

It’s not so much that Tim Berners Lee invented WWW, it’s that he gave it to the world as a gift. Supreme kindness as well as innovation.

— Chris T-T (@christt) July 27, 2012

Pretty much every time I give a talk—be it on progressive enhancement, responsive design, or web development in general—I almost always make reference to John’s A Dao Of Web Design. Invariably, I ask for a show of hands: “Who’s read this article?” I ask. I try not to get too dispirited when only a few hands go up. Instead I encourage everyone—in the strongest possible terms—to seek it out and read it.

It’s not just that I consider A Dao Of Web Design to be part of the canon of great writing and thinking for web designers and developers. I’m also continually amazed by its longevity. Thirteen years is a very, very long time on the web, and yet just last week Richard referenced John’s article when he was describing how best to approach designing for the web today.

The only other article I can think that matches its importance is Ethan’s unveiling of Responsive Web Design three years ago, also on A List Apart. It’s no coincidence that Ethan’s article references John’s article from a decade before. Both pieces are essentially making the same rallying cry: stop fighting the flexible nature of the web. Embrace it.

I think that finally, finally we’re beginning to do just that.

I spent most of last week up in Greenwich for this year’s UX London. ‘Twas a most excellent event. The move to the new venue gave the whole event a much more fun vibe and the format of a morning of talks followed by an afternoon of workshops was perfect.

Andy did a great job curating the line-up. It had a bit of a dConstruct-y feel, and not just because we had old friends like Marty, Peter, and Hannah back: Genevieve Bell, Simone Rebaudengo and Richard Seymour all broke our brains in different wonderful ways.

Hats off to Kate who worked her ass off to make sure that everything ran smoothly. Seriously, you wouldn’t believe the amount of work she did. The change of venue and format for this year resulted in at least twice as much work as usual.

In the middle of UX London’s three days, I ran a workshop called Responsive UX. As I told the audience that morning when I was pitching the workshop, I got the title by taking the term “responsive design” and doing a find-and-replace on the word “design” with the phrase “UX”. After all, what’s the difference? Right, Peter?

Seriously though, this workshop was a little different in that I wasn’t covering any HTML or CSS or JavaScript. It was much more about planning for the unknown and good ol’-fashioned content priority and hierarchy.

I wasn’t entirely pleased with how it went. It was a workshop of two halves. The first half had far too much of me talking (and ranting), probably preaching to the choir. But I felt I had to lay the groundwork first. The second half—when everybody got hands on with paper-based exercises—was much better.

I learned my lesson: show, don’t tell. I’ll be doing a full day responsive workshop at Ampersand in June. I plan to make sure that there’s less of me talking and more making and collaborating. Also, because it’s a full day, I’ll be able to get down to the nitty-gritty of markup and style sheets.

And don’t forget; if you want me to come to your company sometime and do a workshop there, no problemo.

Some people at the workshop asked about me publishing my slides. The slides by themselves really don’t contain much information but I’ve published them on Speakerdeck anyway. But what’s more valuable are the URLs to articles and resources I mentioned along the way. So here’s the structure of the workshop together with links to examples and further reading…

Introduction

• Long Live the Web by Tim Berners-Lee
• A Dao of Web Design by John Allsopp
• Responsive Web Design by Ethan Marcotte
• A Richer Canvas by Mark Boulton
• Fit to Scale by Trent Walton

Myths

• St. Paul’s School
• Huffduffer
• Map Tales
• The Mobile Context by Mark Kirby
• There is no Mobile Web by Stephen Hay
• Noise-to-Noise Ratio by Merlin Mann

Progressive Enhancement

• Responsive By Default by Andy Hume
• Do websites need to look exactly the same in every browser? by Dan Cederholm

Planning

• Mobile First by Luke Wroblewski
• Content First
• APIs First
• The DRY Principle
• URL Design by Kyle Kneath

Conditional Loading

• dConstruct 2012
• Conditional Loading for Responsive Designs

Visual Design

• Time to stop showing clients static design visuals by Andy Clarke
• Style Tiles by Samantha Warren
• Element Collages by Dan Mall
• Matter
• Pattern Primer example
• Pattern Primer source

Navigation

• Clearleft (navigation first)
• The Session (content first, navigation second)
• Fix My Street (display: table)
• Hack Farm (progressive disclosure)
• Wellcome Library (off-canvas)
• Yaron Shoen (separate URL)

Representing Clearleft, I wrote a little something for The Pastry Box. As Tantek pointed out, it’s somewhat ironic that it’s published on a third-party site, considering that I explicitly said “I really encourage you to publish on your own site.”

So here it is.

…

I had the great pleasure of organising the Responsive Day Out here in Brighton last month. It was a lovely gathering of front-end developers and designers getting together to swap stories and cry on one another’s shoulders about the challenges involved in responsive design.

There were some well-known names on the roster: people who speak at international conferences and whose work you’d be familiar with. But there were also some first-timers: people who had never spoken at a conference before.

So why would I, as a conference organiser, ask someone who has never spoken before to get up on stage and share their thoughts?

The answer is simple: their writing. Reading the intelligent and cogent blog posts and articles that they had published made me want to hear what they had to say …and I wanted to introduce their smarts to an audience. These people took the time to write down and publish their thoughts, and that led directly to their appearance at a web conference.

I really encourage you to publish on your own site. If you don’t have your own site, I think you should. In the meantime, there are plenty of other wonderful online publications: 24 Ways, Smashing Magazine, A List Apart. Why not get in touch with them if you’ve got an idea for an article?

To say that communication is a valuable skill when you’re working on the web would be quite an understatement. In a very real sense, the web was made to allow us all to share and communicate. Anybody can do it. That’s one of the great things about the web. You don’t need to ask anybody for permission. If you have an idea or a technique or a question that you want to share, all you need to do is publish it …as long as you take the time to write your thoughts down.

Write. Publish. Share. Speak.

The lovely and talented Paul and Kelly from Maxine Denver were in the Clearleft office to do some video work last week. After finishing a piece I was in, I suggested they keep “rolling” (to use an anachronistic term) so I could do a little tongue-in-cheek piece about the Clearleft device lab, a la Winnebago Man.

Here’s the result.

It reminded me of something, but I couldn’t figure out what. Then I remembered.