[convergefl] Adaptive Images in Responsive Web Design

  • 1,198 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,198
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN CONVERGEFL 2012Friday, October 5, 12
  • 2. Friday, October 5, 12
  • 3. Friday, October 5, 12
  • 4. Friday, October 5, 12
  • 5. Friday, October 5, 12
  • 6. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHvFriday, October 5, 12
  • 7. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHvFriday, October 5, 12
  • 8. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHvFriday, October 5, 12
  • 9. 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/vUBHvFriday, October 5, 12
  • 10. 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/vUBHvFriday, October 5, 12
  • 11. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3Friday, October 5, 12
  • 12. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 3Friday, October 5, 12
  • 13. 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/browserwindowFriday, October 5, 12
  • 14. 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/Friday, October 5, 12
  • 15. 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) { ... }Friday, October 5, 12
  • 16. (cc) flic.kr/p/8Lo5GkFriday, October 5, 12
  • 17. (cc) flic.kr/p/8Lo5GkFriday, October 5, 12
  • 18. BROWSER WIDTH GIVES US FRAME, NOT THE CANVASFriday, October 5, 12
  • 19. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3Friday, October 5, 12
  • 20. Friday, October 5, 12 72 PPI HAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  • 21. 72 points-per-inch = 72 pixels-per-inchFriday, October 5, 12
  • 22. Friday, October 5, 12 96 PPI IF A WINDOWS USER
  • 23. 72 points-per-inch x [1+(1/3)] = 96 PPIFriday, October 5, 12
  • 24. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μm goo.gl/zpkFyFriday, October 5, 12
  • 25. 240 144 72 PPIFriday, October 5, 12
  • 26. “ [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.htmlFriday, October 5, 12
  • 27. 72 PPIFriday, October 5, 12
  • 28. 240Friday, October 5, 12
  • 29. 240 PPIFriday, October 5, 12
  • 30. 240 PPIFriday, October 5, 12
  • 31. 72 PPIFriday, October 5, 12
  • 32. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZESFriday, October 5, 12
  • 33. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 BandwidthFriday, October 5, 12
  • 34. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUNFriday, October 5, 12
  • 35. “ 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/4DziUNFriday, October 5, 12
  • 36. “ 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/4DziUNFriday, October 5, 12
  • 37. Speed test image https://github.com/adamdbradley/foresight.jsFriday, October 5, 12
  • 38. Speed test image +50k https://github.com/adamdbradley/foresight.jsFriday, October 5, 12
  • 39. Native speed test // @Modernizrs 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-androidFriday, October 5, 12
  • 40. IMG GIMME THAT OLD SCHOOL 1 2 3Friday, October 5, 12
  • 41. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 3Friday, October 5, 12
  • 42. 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-ImagesFriday, October 5, 12
  • 43. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 4+ 8+Friday, October 5, 12
  • 44. “ ...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/Friday, October 5, 12
  • 45. http://adaptive-images.com/Friday, October 5, 12
  • 46. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>Friday, October 5, 12
  • 47. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3Friday, October 5, 12
  • 48. 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/Friday, October 5, 12
  • 49. <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)"> <!-- <source src="extralarge.jpg" media="(min-width: 1000px)"> --> <source src="extralarge.jpg" media="(min-width: 1000px)"> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://wil.to/picturefill/Friday, October 5, 12
  • 50. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>Friday, October 5, 12
  • 51. @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-srcsetFriday, October 5, 12
  • 52. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> 3 HiSRCFriday, October 5, 12
  • 53. 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>Friday, October 5, 12
  • 54. 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>Friday, October 5, 12
  • 55. 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>Friday, October 5, 12
  • 56. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...Friday, October 5, 12
  • 57. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-androidFriday, October 5, 12
  • 58. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356Friday, October 5, 12
  • 59. Force speed test +50k https://github.com/adamdbradley/foresight.jsFriday, October 5, 12
  • 60. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACEFriday, October 5, 12
  • 61. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED INFriday, October 5, 12
  • 62. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2Friday, October 5, 12
  • 63. 2 TRICK PONYFriday, October 5, 12
  • 64. CSS IS CORE. WE USE CSS MEDIA QUERIES FOR DESIGNFriday, October 5, 12
  • 65. http://mediaqueri.es/Friday, October 5, 12
  • 66. 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) { ... }Friday, October 5, 12
  • 67. Single pixel GIFFriday, October 5, 12
  • 68. Single pixel GIFFriday, October 5, 12
  • 69. Single pixel GIFFriday, October 5, 12
  • 70. Single pixel GIFFriday, October 5, 12
  • 71. 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/Friday, October 5, 12
  • 72. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==, 17+ 9+ 11.6+ 5+ 8+Friday, October 5, 12
  • 73. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: http:// example.com/spg.gif, 17+ 9+ 11.6+ 5+ 6+Friday, October 5, 12
  • 74. 2 APPROACHES, 1 SIMPLE SOLUTION. https://github.com/teleject/hisrcFriday, October 5, 12
  • 75. 2 APPROACHES, 1 SIMPLE SOLUTION. HEART WEB DESIGN https://github.com/teleject/hisrcFriday, October 5, 12
  • 76. WORKAROUNDS & TRICKS 1 2 3 (cc) flic.kr/p/64fGf6Friday, October 5, 12
  • 77. WORKAROUNDS & TRICKS 1 background-size: auto 2 3 (cc) flic.kr/p/64fGf6Friday, October 5, 12
  • 78. http://fittextjs.com/Friday, October 5, 12
  • 79. Friday, October 5, 12
  • 80. Friday, October 5, 12
  • 81. 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+Friday, October 5, 12
  • 82. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 (cc) flic.kr/p/64fGf6Friday, October 5, 12
  • 83. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20elementFriday, October 5, 12
  • 84. PNG 16kb SVG 7kb 17+ 9+ 11.6+ 5+ 9+Friday, October 5, 12
  • 85. 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>Friday, October 5, 12
  • 86. 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-swapFriday, October 5, 12
  • 87. http://raphaeljs.com/Friday, October 5, 12
  • 88. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 font-based solutions (cc) flic.kr/p/64fGf6Friday, October 5, 12
  • 89. “ ...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.”Friday, October 5, 12
  • 90. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/Friday, October 5, 12
  • 91. http://css-tricks.com/examples/IconFont/Friday, October 5, 12
  • 92. 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>Friday, October 5, 12
  • 93. Friday, October 5, 12
  • 94. IMG GIMME THAT NEW SCHOOL 1 2 3Friday, October 5, 12
  • 95. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 3 #rwdimgFriday, October 5, 12
  • 96. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 #rwdimgFriday, October 5, 12
  • 97. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 same, several formats #rwdimgFriday, October 5, 12
  • 98. “ JavaScript has solved a lot of our past problems, so it’s human nature to beseech her to save us again.” http://www.alistapart.com/articles/mo-pixels-mo-problems/Friday, October 5, 12
  • 99. #rwdimgFriday, October 5, 12
  • 100. #rwdimgFriday, October 5, 12
  • 101. #rwdimgFriday, October 5, 12
  • 102. #rwdimgFriday, October 5, 12
  • 103. #rwdimgFriday, October 5, 12
  • 104. #rwdimgFriday, October 5, 12
  • 105. <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimgFriday, October 5, 12
  • 106. <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" /> <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimgFriday, October 5, 12
  • 107. #rwdimgFriday, October 5, 12
  • 108. THANK YOU! CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS The Non Breaking Space Podcast - http://nonbreakingspace.tv/Friday, October 5, 12
  • 109. THANK YOU! CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS The Non Breaking Space Podcast - http://nonbreakingspace.tv/Friday, October 5, 12