[refreshaustin] Adaptive Images in Responsive Web Design

5,718 views

Published on

Published in: Technology, Design
2 Comments
19 Likes
Statistics
Notes
  • You clearly have a breadth of knowledge; I just wish this presentation was formatted to be engaging for novices & beginners learning level also.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I'm not the best designer, but I've always appreciate the work and effort from web and graphic designers. Excellent slides and some great detail. Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,718
On SlideShare
0
From Embeds
0
Number of Embeds
365
Actions
Shares
0
Downloads
0
Comments
2
Likes
19
Embeds 0
No embeds

No notes for slide

[refreshaustin] Adaptive Images in Responsive Web Design

  1. CHRISTOPHER SCHMITT @telejectADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN REFRESH AUSTIN 2013
  2. @telejectCHRISTOPHER SCHMITT
  3. @telejecthttp://cssdevconf.com/
  4. @telejecthttp://rwdsummit.com/
  5. @telejecthttp://dwmgbook.com/
  6. WHY DON’T WE ASKTHE BROWSER? (cc) flic.kr/p/vUBHv
  7. Mozilla/1.0 (Win3.1)http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  8. Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  9. Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  10. Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
  11. FEATURE TESTINGvs. BROWSER SNIFFING123
  12. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
  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/browserwindow
  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/
  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) { ... }
  16. (cc) flic.kr/p/8Lo5Gk
  17. BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
  18. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3
  19. 72 PPIHAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  20. 72 points-per-inch =72 pixels-per-inch
  21. 96 PPIIF A WINDOWS USER
  22. 72 points-per-inchx [1+(1/3)]= 96 PPI
  23. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μmgoo.gl/zpkFy
  24. 240 14472 PPI
  25. “ [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
  26. 72 PPI
  27. 240
  28. 240 PPI
  29. 240 PPI
  30. 72 PPI
  31. RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
  32. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth
  33. SPEED TESTSHINDER SPEED,USER EXPERIENCE (cc) flic.kr/p/4DziUN
  34. “ 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
  35. “ 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
  36. Speed test imagehttps://github.com/adamdbradley/foresight.js
  37. Speed test image +50khttps://github.com/adamdbradley/foresight.js
  38. 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-android
  39. IMGGIMME THAT OLD SCHOOL123
  40. IMGGIMME THAT OLD SCHOOL1 .htaccess23
  41. 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 ImagesRewriteEngine On# direct image requests to tempRewriteCond %{QUERY_STRING} full=(.*)&?RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L]# ignore trap for non-image requests, rewrite URL without trap segmentRewriteRule (.*)rwd-router/(.*)$ $1$2# //End Responsive Images https://github.com/filamentgroup/Responsive-Images
  42. Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" /> 4+ 8+
  43. “ ...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/
  44. http://adaptive-images.com/
  45. ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
  46. IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture> and/or srcset3
  47. 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/
  48. <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/
  49. ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
  50. @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
  51. IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture>3 HiSRC
  52. 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>
  53. 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>
  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>
  55. SERIES OF CHECKS TOFIND OUT RESPONSIVEPATH FOR IMAGES...
  56. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...http://davidbcalhoun.com/2010/using-navigator-connection-android
  57. Check pixel density...$.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  58. Force speed test +50khttps://github.com/adamdbradley/foresight.js
  59. LESS THAN 4G MEANSMOBILE IMAGES LEFTIN PLACE
  60. BETWEEN 4G &300 Kbps MEANSREGULAR DESKTOPIMAGES SWAPPED IN
  61. FAST SPEED & HIGHDENSITY, RETINAIMAGES SWAPPED INhttps://github.com/crdeutsch/hisrc/tree/v2
  62. 2 TRICK PONY
  63. CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
  64. http://mediaqueri.es/
  65. 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) { ... }
  66. Single pixel GIF
  67. Single pixel GIF
  68. Single pixel GIF
  69. Single pixel GIF
  70. 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/
  71. Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==, 17+ 9+ 11.6+ 5+ 8+
  72. Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: http://example.com/spg.gif, 17+ 9+ 11.6+ 5+ 6+
  73. 2 APPROACHES,1 SIMPLE SOLUTION. https://github.com/teleject/hisrc
  74. 2 APPROACHES,1 SIMPLE SOLUTION.HEART WEB DESIGN https://github.com/teleject/hisrc
  75. WORKAROUNDS &TRICKS123 (cc) flic.kr/p/64fGf6
  76. WORKAROUNDS &TRICKS1 background-size: auto23 (cc) flic.kr/p/64fGf6
  77. http://fittextjs.com/
  78. 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+
  79. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 (cc) flic.kr/p/64fGf6
  80. SVG
  81. Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  82. PNG 16kb SVG 7kb17+ 9+ 11.6+ 5+ 9+
  83. 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>
  84. jQuery checkvar checkBrowser = $(html).hasClass(lt-ie9);<div class="svgswap"> <img src="example.svg" data-svgswap="example.png"></div> https://github.com/teleject/svg-swap
  85. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 font-based solutions (cc) flic.kr/p/64fGf6
  86. “ ...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.”
  87. Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
  88. http://css-tricks.com/examples/IconFont/
  89. 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>
  90. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 font-based solutions4 compressed JPEGs (cc) flic.kr/p/64fGf6
  91. OS X Lion 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 MoreiCloud iOS 5 OSX Lion iPad 2 iPhone
  92. ! OS X Lion " ← 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 MoreiCloud iOS 5 OSX Lion iPad 2 iPhone
  93. ! ↙ OS X Lion " ← ← 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 ↑ ↖iCloud iOS 5 OSX Lion iPad 2 iPhone
  94. ↑ ↗ OS X Lion ← " " 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 ! ↘iCloud iOS 5 OSX Lion iPad 2 iPhone
  95. (cc) flic.kr/p/64fGf6
  96. 446kb < 8,755.2kb 0% vs 100% (cc) flic.kr/p/64fGf6
  97. Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb 640x960 2x 746kb Large 320x480 1x 223kb 500x750 2x 485kb Medium 250x375 1x 145kb
  98. Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb 640x960 2x 746kb Large 320x480 1x 223kb 500x750 2x 485kb Medium 250x375 1x 145kb
  99. <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/
  100. One Image, One IMG<img src="rock-climber.jpg" alt="" />
  101. EXTREMELYCOMPRESSED PROBLEMS (cc) flic.kr/p/64fGf6
  102. IMGGIMME THAT NEW SCHOOL123
  103. IMGGIMME THAT NEW SCHOOL1 simple design for users23 #rwdimg
  104. IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 #rwdimg
  105. IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 same, several formats #rwdimg
  106. #rwdimg
  107. #rwdimg
  108. #rwdimg
  109. #rwdimg
  110. #rwdimg
  111. #rwdimg
  112. #rwdimg
  113. <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  114. <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" /> #rwdimg
  115. #rwdimg
  116. THANK YOU!CHRISTOPHER SCHMITT @telejectThe Non Breaking Space Podcast - http://nonbreakingspace.tv/

×