Successfully reported this slideshow.

More Related Content

[convergese] Adaptive Images in Responsive Web Design

  1. 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN CONVERGESE 2012
  2. 2. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  3. 3. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  4. 4. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  5. 5. 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://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  6. 6. 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
  7. 7. “ Based on feedback from users, testers and engineers you will contact large as well as smaller Web sites and advise them on how to improve their code for maximum compatibility and device independence.” http://my.opera.com/chooseopera/blog/2010/06/09/ work-for-opera-as-a-web-opener (cc) flic.kr/p/vUBHv
  8. 8. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3
  9. 9. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 3
  10. 10. 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
  11. 11. 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/
  12. 12. 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) { ... }
  13. 13. (cc) flic.kr/p/8Lo5Gk
  14. 14. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  15. 15. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  16. 16. 72 PPI HAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  17. 17. 72 points-per-inch = 72 pixels-per-inch
  18. 18. 96 PPI IF A WINDOWS USER
  19. 19. 72 points-per-inch x [1+(1/3)] = 96 PPI
  20. 20. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μm goo.gl/zpkFy
  21. 21. 240 144 72 PPI
  22. 22. “ [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
  23. 23. 72 PPI
  24. 24. 240
  25. 25. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  26. 26. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  27. 27. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUN
  28. 28. “ 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
  29. 29. “ 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
  30. 30. Speed test image https://github.com/adamdbradley/foresight.js
  31. 31. Speed test image +50k https://github.com/adamdbradley/foresight.js
  32. 32. 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
  33. 33. WORKAROUNDS & TRICKS 1 2 3 (cc) flic.kr/p/64fGf6
  34. 34. WORKAROUNDS & TRICKS 1 background-size: auto 2 3 (cc) flic.kr/p/64fGf6
  35. 35. http://fittextjs.com/
  36. 36. 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; } 17+ 9+ 11.6+ 5+ 9+
  37. 37. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 (cc) flic.kr/p/64fGf6
  38. 38. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  39. 39. PNG 16kb SVG 7kb 17+ 9+ 11.6+ 5+ 9+
  40. 40. HTML5 Boilerplate <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <! [endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<! [endif]--> <head>
  41. 41. jQuery check var checkBrowser = $('html').hasClass('lt-ie9'); <div class="svgswap"> <img src="example.svg" data-svgswap="example.png"> </div> https://github.com/teleject/svg-swap
  42. 42. http://raphaeljs.com/
  43. 43. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 font-based solutions (cc) flic.kr/p/64fGf6
  44. 44. “ ...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.”
  45. 45. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/
  46. 46. http://css-tricks.com/examples/IconFont/
  47. 47. 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>
  48. 48. IMG GIMME THAT OLD SCHOOL 1 2 3
  49. 49. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 3
  50. 50. 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
  51. 51. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 4+ 8+
  52. 52. “ ...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/
  53. 53. http://adaptive-images.com/
  54. 54. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>
  55. 55. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> 3
  56. 56. 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/
  57. 57. <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/
  58. 58. <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/
  59. 59. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>
  60. 60. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> 3 HiSRC
  61. 61. 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>
  62. 62. 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>
  63. 63. 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>
  64. 64. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  65. 65. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  66. 66. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  67. 67. Force speed test +50k https://github.com/adamdbradley/foresight.js
  68. 68. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  69. 69. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  70. 70. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  71. 71. 2 TRICK PONY
  72. 72. CSS IS CORE. WE USE CSS MEDIA QUERIES FOR DESIGN
  73. 73. http://mediaqueri.es/
  74. 74. 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) { ... }
  75. 75. Single pixel GIF
  76. 76. Single pixel GIF
  77. 77. Single pixel GIF
  78. 78. Single pixel GIF
  79. 79. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, http://www.w3.org/community/respimg/2012/04/06/responsive- content-images-using-a-spacer-png-and-background-image/
  80. 80. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==', 17+ 9+ 11.6+ 5+ 8+
  81. 81. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http:// example.com/spg.gif', 17+ 9+ 11.6+ 5+ 6+
  82. 82. 2 APPROACHES, 1 SIMPLE SOLUTION. https://github.com/teleject/hisrc
  83. 83. 2 APPROACHES, 1 SIMPLE SOLUTION. HEART WEB DESIGN https://github.com/teleject/hisrc
  84. 84. IMG GIMME THAT NEW SCHOOL 1 2 3
  85. 85. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 same, several formats
  86. 86. #rwdimg
  87. 87. THANK YOU! CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS

×