Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

[HEWEBFL] Adaptive Images in Responsive Web Design

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 133 Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (18)

A los espectadores también les gustó (16)

Anuncio

Similares a [HEWEBFL] Adaptive Images in Responsive Web Design (20)

Anuncio

Más reciente (20)

[HEWEBFL] Adaptive Images in Responsive Web Design

  1. #HEWEBFL2013 ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CHRISTOPHER SCHMITT @teleject
  2. CHRISTOPHER SCHMITT @teleject
  3. @teleject http://CSSsummit.com/
  4. @teleject http://cssdevconf.com/
  5. @teleject http://dwmgbook.com/
  6. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  7. alert("User-agent header sent: " + navigator.userAgent);
  8. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  9. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) (cc) flic.kr/p/vUBHv http://www.useragentstring.com/
  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 (cc) flic.kr/p/vUBHv http://www.useragentstring.com/
  11. 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
  12. FEATURE TESTINGvs. BROWSER SNIFFING 1 2 3
  13. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 3
  14. 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
  15. 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/
  16. 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) { ... }
  17. (cc) flic.kr/p/8Lo5Gk
  18. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  19. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  20. 72PPIHAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  21. 72 points-per-inch = 72 pixels-per-inch
  22. 96PPI IF A WINDOWS USER
  23. 72 points-per-inch x [1+(1/3)] = 96 PPI
  24. 78μm goo.gl/zpkFy 78μm “RETINA” DISPLAYS300ppi at 12 inches from the eyes
  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 SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  33. (cc) flic.kr/p/4DziUN SPEED TESTS HINDER SPEED, USER EXPERIENCE
  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 image https://github.com/adamdbradley/foresight.js
  37. Speed test image +50k https://github.com/adamdbradley/foresight.js
  38. 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
  39. IMGGIMME THAT OLD SCHOOL 1 2 3
  40. 1 .htaccess 2 3 IMGGIMME THAT OLD SCHOOL
  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 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
  42. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 8+4+
  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. 1 .htaccess 2 <picture> and/or srcset 3 GIMME THAT OLD SCHOOL IMG
  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. 1 .htaccess 2 <picture> 3 HiSRC GIMME THAT OLD SCHOOL IMG
  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 TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  56. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  57. $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; Check pixel density... https://gist.github.com/2428356
  58. +50k https://github.com/adamdbradley/foresight.js Force speed test
  59. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  60. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  61. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  62. 2 TRICK PONY
  63. CSS IS CORE. WE USE CSS MEDIA QUERIES 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. $.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
  71. $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==', 8+5+9+ 11.6+17+ Single pixel GIF
  72. $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http:// example.com/spg.gif', 6+5+9+ 11.6+17+ Single pixel GIF
  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. WORKAROUNDSTRICKS 1 2 3 & (cc) flic.kr/p/64fGf6
  76. WORKAROUNDSTRICKS 1 background-size: auto 2 3 & (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; } 9+5+9+ 11.6+17+
  79. WORKAROUNDSTRICKS 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6
  80. SVG
  81. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  82. PNG 16kb SVG 7kb 9+5+9+ 11.6+17+
  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 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
  85. 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
  86. WORKAROUNDSTRICKS 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6
  87. ...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.” “
  88. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/
  89. http://css-tricks.com/examples/IconFont/
  90. http://fontello.com/
  91. 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>
  92. WORKAROUNDSTRICKS 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 4 compressed JPEGs
  93. 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
  94. 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 ! " ← ↑
  95. 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 ! ↙ " ← ← ↗ ↑ ↖ ↑ ↖
  96. 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 ↑ ↗ ← " " ↙ ! ↘ ! ↘
  97. (cc) flic.kr/p/64fGf6
  98. 446kb < 8,755.2kb (cc) flic.kr/p/64fGf6 0% vs 100%
  99. 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
  100. 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
  101. <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/
  102. <img src="rock-climber.jpg" alt="" /> One Image, One IMG
  103. (cc) flic.kr/p/64fGf6 EXTREMELYCOMPRESSED PROBLEMS
  104. IMGGIMME THAT NEW SCHOOL 1 2 3
  105. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users #rwdimg 1
  106. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake #rwdimg 2
  107. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake same, several formats #rwdimg 3
  108. #rwdimg
  109. #rwdimg
  110. #rwdimg
  111. #rwdimg
  112. #rwdimg
  113. #rwdimg
  114. #rwdimg
  115. #rwdimg <link rel="shortcut icon" href="/assets/favicon.ico" />
  116. #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" /> <link rel="shortcut icon" href="/assets/favicon.ico" />
  117. #rwdimg
  118. THANK YOU!CHRISTOPHER SCHMITT @teleject The Non Breaking Space Podcast - http://nonbreakingspace.tv/

×