Archive: October, 2010

It’s been a busy week in Brighton. Tantek was in town for a few days, which is always a recipe for enjoyable shenanigans.

The latter half of the week has been a whirlwind of different events. There was a Skillswap on Wednesday and on Thursday, I gave a talk at the Async meet-up, which was quite productive. It gave me a chance to marshall some of my thoughts on responsive enhancement.

The week finished with Layer Tennis. I was honoured—and somewhat intimidated—to be asked to provide the commentary for the Moss vs. Whalen match. Holy crap! Those guys are talented. I mean, I knew that anyway but to see them produce the goods under such a tight deadline was quite something.

Meanwhile, I just blathered some words into a textarea. When it was all done, I read back what I had written and it’s actually not that bad:

0. There Will Be Blood
1. Pukeworthy
2. Plastered
3. Bacon Nation
4. Zoom In. Now Enhance.
5. It Ain’t Meat, Babe
6. Longpork Is For Closers
7. Bass. How Low Can You Go?
8. Dead Rising
9. Troll Man
10. Craven Applause

It was a somewhat stressful exercise in writing on demand, but it was a fun way to finish up the week.

Now, however, I must pack a bag and fly to San Diego. No rest for the wicked

When web designer James Martin asked his peers what they listen to while they work, he came to two conclusions:

1. Stop listening to music with any lyrical content and
2. start listening to Explosions in the Sky!

If you’re already doing that, then I suggest that the next step is to check out The Orchid. Their New Mexico is rather excellent. And I’m not just saying that because Jason plays guitar.

If you’re looking for more music recommendations, I suggest tuning into the inaugural episode of Clagtunes, Richard’s latest project. It’s rather excellent.

When I was in Boston for An Event Apart back in May, I bought an iPad.

That makes it sound like a very casual act. Back then, iPads were in very short supply. When I asked an employee at the Apple Store in Boston if they had any iPads in stock, he didn’t answer Hmm… let me check, or Not at the moment. He answered Oh, God no!

Fortunately, Malarkey was far more persistent than I and managed, through means fair or foul, to track down the only two iPads for sale in all of Beantown.

I used the device for two months and then, as predicted, I gave it to my mother. It was definitely the right decision. She loves it. She’s using it all the time, surfing the web wherever she pleases.

I liked using the iPad, but I didn’t love it. Once the novelty wore off, I found I had few good reasons to use it rather than use my Macbook.

Some observations from a Summer spent in the company of the iPad…

The iPad is almost exactly the wrong weight. It’s just that little bit too heavy to comfortably hold in one hand. It’s no coincidence that all of iPad demonstrations show it resting on a raised leg. I found that if I was using the iPad for any length of time, I would adopt a more and more relaxed, nay… slouchy position. Before I knew it, I was supine on the sofa, one leg raised with the iPad resting against it, like a Roman emperor waiting to be fed individually-peeled grapes.

The iPad is a great device for reading. I rediscovered the power of RSS. The iPad is also a great device for browsing the web. The problem is, I don’t really browse the web that much. Instead, I browse, I bookmark, I quote, I huffduff, I copy, I paste, I tweet, I share. Using an iPad made me realise that the web is very much a read/write medium for me. While it’s possible to do all those things on the iPad, it isn’t easy.

The tell-tale moment came when I was reading something on the iPad—supine on the sofa, of course—that I wanted to post to Delicious. Rather than fill in a form using the iPad’s on-screen keyboard, I found myself putting the iPad down and reaching for my Macbook just to accomplish that one little task. That’s when I knew it wasn’t the ideal device for me.

Don’t get me wrong: I’m not joining in the chorus of those silly enough to say that the iPad can’t be used for creating, editing and updating. That conclusion would be far too absolute and Boolean. But I think the iPad favours consumption more than creation. And that’s okay. That still makes it a great device for many people—such as my mother.

There’s one big fly in the ointment of the iPad as a device for non-geeks—such as my mother—and that’s the out-of-the-box experience. John Gruber pointed this out in his review of the iPad:

One thing that is very iPhone-like about iPad is that when you first take it out of the box, it wants to be plugged into your Mac or PC via USB and sync with iTunes. … It creates an impression that the iPad does not stand on its own. It’s a child that still needs a parent. But it’s not a young child. It’s more like a teenager. It’s close. So close that it feels like it ought to be able to stand on its own.

