Archive: February, 2012


                    5th                     10th                     15th                     20th                     25th                    

Wednesday, February 29th, 2012


This is not only the single most important human endeavour that you can participate in, it is also ridiculously gorgeous.


ImageAlpha — lossy compression for 24-bit PNG images

From Kornel, the genius who gave us ImageOptim, comes another Mac desktop tool for optimising PNGs, this time converting 24-bit PNG to 8-bit with full alpha channel.

scott_lynch: Against Big Bird, The Gods Themselves Contend In Vain

It turns out that Big Bird is a god-defying instantiation of Moorcock’s Eternal Champion. Magnificent!

Big Bird and Snuffy go with him to stand in the Hall of Two Truths at the gate to the afterlife. The gigantic foam balls on these guys! Sure, Elmo loves you, but when’s the last time Elmo held anyone’s hand on the threshold of eternal night?

Getting ahead in advertising

One of the other speakers at this year’s Webstock was Matthew Inman. While he was in Wellington, he published a new Oatmeal comic called I tried to watch Game of Thrones and this is what happened.

I can relate to the frustration he describes. I watched most of Game of Thrones while I was in Arizona over Christmas. I say “most” because the final episode was shown on the same day that Jessica and I were flying back to the UK. Once we got back home, we tried to obtain that final episode by legal means. We failed. And so we torrented it …just as described in Matt’s comic.

Andy Ihnatko posted a rebuttal to the Oatmeal called Heavy Hangs The Bandwidth That Torrents The Crown in which he equates Matt’s sense of entitlement to that described by Louis C.K.:

The single least-attractive attribute of many of the people who download content illegally is their smug sense of entitlement.

As Marco Arment points out, Andy might be right but it’s not a very helpful approach to solving the real problem:

Relying solely on yelling about what’s right isn’t a pragmatic approach for the media industry to take. And it’s not working. It’s unrealistic and naïve to expect everyone to do the “right” thing when the alternative is so much easier, faster, cheaper, and better for so many of them.

The pragmatic approach is to address the demand.

I was reminded of this kind of stubborn insistence in defending the old way of doing things while I was thinking about …advertising.

Have a read of this wonderful anecdote called TV Is Broken which describes the reaction of a young girl thitherto only familiar with on-demand streaming of time-shifted content when she is confronted with the experience of watching “regular” television:

“Did it break?”, she asks. It does sometimes happen at home that Flash or Silverlight implode, interrupt her show, and I have to fix it.

“No. It’s just a commercial.”

“What’s a commercial?”, she asks.

“It is like little shows where they tell you about other shows and toys and snacks.”, I explain.


“Well the TV people think you might like to know about this stuff.”

“This is boring! I want to watch Shrek.”

Andy Ihnatko might argue that the young girl needs to sit there and just take the adverts because, hey, that’s the way things have always worked in the past, dagnabbit. Advertising executives would agree. They would, of course, be completely and utterly wrong. Just because something has worked a certain way in the past doesn’t mean it should work that way in the future. If anything, it is the media companies and advertisers who are the ones debilitated by a sense of self-entitlement.

Advertising has always felt strange on the web. It’s an old-world approach that feels out of place bolted onto our new medium. It is being interpreted as damage and routed around. I’m not just talking about ad-blockers. Services like Instapaper and Readability—and, to a certain extent, RSS before them—are allowing people to circumvent the kind of disgustingly dehumanising advertising documented in Merlin’s Noise to Noise Ratio set of screenshots. Those tools are responding to the customers and readers.

There’s been a lot of talk about advertising in responsive design lately—it was one of the talking points at the recent Responsive Summit in London—and that’s great; it’s a thorny problem that needs to be addressed. But it’s one of those issues where, if you look at it deeply enough, keeping the user’s needs in mind, the inevitable conclusion is that it’s a fundamentally flawed approach to interacting with readers/viewers/users/ugly bags of mostly water.

This isn’t specific to responsive design, of course. Cennydd wrote about the fundamental disconnect between user experience and advertising:

Can UX designers make a difference in the advertising field? Possibly. But I see it as a a quixotic endeavour, swimming against the tide of a value system that frequently causes the disempowerment of the user.

I realise that in pointing out that advertising is fundamentally shit, I’m not being very helpful and I’m not exactly offering much in the way of solutions or alternatives. But I rail against the idea that we need to accept intrusive online advertising just because “that’s the way things have always been.” There are many constructs—advertising, copyright—that we treat as if they are immutable laws of nature when in fact they may be outmoded business concepts more suited to the last century (if they ever really worked at all).

