[whatwg] Features for responsive Web design

[Kornel Lesiński]

On Fri, 18 May 2012 23:11:45 +0100, Matthew Wilcox  
<mail at matthewwilcox.com> wrote:

>> <picture> in its current form is unable to support bandwidth-based
>> negotiation well
>
> By all accounts no solution proposed can do this. This is not a
> <picture> only problem.

srcset allows UA to pick any image density regardless of actual screen  
density, so e.g. Safari on iPhone 4 on GPRS/EDGE connection could download  
1x images, instead of 2x.

UAs are also free to download 1x image first, and then 2x image after  
onload, etc. Declarative nature of descriptors, as opposed to imperative  
MQs, allows UAs to innovate in this area and come up with new uses that  
authors didn't predict/express in MQ.

The syntax allows addition of "KB" descriptor later, which — assuming UAs  
will figure out how to measure actual bandwidth well enough — will allow  
even more sophisticated selection based on file size (rather than only  
1x/2x scale factors which are only a proxy for the file size).

>> (and that's not simply a matter of adding bandwidth media
>> query) and has no mechanism to specify scaling factor for intrinsic  
>> sizes of images.
>
> Not actually sure what "intrinsic sizes of images" means.

A default size of the image when you don't specify any size in HTML/CSS.

To take advantage of 200dpi displays you need to tell UA to render a X px  
image at X/2 CSS px. Explicit width/height breaks adaptive mechanism.

> I see no difference between the end result of either syntax. Both
> approaches fail utterly in abstracting the query from the mark-up,
> which means both approaches are suited only to individual images.

True. An URI template can be added later to either solution.

The current URI template proposal is limited. I've pointed out few cases  
for which a single global set of breakpoints is not sufficient. I'd be  
nice if you tried to extend the proposal to support those cases as well  
(e.g. {case} → {case:category} and define breakpoints per category such as  
'sidebar', 'gravatar', etc.)

And <meta breakpoint> has same limitations for DPI adaptation as <source  
media>.

>> There are two categories of use-cases ("art-directed" and
>> "dpi/optimization") and <picture> is suited for only one of them, so  
>> please don't frame the decision as "discarding" of a perfectly good  
>> solution, as it wasn't.
>
> Picture dealt with both of these by simple use of the pixel density
> media query - i.e, in exactly the same way CSS already does it. I do
> not understand your argument.

<picture>
<source src="200px" media="(min-device-pixel-ratio:2)">
<source src="100px">
</picture>

This will only choose between large pixelated image and small pixelated  
image, and will not make use of high display density.

I've explained it in more detail previously (using srcset as an example,  
but it all applies to min-device-pixel-ratio: MQ as well)
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/036051.html

-- 
regards, Kornel Lesiński