Tags: im

Designing The Future, John V Willshire, dConstruct 2015 on Vimeo

Just like Nick, John Willshire has put his slides together with the audio from his gobsmackingly good dConstruct presentation on metadesign.

The Future Mundane on Vimeo

Nick Foster has put the audio of his fantastic dConstruct talk together with his slides.

It’s a terrific, thought-provoking presentation, superbly delivered …and it even has some relevance to progressive enhancement! (you’ll know what I mean if you watch/listen to the whole thing)

The anatomy of responsive images - JakeArchibald.com

This is the best moment to write a blog post:

I just had my responsive images epiphany and I’m writing it all down before I forget everything.

Writing something down (and sharing it) while you’re still figuring it out is, in my opinion, more valuable than waiting until you’ve understood something completely—you’ll never quite regain that perspective on what it’s like to have beginner’s mind.

The West Pier, Brighton England on Vimeo

For almost a century and a half the West Pier has been Britain’s most iconic pier. Renowned for its wonderful architectural style, it has been visited and enjoyed by millions. Even today with its sculptural remains casting an eerie beauty over the seafront, the West Pier is still the most photographed building in Brighton.

Climate Futures on Matter

A collection of cli-fi and cli-fact.

Doing Science On The Web – Infrequently Noted

Alex recounts the sordid history of vendor prefixes and looks to new ways of allowing browsers to ship experimental features without causing long-term harm.

Jeremy Keith – Enhance! – Beyond Tellerrand Düsseldorf 2015 on Vimeo

The video of my talk at this year’s Beyond Tellerrand. I was pleased with how this went, except for the bit 16 minutes in when I suddenly lost the ability to speak.

Dave Shea – – beyond tellerrand DÜSSELDORF 2015 on Vimeo

A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.

So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.

The web is awesome - blog.lmorchard.com

The death of the web has been greatly exaggerated.

There’s nothing else like it. It’s constantly improving. It’s up to you what you do with it.


This is so nifty! Mikey has made a site where you can order his interactive artwork.

Interactive? That’s right! Each framed picture comes with a pen so you can doodle over the picture (and wipe it clean again).

Check out The Fett and The Falcon!

Richard on Vimeo

The video of Richard’s great talk on responsive typography at the Up Front conference.

PDF: Designing For Deep Time: How Art History Is Used To Mark Nuclear Waste

Kelli Anderson’s thesis on the Human Interference Task Force project set up to mark nuclear waste sites for future generations (a project I’ve referenced in some of my talks).

Spatial Interfaces — Elepath Exports — Medium

A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.

Stephen Hay | The Back(side) of the Class | CSS Day on Vimeo

A great presentation from Stephen. He takes a thoughtful look at our processes and tools.

Deep Time : A History of the Earth

This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.


This is just wonderful: Powers Of Ten recreated using images from the internet. Also available as a flip book!

Read more about it or watch the video.

When Responsive Images Get Ugly by Taylor Hunt on CodePen

This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).

A Practical Guide to SVGs on the web

Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.

Paul Robert Lloyd | Responsive Principles | CSS Day on Vimeo

I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.

Clifford Levy on Twitter

I’d like to do this for all Clearleft web projects.

How important is mobile for @nytimes? We’re blocking access to our home page on desktop in our building.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

Google’s authentication-less, on-the-fly image resizing service

Did you know Google runs a free an open image resizing service?

I did not! This could be quite useful. Seeing as it’s an https endpoint, it could be especially useful on https sites that pull images from http domains (and avoid those mixed-content warnings).

Project Kronos on Vimeo

A beautiful bit of design fiction.

Keeping it simple: coding a carousel by Christian Heilmann

I like this nice straightforward approach. Instead of jumping into the complexities of the final interactive component, Chris starts with the basics and layers on the complexity one step at a time, thereby creating a more robust solution.

If I had one small change to suggest, maybe aria-label might work better than offscreen text for the controls …as documented by Heydon.

SmashingConf Oxford 2015: Richard Rutter on Don’t Give Them What They Want, Give Them What They Need

A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.

Ari Weinkle — Feelers

By far the creepiest type experiment I have ever seen.

Natasha Lampard, Friday, 27 March 2015

A long-zoom look at life, work, and success.

I’m not usually a fan of portmanteau neologisms, but I really like Tash’s coining of the word longtrepreneur.

Tweets out of Context

Primer, but Twitter.

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

In Pieces - 30 Endangered Species, 30 Pieces.

Beautiful use of CSS transitions and transforms.

Also: CSS is officially the new Flash—”skip intro” is back.

Are You Living in a Simulation?

Always worth bearing in mind when some perspective is needed.

If it is possible that our future species will go on to create simulations of our civilisation forerunners (us), then it is far more likely that we are currently in such a simulation than not.

Killing Time at Lightspeed

Interstellar travel time dilation and status updates: a clever narrative combo.

NASA GeneLab

A beautiful website for ISS-based biology experiments.

Better SVG Fallback and Art Direction With The <picture> Element

Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).

Progressive Enhancement and Data Visualizations | CSS-Tricks

A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.

“Nope, You’re Dead Now” — Matter