My mother has an old G3 Ruby iMac which doesn’t have USB 2, so I had to set up the iPad on my machine before giving it to her. It’s such a shame that this step is even necessary. I love the idea of a portable touchscreen device that you can simply turn on for the first time, connect to a WiFi network, and start surfing the web.

Perhaps later versions of the iPad will support account synching via MobileMe. Perhaps later versions of the iPad will support multiple accounts, which would make it a great family household device. Perhaps later versions of the iPad will have a front-facing camera and support FaceTime. Perhaps later versions of the iPad will be slimmer and lighter.

Perhaps I will get a later version of the iPad.

I mentioned in my last post that I was looking for volunteers to help transcribe the video of my talk at Fronteers 2010. I didn’t get much of a response so I put the word out on Twitter. Then I got plenty of offers.

I owe a pint to these people:

• Jon Linklater-Johnson
• Jason Fry
• Matthias Reuter
• Richie Coss
• Jennifer Hageman
• Matthew Loseke
• Danielle Huntrods
• Ian Lunn

You can see the results of their work here: The Design Of HTML5. Each volunteer transcribed about ten minutes of the talk, which equates to about an hour’s work.

As it turned out, the Fronteers folks had commissioned a transcription from Casting Words, the service built on Amazon’s Mechanical Turk. You can see the result—not bad. I’ve used Casting Words in the past to get transcriptions done although lately I’ve found they take far too long for somewhat inconsistent results.

I think that, for the best results, you can’t beat hiring a professional transcriber. But, in lieu of that, I think the aforementioned volunteers did a great job, for which I am very grateful.

Incidentally, the talk—The Design Of HTML5—is licensed under a Creative Commons attribution licence so if you want to republish it or adapt it, please go ahead.

I was in Amsterdam at the end of last week for the Fronteers conference. It was a good conference but the fact that Jake Archibald was on the bill meant that my presentation paled in comparison—he remains one of the finest and most entertaining speakers I have ever seen.

I gave a talk on The Design of HTML5: much the same talk as I gave at Drupalcon. You can download the slides if you want, and the video is already online.

The presentation is licensed under a Creative Commons attribution license so feel free to download the video and do with it as you will. I’d love to get the presentation transcribed. If six or seven people are willing to transcribe about ten minutes of audio, we can get this done fairly easily. Get in touch if you don’t mind spending some time on it and I’ll try to co-ordinate the efforts. I can’t offer any financial reward, but of course your efforts will be credited and you’ll be helping to make the information more findable.

If video isn’t your thing, you might enjoy listening to an interview I did recently for the Einstein and Sock Monkey podcast.

My next speaking trip will be to California. I’m off to San Diego for the final leg of this year’s An Event Apart. If you didn’t make it to An Event Apart this year, don’t fret: tickets are now on sale for next year’s six shows, and I’m proud to be speaking at all six.

I’ll be heading out to San Diego at the very end of October. That means I’m not going to be in Brighton for this year’s Crawl of the Dead, which is a real shame.

After San Diego, I’ll be heading up to San Francisco. It’s been far too long since I was last there. I’m really happy that I’ll be there for Science Hack Day San Francisco that Ariel is organising at The Institute for the Future in Palo Alto on November 13th and 14th. It’s going to be an excellent event and I highly recommend that you sign up if you can make it.

While my flight to the States is already booked, I haven’t yet sorted out my travel from San Diego to San Francisco. On the off-chance that anyone out there from San Francisco is planning on travelling to An Event Apart San Diego by car, let me know if you fancy a travelling companion for the ride back. I hear it’s a beautiful scenic drive.

The scene is the Clearleft office. On the stereo, the latest album by Sufjan Stevens is playing.

Who’s this asks Paul.

Sufjan Stevens says Cennydd.

Shakin’ Stevens‽

Much mirth followed and Rich admitted to owning a Shaky album and knowing his real name.

Oh yeah said Paul. Didn’t he change his name when he converted to Islam?

Pause.

That’s Cat Stevens.

Every now and then I come across a site that reminds of just why I love this sad and beautiful world wide web: a site with that certain intangible webbiness.

