[whatwg] Features for responsive Web design

[Jason Grigsby]

On May 15, 2012, at 12:28 AM, Ian Hickson wrote:

>> * Example 2: On the Nokia Browser site where it describes the Meego 
>> browser, the Nokia Lumia is show horizontally on wide screens. As the 
>> screen narrows, the Nokia Lumia is then shown vertically and cropped. 
>> Bryan and Stephanie Rieger, the designers of the site, have talked about 
>> how on a wide screen, showing the full phone horizontally showed the 
>> browser best, but on small screens, changing the img to vertical made 
>> more sense because it allowed the reader to still make out the features 
>> of the browser in the image.
> 
>   <img alt="The Nokia Browser for MeeGo can display the BBC site well."
>        src="landscape.png"
>        srcset="vertical-cropped.png 500w">

I don’t think srcset adequately addresses this use case. One thing to notice about the Nokia site is that the placement of text around the image is also changing as the image changes. Decisions are being made about whether to float text to the right or have it inline below the image.

This is consistent with the idea of content first or content out responsive design. Breakpoints aren’t determined by device widths, but instead by where the layout--which in this case means the image and text--start looking awkward.[1]

The challenge for srcset in this use case is that if the UA selects the image automatically, the author will not be able to judge when the layout looks awkward because there will be no way to anticipate which image the UA will select.

Selection of what image is appropriate for a given layout at a specific breakpoint is not possible with srcset. This is possible for background images in CSS which makes srcset feel like a step backwards in this regard.

Bear in mind, I’m not talking about selections of images based on pixel density, resolution, bandwidth, etc., which I will readily concede only the UA can make an intelligent decision abut. But instead selection of images based on decisions about what looks best at each breakpoint in a design which only the author can decide.

-Jason

[1] http://adactio.com/journal/5425/