Responsible Responsive Images

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

alistapart.com/articles/responsive-web-design

Slide 4

Slide 4 text

A FLEXIBLE GRID • MEDIA QUERIES • FLEXIBLE IMAGES AND MEDIA •

Slide 5

Slide 5 text

A FLEXIBLE GRID • MEDIA QUERIES • FLEXIBLE IMAGES AND MEDIA • HUGE FREAKIN’ WEBSITES •

Slide 6

Slide 6 text

This website is best viewed at 800x600 in Internet Explorer version 5.3 or above.

Slide 7

Slide 7 text

This website is best viewed on WebKit. This website is best viewed on either a $500 phone/tablet or a $3,000 laptop with an ultra high-resolution display. Let’s see, you’re on… what, 3G? Ugh, okay, fine. That’ll probably be enough. Don’t go into any tunnels or anything, though. What data plan do you have? …Seriously? You’ll need to upgrade—I’m gonna use like a quarter of that on the homepage alone. C’mon, this isn’t 2011; get with the program.

Slide 8

Slide 8 text

Best viewed in the First World.

Slide 9

Slide 9 text

httparchive.org/interesting.php?a=All&l=May%201%202013 133kb 36kb 57kb 91kb 219kb 872kb Images JavaScript Flash HTML CSS Other

Slide 10

Slide 10 text

httparchive.org/interesting.php?a=All&l=May%201%202013 February 2013 March 2013 April 2013 May 2013 0 220 440 660 880

Slide 11

Slide 11 text

Holler if you guys need any more help with your headlines. twitter.com/beep/statuses/180746121998635008 THE RETINA RECKONING RETINOCALYPSE RETINAGEDDON RETINARÖK ETHAN MARCOTTE “

Slide 12

Slide 12 text

@1x 250x291 64.13KB @2x 500x582 210KB

Slide 13

Slide 13 text

“ EVERYONE HERE …You’re not really going to talk about images for an entire hour, are you?

Slide 14

Slide 14 text

85.3 MB transferred 453 requests

Slide 15

Slide 15 text

https://dl.dropboxusercontent.com/u/70090/ shakespeare.tar.gz 5.3 MB

Slide 16

Slide 16 text

~50 MB

Slide 17

Slide 17 text

1.1MB

Slide 18

Slide 18 text

1.5MB

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

“ EVERYONE HERE, AGAIN …So, you’re really gonna talk about images for an entire hour.

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

72% guypo.com/?p=3374 Of responsive websites send roughly the same data to both mobile and desktop users

Slide 23

Slide 23 text

“ EVERY CARPENTER Measure twice, cut once.

Slide 24

Slide 24 text

Slide 25

Slide 25 text

“ EVERYONE THAT HASN’T LEFT YET …

Slide 26

Slide 26 text

img { max-width: 100%; }

Slide 27

Slide 27 text

img, video, canvas, object { max-width: 100%; }

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

alistapart.com/articles/responsive-images-how-they-almost-worked- and-what-we-need/

Slide 31

Slide 31 text

etherpad.mozilla.org/responsive-assets

Slide 32

Slide 32 text

Slide 33

Slide 33 text

w3c.responsiveimages.org

Slide 34

Slide 34 text

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

alistapart.com/articles/responsive-images-and-web-standards-at-the- turning-point/

Slide 37

Slide 37 text

Slide 38

Slide 38 text

media="( min-width: 40em )" media="( min-width: 20em )" srcset="big-sd.jpg 1x, big-hd.jpg 2x" srcset="mid-sd.jpg 1x, mid-hd.jpg 2x"

Slide 39

Slide 39 text

media="( min-width: 40em )" media="( min-width: 20em )" srcset="big-sd.jpg 1x, big-hd.jpg 2x" srcset="mid-sd.jpg 1x, mid-hd.jpg 2x"

Slide 40

Slide 40 text

media="( min-width: 40em )" media="( min-width: 20em )" srcset="big-sd.jpg 1x, big-hd.jpg 2x" srcset="mid-sd.jpg 1x, mid-hd.jpg 2x" srcset="small-sd.jpg 1x, small-hd.jpg 2x"

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

picture.responsiveimages.org

Slide 44

Slide 44 text

responsiveimages.org

Slide 45

Slide 45 text

github.com/scottjehl/picturefill/

Slide 46

Slide 46 text

“ Prollyfill [prô•le•fil] (n.): A polyfill for a not-yet-standardized API. twitter.com/SlexAxton/status/257543702124306432 ALEX SEXTON

Slide 47

Slide 47 text

800KB 1.2MB

Slide 48

Slide 48 text

Slide 49

Slide 49 text

SVG

Slide 50

Slide 50 text

“ Pictures shouldn’t be made of math. SOME IDIOT

Slide 51

Slide 51 text

“ twitter.com/DailyWilto/status/189811313550180353 SOME IDIOT Pictures shouldn’t be made of math.

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

gruntjs.com

Slide 57

Slide 57 text

github.com/filamentgroup/grunticon/

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

/' // . // |\//7 /' " \ . . . | ( \ | '._ ' / \'-'

Slide 60

Slide 60 text

flickr.com/photos/esoterica/2210108334

Slide 61

Slide 61 text

Thanks.