Responsible Responsive Images

Transcript

1. View Slide

2. View Slide

3. alistapart.com/articles/responsive-web-design
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. Best viewed in the First World.
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. 85.3 MB transferred
    453 requests
    

    View Slide

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

    View Slide

16. ~50 MB
    

    View Slide

17. 1.1MB
    

    View Slide

18. 1.5MB
    

    View Slide

19. View Slide

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

    View Slide

21. View Slide

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

    View Slide

23. “
    EVERY CARPENTER
    Measure twice, cut once.
    

    View Slide

24. 
    

    View Slide

25. “
    EVERYONE THAT HASN’T LEFT YET
    …
    

    View Slide

26. img {
    max-width: 100%;
    }
    
    

    View Slide

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

    View Slide

28. 
    
    
    
    

    View Slide

29. 
    

    View Slide

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

    View Slide

31. etherpad.mozilla.org/responsive-assets
    

    View Slide

32. 
    
    
    
    
    
    

    View Slide

33. w3c.responsiveimages.org
    

    View Slide

34. 
    

    View Slide

35. View Slide

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

    View Slide

37. 
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. 
    
    
    
    
    

    View Slide

42. 
    

    View Slide

43. picture.responsiveimages.org
    

    View Slide

44. responsiveimages.org
    

    View Slide

45. github.com/scottjehl/picturefill/
    

    View Slide

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

    View Slide

47. 800KB
    1.2MB
    

    View Slide

48. 
    
    
    
    
    
    
    

    View Slide

49. SVG
    

    View Slide

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

    View Slide

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

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. gruntjs.com
    

    View Slide

57. github.com/filamentgroup/grunticon/
    

    View Slide

58. View Slide

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

    View Slide

60. flickr.com/photos/esoterica/2210108334
    

    View Slide

61. Thanks.
    

    View Slide