Ant told us this harrowing story in the office two weeks ago. I honestly can’t imagine what it would be like to be in this situation.

The Long Web by Jeremy Keith – An Event Apart Video on Vimeo

This is a talk I gave at An Event Apart about eighteen months ago, all about irish music, the web, long-term thinking, and yes, you guessed it—progressive enhancement.

Flying Toasters | After Dark in CSS

For people of a certain age, this will bring back memories of a classic screensaver.

If you had told me back then that the screensaver could one day be recreated in CSS, I’m not sure I would’ve believed it.

ping.gg | the world’s most simple monitoring service

A cheap’n’cheerful way of monitoring uptime for domains.

Apps Everywhere, but No Unifying Link - NYTimes.com

But as people spend more time on their mobile devices and in their apps, their Internet has taken a step backward, becoming more isolated, more disorganized and ultimately harder to use — more like the web before search engines.

Long Now Years: Five-digit Dates and 10K-compliance at Home — Blog of the Long Now

How to get Yosemite to display five-digit years. It’s a bit of a hack, but we’ve got another 7,985 years to figure out a better solution.

The Humane Representation of Thought on Vimeo

Yet another brilliant far-ranging talk from Bret Victor.

I’ve tried to get him to come and speak at dConstruct for the past few years, but alas, with no success.

28 Months on Mars - NYTimes.com

Curiosity’s journey so far, nicely visualised.

ST4I - Stuff That Talks To The Internet - workshop on Vimeo

Seb will be running this workshop again at the start of February—details here. I can’t recommend it highly enough—it’s so, so good!

What colour is it?

This is quite beautiful in its simplicity: the hexadecimal colour value of the current time.

Cinema Space Tribute on Vimeo

Scenes of space from sci-fi films.

An immigration lawyer reviews Paddington

Sounds like a cute idea, right?

In fact it’s the best thing you’re ever likely to read on Peruvian ursine immigration.

The Secret Life of Passwords - NYTimes.com

A fascinating look at how the humble password gets imbued with incredible levels of meaning.

It reminds me of something I heard Ze Frank say last year: “People fill up the cracks with intimacy.”

WebP via picture

This strikes me as an eminently sensible idea by Emil: using the picture element to begin providing WebP alternatives to JPG.

Of course, picture-supporting browsers will have to adjust their decision-making algorithm to support this pattern.

Oh, Jeremy, you silly billy. It turns out that this works right out of the box. Nice!

Wanderers - a short film by Erik Wernquist on Vimeo

A vision of humanity’s exploration of our solar system.

Embracing HTTPS - NYTimes.com

A friendly challenge from The Grey Lady for news sites to enable TLS.

Make a commitment to have your site fully on HTTPS by the end of 2015 and pledge your support with the hashtag #https2015.

Web Standards for the Future on Vimeo

A cute videolette on web standards.

Responsive Images in Practice · An A List Apart Article

A great primer on using srcset and picture. I think I’ll be referring back to this a lot.

How URL started as UDI — a brief conversation with @timberners_lee @W3C #TPAC - Tantek

Tantek shares a fascinating history lesson from Tim Berners-Lee on how the IETF had him change his original nomenclature of UDI—Universal Document Identifier—to what we now use today: URL—Uniform Resource Locator.

Official Google Webmaster Central Blog: Updating our technical Webmaster Guidelines

Google has updated its advice to people making websites, who might want to have those sites indexed by Google. There are two simple bits of advice: optimise for performance, and use progressive enhancement.

Just like modern browsers, our rendering engine might not support all of the technologies a page uses. Make sure your web design adheres to the principles of progressive enhancement as this helps our systems (and a wider range of browsers) see usable content and basic functionality when certain web design features are not yet supported.

Patty Toland — Design Consistency For The Responsive Web (Smashing Conference Freiburg 2014) on Vimeo

Patty’s excellent talk on responsive design and progressive enhancement. Stick around for question-and-answer session at the end, wherein I attempt to play hardball, but actually can’t conceal my admiration and the fact that I agree with every single word she said.

Keep ’em Separated — ericportis.com

I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.

This is a concern that Matt Wilcox has raised:

Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.

I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.

Responsive Images: If you’re just changing resolutions, use srcset. | CSS-Tricks

Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.

It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.

» Don’t use <picture> (most of the time) Cloud Four Blog

Jason points out that the picture element might not be needed for most responsive image use cases; the srcset and sizes attributes will probably be enough—that’s what I’m doing for the photos on my site.

Laser Light Synths unedited footage on Vimeo

You can catch a glimpse of my Daft Punk impression in this video of Seb’s frickin’ lasers.

44 Medieval Beasts That Cannot Even Handle It Right Now

Look, I would never usually link to a “listicle” on Buzzfeed, but this is all kinds of cumulative mirth.

Jeffrey Zeldman: 20 years of Web Design and Community on Vimeo

A really nice little documentary about my friend Jeffrey.

A Single Div

Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.

Heydon Pickering | Effortless Style | CSS Day on Vimeo

Remember when I was talking about refactoring the markup for Code for America? Well, it turns out that Heydon Pickering is way ahead of me.