So when I see the new IAB Display Advertising Guidelines which consist of more of the same shit piled higher and deeper, my immediate reaction is:

“This is boring! I want to watch Shrek.”

nathanford/pngy - GitHub

A script that attempts to detect connection speed (by requesting a test file three times in a row) in order to determine whether hi-res images should be requested or not.

A Whole Lotta Nothing: Webstock: best conference ever

I’m genuinely touched by Matt’s kind words on my Webstock talk. It really means a lot to me, coming from him.


I spent most of February on the far side of the world. I had the great honour and pleasure of speaking at Webstock in New Zealand.

This conference’s reputation had preceded it. I had heard from many friends who have spoken in previous years that the event is great and that the organisers really know how to treat their speakers. I can confirm that both assertions are absolutely true. Jessica and I were treated with warmth and affection, and the whole conference was a top-notch affair.

I gave a new talk called Of Time and the Network taking a long-zoom look at how our relationship with time has changed as our communications networks have become faster and faster. That’s a fairly pretentious premise but I had a lot of fun with it. I’m pretty pleased with how it turned out, although maybe the ending was a little weak. The video and audio should be online soon so you can judge for yourself (and I’ll be sure to get the talk transcribed and published in the articles section of this site).

Webstock: Jeremy Keith Jeremy Keith

Perhaps it was because I was looking for the pattern, but I found that a number of the other talks were also taking a healthy long-term view of the web. Matt’s talk in particular—Lessons from a 40 Year Old—reiterated the importance of caring for URLs.

Wilson reprised his Build talk, When We Build, the title of which is taken from John Ruskin’s Lamp of Memory:

When we build, let us think that we build forever. Let it not be for present delight nor for present use alone. Let it be such work as our descendants will thank us for; and let us think, as we lay stone on stone, that a time is to come when those stones will be held sacred because our hands have touched them, and that men will say, as they look upon the labor and wrought substance of them, “See! This our father did for us.”

Another recurring theme was that of craft …which is somewhat related to the theme of time (after all, craftsmanship takes time). Erin gave a lovely presentation, ostensibly on content strategy but delving deeply into the importance of craft, while Jessica, Adam and Michael gave us insights into their respective crafts of lettering and film-making.

All in all, it was a great event—although the way the schedule split into two tracks in the middle of the day led to the inevitable feelings of fomo.

Matt wrote about his Webstock experience when he got back home:

It was easily the best speaking gig I’ve ever had. I’m planning on making this conference a regular visit in the future (as an attendee) and I urge anyone else (especially in America) that has yearned for a top-quality, well-run technology conference in a place you’ve always wanted to visit to do the same.

Webstock speakers

LukeW | Which One: Responsive Design, Device Experiences, or RESS?

Luke outlines three different solutions to delivering a site to multiple devices.

Tuesday, February 28th, 2012

Minimal Mac | TV Is Broken

A fascinating insight into the reaction of an internet-savvy child upon being exposed to “regular” television.

Wilson Miner

Wilson has turned his site into a single-serving page that’s doing some interesting things with media queries (using height as well as width).

Time to Kill Off Captchas: Scientific American

Yes, yes, yes! This article does an excellent job of explaining what Captchas are attempting to do and why, therefore, they are so utterly shit.

Responsive Summit » Blog » Elliot Jay Stocks

Elliot jots down some of the issues discussed at the responsive summit.

The world’s undersea internet cables - interactive | Technology |

Explore the shape of the underwater world of internet backbones.

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.

Progress Bar

A nice little bit of CSS for a page-loading animation. View source.

The Star Wars Saga: Suggested Viewing Order » Absolutely No Machete Juggling

This is an intriguing suggestion: watch the Star Wars saga in the order IV, V, II, III, VI (notice that Episode I is missing entirely). The reasoning is very sound and well worth a read.

Frank Chimero — Blog

Frank has redesigned his site and it’s quite wonderful: a real reflection of his personality and outlook.

Oh, and it is, of course, responsive.

A List Apart: Articles: Future-Ready Content

A great article from Sara Wachter-Boettcher on crafting future-friendly content. The content prioritisation described here mirrors what I’ve been doing in workshops.

Prometheus Fusion Perfection

Now this is what I call science hacking: building an open source fusion reactor.



James geeks out about visiting CERN. His enthusiasm is infectious.


The Lively Morgue

Photographs from the archive of the New York Times.

Thoughts on Responsive Navigation

Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.

