Cloud Four Blog

Technical notes, War stories and anecdotes

What Responsive IMG Technique Should We Teach in Our Book?

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. :-)

8 Comments on “What Responsive IMG Technique Should We Teach in Our Book?”

  1. Tyler Sticka says:

    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.

  2. Brad Frost says:

    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!

  3. Jason Haag says:

    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!

  4. Jason Grigsby says:

    @brad I suspect you had a tag in your comment “(thus ruling out and other un-semantic tags)” that got stripped out. What did you write?

  5. 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/.

  6. I think I’d lean towards Sencha.io Src (as it’s easiest to understand for beginners) and nod to a few others (Scott Jehl’s script and Matt Wilcox’s are my current preference).

  7. 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.

  8. Matt Wilcox says:

    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.