• Save
[drupalcampatx] Adaptive Images in Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

[drupalcampatx] Adaptive Images in Responsive Web Design

on

  • 1,245 views

 

Statistics

Views

Total Views
1,245
Views on SlideShare
1,154
Embed Views
91

Actions

Likes
1
Downloads
3
Comments
0

2 Embeds 91

https://twitter.com 75
http://eventifier.co 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

[drupalcampatx] Adaptive Images in Responsive Web Design Presentation Transcript

  • 1. #DRUPALCAMPATXADAPTIVE IMAGESIN RESPONSIVE WEB DESIGNCHRISTOPHER SCHMITT @teleject
  • 2. CHRISTOPHER SCHMITT@teleject
  • 3. @telejecthttp://CSSsummit.com/
  • 4. @telejecthttp://cssdevconf.com/
  • 5. @telejecthttp://dwmgbook.com/
  • 6. @telejecthttp://nonbreakingspace.tv/
  • 7. WHY DON’T WE ASKTHE BROWSER?(cc) flic.kr/p/vUBHv
  • 8. alert("User-agent header sent: " + navigator.userAgent);
  • 9. alert("User-agent header sent: " + navigator.userAgent);
  • 10. Mozilla/1.0 (Win3.1)http://www.useragentstring.com/(cc) flic.kr/p/vUBHv
  • 11. Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)(cc) flic.kr/p/vUBHvhttp://www.useragentstring.com/
  • 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. 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. FEATURE TESTINGvs. BROWSER SNIFFING123
  • 15. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
  • 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. 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. 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. (cc) flic.kr/p/8Lo5Gk
  • 20. BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
  • 21. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3
  • 22. 72PPIHAS SERVED US WELL(cc) flic.kr/p/6tjjRP
  • 23. 72 points-per-inch =72 pixels-per-inch
  • 24. 96PPIIF A WINDOWS USER
  • 25. 72 points-per-inchx [1+(1/3)]= 96 PPI
  • 26. 78μmgoo.gl/zpkFy78μm“RETINA” DISPLAYS300ppi at 12 inches from the eyes
  • 27. [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
  • 28. 72 PPI
  • 29. 240
  • 30. 240 PPI
  • 31. 240 PPI
  • 32. 72 PPI
  • 33. 1
  • 34. 1111
  • 35. RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
  • 36. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth
  • 37. (cc) flic.kr/p/4DziUNSPEED TESTSHINDER SPEED,USER EXPERIENCE
  • 38. Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“(cc) flic.kr/p/4DziUN
  • 39. 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
  • 40. Speed test imagehttps://github.com/adamdbradley/foresight.js
  • 41. Speed test image+50khttps://github.com/adamdbradley/foresight.js
  • 42. 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
  • 43. IMGGIMME THAT OLD SCHOOL123
  • 44. 1 .htaccess23IMGGIMME THAT OLD SCHOOL
  • 45. 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
  • 46. Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />8+4+
  • 47. ...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/
  • 48. http://adaptive-images.com/
  • 49. ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
  • 50. 1 .htaccess2 <picture> and/or srcset3GIMME THAT OLD SCHOOLIMG
  • 51. 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/
  • 52. <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/
  • 53. ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
  • 54. @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
  • 55. 1 .htaccess2 <picture> and/or srcset3 HiSRCGIMME THAT OLD SCHOOLIMG
  • 56. 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
  • 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. 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>
  • 59. 2 TRICK PONY
  • 60. CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
  • 61. http://mediaqueri.es/
  • 62. 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) { ... }
  • 63. Single pixel GIF
  • 64. Single pixel GIF
  • 65. Single pixel GIF
  • 66. Single pixel GIF
  • 67. $.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
  • 68. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==,8+5+9+ 11.6+17+Single pixel GIF
  • 69. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: http://example.com/spg.gif,6+5+9+ 11.6+17+Single pixel GIF
  • 70. http://css-tricks.com/which-responsive-images-solution-should-you-use/
  • 71. WORKAROUNDSTRICKS123&(cc) flic.kr/p/64fGf6
  • 72. WORKAROUNDSTRICKS1 background-size: 100%23&(cc) flic.kr/p/64fGf6
  • 73. http://fittextjs.com/
  • 74. 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+
  • 75. WORKAROUNDSTRICKS1 background-size: auto2 SVG3&(cc) flic.kr/p/64fGf6
  • 76. SVG
  • 77. Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  • 78. PNG 16kbSVG 7kb9+5+9+ 11.6+17+
  • 79. http://petercollingridge.appspot.com/svg-optimiser
  • 80. 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
  • 81. 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
  • 82. http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/
  • 83. 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
  • 84. WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf6
  • 85. ...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.”“
  • 86. Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
  • 87. http://css-tricks.com/examples/IconFont/
  • 88. http://fontello.com/
  • 89. http://icomoon.io
  • 90. 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>
  • 91. WORKAROUNDSTRICKS1 background-size: 100%2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf64 compressed JPEGs
  • 92. 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
  • 93. 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!" ←↑
  • 94. 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! ↙" ← ←↗ ↑ ↖↑ ↖
  • 95. 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↑ ↗← " "↙ ! ↘! ↘
  • 96. (cc) flic.kr/p/64fGf6
  • 97. 446kb < 8,755.2kb(cc) flic.kr/p/64fGf60% vs 100%
  • 98. 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
  • 99. 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
  • 100. <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/
  • 101. <img src="rock-climber.jpg" alt="" />One Image, One IMG
  • 102. (cc) flic.kr/p/64fGf6EXTREMELYCOMPRESSED PROBLEMS
  • 103. http://codepen.io/teleject/pen/KlzBe
  • 104. <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
  • 105. svg {background-size: 100% 100%;background-repeat: no-repeat;}http://codepen.io/teleject/pen/KlzBe
  • 106. 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
  • 107. 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;}}@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
  • 108. @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
  • 109. http://codepen.io/teleject/pen/KlzBe
  • 110. http://codepen.io/teleject/pen/KlzBe
  • 111. http://codepen.io/teleject/pen/KlzBe
  • 112. COMBO MOVEDON’T BLAME THE PLAYER123No additional HTTP request1Min. # of images = 2No JavaScripthttp://codepen.io/teleject/pen/KlzBe
  • 113. IMGGIMME THAT NEW SCHOOL123
  • 114. IMGGIMME THAT NEW SCHOOL123simple design for users#rwdimg1
  • 115. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshake#rwdimg2
  • 116. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshakesame, several formats#rwdimg3
  • 117. #rwdimg
  • 118. #rwdimg
  • 119. #rwdimg
  • 120. #rwdimg
  • 121. #rwdimg
  • 122. #rwdimg
  • 123. #rwdimg
  • 124. #rwdimg<link rel="shortcut icon" href="/assets/favicon.ico" />
  • 125. #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" />
  • 126. #rwdimg
  • 127. THANK YOU!CHRISTOPHER SCHMITT @telejectThe Non Breaking Space Podcast - http://nonbreakingspace.tv/