He talks about the viewpoint of a writer (named Victoria) who wants to be able to write in Markdown, or HTML, or a textarea, without having to add classes to everything. That’s going to mean more complex CSS, but it turns out that you can do a lot of complex things in CSS without using class selectors.

There are slides.

Ind.ie Summit - Video 8 - Jeremy Keith on Vimeo

Here’s the very brief talk I gave about Indie Web Camp at Aral’s Indie Tech Summit here in Brighton a little while back (I was in the slightly-demeaningly-titled “stop gaps” section).

If you like what you hear, come along to the next Indie Web Camp—also in Brighton—in just over three weeks.


I can relate to every single word that Bastian has written here.

The longer I look at boilerplates, build tools, frameworks and ways to make my life as a developer easier, the more I long for the basics.

Panorama Fail

The image-stitching algorithm is trying its best.

The Pattern Library

Literally a library of patterns: y’know, for tiling background images. Old school!

Improving Reality 2014 — Visibility Is A Trap

Lighthouse are putting on their Improving Reality conference again this year. It’s the day before dConstruct. Come to both!

Urban Giants on Vimeo

A look at the architectural history of the network hubs of New York: 32 Avenue of the Americas and 60 Hudson Street. Directed by Davina Pardo and written by her husband Andrew Blum, author of Tubes: A Journey to the Centre of the Internet.

These buildings were always used as network hubs. It’s just that the old networks were used to house the infrastructure of telephone networks (these were the long line buildings).

In a way, the big server hotel of New York—111 Eight Avenue—was also always used to route packets …it’s just that the packets used to be physical.


A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/

The Man Who Turned Paper Into Pixels on Vimeo

A short film about Claude Shannon and Information Theory — not exactly as in-depth as James Gleick’s The Information, but it does a nice job of encapsulating the fundamental idea.

An Event Apart and The Picture Element (a Monkey Do blog post)

A look at how the website for An Event Apart is using the picture and Picturefill …featuring Jessica as the cover girl.

It’s OK not to use tools by Jonas Downey of Basecamp

Today, a basic HTML/CSS site seems almost passé. But why? Is it because our new tools are so significantly better, or because we’ve gone overboard complicating simple things?

He’s right, y’know.

Single Element CSS Spinners

A lovely little selection of loading indicators powered by CSS animations and transitions.

Where Time Comes From on Vimeo

A profile of Demetrios Matsakis, keeper of time at U.S. Naval Observatory, America’s equivalent to Greenwich in its importance for timekeeping in the modern world.

Designing in the Borderlands by Frank Chimero

This is a wonderful piece of writing and thinking from Frank. A wonderful piece of design, then.

A personal view on generalists and trans-media design

Dr. Easy on Vimeo

I finally got around to reading Red Men by Matthew De Abaitua recently. It’s like Nick Harkaway crossed with Jeff Noon.

Here’s hoping that this short film will be developed into a full-length feature.

Council Toolkit

A reusable set of responsive patterns and templates for UK councils.

Meet the Geniuses on a Quixotic Quest to Archive the Entire Internet | TIME.com

A short video featuring Jason Scott and Brewster Kahle. The accompanying text has a shout-out to the line-mode browser hack event at CERN.

[this is aaronland] because ephemera are just memories that didn’t try hard enough

I like the way Aaron thinks. I also like the way he makes.


The alphabet illustrated with CSS.


Nice! A Yeoman generator for scaffolding your own pattern primer.

(Those are just words, aren’t they? Y’know, as opposed to a sentence that would actually make sense to most right-thinking people.)

Orbit Ever After - Trailer on Vimeo

This fun-looking short film—funded by Brighton’s Lighthouse Arts—is screening at the Duke Of York’s Cinema on Saturday, March 1st followed by a panel discussion with the director and science-comedienne Helen Keen.

A List Apart Pattern Library

Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!

kimono : Turn websites into structured APIs from your browser in seconds

This tool for building ScrAPIs is an interesting development—the current trend for not providing a simple API (or even a simple RSS feed) is being interpreted as damage and routed around.

Fast Enough - TimKadlec.com

Some sensible thinking from Tim on measuring performance gains.

Spimes: A Happy Birthday Story « optional.is/required

Expanding on an exercise from last year’s Hackfarm, Brian and Mike have written a deliciously dystopian near-future short story.

Time - YouTube

The video of my closing talk at this year’s Full Frontal conference, right here in Brighton.

I had a lot of fun with this, although I was surprisingly nervous before I started: I think it was because I didn’t want to let Remy down.

OriDomi - origami for the web

A fun little JavaScript library for folding the DOM like paper. The annotated source is really nicely documented.

The (other) Web we lost

John shares his concerns about the increasing complexity involved in developing for the web.

An Open Letter - Handheld 2013

This was my favourite moment from the Handheld conference in Cardiff.


This is handy: a version of my pattern primer that can be run with Grunt.

Jeremy Keith – The Power Of Simplicity – border:none

This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.

Warning: it does get quite ranty towards the end.

Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.

Pattern Library | MailChimp

The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.

Percussive Maintenance on Vimeo

Have you tried turning it off and on again?