• Save
[jqconatx] Adaptive Images for Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

[jqconatx] Adaptive Images for Responsive Web Design

on

  • 5,077 views

 

Statistics

Views

Total Views
5,077
Views on SlideShare
4,959
Embed Views
118

Actions

Likes
10
Downloads
0
Comments
1

12 Embeds 118

https://twitter.com 75
http://rigel.fca.unam.mx 23
http://www.google.com 10
http://aristoteles-y-platon.webnode.com.co 2
http://preview.pablo787.webnode.es 1
http://danycarolina09021996.wordpress.com 1
http://sites.gsu.edu 1
http://pulse.me&_=1379088616364 HTTP 1
http://preview.aristoteles-y-platon.webnode.com.co 1
http://cms.pablo787.webnode.es 1
http://cms.aristoteles-y-platon.webnode.com.co 1
http://www.pulse.me 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • i am miss jernnifer i was happy to contact you i'm looking for friendship i will like you to be my friend please send mail to my private email so i can explain to you more about me with my pics mail me to my private email (jernnifermohamed@yah­oo.com)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

[jqconatx] Adaptive Images for Responsive Web Design Presentation Transcript

  • 1. #jQCONF AUSTIN ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CHRISTOPHER SCHMITT @teleject Wednesday, September 11, 13
  • 2. CHRISTOPHER SCHMITT @teleject Wednesday, September 11, 13
  • 3. @teleject Wednesday, September 11, 13
  • 4. @teleject Wednesday, September 11, 13
  • 5. @teleject http://nonbreakingspace.tv/ Wednesday, September 11, 13
  • 6. @teleject http://cssdevconf.com/ Wednesday, September 11, 13
  • 7. Wednesday, September 11, 13
  • 8. Wednesday, September 11, 13
  • 9. Wednesday, September 11, 13
  • 10. Wednesday, September 11, 13
  • 11. Wednesday, September 11, 13
  • 12. y x Wednesday, September 11, 13
  • 13. Wednesday, September 11, 13
  • 14. Wednesday, September 11, 13
  • 15. Wednesday, September 11, 13
  • 16. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv Wednesday, September 11, 13
  • 17. alert("User-agent header sent: " + navigator.userAgent); Wednesday, September 11, 13
  • 18. alert("User-agent header sent: " + navigator.userAgent); Wednesday, September 11, 13
  • 19. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv Wednesday, September 11, 13
  • 20. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) (cc) flic.kr/p/vUBHv http://www.useragentstring.com/ Wednesday, September 11, 13
  • 21. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 (cc) flic.kr/p/vUBHv http://www.useragentstring.com/ Wednesday, September 11, 13
  • 22. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv Wednesday, September 11, 13
  • 23. FEATURE TESTINGvs. BROWSER SNIFFING 1 2 3 Wednesday, September 11, 13
  • 24. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 3 Wednesday, September 11, 13
  • 25. A scripting approach var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } http://www.howtocreate.co.uk/tutorials/javascript/browserwindow Wednesday, September 11, 13
  • 26. The jQuery approach // returns width of browser viewport $(window).width(); // returns height of browser viewport $(window).height(); // returns width of HTML document $(document).width(); // returns height of HTML document $(document).height(); http://api.jquery.com/width/ & http://api.jquery.com/height/ Wednesday, September 11, 13
  • 27. CSS media queries // default, mobile-1st CSS rules devices go here @media screen and (min-width: 480px) { ... } @media screen and (min-width: 600px) { ... } @media screen and (min-width: 768px) { ... } @media screen and (min-width: 910px) { ... } Wednesday, September 11, 13
  • 28. (cc) flic.kr/p/8Lo5Gk Wednesday, September 11, 13
  • 29. (cc) flic.kr/p/8Lo5Gk Wednesday, September 11, 13
  • 30. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS Wednesday, September 11, 13
  • 31. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Wednesday, September 11, 13
  • 32. 72PPIHAS SERVED US WELL (cc) flic.kr/p/6tjjRP Wednesday, September 11, 13
  • 33. 72 points-per-inch = 72 pixels-per-inch Wednesday, September 11, 13
  • 34. 96PPI IF A WINDOWS USER Wednesday, September 11, 13
  • 35. 72 points-per-inch x [1+(1/3)] = 96 PPI Wednesday, September 11, 13
  • 36. 78μm goo.gl/zpkFy 78μm “RETINA” DISPLAYS300ppi at 12 inches from the eyes Wednesday, September 11, 13
  • 37. Wednesday, September 11, 13
  • 38. [In 2013, Intel sees their product line] offer a higher resolution experience than a top-of-the-line 1080p HDTV.” “ http://liliputing.com/2012/04/intel-retina-laptop- desktop-displays-coming-in-2013.html Wednesday, September 11, 13
  • 39. 72 PPI Wednesday, September 11, 13
  • 40. 240 Wednesday, September 11, 13
  • 41. 240 PPI Wednesday, September 11, 13
  • 42. 240 PPI Wednesday, September 11, 13
  • 43. 72 PPI Wednesday, September 11, 13
  • 44. Wednesday, September 11, 13
  • 45. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES Wednesday, September 11, 13
  • 46. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth Wednesday, September 11, 13
  • 47. (cc) flic.kr/p/4DziUN SPEED TESTS HINDER SPEED, USER EXPERIENCE Wednesday, September 11, 13
  • 48. Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.” “ (cc) flic.kr/p/4DziUN Wednesday, September 11, 13
  • 49. Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.” “ But, Christopher, you only have to test it once.”“ (cc) flic.kr/p/4DziUN Wednesday, September 11, 13
  • 50. Speed test image https://github.com/adamdbradley/foresight.js Wednesday, September 11, 13
  • 51. Speed test image +50k https://github.com/adamdbradley/foresight.js Wednesday, September 11, 13
  • 52. Native speed test // @Modernizr's network-connection.js connection = navigator.connection || { type: 0 }, // polyfill isSlowConnection = connection.type == 3 || connection.type == 4 | /^[23]g$/.test(connection.type); http://davidbcalhoun.com/2010/using-navigator-connection-android Wednesday, September 11, 13
  • 53. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth Wednesday, September 11, 13
  • 54. IMGGIMME THAT OLD SCHOOL 1 2 3 Wednesday, September 11, 13
  • 55. 1 .htaccess 2 3 IMGGIMME THAT OLD SCHOOL Wednesday, September 11, 13
  • 56. Filament .htaccess # Responsive Images # Mobile-First images that scale responsively and responsibly # Copyright 2010, Scott Jehl, Filament Group, Inc # Dual licensed under the MIT or GPL Version 2 licenses. # //Start Responsive Images RewriteEngine On # direct image requests to temp RewriteCond %{QUERY_STRING} full=(.*)&? RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L] # ignore trap for non-image requests, rewrite URL without trap segment RewriteRule (.*)rwd-router/(.*)$ $1$2 # //End Responsive Images https://github.com/filamentgroup/Responsive-Images Wednesday, September 11, 13
  • 57. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 8+4+ Wednesday, September 11, 13
  • 58. ...the server has no way to know what resolution the client’s device is, so it can’t send the appropriately sized embeded images.” “ http://mattwilcox.net/archive/entry/id/1053/ Wednesday, September 11, 13
  • 59. http://adaptive-images.com/ Wednesday, September 11, 13
  • 60. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG> Wednesday, September 11, 13
  • 61. 1 .htaccess 2 <picture> and/or srcset 3 GIMME THAT OLD SCHOOL IMG Wednesday, September 11, 13
  • 62. media queries in HTML <video controls> <source type="video/mp4" src="video/windowsill_small.mp4" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/webm" src="video/windowsill_small.webm" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/mp4" src="video/windowsill.mp4"> <source type="video/webm" src="video/windowsill.webm"> <!-- proper fallback content goes here --> </video> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/ Wednesday, September 11, 13
  • 63. <picture> patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <!-- <source src="small.jpg"> --> <source src="small.jpg"> <!-- <source src="medium.jpg" media="(min-width: 400px)"> --> <source src="medium.jpg" media="(min-width: 400px)"> <!-- <source src="large.jpg" media="(min-width: 800px)"> --> <source src="large.jpg" media="(min-width: 800px)"> <!-- Fallback content for non-JS browsers. Same src as the initial source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/ Wednesday, September 11, 13
  • 64. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG> Wednesday, September 11, 13
  • 65. @srcset standard? <h1><img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> </h1> http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content-1.html#attr-img-srcset Wednesday, September 11, 13
  • 66. https://www.webkit.org/blog/2910/improved-support-for- high-resolution-displays-with-the-srcset-image-attribute/ Wednesday, September 11, 13
  • 67. 1 .htaccess 2 <picture> and/or srcset 3 HiSRC GIMME THAT OLD SCHOOL IMG Wednesday, September 11, 13
  • 68. Set, forget it HiSRC <script src="https://ajax.googleapis.com/ajax/ libs/jquery/1.7.2/jquery.min.js"></script> <script src="hisrc.js"></script> <script> $(document).ready(function(){ $(".hisrc img").hisrc(); }); </script> https://github.com/teleject/hisrc Wednesday, September 11, 13
  • 69. Set, forget it HiSRC <div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /> </div> Wednesday, September 11, 13
  • 70. Set, forget it HiSRC <div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /> </div> Wednesday, September 11, 13
  • 71. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES... Wednesday, September 11, 13
  • 72. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android Wednesday, September 11, 13
  • 73. $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; Check pixel density... https://gist.github.com/2428356 Wednesday, September 11, 13
  • 74. +50k https://github.com/adamdbradley/foresight.js Force speed test Wednesday, September 11, 13
  • 75. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE Wednesday, September 11, 13
  • 76. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN Wednesday, September 11, 13
  • 77. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2 Wednesday, September 11, 13
  • 78. 2 TRICK PONY Wednesday, September 11, 13
  • 79. CSS IS CORE. WE USE CSS MEDIA QUERIES FOR DESIGN Wednesday, September 11, 13
  • 80. http://mediaqueri.es/ Wednesday, September 11, 13
  • 81. CSS media queries // default, mobile-1st CSS rules devices go here @media screen and (min-width: 480px) { ... } @media screen and (min-width: 600px) { ... } @media screen and (min-width: 768px) { ... } @media screen and (min-width: 910px) { ... } Wednesday, September 11, 13
  • 82. Single pixel GIF Wednesday, September 11, 13
  • 83. Single pixel GIF Wednesday, September 11, 13
  • 84. Single pixel GIF Wednesday, September 11, 13
  • 85. Single pixel GIF Wednesday, September 11, 13
  • 86. $.hisrc.defaults = { useTransparentGif: true, http://www.w3.org/community/respimg/2012/04/06/responsive- content-images-using-a-spacer-png-and-background-image/ Single pixel GIF Wednesday, September 11, 13
  • 87. $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http:// example.com/spg.gif', 6+5+9+ 11.6+17+ Single pixel GIF Wednesday, September 11, 13
  • 88. $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==', 8+5+9+ 11.6+17+ Single pixel GIF Wednesday, September 11, 13
  • 89. http://css-tricks.com/which- responsive-images-solution- should-you-use/ Wednesday, September 11, 13
  • 90. 24+http://css-tricks.com/which- responsive-images-solution- should-you-use/ Wednesday, September 11, 13
  • 91. http://css-tricks.com/which- responsive-images-solution- should-you-use/ ALL SOLUTIONS HAVE 2x HTTP REQUESTS + JAVASCRIPT Wednesday, September 11, 13
  • 92. WORKAROUNDSTRICKS in CONTEXT 1 2 3 & (cc) flic.kr/p/64fGf6 Wednesday, September 11, 13
  • 93. WORKAROUNDSTRICKS 1 background-size: 100% 2 3 & (cc) flic.kr/p/64fGf6 Wednesday, September 11, 13
  • 94. http://fittextjs.com/ Wednesday, September 11, 13
  • 95. background-size: 100% <a href="example.com/link">Download on Github</a> .download a { padding: .095em .8em; background: url(../img/arrow.png) no-repeat; background-size: 100%; margin-left: .4em; -webkit-transition: margin 0.15s ease-out; -moz-transition: margin 0.15s ease-out; text-decoration: none; } 9+5+9+ 11.6+17+ Wednesday, September 11, 13
  • 96. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6 Wednesday, September 11, 13
  • 97. SVG Wednesday, September 11, 13
  • 98. Wednesday, September 11, 13
  • 99. Wednesday, September 11, 13
  • 100. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element Wednesday, September 11, 13
  • 101. PNG 16kb SVG 7kb 9+5+9+ 11.6+17+ Wednesday, September 11, 13
  • 102. http://petercollingridge.appspot.com/svg-optimiser Wednesday, September 11, 13
  • 103. https://github.com/svg/svgo-gui Wednesday, September 11, 13
  • 104. https://github.com/svg/svgo-gui Wednesday, September 11, 13
  • 105. Modernizr check if(!Modernizr.svg){ var images = document.getElementsByTagName("img"); for(var i = 0; i < images.length; i++){ var src = images[i].src.split("."); images[i].src = src[0] + ".png"; } } http://stackoverflow.com/questions/12846852/ svg-png-extension-switch Wednesday, September 11, 13
  • 106. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG (Clown Car) 3 & (cc) flic.kr/p/64fGf6 Wednesday, September 11, 13
  • 107. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 Wednesday, September 11, 13
  • 108. ...if you use <meta charset="utf-8"> (you should be for HTML5), you’re adding common Unicode characters like and ✆, and you don’t need a specific font’s version... just copy and paste them into your HTML.” “ Wednesday, September 11, 13
  • 109. Wednesday, September 11, 13
  • 110. Wednesday, September 11, 13
  • 111. Wednesday, September 11, 13
  • 112. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/ Wednesday, September 11, 13
  • 113. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/ avg file size 40kb/per font Wednesday, September 11, 13
  • 114. http://css-tricks.com/examples/IconFont/ Wednesday, September 11, 13
  • 115. http://fontello.com/ Wednesday, September 11, 13
  • 116. http://icomoon.io Wednesday, September 11, 13
  • 117. Font-based icons <style> [data-icon]:before { font-family: 'icon-font'; content: attr(data-icon); } </style> <a href="http://example.com/cloud/save/"> <span data-icon="C" aria-hidden="true"></span> Save to Cloud </a> Wednesday, September 11, 13
  • 118. WORKAROUNDSTRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 4 compressed JPEGs Wednesday, September 11, 13
  • 119. Wednesday, September 11, 13
  • 120. Wednesday, September 11, 13
  • 121. Wednesday, September 11, 13
  • 122. Wednesday, September 11, 13
  • 123. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion Wednesday, September 11, 13
  • 124. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion Wednesday, September 11, 13
  • 125. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion ! " ← ↑ Wednesday, September 11, 13
  • 126. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion ! ↙ " ← ← ↗ ↑ ↖ ↑ ↖ Wednesday, September 11, 13
  • 127. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion ↑ ↗ ← " " ↙ ! ↘ ! ↘ Wednesday, September 11, 13
  • 128. (cc) flic.kr/p/64fGf6 Wednesday, September 11, 13
  • 129. Wednesday, September 11, 13
  • 130. 446kb < 8,755.2kb (cc) flic.kr/p/64fGf6 0% vs 100% Wednesday, September 11, 13
  • 131. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb Large 640x960 2x 746kb Large 320x480 1x 223kb Medium 500x750 2x 485kb Medium 250x375 1x 145kb Wednesday, September 11, 13
  • 132. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb Large 640x960 2x 746kb Large 320x480 1x 223kb Medium 500x750 2x 485kb Medium 250x375 1x 145kb Wednesday, September 11, 13
  • 133. <picture> Patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <!-- <source src="small.jpg"> --> <source src="small.jpg"> <!-- <source src="medium.jpg" media="(min-width: 400px)"> --> <source src="medium.jpg" media="(min-width: 400px)"> <!-- <source src="large.jpg" media="(min-width: 800px)"> --> <source src="large.jpg" media="(min-width: 800px)"> <!-- Fallback content for non-JS browsers. Same src as the initial source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/ Wednesday, September 11, 13
  • 134. <img src="rock-climber.jpg" alt="" /> One Image, One IMG Wednesday, September 11, 13
  • 135. (cc) flic.kr/p/64fGf6 EXTREMELYCOMPRESSED PROBLEMS Wednesday, September 11, 13
  • 136. Wednesday, September 11, 13
  • 137. Wednesday, September 11, 13
  • 138. Wednesday, September 11, 13
  • 139. Clown Car SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(images/huge.png);} } </style> </svg> https://github.com/estelle/clowncar Wednesday, September 11, 13
  • 140. Clown Car SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(images/huge.png);} } </style> </svg> https://github.com/estelle/clowncar Wednesday, September 11, 13
  • 141. http://coding.smashingmagazine.com/2013/06/02/clown- car-technique-solving-for-adaptive-images-in-responsive- web-design/ Wednesday, September 11, 13
  • 142. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style> </svg> http://codepen.io/teleject/pen/KlzBe Combo Move: SVG Wednesday, September 11, 13
  • 143. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style> <foreignObject> <!--[if lte IE 8]> <img src="../images/mobile-first.png" width="375" height="231" alt="put alt attribute text here"/> <![endif]--> </foreignObject> </svg> http://codepen.io/teleject/pen/KlzBe Wednesday, September 11, 13
  • 144. svg { background-size: 100% 100%; background-repeat: no-repeat; } http://codepen.io/teleject/pen/KlzBe Combo Move: SVG Wednesday, September 11, 13
  • 145. svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg { background-image: url("http://s.cdpn.io/168/pic-Medium-375x231- @1x-72ppi.jpg"); outline: green solid 5px; } } http://codepen.io/teleject/pen/KlzBe Combo Move: SVG Wednesday, September 11, 13
  • 146. @media screen and (min-width: 401px), screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1.75) { svg { background-image: url("http://s.cdpn.io/168/pic- Extreme-2276x1400-72ppi.jpg"); outline: red solid 5px; } } http://codepen.io/teleject/pen/KlzBe Combo Move: Compressed JPEG Wednesday, September 11, 13
  • 147. @media screen and (max-width: 400px) { svg { width: 375px; height: 231px; } } @media screen and (min-width: 401px) { svg { width: 750px; height: 462px; } } svg { outline: 5px solid black; } http://codepen.io/teleject/pen/KlzBe Combo Move: CSS Wednesday, September 11, 13
  • 148. http://codepen.io/teleject/pen/KlzBe Wednesday, September 11, 13
  • 149. http://codepen.io/teleject/pen/KlzBe Wednesday, September 11, 13
  • 150. http://codepen.io/teleject/pen/KlzBe Wednesday, September 11, 13
  • 151. COMBO MOVEDON’T BLAME THE PLAYER 1 2 3 No additional HTTP request1 Min. # of images = 2 No JavaScript http://codepen.io/teleject/pen/KlzBe Wednesday, September 11, 13
  • 152. Wednesday, September 11, 13
  • 153. Wednesday, September 11, 13
  • 154. IMGGIMME THAT NEW SCHOOL 1 2 3 #rwdimg Wednesday, September 11, 13
  • 155. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users #rwdimg 1 Wednesday, September 11, 13
  • 156. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake #rwdimg 2 Wednesday, September 11, 13
  • 157. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake same, several formats #rwdimg 3 Wednesday, September 11, 13
  • 158. #rwdimg Wednesday, September 11, 13
  • 159. #rwdimg Wednesday, September 11, 13
  • 160. http://telejec.tv/12uYOC4 Wednesday, September 11, 13
  • 161. #rwdimg Wednesday, September 11, 13
  • 162. #rwdimg Wednesday, September 11, 13
  • 163. #rwdimg Wednesday, September 11, 13
  • 164. #rwdimg Wednesday, September 11, 13
  • 165. #rwdimg Wednesday, September 11, 13
  • 166. #rwdimg Wednesday, September 11, 13
  • 167. #rwdimg <link rel="shortcut icon" href="/assets/favicon.ico" /> Favicon Wednesday, September 11, 13
  • 168. #rwdimg <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" /> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" /> Mobile iOS Bookmarks Wednesday, September 11, 13
  • 169. #rwdimg Wednesday, September 11, 13
  • 170. THANK YOU!CHRISTOPHER SCHMITT @teleject The Non Breaking Space Podcast - http://nonbreakingspace.tv/ Wednesday, September 11, 13