Cloud Four Blog

Technical notes, War stories and anecdotes

Updating responsive image guidelines in preparation for AEA Austin

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!

An Event Apart 2014

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!

Responsive Design Workshop in Denver

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.

Video: Essence of Content on the Web (Mobilism 2012)

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.

Lyza's "Cutting through the Crap" presentation at Mobilism 2012
Photo courtesy of the very kind Jen Hanen

The video is available on Vimeo.

WebVisions Portland Coming Up Soon

Over the last few months, I’ve been proud to represent Portland as the WebVisions conference branched out into other cities. It’s been awesome to see “the little conference that could” find new communities eager to welcome it.

Despite that fact, I’ll freely admit that I have a special affection for the Portland version of WebVisions. It was the first conference I attend and the first one I spoke at. There are talks that I saw at WebVisions that still influence my work to this day.

This is the 12th year of the conference. The organizers bring in fantastic speakers and do so at a price that is much less expensive than what it costs to attend most other conferences. At my previous job, I would often take our entire team to WebVisions.

This year is no different. The conference starts on May 16th. Lyza and I will be giving a workshop showing desktop web developers how to convert their skills to mobile. I’m also giving a talk called Casting Off Our Desktop Shackles. We’d love to see you at both!

If you’re in the Portland area, I encourage you to attend WebVisions. I love the community around the event. And I like playing host to all of the smart people who travel to our city to attend or speak at WebVisions. If you do attend, please say hello.