[HEWEBAR 2012] Adaptive Images in Responsive Web Design

2,157 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,157
On SlideShare
0
From Embeds
0
Number of Embeds
131
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

[HEWEBAR 2012] Adaptive Images in Responsive Web Design

  1. 1. CHRISTOPHER SCHMITT @telejectADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN #HEWEBAR 2012
  2. 2. RESPONSIVE CODEit’s all about the divisor123
  3. 3. RESPONSIVE CODEit’s all about the divisor1 Fluid grid, layout23
  4. 4. .container { width: 988px;}.column { width: 144px;} http://www.alistapart.com/articles/fluidgrids/
  5. 5. .container { width: 988px; /* 988px / 16px = 61.75em */}.column { width: 144px;} http://www.alistapart.com/articles/fluidgrids/
  6. 6. .container { width: 61.75em; /* 988px / 16px = 61.75em */}.column { width: 144px;} http://www.alistapart.com/articles/fluidgrids/
  7. 7. .container { width: 61.75em; /* 988px / 16px = 61.75em */}.column { width: 144px; /* 144px / 988px = 14.57% */} http://www.alistapart.com/articles/fluidgrids/
  8. 8. .container { width: 61.75em; /* 988px / 16px = 61.75em */}.column { width: 14.57%; /* 144px / 988px = 14.57% */} http://www.alistapart.com/articles/fluidgrids/
  9. 9. http://ratiostrong.com/
  10. 10. RESPONSIVE CODEit’s all about the divisor1 Fluid grid, layout2 Media queries3
  11. 11. <link rel="stylesheet" type="text/css"href="core.css" media="screen" /><link rel="stylesheet" type="text/css"href="print.css" media="print" />http://www.alistapart.com/articles/responsive-web-design/
  12. 12. <link rel="stylesheet" type="text/css"href="core.css" media="screen" /><link rel="stylesheet" type="text/css"media="screen and (max-device-width:480px)" href="sm-bowl-porridge.css" /><link rel="stylesheet" type="text/css"href="print.css" media="print" />http://www.alistapart.com/articles/responsive-web-design/
  13. 13. <link rel="stylesheet" type="text/css"href="sm-bowl-porridge.css"media="screen and (max-device-width: 480px)"/><link rel="stylesheet" type="text/css"href="med-bowl-porridge.css"media="screen and (max-device-width: 600px)"/><link rel="stylesheet" type="text/css"href="large-bowl-porridge.css"media="screen and (max-device-width: 768px)"/><link rel="stylesheet" type="text/css"href="xl-bowl-porridge.css"media="screen and (max-device-width: 910px)"/>http://www.alistapart.com/articles/responsive-web-design/
  14. 14. // 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) { ... }http://www.alistapart.com/articles/responsive-web-design/
  15. 15. FIND YOUR OWNBREAKPOINTS FORYOUR SITE!
  16. 16. RESPONSIVE CODEit’s all about the divisor1 Fluid grid, layout2 Media queries3 Adaptive images
  17. 17. img { max-width: 100%; height: auto;} http://www.alistapart.com/articles/fluid-images/
  18. 18. video, object, video, img { max-width: 100%; height: auto;} http://www.alistapart.com/articles/fluid-images/
  19. 19. video, object, video, img { max-width: 100%; height: auto;}* Unless you’re IE6, use conditional comments:video, object, video, img { width: 100%; height: auto;} http://www.alistapart.com/articles/fluid-images/
  20. 20. video, object, video, img, iframe { max-width: 100%; height: auto;}* Unless you are wanting embeddedvideos like your YouTubes or yourVimeos to scale.
  21. 21. http://fitvidsjs.com
  22. 22. <script src="path/to/jquery.min.js"></script><script src="path/to/jquery.fitvids.js"></script><script> $(document).ready(function(){ // Target your .container, .wrapper, .post, etc. $("#thing-with-videos").fitVids(); });</script> http://fitvidsjs.com
  23. 23. THE RETINA DISPLAYPROBLEM-O #rwdimg
  24. 24. WHY DON’T WE ASKTHE BROWSER? (cc) flic.kr/p/vUBHv
  25. 25. Mozilla/1.0 (Win3.1)http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  26. 26. Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  27. 27. 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
  28. 28. 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
  29. 29. “ 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
  30. 30. FEATURE TESTINGvs. BROWSER SNIFFING123
  31. 31. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
  32. 32. 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
  33. 33. 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/
  34. 34. 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) { ... }
  35. 35. (cc) flic.kr/p/8Lo5Gk
  36. 36. BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
  37. 37. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3
  38. 38. 72 PPIHAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  39. 39. 72 points-per-inch =72 pixels-per-inch
  40. 40. 96 PPIIF A WINDOWS USER
  41. 41. 72 points-per-inchx [1+(1/3)]= 96 PPI
  42. 42. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μmgoo.gl/zpkFy
  43. 43. 240 14472 PPI
  44. 44. “ [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
  45. 45. 72 PPI
  46. 46. 240
  47. 47. RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
  48. 48. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth
  49. 49. SPEED TESTSHINDER SPEED,USER EXPERIENCE (cc) flic.kr/p/4DziUN
  50. 50. “ 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
  51. 51. “ 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
  52. 52. Speed test imagehttps://github.com/adamdbradley/foresight.js
  53. 53. Speed test image +50khttps://github.com/adamdbradley/foresight.js
  54. 54. 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
  55. 55. IMGGIMME THAT OLD SCHOOL123
  56. 56. IMGGIMME THAT OLD SCHOOL1 .htaccess23
  57. 57. 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
  58. 58. Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" /> 4+ 8+
  59. 59. “ ...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/
  60. 60. http://adaptive-images.com/
  61. 61. ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
  62. 62. IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture> and/or srcset3
  63. 63. 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/
  64. 64. <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/
  65. 65. ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
  66. 66. @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
  67. 67. @srcset standard?http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.htmlhttp://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
  68. 68. IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture>3 HiSRC
  69. 69. 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>
  70. 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>
  71. 71. 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>
  72. 72. SERIES OF CHECKS TOFIND OUT RESPONSIVEPATH FOR IMAGES...
  73. 73. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...http://davidbcalhoun.com/2010/using-navigator-connection-android
  74. 74. Check pixel density...$.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  75. 75. Force speed test +50khttps://github.com/adamdbradley/foresight.js
  76. 76. LESS THAN 4G MEANSMOBILE IMAGES LEFTIN PLACE
  77. 77. BETWEEN 4G &300 Kbps MEANSREGULAR DESKTOPIMAGES SWAPPED IN
  78. 78. FAST SPEED & HIGHDENSITY, RETINAIMAGES SWAPPED INhttps://github.com/crdeutsch/hisrc/tree/v2
  79. 79. 2 TRICK PONY
  80. 80. CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
  81. 81. http://mediaqueri.es/
  82. 82. 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) { ... }
  83. 83. Single pixel GIF
  84. 84. Single pixel GIF
  85. 85. Single pixel GIF
  86. 86. Single pixel GIF
  87. 87. 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/
  88. 88. Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==, 17+ 9+ 11.6+ 5+ 8+
  89. 89. Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: http://example.com/spg.gif, 17+ 9+ 11.6+ 5+ 6+
  90. 90. 2 APPROACHES,1 SIMPLE SOLUTION. https://github.com/teleject/hisrc
  91. 91. 2 APPROACHES,1 SIMPLE SOLUTION.HEART WEB DESIGN https://github.com/teleject/hisrc
  92. 92. http://css-tricks.com/which-responsive-images-solution-should- you-use/
  93. 93. WORKAROUNDS &TRICKS123 (cc) flic.kr/p/64fGf6
  94. 94. WORKAROUNDS &TRICKS1 background-size: auto23 (cc) flic.kr/p/64fGf6
  95. 95. http://fittextjs.com/
  96. 96. 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+
  97. 97. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 (cc) flic.kr/p/64fGf6
  98. 98. Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  99. 99. PNG 16kb SVG 7kb17+ 9+ 11.6+ 5+ 9+
  100. 100. 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>
  101. 101. 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
  102. 102. http://raphaeljs.com/
  103. 103. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 font-based solutions (cc) flic.kr/p/64fGf6
  104. 104. “ ...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.”
  105. 105. Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
  106. 106. http://css-tricks.com/examples/IconFont/
  107. 107. 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>
  108. 108. https://github.com/blog/1106-say-hello-to-octicons
  109. 109. https://github.com/blog/1106-say-hello-to-octicons https://github.com/styleguide/css/7.0
  110. 110. http://symbolset.com/
  111. 111. IMGGIMME THAT NEW SCHOOL123
  112. 112. IMGGIMME THAT NEW SCHOOL1 simple design for users23 #rwdimg
  113. 113. IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 #rwdimg
  114. 114. IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 same, several formats #rwdimg
  115. 115. #rwdimg
  116. 116. THANK YOU!CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmSThe Non Breaking Space Podcast - http://nonbreakingspace.tv/Online, live RWD Summit on Aug. 28th - http://RWDSummit.com/Online, live UX Web Summit on Sept. 26th - http://UXWebSummit.com/& use “HEWEBAR” code 20% off for both events.

×