Monday, February 27th, 2012

A Responsive Design Approach for Navigation, Part 1 | Filament Group, Inc., Boston, MA

A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.

Albatros - The bookmark following any journey

Well, this looks clever: a self-updating bookmark (that’s an actual bookmark for books, not browsers).


An acid test for mobile browsers. Point your device at and it will report on how much or little mobile shininess is available.

Responsive Summit: The One Tool | Mark Boulton

Mark talks about the tools web designers use and the tools web designers want. The upshot: use whatever you’re most comfortable with.

How I Learned to Stop Worrying and Love Responsive Images — Paul Robert Lloyd

Here’s a great braindump from Paul following the Responsive Summit, detailing multiple ways of potentially tackling the issue of responsive images.

Sunday, February 26th, 2012 · Blog · The Responsive Process

Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.

A better responsive image format - Stuff in my head

Here’s a new angle on tackling the responsive image problem: what if the file format itself could specify multiple image sizes?

» 24 February 2012, baked by Ben Ward @ The Pastry Box Project

A beautiful reminder from Ben of the scale-free nature of the web.

We must recover our sanity where 100 million users does not represent the goal criteria of every new service. We must recover the mindset where a service used by 10,000 users, or 1,000 users, or 100 users is admired, respected, and praised for its actual success. All of those could be sustainable, profitable ventures. If TechCrunch doesn’t care to write about you, all the better.

If you are fortunate enough to work on your own product, with your own idea, and build it, and ship it, and reach enough people willing to sustain you financially for that immense amount of work, you should be applauded. You have poured in inordinate effort, and succeeded in making something that improved lives.

Responsive Design: Why You’re Doing It Wrong | Design Shack

A rallying cry for a content-focused—rather than device-focused—approach to responsive design. Despite the awful title and occasionally adversarial tone, this article is making a very good point about being future friendly.

Webstock: Jeremy Keith | Flickr - Photo Sharing!

I love these sketchnotes from my presentation at Webstock.

Webstock: Jeremy Keith

Saturday, February 25th, 2012

Responsive Navigation Patterns | Brad Frost Web

Brad does a great job of rounding up various design patterns used for navigation in responsive sites.

Wednesday, February 22nd, 2012

What We Don’t Know // Speaker Deck

The slides from Chris’s presentation on the known unknowns of the web.

ishida >> blog » HTML5 adds new translate attribute

Richard gives the lowdown on the new translate attribute in HTML.

MATTER by Matter — Kickstarter

Bobbie’s new journalism project is up and running on Kickstarter. Get in there!

Tuesday, February 21st, 2012

Dress Responsively, LTD

The site’s a mockup but if you want it badly enough, these responsive-themed T-shirts could be real.

Responsive Summit • London 23rd Feb 2012

Typical! I leave the country and this excellent gathering gets organised while I’m away. I wish I could be there.

Let them know in advance if you have any responsive-related questions they should tackle.

IMG_8191 - 2012-02-15 at 02-39-26 | Flickr - Photo Sharing!

I can’t fave this picture enough. One moment of Webstock captured by Michael B. Johnson.

IMG_8191 - 2012-02-15 at 02-39-26

SXSW speakers: Promote your panel with free MOO MiniCards! | The Lanyrd Blog

Moo and Lanyrd sitting in a tree, helping promote my SXSW panel. Excellent!

Monday, February 20th, 2012

Responsive Images Community Group

There’s a W3C community group now for looking at the responsive images question.

Thursday, February 16th, 2012

Official Google Blog: Renewing old resolutions for the new year

Google are shutting down the Social Graph API. Twunts.

Sunday, February 12th, 2012

BibliOdyssey: Channelling Martian Maps

Beautiful 19th century maps of Mars.

Camping at Kiwifoo | Flickr - Photo Sharing!

The Kiwi Foo Space Program (a weather balloon with an Android device attached) captured some beautiful images.

Camping at Kiwifoo

Saturday, February 11th, 2012

The Perpetual, Invisible Window Into Your Gmail Inbox -

Andy sounds a cautionary note: the password anti-pattern may be dying, but OAuth permission-granting shouldn’t be blasé. This is why granular permissions are so important.

Monday, February 6th, 2012

Structure First. Content Always. | Mark Boulton

Some clarifying thoughts from Mark: “content first” doesn’t have to literally mean having the final content first …but it does mean knowing the structure of the content.


A great pattern library from Dan.

BLDGBLOG: Object Cancers

You think that Digital Rights Management is bad? What about Physible Rights Management?

