Dan Catt explains the very clever HTML image tech behind Diesel’s “Days To Live”

Dan Catt explains a neat solution to optimise HTML and images to provide a fast-loading responsive immersive glitchy video experience

Dan Catt’s Storythings blog postOne of the agencies I sometimes work for — Storythings — recently published an article by my ex-Guardian colleague Dan Catt about a project they’ve worked on for Diesel: “Notes on making the Diesel Days to Live project.

It’s a fascinating read if you think responsive web design is only about detecting a viewport and swapping some columns around with CSS. In it Dan explains how they tackled the problem of delivering a high-quality interactive video experience, whilst coping with the fact that the user might be on low bandwidth. A lot of thought went into delivering a product that included a “smart filmstrip” where images could be compressed on a frame-by-frame basis, and the use of keyframes could reduce the amount of images that needed to be delivered to the client.

You can see the finished results at Diesel Days To Live.

Diesel Days to Live project

Diesel Days to Live project

Dan’s own blog is worth following. He recently wrote an excellent essay about “The problem with if you’re not paying you’re the product”, and can often be found showing off things like his own take on Joy Divisualization. Dan will also be talking at This is LDNIA #2 in April — details here.

Get blog posts like this via my email. Sign up here.