search

ResponsiveImagesCG / meta

Repository for media, tools, etc.
7 stars 3 forks source link

Couple quick proposed slides #10

Closed Wilto closed 11 years ago

Wilto commented 11 years ago

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

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

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 commented 11 years ago

Thanks! Will try to integrate this in tonight.

anselmh commented 11 years ago

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 commented 11 years ago

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 (https://github.com/ResponsiveImagesCG/meta/issues/10).

marcoscaceres commented 11 years ago

Slides were integrated into presentation.