[wcatx] Adaptive Images in Responsive Web Design

1,419 views

Published on

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,419
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

[wcatx] Adaptive Images in Responsive Web Design

  1. 1. #WCATX2013ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGNCHRISTOPHER SCHMITT @teleject
  2. 2. CHRISTOPHER SCHMITT@teleject
  3. 3. @telejecthttp://CSSsummit.com/
  4. 4. @telejecthttp://cssdevconf.com/
  5. 5. @telejecthttp://dwmgbook.com/
  6. 6. @telejecthttp://nonbreakingspace.tv/
  7. 7. WHY DON’T WE ASKTHE BROWSER?(cc) flic.kr/p/vUBHv
  8. 8. alert("User-agent header sent: " + navigator.userAgent);
  9. 9. alert("User-agent header sent: " + navigator.userAgent);
  10. 10. Mozilla/1.0 (Win3.1)http://www.useragentstring.com/(cc) flic.kr/p/vUBHv
  11. 11. Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)(cc) flic.kr/p/vUBHvhttp://www.useragentstring.com/
  12. 12. Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3(cc) flic.kr/p/vUBHvhttp://www.useragentstring.com/
  13. 13. 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
  14. 14. FEATURE TESTINGvs. BROWSER SNIFFING123
  15. 15. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
  16. 16. A scripting approachvar myWidth = 0, myHeight = 0;if( typeof( window.innerWidth ) == number ) {//Non-IEmyWidth = window.innerWidth;myHeight = window.innerHeight;} else if( document.documentElement &&( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {//IE 6+ in standards compliant modemyWidth = document.documentElement.clientWidth;myHeight = document.documentElement.clientHeight;}http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
  17. 17. 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/
  18. 18. 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) { ... }
  19. 19. (cc) flic.kr/p/8Lo5Gk
  20. 20. (cc) flic.kr/p/8Lo5Gk
  21. 21. BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
  22. 22. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3
  23. 23. 72PPIHAS SERVED US WELL(cc) flic.kr/p/6tjjRP
  24. 24. 72 points-per-inch =72 pixels-per-inch
  25. 25. 96PPIIF A WINDOWS USER
  26. 26. 72 points-per-inchx [1+(1/3)]= 96 PPI
  27. 27. 78μmgoo.gl/zpkFy78μm“RETINA” DISPLAYS300ppi at 12 inches from the eyes
  28. 28. [In 2013, Intel sees theirproduct line] offer a higherresolution experience than atop-of-the-line 1080p HDTV.”“http://liliputing.com/2012/04/intel-retina-laptop-desktop-displays-coming-in-2013.html
  29. 29. 72 PPI
  30. 30. 240
  31. 31. 240 PPI
  32. 32. 240 PPI
  33. 33. 72 PPI
  34. 34. RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
  35. 35. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth
  36. 36. (cc) flic.kr/p/4DziUNSPEED TESTSHINDER SPEED,USER EXPERIENCE
  37. 37. Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“(cc) flic.kr/p/4DziUN
  38. 38. Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“But, Christopher, you onlyhave to test it once.”“(cc) flic.kr/p/4DziUN
  39. 39. Speed test imagehttps://github.com/adamdbradley/foresight.js
  40. 40. Speed test image+50khttps://github.com/adamdbradley/foresight.js
  41. 41. Native speed test// @Modernizrs network-connection.jsconnection = navigator.connection || {type: 0 }, // polyfillisSlowConnection = connection.type == 3|| connection.type == 4| /^[23]g$/.test(connection.type);http://davidbcalhoun.com/2010/using-navigator-connection-android
  42. 42. IMGGIMME THAT OLD SCHOOL123
  43. 43. 1 .htaccess23IMGGIMME THAT OLD SCHOOL
  44. 44. 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 Imageshttps://github.com/filamentgroup/Responsive-Images
  45. 45. Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />8+4+
  46. 46. ...the server has no way toknow what resolution theclient’s device is, so it can’tsend the appropriately sizedembeded images.”“http://mattwilcox.net/archive/entry/id/1053/
  47. 47. http://adaptive-images.com/
  48. 48. ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
  49. 49. 1 .htaccess2 <picture> and/or srcset3GIMME THAT OLD SCHOOLIMG
  50. 50. 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/
  51. 51. <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 initialsource element. --><noscript><img src="small.jpg" alt="A giant stone face at The Bayontemple in Angkor Thom, Cambodia"></noscript></picture>http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/
  52. 52. ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
  53. 53. @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
  54. 54. 1 .htaccess2 <picture>3 HiSRCGIMME THAT OLD SCHOOLIMG
  55. 55. 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>
  56. 56. 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>
  57. 57. 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>
  58. 58. 2 TRICK PONY
  59. 59. CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
  60. 60. http://mediaqueri.es/
  61. 61. 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) { ... }
  62. 62. Single pixel GIF
  63. 63. Single pixel GIF
  64. 64. Single pixel GIF
  65. 65. Single pixel GIF
  66. 66. $.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
  67. 67. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==,8+5+9+ 11.6+17+Single pixel GIF
  68. 68. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: http://example.com/spg.gif,6+5+9+ 11.6+17+Single pixel GIF
  69. 69. 2 APPROACHES,1 SIMPLE SOLUTION.https://github.com/teleject/hisrc
  70. 70. WORKAROUNDSTRICKS123&(cc) flic.kr/p/64fGf6
  71. 71. WORKAROUNDSTRICKS1 background-size: auto23&(cc) flic.kr/p/64fGf6
  72. 72. http://fittextjs.com/
  73. 73. 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+
  74. 74. WORKAROUNDSTRICKS1 background-size: auto2 SVG3&(cc) flic.kr/p/64fGf6
  75. 75. SVG
  76. 76. Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  77. 77. PNG 16kbSVG 7kb9+5+9+ 11.6+17+
  78. 78. Clown Car SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMidmeet"><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
  79. 79. Modernizr checkif(!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
  80. 80. WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf6
  81. 81. ...if you use <metacharset="utf-8"> (you shouldbe for HTML5), you’re addingcommon Unicode characterslike and ✆, and you don’tneed a specific font’s version...just copy and paste them intoyour HTML.”“
  82. 82. Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
  83. 83. http://css-tricks.com/examples/IconFont/
  84. 84. http://fontello.com/
  85. 85. 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>
  86. 86. WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf64 compressed JPEGs
  87. 87. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion
  88. 88. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion
  89. 89. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion!" ←↑
  90. 90. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion! ↙" ← ←↗ ↑ ↖↑ ↖
  91. 91. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion↑ ↗← " "↙ ! ↘! ↘
  92. 92. (cc) flic.kr/p/64fGf6
  93. 93. 446kb < 8,755.2kb(cc) flic.kr/p/64fGf60% vs 100%
  94. 94. Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kbExtraLarge1024x1536 2x 1,745kbExtraLarge512x768 1x 503kbLarge640x960 2x 746kbLarge320x480 1x 223kbMedium500x750 2x 485kbMedium250x375 1x 145kb
  95. 95. Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kbExtraLarge1024x1536 2x 1,745kbExtraLarge512x768 1x 503kbLarge640x960 2x 746kbLarge320x480 1x 223kbMedium500x750 2x 485kbMedium250x375 1x 145kb
  96. 96. <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 initialsource element. --><noscript><img src="small.jpg" alt="A giant stone face at The Bayontemple in Angkor Thom, Cambodia"></noscript></picture>http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/
  97. 97. <img src="rock-climber.jpg" alt="" />One Image, One IMG
  98. 98. (cc) flic.kr/p/64fGf6EXTREMELYCOMPRESSED PROBLEMS
  99. 99. IMGGIMME THAT NEW SCHOOL123
  100. 100. IMGGIMME THAT NEW SCHOOL123simple design for users#rwdimg1
  101. 101. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshake#rwdimg2
  102. 102. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshakesame, several formats#rwdimg3
  103. 103. #rwdimg
  104. 104. #rwdimg
  105. 105. #rwdimg
  106. 106. #rwdimg
  107. 107. #rwdimg
  108. 108. #rwdimg
  109. 109. #rwdimg
  110. 110. #rwdimg
  111. 111. #rwdimg<link rel="shortcut icon" href="/assets/favicon.ico" />
  112. 112. #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" />
  113. 113. #rwdimg
  114. 114. THANK YOU!CHRISTOPHER SCHMITT @telejectThe Non Breaking Space Podcast - http://nonbreakingspace.tv/

×