Friday, February 3rd, 2012

Thursday, February 2nd, 2012

Redefined | Trent Walton

Man, I love Trent’s honesty! This had me nodding my head vigorously — yes, responsive design means fundamentally approaching the way we build for the web …that’s what makes it so exciting!

I suspect that some naysayers of responsive design, were they to do some soul-searching, would find themselves relating to Trent’s initial scepticism.

Image-y nation

There’s a great article by Wilto in the latest edition of A List Apart. It’s called Responsive Images: How they Almost Worked and What We Need.

What all I really like about the article is that it details the the thought process that went into trying working out responsive images for the Boston Globe. Don’t get me wrong: I like it when articles provide code, but I really like it when they provide an insight into how the code was created.

The Filament Group team working on the Boston Globe site were attempting to abide by the two rules of responsive images that I’ve outlined before:

  1. The small image should be default.
  2. Don’t load images twice (in other words, don’t load the small images and the larger images).

There are three reasons for this: performance, performance, performance. As Luke put it so succinctly:

Being a Web designer & not considering speed/performance is like being a print designer & not considering how your colors will print.

That said, I came across a situation recently where loading both images for desktop browsers could actually be a pretty good thing to do.

Wait, wait! Here me out…

Okay, so the way that many of the responsive image techniques work is by means of a cookie. The basic challenge of responsive images is for the client to communicate with the server (and let it know the viewport size) before the server starts sending images. Because cookies can be used both by the client and the server, they offer a way to do that:

  1. As the document begins to load, set a cookie on the client side with JavaScript recording the viewport width.
  2. On the server side, when an image is requested, check for the contents of that cookie and serve up the appropriate image for the viewport size.

There are some variations on this: you could initially route all image requests to send back a 1x1 pixel blank .gif and then, after the page has loaded, use JavaScript to load in the appropriate image for the viewport size.

That’s the theory anyway. As Mat outlined in his article, there’s a bit of a race condition with the cookie being set by the client and the images being sent from the server. New browsers are doing some clever pre-fetching of images. That means they fetch the small images first, violating the second rule of responsive images.

But, like I said, in some situations that might not be so bad…

Josh is working on a responsive project at Clearleft right now—and doing a superb job of it—where he’s deliberately cutting the server-side aspect of responsive images out of the picture. He’s still starting with the small (mobile) images by default and then, after the page has loaded, swaps them out with JavaScript if the viewport is wide enough.

Suppose the small image is 20K and the large image is 60K. That means that desktop browsers are now loading 80K of images (instead of 60). On the face of it, this sounds like really bad news for performance… but because that extra 60K is being downloaded after the page has downloaded, the perceived performance isn’t bad at all. In fact, the experience feels quite snappy. Here’s what happens:

The markup contains the small image as well as some kind of indication where the larger size resides (either in a query string or in a data- attribute):

<img class="photo" src="basestar.jpg" alt="a spiky seed" data-fullsrc="basestar-large.jpg">


That’s about 240 by 180 pixels. Now for the large-screen layout, we want those pictures to be more like 500 by 375 pixels:

