Re: HELP! Responsive Assets :)

[Paul Irish]

[+cc jquery-standards], let's bring this discussion to town!

Responsive images is indeed a tough one.. 

I can find one thread from www-style on the topic. http://lists.w3.org/Archives/Public/www-style/2011Aug/0680.html

.. it had a proposal for replaced content within the Generated Content Level 3 spec.

Dunno what else would assist, but I'm curious what other solutions you think would be best. :) 

On Wed, Nov 9, 2011 at 7:53 PM, Scott Jehl <sc...@scottjehl.com> wrote:

Paul,

...snip... 

For the Globe site, we had devised an approach to responsively serve images by setting a cookie for viewport size and negotiating those requests on the server. This worked well until popular browsers stepped up their image prefetch game and requests went out while our cookies were still in the oven. Since then, it seems folks are back to recommending UA detection as the only reliable approach - I don't need to say more about this to you :)

This leads me to introduce you (perhaps not for the first time) to my good friend Ethan, who has some pretty darn good ideas about building "Responsive" things :) Ethan and I (and others) have been hashing out a number of possible ways to approach this issue once and for all - in a way that'd be sustainable.

I'm hoping we can get a little thread going here about these ideas and how feasible they might be. (perhaps Ethan could chime in on some of the most promising ideas to get things rolling?)
 

Scott

[Anselm Hannemann]

Additional to Paul's linked thread the original mailings from this topic:

• http://www.w3.org/Search/Mail/Public/search?type-index=www-style&index-type=t&keywords=add+html-attribute+for+%22responsive+images%22&search=Search
  
• http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-August/subject.html#32977

[Mathew Marquis]

Jeremy Keith has one of the best write-ups I’ve seen on the subject wherein he very neatly sums up the current state of responsive assets, the challenges people have run into, and the underlying philosophy:

http://adactio.com/journal/4997/

Jason Grigsby also has some highly detailed posts on the backstory and some potential solutions:

http://www.cloudfour.com/responsive-imgs/

http://www.cloudfour.com/responsive-imgs-part-2/

http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/

The long-and-short of it is this: we can easily grab the screen size through JS, so we aim to conditionally swap the src (containing the mobile-sized image) for a “desktop-sized” version of the image—the path to which we would have in, say, a data attribute on the img. In the event of any failure—JS is unavailable, etc.—the smaller image in the src is served up as usual.

The trouble is the timing of this logic: if we apply it after the fact, the request for the mobile-sized image goes through prior to the request for the desktop-size. Granted if the “desktop” condition isn’t met it still only means a single request, but it’s a little clunky in desktop browsers where you’ll see the smaller image load before the larger one snaps into place. Ideally, we’re just looking for a method of manipulating the request for the original src before the request has gone round-trip.

[Mathew Marquis]

Additionally, some of Ethan’s notes on the subject:

UA-driven content negotiation works right now, but over time we still see the need for something more device-agnostic.

A short term patch we (and by “we,” I mean “Scott Jehl” [1]) kicked around would be some method of accessing the HTML src before the DOM’s available, perhaps via an optional [preparse] attribute on the relevant script tag. The benefit here is that this could work with existing methods (e.g., [2]), and could potentially be adapted to work with other media.

Ideally, there’d be some structure in HTML that allowed us to make these kind of gating decisions, but that’d take a spec and time and oh crap did anyone else just break out in hives?

Anyway, would love to hear your thoughts.

[1] https://twitter.com/scottjehl/status/119836986101075968

[2] https://github.com/filamentgroup/Responsive-Images

[Jacob Swartwood]

I would also love to start some outside-the-box thought on this
subject too. Obviously we should look at what is currently possible/
plausible, but I think it may benefit the community to start to
brainstorm on possibilities outside the realm of our current
limitations. For instance, I posted a comment on cloudfour
(http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/
#comment-37399) about the possibility that it isn't just our html/js/
css that are lacking, but that the implementation of image files
themselves may be better adjusted to embody responsive assets.

By no means would I like to derail this thread, so please don't get
too hung up on proving this specific idea wrong or right. It just
seems like with many solutions, we are trying to solve two responsive
issues simultaneously (instead of independently).
The responsive issues being:
1) scaling assets
2) layout/design changes (which may include different assets)


On Nov 11, 10:55 am, Mathew Marquis <mathewmarq...@gmail.com> wrote:
> *Additionally, some of Ethan’s notes on the subject:*

[Anselm Hannemann]

Yes, we need two ways of responsiveness for media-assets.

First one which is the best one but needs too much time to use it now(!) is a media-format (like Google's WebP) which can offer different resolutions on demand. This is already possible for several video-formats as well as in some image-formats like jpeg2k etc. but WebP has the only chance to do this now.

But for meantime we need a solution to offer different sizes in html. This leads to my mailing-list and the other links where some solutions had been posted. But yet there's no really "good" solution.

So I ask: How can we propose these two problems to WHATWG / W3C / Google ("WebP")? 

[Anselm Hannemann]

There's now a summary of two methods proposed for responsive images: http://www.cloudfour.com/preferred-solutions-for-responsive-images/

I think it's time to act.

[Paul Irish]

There's been a lot more conversation on this topic lately.

Proposals are being refined in this etherpad here:

https://etherpad.mozilla.org/responsive-assets

Conversation will be moving to a w3c mailing list v soon now.

[Anselm Hannemann]

Any news here? I mean this topic exists over 2 months now and nothing happended. Makes me a bit sad… because it's such an important topic.

[Anselm Hannemann]

I wrote an article about it here: http://novolo.de/blog/2012/01/19/what-happened-to-responsive-assets/

I'll prepare a proposal to W3C mailing list next week I think.