[peachpit] Adaptive Images in Responsive Web Design

1,694 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,694
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[peachpit] Adaptive Images in Responsive Web Design

  1. 1. @PEACHPIT WEBINAR ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CHRISTOPHER SCHMITT @teleject 1
  2. 2. CHRISTOPHER SCHMITT @teleject 2
  3. 3. @teleject 3
  4. 4. @teleject http://nonbreakingspace.tv/ 4
  5. 5. @teleject http://cssdevconf.com/ 5
  6. 6. @teleject http://artifactconf.com/ 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. y x 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv 16
  17. 17. alert("User-agent header sent: " + navigator.userAgent); 17
  18. 18. alert("User-agent header sent: " + navigator.userAgent); 18
  19. 19. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv 19
  20. 20. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) (cc) flic.kr/p/vUBHv http://www.useragentstring.com/ 20
  21. 21. 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/ 21
  22. 22. 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 22
  23. 23. http://telejec.tv/12uYOC4 23
  24. 24. FEATURE TESTINGvs. BROWSER SNIFFING 1 2 3 24
  25. 25. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 3 25
  26. 26. 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 26
  27. 27. 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/ 27
  28. 28. 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) { ... } 28
  29. 29. (cc) flic.kr/p/8Lo5Gk 29
  30. 30. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS 30
  31. 31. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 31
  32. 32. 72PPIHAS SERVED US WELL (cc) flic.kr/p/6tjjRP 32
  33. 33. 72 points-per-inch = 72 pixels-per-inch 33
  34. 34. 96PPI IF A WINDOWS USER 34
  35. 35. 72 points-per-inch x [1+(1/3)] = 96 PPI 35
  36. 36. 78μm goo.gl/zpkFy 78μm “RETINA” DISPLAYS300ppi at 12 inches from the eyes 36
  37. 37. 37
  38. 38. [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 38
  39. 39. 72 PPI 39
  40. 40. 240 40
  41. 41. 240 PPI 41
  42. 42. 240 PPI 42
  43. 43. 72 PPI 43
  44. 44. 44
  45. 45. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES 45
  46. 46. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth 46
  47. 47. (cc) flic.kr/p/4DziUN SPEED TESTS HINDER SPEED, USER EXPERIENCE 47
  48. 48. 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 48
  49. 49. 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 49
  50. 50. Speed test image https://github.com/adamdbradley/foresight.js 50
  51. 51. Speed test image +50k https://github.com/adamdbradley/foresight.js 51
  52. 52. 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 52
  53. 53. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth 53
  54. 54. IMGGIMME THAT OLD SCHOOL 1 2 3 54
  55. 55. 1 .htaccess 2 3 IMGGIMME THAT OLD SCHOOL 55
  56. 56. 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 56
  57. 57. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 8+4+ 57
  58. 58. ...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/ 58
  59. 59. http://adaptive-images.com/ 59
  60. 60. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG> 60
  61. 61. 1 .htaccess 2 <picture> and/or srcset 3 GIMME THAT OLD SCHOOL IMG 61
  62. 62. 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/ 62
  63. 63. <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/ 63
  64. 64. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG> 64
  65. 65. @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 65
  66. 66. https://www.webkit.org/blog/2910/improved-support-for- high-resolution-displays-with-the-srcset-image-attribute/ 66
  67. 67. 1 .htaccess 2 <picture> and/or srcset 3 HiSRC GIMME THAT OLD SCHOOL IMG 67
  68. 68. 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> https://github.com/teleject/hisrc 68
  69. 69. 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> 69
  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> 70
  71. 71. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES... 71
  72. 72. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android 72
  73. 73. $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; Check pixel density... https://gist.github.com/2428356 73
  74. 74. +50k https://github.com/adamdbradley/foresight.js Force speed test 74
  75. 75. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE 75
  76. 76. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN 76
  77. 77. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2 77
  78. 78. 2 TRICK PONY 78
  79. 79. CSS IS CORE. WE USE CSS MEDIA QUERIES FOR DESIGN 79
  80. 80. http://mediaqueri.es/ 80
  81. 81. 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) { ... } 81
  82. 82. Single pixel GIF 82
  83. 83. Single pixel GIF 83
  84. 84. Single pixel GIF 84
  85. 85. Single pixel GIF 85
  86. 86. $.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 86
  87. 87. $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http:// example.com/spg.gif', 6+5+9+ 11.6+17+ Single pixel GIF 87
  88. 88. $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==', 8+5+9+ 11.6+17+ Single pixel GIF 88
  89. 89. http://css-tricks.com/which- responsive-images-solution- should-you-use/ 89
  90. 90. 24+http://css-tricks.com/which- responsive-images-solution- should-you-use/ 90
  91. 91. http://css-tricks.com/which- responsive-images-solution- should-you-use/ ALL SOLUTIONS HAVE 2x HTTP REQUESTS + JAVASCRIPT 91
  92. 92. WORKAROUNDSTRICKS in CONTEXT 1 2 3 & (cc) flic.kr/p/64fGf6 92
  93. 93. WORKAROUNDSTRICKS 1 background-size: 100% 2 3 & (cc) flic.kr/p/64fGf6 93
  94. 94. http://fittextjs.com/ 94
  95. 95. 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+ 95
  96. 96. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6 96
  97. 97. SVG 97
  98. 98. 98
  99. 99. 99
  100. 100. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element 100
  101. 101. PNG 16kb SVG 7kb 9+5+9+ 11.6+17+ 101
  102. 102. http://petercollingridge.appspot.com/svg-optimiser 102
  103. 103. https://github.com/svg/svgo-gui 103
  104. 104. https://github.com/svg/svgo-gui 104
  105. 105. 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 105
  106. 106. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG (Clown Car) 3 & (cc) flic.kr/p/64fGf6 106
  107. 107. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 107
  108. 108. ...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.” “ 108
  109. 109. 109
  110. 110. 110
  111. 111. 111
  112. 112. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/ 112
  113. 113. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/ avg file size 40kb/per font 113
  114. 114. http://css-tricks.com/examples/IconFont/ 114
  115. 115. http://fontello.com/ 115
  116. 116. http://icomoon.io 116
  117. 117. 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> 117
  118. 118. WORKAROUNDSTRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 4 compressed JPEGs 118
  119. 119. 119
  120. 120. 120
  121. 121. 121
  122. 122. 122
  123. 123. 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 123
  124. 124. 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 ! " ← ↑ 124
  125. 125. 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 ! ↙ " ← ← ↗ ↑ ↖ ↑ ↖ 125
  126. 126. 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 ↑ ↗ ← " " ↙ ! ↘ ! ↘ 126
  127. 127. (cc) flic.kr/p/64fGf6 127
  128. 128. 128
  129. 129. 446kb < 8,755.2kb (cc) flic.kr/p/64fGf6 0% vs 100% 129
  130. 130. 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 130
  131. 131. 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 131
  132. 132. <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/ 132
  133. 133. <img src="rock-climber.jpg" alt="" /> One Image, One IMG 133
  134. 134. (cc) flic.kr/p/64fGf6 EXTREMELYCOMPRESSED PROBLEMS 134
  135. 135. 135
  136. 136. 136
  137. 137. 137
  138. 138. Clown Car SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(images/huge.png);} } </style> </svg> https://github.com/estelle/clowncar 138
  139. 139. Clown Car SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(images/huge.png);} } </style> </svg> https://github.com/estelle/clowncar 139
  140. 140. 140
  141. 141. http://coding.smashingmagazine.com/2013/06/02/clown- car-technique-solving-for-adaptive-images-in-responsive- web-design/ 141
  142. 142. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style> </svg> http://codepen.io/teleject/pen/KlzBe Combo Move: SVG 142
  143. 143. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style> <foreignObject> <!--[if lte IE 8]> <img src="../images/mobile-first.png" width="375" height="231" alt="put alt attribute text here"/> <![endif]--> </foreignObject> </svg> http://codepen.io/teleject/pen/KlzBe 143
  144. 144. svg { background-size: 100% 100%; background-repeat: no-repeat; } http://codepen.io/teleject/pen/KlzBe Combo Move: SVG 144
  145. 145. svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg { background-image: url("http://s.cdpn.io/168/pic-Medium-375x231- @1x-72ppi.jpg"); outline: green solid 5px; } } http://codepen.io/teleject/pen/KlzBe Combo Move: SVG 145
  146. 146. @media screen and (min-width: 401px), screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1.75) { svg { background-image: url("http://s.cdpn.io/168/pic- Extreme-2276x1400-72ppi.jpg"); outline: red solid 5px; } } http://codepen.io/teleject/pen/KlzBe Combo Move: Compressed JPEG 146
  147. 147. @media screen and (max-width: 400px) { svg { width: 375px; height: 231px; } } @media screen and (min-width: 401px) { svg { width: 750px; height: 462px; } } svg { outline: 5px solid black; } http://codepen.io/teleject/pen/KlzBe Combo Move: CSS 147
  148. 148. http://codepen.io/teleject/pen/KlzBe 148
  149. 149. http://codepen.io/teleject/pen/KlzBe 149
  150. 150. http://codepen.io/teleject/pen/KlzBe 150
  151. 151. COMBO MOVEDON’T BLAME THE PLAYER 1 2 3 No additional HTTP request1 # of images = 2 No JavaScript http://codepen.io/teleject/pen/KlzBe 151
  152. 152. 152
  153. 153. 153
  154. 154. IMGGIMME THAT NEW SCHOOL 1 2 3 #rwdimg 154
  155. 155. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users #rwdimg 1 155
  156. 156. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake #rwdimg 2 156
  157. 157. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake same, several formats #rwdimg 3 157
  158. 158. #rwdimg 158
  159. 159. #rwdimg 159
  160. 160. #rwdimg 160
  161. 161. #rwdimg 161
  162. 162. #rwdimg 162
  163. 163. #rwdimg 163
  164. 164. #rwdimg 164
  165. 165. #rwdimg <link rel="shortcut icon" href="/assets/favicon.ico" /> Favicon 165
  166. 166. #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" /> Mobile iOS Bookmarks 166
  167. 167. #rwdimg 167
  168. 168. THANK YOU!CHRISTOPHER SCHMITT @teleject The Non Breaking Space Podcast - http://nonbreakingspace.tv/ 168

×