[whatwg] Features for responsive Web design

[Tab Atkins Jr.]

On Tue, May 15, 2012 at 4:51 PM, Jason Grigsby <jason at cloudfour.com> wrote:
> 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.

That's actually fine.  The max-width and max-height information
conveyed in @srcset is *not* used in a "do what you think is best"
manner.  It's a very explicit filter.

You only get the "do what you think is best" behavior when deciding
between resolutions, and those only have an effect on layout if you
mess up your ratios *and* do auto-sizing (it only has an effect on the
intrinsic size, which auto-sizing uses).  As long as you keep your
ratios lined up (like 1000 at 1, 2000 at 2, etc.) all of the images will
auto-size in the same way.

So, since you can predict which size of image will get chosen, you can
pair that with ordinary Media Queries to predictably adjust the rest
of your layout.

~TJ