Responsive images have landed in Chrome and Opera. They are in development for Firefox and Webkit. They are under consideration for Internet Explorer.
This is an amazing accomplishment. To get here, the following happened including many firsts:
- The Responsive Images Community Group was formed. It now cited as a model for how W3C Community Groups can inform the standards process.
- There have been four major specifications (picture, srcset, src-n, and the final picture specification) along with many minor iterations along the way.
- An IndieGogo campaign to fund Yoav Weiss’s implementation of the feature in Blink. The first crowd-sourced funding of a browser feature ever.
- Hours of time put in by volunteers and browser makers to make sure these standards will work and implementing them in browsers.
After nearly four years and a ton work, we finally have responsive images.
Now the hard work begins.
Responsive images will now go from the limited number of people in the Responsive Images Community Group to the web at large.
Many people will struggle to learn the new tools and to ascertain when it makes sense to use each. Not to mention the navigating the thorny, unsolvable problems of responsive image breakpoints.
For the last few weeks, I’ve been working on ways to help people learn responsive images. The first output of that work will start tomorrow with a presentation called “Responsive Images Are Here. Now What?” at An Event Apart Atlanta. I’m repeating the talk at AEA Seattle and San Diego.
If you want a deeper dive, I’m giving a full day workshop at UX Mobile Immersion on When Responsive Web Design Meets the Real World which will cover images in detail.
The research I did to prepare for those talks has created a backlog of articles that I want to write. Watch this space. They are coming soon.
So responsive images are here, and they are going to be a big deal for the web in 2015. It’s time to prepare for them; to understand how to use them; and to start tackling the tough challenges of integrating them into our sites.
I can’t wait to see how people use these new browser features.
P.S. If you attend AEA or UXIM, you can use these discount codes to save money. ‘AEAGRIG’ will save you $100 on any AEA event. ‘UXIMSPK’ will save you $300 on the UXIM workshops.
Last year, I wrote 8 Guidelines and 1 Rule for Responsive Images based on some consulting work we had done for a client with over 800,000 images on their site.
In preparation for An Event Apart Austin, I decided to revisit the guidelines and see if they still applied in light of browsers implementing the picture specification.
In particular, I was curious how much caution we should take when implementing solutions for responsive images. Last year, I wrote:
The one and only rule for responsive images: Plan for the fact that whatever you implement will be deprecated
Is that rule dated with the browsers standardizing on the picture specification?
I asked for some feedback from the responsive images community group on the risk of the specification changing and how much we should be hedging out bets.
Simon Pieters, who works for Opera, wrote:
It is also normal that the first shipping implementations are not perfectly compliant with the spec. For instance they might have implemented a slightly out of date algorithm and missed that something was changed, or simply have bugs. Then it is fixed in a future version and that might break your code if you only tested in one implementation.
This is no different from any other feature that is shipped on the Web. To avoid issues, test in multiple implementations and validate.
Should we still be hedging our bets a little?
No, that’s not necessary.
Now, a couple of people on the list responded that they have a large set of images on the sites they manage and centralizing image handling and markup still made sense. So perhaps it isn’t a rule, but still an idea that you should consider based on the scope of the site and the number of images involved.
I’ll leave the final word on the matter to Marcos Cáceres who played a critical role on the picture specification and works for Firefox, reassured me with these words:
Once it gets into the wild and people start using it, it can’t change. Thems is the golden rule of the Web.
Spec is stable and the browsers are coming this month – go forth and <picture> all the things! Make the web beautiful again :)
As Marcos says, go forth and <picture> all the things!
P.S. If you’re interested in more on this topic, join us at AEA Austin or AEA Orlando. You can use discount code ‘AEAGRIG’ to get $100 off your registration. I hope to see you there!
Speaking at An Event Apart is intimidating. Last year, I was privileged to speak twice, and I was terrified each time.
While I thought I gave a good talk both times, I realized after my first talk that I had misjudged the audience. I feared I had whiffed on my only chance to speak and wouldn’t be invited back.
So you can imagine my surprise and delight when Eric and Jeffrey asked me back this year. I swore that this year I would nail it.
What I learned last year was that people come to AEA expecting not only to be wowed by fantastic speakers, but also to take home a tangible things that they can implement.
So I put together a presentation called Mobile First Responsive Design. We know that over 90% of responsive designs are built poorly. This talk teaches you how to build in a responsible manner.
I presented the talk for the first time at AEA Atlanta. It is always difficult to judge your own talks, but based on the feedback from attendees, I think it worked. At minimum, I know people went home with a long list of things that they could do immediately.
I’m giving this presentation two more times. Once next month at AEA San Diego and in October at AEA Orlando.
I’m really proud of the way the talk has come together. I’d love it if you could join me at one of the two AEAs that I’m going to be speaking at.
But even if you can’t make it to San Diego or Orlando, An Event Apart puts on one of the best conferences in our industry. You should attend. And if you do, use ‘AEAGRIG’ on checkout to receive $100 off the price.
That discount code applies for all of the 2014 events—even the ones I’m not speaking at.
I hope to see you in San Diego or Orlando!
Last year, the kind folks at UIE invited me to give a workshop entitled When Responsive Design Meets the Real World at their UX Immersion Mobile conference in Seattle.
The workshop was a blast. People seemed to enjoy it.
But despite that I was honored and surprised that the folks at UIE invited me back to UXIM 2014 to present an updated version of the workshop.
Not only that, but they created a neat animated video about the talk.
I wasn’t sure what to expect from the animation. I did an interview with Jared Spool for the UIE Podcast (available for your listening pleasure now), and at the end of the podcast, they asked me to talk for a couple of minutes about the workshop and they would “animate it”.
I think it turned out pretty well. I literally laughed out loud at the person hitting their head against the wall. Let’s just say that it wasn’t hard to see myself in a character with a round head and no hair.
UXIM looks great again this year. Lots of great speakers and in-depth workshops. If this sounds like something of interest to you, you can register for UXIM using the code “SPKUXIM” and save $200 off the full conference price.
I’d love to see you in Denver.
Oh, I am excited! Video from my presentation at Mobilism in Amsterdam has been posted. I’m already excited about Mobilism for next year!
In this presentation, “Cutting through the Crap: The Essence of Content on the Web”, I talk about some of my mental explorations of the meaning of core content on the web. The summary:
You’ve likely heard about content a lot lately—content is king, content should flow like water, “Content First!”. But what IS content in its basest form? Is it HTML? XML? JSON? Is it human-readable plaintext? And once we have our content, how do we transform it to look wonderful on mobile devices, televisions, regular old computers, refrigerators? Where does content end and platform-specific representation begin? The mobile revolution has shown us that our content management and web publishing technologies are entangled and flawed. The web will continue to be consumed by more and more clients, many of which haven’t even occurred to us yet. But by thinking deeply and re-examining the essence of our content, we can help to architect a flexible future for the web.
Photo courtesy of the very kind Jen Hanen
The video is available on Vimeo.