Teaser text: “Now we’ve got the tools. How do we use them?”
I'm going to open with a quote from Jason Grigsby, from his recent appearance on the UIE Brain Sparks podcast:
I think even though responsive images is something that we’ve been talking about for quite some time, that really 2015 is going to be the year that web developers as a whole now are going to be, “Now we’ve got the tools. How do we use them?”
The RICG researched use cases, labeled them “responsive images,” built consensus around a solution, spec’d that solution, and implemented it in browsers. Now comes the hard part: how do we, both as individual developers working on individual projects, and as evangelists looking to respimg-ify the web as a whole, get responsive images into webpages?
Ethan Marcotte’s @RWD Twitter account asked for examples of respimg in action and a few of his 112K followers obliged. The replies contain a wealth of real-world examples.
A bit of “view source” shows a boatload of picturefill, a smattering of picture, mostly x descriptors, and nary a w descriptor in sight. The numbers indicate that this is a representative sample; it seems that the Hi-DPI and art direction use cases are easier for folks to wrap their minds around than resolution-switching. Which brings us to:
The aforementioned Jason Grigsby is giving a respimg talk at An Event Apart in Atlanta next week, and posted a flowchart that he was developing for the talk to the RICG mailing list, asking for feedback. This chart was a bit of a revelation for me. So many boxes! A spaghetti of arrows! And yet as I followed each branch of the decision tree, I realized that they were all necessary.
The new markup covers a bunch of separate, yet related, use cases. I agree with Jason that presenting every use case all at once, up front, is not the best way to teach respimg. Better to start with a single use case and build out from there. Perhaps it’s entirely natural that, at this early stage, w (and sizes) adoption is lagging behind the older, more established bits of syntax.
So what should the largest CMS in the world do about the new bits?
After the WordPress respimg plugin shipped last week, conversations surrounding how to move it forward largely centered around the sizes attribute. Those conversations are fascinating.
The plugin, as shipped, leaves sizes off of img elements entirely, letting the browser pick amongst the provided (and w-descripted) srcset sources using the default sizes value of 100vw. But! The spec recently changed to require a sizes attribute whenever w descriptors are present. So the plugin maintainers are trying to figure out how, if, and who to expose sizes to. Should site maintainers have a say in this? Or should it be left to theme authors? Should it be done via a straight-up text input field, or can this functionality be abstracted in some useful way?
These are the sorts of questions that CMSes are going to have to answer over the coming months.
While we're discussing the WordPress plugin –
-
If you’re using it, we’d love your feedback!
-
Here’s an article about using the plugin in Japanese.
The results from last week’s poll are in:
- 43% of you want monthly newsletters
- 43% of you want fortnightly newsletters (a.k.a. the status quo)
- 14% of you want weekly newsletters
Given that this leans slightly towards MOAR NEWSLETTERS, we’ll change nothing, and continue to send one of these things to you every couple of weeks.
-
Here’s a smashing video of Yoav’s respimg talk in Whistler (oh and he’s giving a whole workshop at SmashingConf Oxford).
-
Printing responsive images? Printing responsive images!
-
A couple of kind words for the group from Robin Berjon
See you in a couple of weeks!
—eric