@media screen and (min-width: 50em) {
    .photo {
        width: 500px;
        height: 375px;

That results in a “blown up” pixely image.


Once the page has loaded, that small image is swapped out for the larger image specified in the data- attribute.


Large-screen browsers have now downloaded 20K more than they actually needed but the perceived performance of the page was actually pretty snappy:

  1. Blown-up pixely images act as placeholders while the page is downloading.
  2. Once the page has loaded, the full-sized images snap into place.

Does that sound familiar? This is exactly what the lowsrc attribute did.

I’m probably showing my age by even acknowledging the existence of lowsrc. It was a proprietary attribute created by Netscape back in the days of universally scarce bandwidth:

<IMG SRC=basestar.jpg LOWSRC=low-basestar.jpg ALT="a spiky seed">

(See how I’m using unquoted attributes and uppercase tags and attributes for added nostalgic value?)

The lowsrc value would usually be a monochrome version of the image in the src attribute.

a spiky seed in black and white

And we only had 256 colours to play with. You tell that to the web developers today …they wouldn’t believe you.

Seriously though, it’s funny how problems from the early days of the web have a habit of resurfacing. I remember when Ajax was getting popular, all the problems associated with frames rose from the grave: bookmarking, breaking the back button, etc. Now that we’re in a time of small-screen devices on low-bandwidth networks, we’re rediscovering a lot of the same issues we had when we were developing for 640 pixel wide screens with 28K or 56K modems.

Ultimately, I think that what the great brainstorming around fixing the problems with the img element shows is a fundamental impedance mismatch between the fluid nature of the web and the fixed pixel-based nature of bitmap images. We’ve got ems for setting type and percentages for specifying the proportions of our grids, but when it comes to photographic images, all we’ve got is the pixel—a unit that makes less and less sense every day.

The CSS3 Test

A really handy test site from Lea that reports your browser’s recognition of CSS properties.

» Of Grids, Class Names, Responsiveness, and Lifecycles Bits Pushed Around

The thought process behind trying to abstract class names that are used for layout in responsive designs (and can therefore refer to different widths depending on the context). Here, the author settles on letters. In the past, I’ve approached the same kind of abstraction by using latinised names.

Wednesday, February 1st, 2012

Science Hack Day Chicago

What a fantastic location for a Science Hack Day: the Adler planetarium in Chicago! Get there if you can.

Publishing Paranormal Interactivity

I’ve published the transcript of a talk I gave at An Event Apart in 2010. It’s mostly about interaction design, with a couple of diversions into progressive enhancement and personality in products. It’s called Paranormal Interactivity.

I had a lot of fun with this talk. It’s interspersed with videos from The Hitchhiker’s Guide To The Galaxy, Alan Partridge, and Super Mario, with special guest appearances from the existentialist chalkboard and Poshy’s upper back torso.

If you don’t feel like reading it, you can always watch the video or listen to the audio.

Adactio: Articles—Paranormal Interactivity on Huffduffer

You could even look at the slides but, as I always say, they won’t make much sense without the context of the presentation.

GREY GOOSE® Vodka | The World’s Best Tasting Vodka

This beautiful site not only features the oh-so-trendy vertical parallax, but it’s responsive too. Impressive!

* { box-sizing: border-box } FTW « Paul Irish

Paul quite rightly sings the praises of box-sizing: border-box — this is something that Microsoft got right and the spec got wrong. I never thought of making it part of a universal reset though.

Science Hackday Dublin | Yay! Science

Dublin is hosting a Science Hack Day on the weekend of March 3rd-4th. Put your name down now.

dConstruct Audio Archive

Clearleft has been running dConstruct since 2005. You can still visit the site for each year:

  1. 2005
  2. 2006
  3. 2007
  4. 2008
  5. 2009
  6. 2010
  7. 2011

Right from the first event, we recorded and released a podcast of the talks—thanks to Drew’s l33t audio skillz—and all of those audio files are still online. That’s quite a collection of aural goodies. So we decided to put them all together in one place. I give you…

The dConstruct Audio Archive.

Michelle came up with the visual design—evolving it from last year’s dConstruct site—while I worked on the build. The small-screen and large-screen layouts were designed simultaneously and then I took a small-screen first approach to building it, progressively layering on the wider layouts and tweaking for the in-between states that didn’t have mock-ups. It was a lot of fun.

dConstruct Archive (320) dConstruct Archive (480) dConstruct Archive (600) dConstruct Archive (800) dConstruct Archive (1024) dConstruct Archive (1550)

There’s nothing very complicated going on in the back end. I’m just using a JSON file to store all the info about the talks and I’m piggybacking on the dConstruct Huffduffer account to offer up podcast feeds by year and by category. The categories are fairly arbitrary and unscientific but they give a good indication of the kind of topics that dConstruct speakers have covered over the years …and you can see the trend of each topic over time in a sparkline on each category page, generated by Google’s Chart API.

One tricky challenge was figuring out how to handle the images of speakers to make them responsive. Initially I was looking at Andy’s context-aware responsive images because the small-screen single-column layout often displayed wider images than on a larger screen’s multiple-column layout. In the end though, I decided that my time would be better spent optimising the images for every screen by getting the file sizes as low as I could so I spent a lot of time in Photoshop blurring backgrounds and messing with export settings. So while the images are all 450 pixels wide by 300 pixels tall, the average file size is around 20K. That’s not ideal for small-screen, low-bandwidth devices that are squishing the images down but I figured it was a good start.

There’s still lots more I’d like to tweak (I need to add links to slides, transcripts and videos where available) but rather than wait for everything to be perfect, I thought I might as well launch it now and continue to work on it.

So feel free to explore the archive, find some talks you like, subscribe to a podcast of your liking or huffduff anything that catches your ear.

And if listening to all the previous talks piques your interest, you’ll be happy to that dConstruct will be back this year …and it’s going to be splendid!