[whatwg] Features for responsive Web design

[Jason Grigsby]

On May 15, 2012, at 7:58 AM, Tab Atkins Jr. wrote:

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

Thanks for responding Tab. I’ve read your comments five or six times now and am not certain I understand it fully. Sorry if I’m being dense here. :-)

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

Are you saying that all of the image source listed in srcset would have the same aspect ratio? In the example Hixie provided, face-icon.png is a different ratio.

Another way to read this could be that you’re fine so long as your sources with different densities (e.g., 1x, 2x, etc) always have the same ratio. If so, I’m unclear on how that solves the problem when you have images that need different cropping like the Nokia example which is vertical in one case and horizontal in another.

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

I’ve honestly been trying to figure out how such a pairing would work since we srcset was proposed and just don’t get it. The two seem very different because the media query only checks the viewport size and then takes specific action whereas srcset compares viewport to image size and grabs the largest image that fits. You end up tying image width to breakpoint width to make it work which means your image may be larger than it needs to be to fit the design.

Again, I find it very clear how srcset would work for image resolution/density use cases, but get utterly confused about how it would work in the use case above. If everyone gets it, can someone send me a note outside the list to explain it? I don’t want to bog down the list by my lack of understanding if it clear to everyone else.

-Jason