Couple quick proposed slides

[Wilto]

You get into syntax a little bit, and covering how the two syntaxes play together is a great idea—I was wondering if we might want to take it a little further and show how the two solutions can work together to address all the use cases. I dunno how much time you have (and I’m last-minute, sorry), but I just hashed some points out real quick:

---

picture alone

• Great for handling the art direction use case!
  All the flexibility of media queries.

<picture>
     <source media="(min-width: 45em)" src="large.jpg">
     <source media="(min-width: 18em)" src="med.jpg">
     <source src="small.jpg">
     <img src="small.jpg" alt="">
</picture>

• Can be a little clunky when it comes to resolution

media="(-webkit-min-device-pixel-ratio: 1.5),
       (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 1.5dppx)"

srcset alone

• Great for handling resolution-switching!
  The time and place for srcset may be simple art-direction and concise resolution-switching.
  <img src="small.jpg" srcset="small-hd.jpg 2x">
• Less great for art direction
  Pixels only, confusing syntax where there are more than a few sources in play.
  <img src="small.jpg" srcset="small-hd.jpg 2x, med.jpg 600w, med-hd.jpg 600w 2x, large.jpg 800w, large-hd.jpg 800w 2x" alt="">

Let’s combine!

Separately the two solutions have their own strengths, and when used together we’re able address all of our potential use cases in a concise and flexible manner.

<picture>
     <source media="(min-width: 45em)" srcset="large.jpg, large-hd.jpg 2x">
     <source media="(min-width: 18em)" srcset="med.jpg, med-hd.jpg 2x">
     <source srcset="small.jpg, small-hd.jpg 2x">
     <img src="small.jpg" alt="">
</picture>

[marcoscaceres]

Thanks! Will try to integrate this in tonight.

[anselmh]

That's great! Just what I meant you should have in presentation as this covers a real use-case. Do you need a demo for that? Problem is I think srcset is not working in the Chromium build.

[marcoscaceres]

Hi Mat,
Thanks for the feedback. I'll integrate this now. I'll be doing another commit tomorrow as I'm on roaming here. Stupid hotel internet not worky.

Marcos Caceres
http://datadriven.com.au

On Tuesday, 30 October 2012 at 17:33, Mat Marquis wrote:

You get into syntax a little bit, and covering how the two syntaxes play together is a great idea—I was wondering if we might want to take it a little further and show how the two solutions can work together to address all the use cases. I dunno how much time you have (and I’m last-minute, sorry), but I just hashed some points out real quick:
picture alone
Great for handling the art direction use case! All the flexibility of media queries.

Can be a little clunky when it comes to resolution media="(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx)"

srcset alone
Great for handling resolution-switching!
The time and place for srcset may be simple art-direction and concise resolution-switching.

Less great for art direction
Pixels only, confusing syntax where there are more than a few sources in play.

Let’s combine!
Separately the two solutions have their own strengths, and when used together we’re able address all of our potential use cases in a concise and flexible manner.

—
Reply to this email directly or view it on GitHub (#10).

[marcoscaceres]

Slides were integrated into presentation.