Wikipedia has it. That’s a project that’s not just on the web, it’s of the web. It’s a terrible idea in theory, but an amazing achievement in practice. It restores my faith in humanity.

Kickstarter has it. The word distruptive is over-used in the world of technology, but I can’t think of a better adjective to describe Kickstarter …except, perhaps, for empowering. There’s something incredibly satisfying about contributing directly to someone’s creative output.

Old Weather has it. It’s the latest project from the magnificent Zooniverse crew, the people behind the brilliant Galaxy Zoo.

Old Weather is another collaborative project. Everyone who takes part is presented with a scanned-in page from a ship’s logbook from the early 20th Century. The annotations on the pages aren’t machine-readable but the human brain does an amazing job of discerning the meaning in the patterns of markings made with pen on paper (and if you need help, there are video tutorials available).

Converting this data from analogue paper-based databases into a digital database online would in itself be a worthy goal, but in this case, the data is especially valuable:

These transcriptions will contribute to climate model projections and improve a database of weather extremes. Historians will use your work to track past ship movements and the stories of the people on board.

But the value is not just in contributing to a worthy cause; it’s also great fun. It makes excellent use of the cognitive surplus that Clay Shirky talks about.

What a shame that the situation in which we are most often called upon to demonstrate our humanity is through the vile CAPTCHA, a dreadful idea that is ironically dehumanising in its implementation.

I’d much rather have people prove their species credentials with a more rewarding task. Want to leave a comment? First you must calculate the optimum trajectory for a Jupiter flyby, categorise a crater on the moon spot a coronal mass ejection or tell me if you live in fucking Dalston.

I went along to the fifth Barcamp Brighton on the weekend. It was a truly excellent event, hosted in The Skiff, a great coworking space. Alas, a creeping cold meant that I couldn’t stick around for too long, but I made sure to give a presentation before I bailed.

I spoke about media queries. As you may have gathered from my recent entries, this is something I’ve been thinking about a lot lately.

I didn’t prepare any slides. If I had, they would have consisted of screenshots and CSS, so I figured why not just show the actual sites and CSS instead? It was a fairly rambling, chaotic presentation but it helped me to clarify some ideas. Prem asked if I would reprise the presentation at Async—Brighton’s JavaScript meetup—on October 28th so that will give me a chance to marshall my thoughts.

In reiterating my point about fluid grids being a necessary prerequisite for responsive web design, I tried to take a long-zoom approach and went all the way back to John’s superb A Dao of Web Design article—now ten years old!

The tool problem

I still feel that most designers haven’t yet fully embraced the web as its own medium, choosing instead to treat it along the same lines as print design. Or, as Mark put it his excellent talk on designing grid systems, designing from the canvas in rather than the content out.

Far too early in the design process, a tool such as Photoshop or Fireworks gets opened up and a new file is created with an arbitrary width (960 pixels being the current width du jour). That process lends itself well to creating paintings of websites but it’s not a great first step in creating a living, breathing website. Experiments like Liz’s Evening Edition not withstanding, what I wrote back in 2006 still holds true:

CSS hasn’t revolutionised web design. The reason lies not with the technology (which is revolutionary), but with the designers using it. Most designers have simply swapped the old technology (tables and font tags) for the new technology, without fully exploring what’s so completely new.

My point is that responsive web design isn’t something that can be tacked on to the end of an existing workflow. It requires a different mindset, one that considers the medium from the outset. If you’re currently thinking in proportions rather than pixels, the transition to responsive web design will be relatively painless. But if you’re stuck in the world of converting PSDs into web pages, you’re going to have a tough time.

I’ve written about the problems with our tools before and Stan has crafted the definitive call to arms for A Real Web Design Application so I’ll spare you another rant.

A new approach

At Barcamp Brighton, I encapsulated my thinking by saying:

Instead of thinking in terms of pixel perfection, we should be thinking of proportion perfection.

Then I showed a bunch of sites I’ve worked on that are using media queries to adapt to different screen sizes: Huffduffer, Salter Cane, St. Paul’s School and UX London.

All of those sites are built in a similar way. First, CSS is used to create the optimal layout e.g. three columns floated alongside one another. Then media queries are used to over-ride those float and width declarations so that the content is linearised.

That’s all well and good but, as someone correctly pointed out during the presentation, what about small-screen devices that don’t support media queries?

