Skip to main content

What Responsive IMG Technique Should We Teach in Our Book?

By Jason Grigsby

Published on October 7th, 2011

Topics

All this time you thought I was writing novels about responsive IMGs for altruistic purposes, but I had an ulterior motive. We need help with our book.

One chapter of the book is called Mobile First Responsive Web Design. We intend to teach people how to start with a mobile version of their site and progressively enhance it to a desktop view. Part of doing that is handling the IMG tag.

So here’s my question for you. If you had to select one of the responsive IMGs techniques, which one would you choose?

Some things to keep in mind:

  • The Head First book series is designed for learners. It is used in many classrooms. Therefore, we can’t get into the detail I went into in my posts. We need something representative that teaches the core issues and provides a decent, if flawed, solution.
  • Because book is for learners, we want to keep things simple if possible.
  • We need to chose one technique to teach them in detail. We can talk about other techniques in passing, but when we give the learner exercises to do, they will be based on one approach.

For your reference:

Thanks for your help. I’m anxious to see what you think. Please show your work. 🙂

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.

Comments

Tyler Sticka said:

If I were tasked with teaching my students a “beginner’s” responsive image technique, I would probably opt for one of the noscript solutions (rows 7 and 8), especially if you can sum up the “Testing Responsive Images” technique as succinctly as its originator did (six lines of code samples and an explanatory paragraph).

Just my two cents.

Brad Frost said:

I won’t get into any one specific method (simply because I haven’t had time to experiment with them), but I would advocate for ones that use proper markup (thus ruling out and other un-semantic tags). Whether this means promoting the cookie solution or whatever is beyond me, but I would make sure to promote semantic markup.

Also worth noting how context is determined by much more than just screen size. A 320px desktop browser size isn’t a common use case, so server-side solutions are definitely something to be considered.

I’m sure no matter what you choose it will be great!

Jason Haag said:

I would give them a few options based on some other relevant design decisions. The most important factor impacting the approach I think is connectivity. Will they want to provide offline / disconnected delivery of responsive images? If so, then they should definitely look at a client-side approach. Your book is geared toward mobile websites, right? And not necessarily “apps” using the mobile web. And if you are truly trying to teach a “mobile first” strategy rather than “convert the existing desktop website” then I feel even stronger about it. I guess it depends upon the type of website too though. This is definitely a tough one, but if you are trying to go with a beginner’s technique I think the CSS approach is best. I have used responsive.js from the Fillament Group/ Scott Jehl and think it might be ideal for a beginner looking to focus on how to do with with CSS and not have to worry about the programming part since it has already been handled. After looking at this extensive list of options I’m already exited to check out your book!

Steve Souders said:

It would be good to summarize the requirements or goals before picking a solution. Since I focus on performance some key (and distinguishing) requirements for me are:

1. no additional HTTP requests are made (some techniques make multiple HTTP requests for an image, or download a stub image that is replaced)

2. the images download as early as possible (some techniques require JS to execute on the client before the image request can be sent, thus making the images load later)

With these in mind I like tinysrc, aka, Sencha.io Src – http://www.sencha.com/.

James Williamson said:

Ditto those that say they haven’t had time to experiment with all of them, neither have I.

…but if the book is for beginners a) keep it simple, b) anything that doesn’t work with first load or makes extra download requests should be right out.

I’d also shy away from server-side solutions as well, until the users are a bit more experienced. Setting a Cookie or modifying the .htaccess isn’t that big of a deal, so I wouldn’t consider them deal-breakers.

All in all, I think you’d be servicing them more by giving them an overall sense of how complex a problem this is, and that one size is unlikely to fit for all.

Matt Wilcox said:

I think it’s a good idea to offer a couple of techniques but clearly explain the pro’s and con’s of each. Sencha.io is easy to explain and understand but has the caveat of being a service instead of self-hosted. That can be a deal breaker in the real world. Adaptive Images is extremely simple from a mark-up and maintenance perspective (and I dare say the most future proof) but requires PHP.

There is no one bullet proof method. Better to explain a few methods and when they’re appropriate than to promote one solution that won’t work well for all use cases.