That’s an excellent question. The answer requires another shift in perspective. Instead of thinking of the widescreen version as the starting point, why not consider the small screen layout first?

In a way, this is an extension of Luke’s Mobile First exercise — thinking of the mobile experience before building the desktop site.

In his presentation at Over The Air, Bryan Rieger advocated this approach for media queries. As he correctly points out—and this is something echoed by PPK—what we’re talking about here is essentially progressive enhancement.

Instead of just using progressive enhancement to throw in some rounded corners, opacity or gradients, we can apply the same thinking to layout: start with the most basic CSS—colours, fonts, etc.—and then apply floats and widths according to the capabilites of the browser …as determined by media queries.

That’s what I did for the Science Hack Day website and now I’ve decided to take the same approach with adactio.com.

At this point, you might be wondering if I’m going to mention the elephant in the room. You know: the elephant …from Microsoft …elephant versions 8 and lower.

My first thought was to use conditional comments. All browsers get the same stylesheet but elephantine browsers get an extra one which contains the same float and width declarations that are contained in the media queries. But that violates the DRY principle: any time I make a layout change, I would have to remember to make the changes in two different stylesheets. Prem suggested placing an @import rule within the media query to pull in the same stylesheet that IE is getting via conditional comments …but alas, @import rules need to come first in a CSS document.

So, for now, users of Internet Explorer visiting adactio.com will just get the linearised content. I may decide to violate the DRY principle and use conditional comments at a later date.

Revisiting adactio.com

Over the years, I’ve resisted the temptation to do a complete redesign of my site. Instead, I’ve added different designs as options that can be selected from any page on the site. After all, isn’t the whole point of CSS that it’s separated from the structure? Changing the visual appearance shouldn’t necessitate changing the markup; that’s the lesson of the CSS Zen Garden.

So I’ve stubbornly refused to update my markup for almost ten years. But now, what with having written a book on HTML5 and all, I figured I could make a few changes.

The doctype has been updated. Elements that had previously been given IDs are now identified with ARIA landmark roles instead (and referenced in the CSS with attribute selectors). These days, I rarely use IDs for anything other than making document fragments addressable, so it was interesting to see how my past self did things differently.

My past self was also trying to be far too clever with the separation of concerns in the CSS. I was using three different stylesheets for each theme: one for colour, one for typography, and one for layout. In retrospect, this was a bad idea for two reasons:

1. I’m increasing the number of HTTP requests.
2. While it might be obvious that font-family declarations belong in the typography stylesheet and background-color declarations belong in the colour stylesheet, it’s not nearly so simple to figure out where margins and paddings should go. Is that layout? Is it typography?

It turns out that a more holistic approach to CSS is far, far easier to work with. It felt good to finally merge those separate CSS files into one.

Oh, there was one more good point raised at the Barcamp Brighton presentation… I had being going on about how assumptions can be dangerous—assuming that the user is visiting your site from a desktop machine, assuming that a large monitor size equates to a large viewport size, assuming that a large browser window means that large bandwidth is available, and so on. Somebody pointed out that, in applying my media queries using pixels, I was making assumptions about equating pixel width to viewable area. An excellent point! For that reason, all the media queries used in the different themes on adactio.com are triggered with ems rather than pixels.

For the record, here are some useful em widths that can be used as trigger points:

• 40em =~ 640px
• 50em =~ 800px
• 64em =~ 1024px

Default

Tate Modern

Seaside

Zeldman

Adactizilla

Sci-fi

Renaissance

Hirnlego

Another week, another responsive web site.

Two weeks ago, it was St. Paul’s School. Last week, it was Salter Cane. This week, I’ve been working on next year’s UX London site, implementing a nice little design refresh courtesy of Paul.

More pages will be added soon but for now, it’s essentially like a poster for the conference.

Back when I was working on the first UX London site two years ago, I was building it together with Natalie, and I mean literally together: we were pair-programming. Well, I guess programming isn’t quite right for HTML and CSS, but we were pair-writing. It was an excellent experience.

Anyway, Natalie being Natalie, the UX London site was built with rock-solid markup with a flexible layout. All the pieces were in place for a responsive web design so once I was done with the current refresh, I spent a few minutes writing some media queries.

You can see the results for yourself.