CHRISTOPHER SCHMITT            @teleject                 ADAPTIVE IMAGES                 IN RESPONSIVE WEB DESIGN         ...
Friday, October 5, 12
Friday, October 5, 12
Friday, October 5, 12
Friday, October 5, 12
WHY DON’T WE ASK                        THE BROWSER?                                     (cc) flic.kr/p/vUBHvFriday, Octobe...
Mozilla/1.0 (Win3.1)                        http://www.useragentstring.com/                                               ...
Mozilla/1.0 (Win3.1)                        Mozilla/1.22 (compatible;                        MSIE 2.0; Windows 95)        ...
Mozilla/5.0 (Macintosh; Intel Mac                        OS X 10_7_3) AppleWebKit/                        534.55.3 (KHTML,...
Mozilla/5.0 (Macintosh; Intel Mac                        OS X 10_7_3) AppleWebKit/                        534.55.3 (KHTML,...
FEATURE TESTING                        vs. BROWSER SNIFFING                        1                        2             ...
FEATURE TESTING                        vs. BROWSER SNIFFING                        1    Browser width                     ...
A scripting approach                        var myWidth = 0, myHeight = 0;                        if( typeof( window.inner...
The jQuery approach                        // returns width of browser viewport                        $(window).width(); ...
CSS media queries                        // default, mobile-1st CSS rules devices go here                        @media sc...
(cc) flic.kr/p/8Lo5GkFriday, October 5, 12
(cc) flic.kr/p/8Lo5GkFriday, October 5, 12
BROWSER WIDTH                        GIVES US FRAME,                        NOT THE CANVASFriday, October 5, 12
FEATURE TESTING                        vs. BROWSER SNIFFING                        1    Browser width                     ...
Friday, October 5, 12                        72            PPI                        HAS SERVED US WELL                  ...
72 points-per-inch =                        72 pixels-per-inchFriday, October 5, 12
Friday, October 5, 12                        96            PPI                        IF A WINDOWS USER
72 points-per-inch                        x [1+(1/3)]                        = 96 PPIFriday, October 5, 12
“RETINA” DISPLAYS                        300ppi at 12 inches from the eyes                                                ...
240                            144                        72 PPIFriday, October 5, 12
“         [In 2013, Intel sees their                        product line] offer a higher                        resolution ...
72 PPIFriday, October 5, 12
240Friday, October 5, 12
240 PPIFriday, October 5, 12
240 PPIFriday, October 5, 12
72 PPIFriday, October 5, 12
RETINA DISPLAYS =                        LARGER IMAGES,                        LARGER FILE SIZESFriday, October 5, 12
FEATURE TESTING                        vs. BROWSER SNIFFING                        1    Browser width                     ...
SPEED TESTS                        HINDER SPEED,                        USER EXPERIENCE                                   ...
“         Testing for speed of an                        internet connection is like                        stepping in fr...
“         Testing for speed of an                        internet connection is like                        stepping in fr...
Speed test image                        https://github.com/adamdbradley/foresight.jsFriday, October 5, 12
Speed test image                                      +50k                        https://github.com/adamdbradley/foresigh...
Native speed test              // @Modernizrs network-connection.js              connection = navigator.connection || {   ...
IMG                        GIMME THAT OLD SCHOOL                        1                        2                        ...
IMG                        GIMME THAT OLD SCHOOL                        1    .htaccess                        2           ...
Filament .htaccess             # Responsive Images             # Mobile-First images that scale responsively and responsib...
Filament .htaccess             <script src="responsiveimgs.js"></script>             <img src="sample-content/running-sml....
“         ...the server has no way to                        know what resolution the                        client’s devi...
http://adaptive-images.com/Friday, October 5, 12
ADD .HTACCESS, JS,                        PHP 5, GD lib*, &                        THEN <IMG>Friday, October 5, 12
IMG                        GIMME THAT OLD SCHOOL                        1    .htaccess                        2    <pictur...
media queries in HTML         <video controls>           <source type="video/mp4" src="video/windowsill_small.mp4"        ...
<picture> patch             <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">              <...
ADD IF-ELSE HTML, JS,                        BORROW <VIDEO>, &                        THEN <IMG>Friday, October 5, 12
@srcset standard?             <h1><img alt="The Breakfast Combo"                 src="banner.jpeg"                 srcset=...
IMG                        GIMME THAT OLD SCHOOL                        1    .htaccess                        2    <pictur...
Set, forget it HiSRC         <script src="https://ajax.googleapis.com/ajax/         libs/jquery/1.7.2/jquery.min.js"></scr...
Set, forget it HiSRC         <div class="hisrc">          <img src="halloween-mobile-1st.png"            data-1x="hallowee...
Set, forget it HiSRC         <div class="hisrc">          <img src="halloween-mobile-1st.png"            data-1x="hallowee...
SERIES OF CHECKS TO                        FIND OUT RESPONSIVE                        PATH FOR IMAGES...Friday, October 5,...
DO NATIVE SPEED                        TEST FOR MOBILE                        DEVICES FIRST...      http://davidbcalhoun.c...
Check pixel density...         $.hisrc.devicePixelRatio = 1;          if(window.devicePixelRatio !==          undefined) { ...
Force speed test                                      +50k                        https://github.com/adamdbradley/foresigh...
LESS THAN 4G MEANS                        MOBILE IMAGES LEFT                        IN PLACEFriday, October 5, 12
BETWEEN 4G &                        300 Kbps MEANS                        REGULAR DESKTOP                        IMAGES SW...
FAST SPEED & HIGH                        DENSITY, RETINA                        IMAGES SWAPPED IN                        h...
2 TRICK PONYFriday, October 5, 12
CSS IS CORE.                        WE USE CSS MEDIA                        QUERIES FOR DESIGNFriday, October 5, 12
http://mediaqueri.es/Friday, October 5, 12
CSS media queries                        // default, mobile-1st CSS rules devices go here                        @media sc...
Single pixel GIFFriday, October 5, 12
Single pixel GIFFriday, October 5, 12
Single pixel GIFFriday, October 5, 12
Single pixel GIFFriday, October 5, 12
Single pixel GIF             $.hisrc.defaults = {                 useTransparentGif: true,         http://www.w3.org/commu...
Single pixel GIF             $.hisrc.defaults = {                 useTransparentGif: true,                 transparentGifS...
Single pixel GIF             $.hisrc.defaults = {                 useTransparentGif: true,                 transparentGifS...
2 APPROACHES,                   1 SIMPLE SOLUTION.                        https://github.com/teleject/hisrcFriday, October...
2 APPROACHES,                   1 SIMPLE SOLUTION.                   HEART WEB DESIGN                        https://githu...
WORKAROUNDS &                        TRICKS                        1                        2                        3    ...
WORKAROUNDS &                        TRICKS                        1   background-size: auto                        2     ...
http://fittextjs.com/Friday, October 5, 12
Friday, October 5, 12
Friday, October 5, 12
background-size: 100%         <a href="example.com/link">Download on Github</a>         .download a {            padding: ...
WORKAROUNDS &                        TRICKS                        1   background-size: auto                        2   SV...
Native SVG     http://caniuse.com/#search=SVG%20in%20HTML%20img%20elementFriday, October 5, 12
PNG 16kb                                   SVG 7kb                        17+   9+    11.6+   5+   9+Friday, October 5, 12
HTML5 Boilerplate              <!doctype html>              <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"    ...
jQuery check              var checkBrowser =               $(html).hasClass(lt-ie9);              <div class="svgswap">   ...
http://raphaeljs.com/Friday, October 5, 12
WORKAROUNDS &                        TRICKS                        1   background-size: auto                        2   SV...
“         ...if you use <meta                        charset="utf-8"> (you should                        be for HTML5), yo...
Font-based RWD         http://ilovetypography.com/2012/04/11/designing-type-systems/Friday, October 5, 12
http://css-tricks.com/examples/IconFont/Friday, October 5, 12
Font-based icons         <style>          [data-icon]:before {            font-family: icon-font;            content: attr...
Friday, October 5, 12
IMG                        GIMME THAT NEW SCHOOL                        1                        2                        ...
IMG                        GIMME THAT NEW SCHOOL                        1    simple design for users                      ...
IMG                        GIMME THAT NEW SCHOOL                        1    simple design for users                      ...
IMG                        GIMME THAT NEW SCHOOL                        1    simple design for users                      ...
“         JavaScript has solved a lot of                        our past problems, so it’s                        human na...
#rwdimgFriday, October 5, 12
#rwdimgFriday, October 5, 12
#rwdimgFriday, October 5, 12
#rwdimgFriday, October 5, 12
#rwdimgFriday, October 5, 12
#rwdimgFriday, October 5, 12
<link rel="shortcut icon" href="/assets/favicon.ico" />                                         #rwdimgFriday, October 5, 12
<link rel="apple-touch-icon-precomposed" sizes="144x144"           href="apple-touch-icon-144x144-precomposed.png" />     ...
#rwdimgFriday, October 5, 12
THANK YOU!         CHRISTOPHER SCHMITT                                      @teleject                           http://goo...
THANK YOU!         CHRISTOPHER SCHMITT                                      @teleject                           http://goo...
Upcoming SlideShare
Loading in...5
×

[convergefl] Adaptive Images in Responsive Web Design

1,503

Published on

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

No Downloads
Views
Total Views
1,503
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

[convergefl] Adaptive Images in Responsive Web Design

  1. 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN CONVERGEFL 2012Friday, October 5, 12
  2. 2. Friday, October 5, 12
  3. 3. Friday, October 5, 12
  4. 4. Friday, October 5, 12
  5. 5. Friday, October 5, 12
  6. 6. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHvFriday, October 5, 12
  7. 7. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHvFriday, October 5, 12
  8. 8. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHvFriday, October 5, 12
  9. 9. 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://www.useragentstring.com/ (cc) flic.kr/p/vUBHvFriday, October 5, 12
  10. 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 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHvFriday, October 5, 12
  11. 11. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3Friday, October 5, 12
  12. 12. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 3Friday, October 5, 12
  13. 13. 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/browserwindowFriday, October 5, 12
  14. 14. 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/Friday, October 5, 12
  15. 15. 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) { ... }Friday, October 5, 12
  16. 16. (cc) flic.kr/p/8Lo5GkFriday, October 5, 12
  17. 17. (cc) flic.kr/p/8Lo5GkFriday, October 5, 12
  18. 18. BROWSER WIDTH GIVES US FRAME, NOT THE CANVASFriday, October 5, 12
  19. 19. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3Friday, October 5, 12
  20. 20. Friday, October 5, 12 72 PPI HAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  21. 21. 72 points-per-inch = 72 pixels-per-inchFriday, October 5, 12
  22. 22. Friday, October 5, 12 96 PPI IF A WINDOWS USER
  23. 23. 72 points-per-inch x [1+(1/3)] = 96 PPIFriday, October 5, 12
  24. 24. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μm goo.gl/zpkFyFriday, October 5, 12
  25. 25. 240 144 72 PPIFriday, October 5, 12
  26. 26. “ [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.htmlFriday, October 5, 12
  27. 27. 72 PPIFriday, October 5, 12
  28. 28. 240Friday, October 5, 12
  29. 29. 240 PPIFriday, October 5, 12
  30. 30. 240 PPIFriday, October 5, 12
  31. 31. 72 PPIFriday, October 5, 12
  32. 32. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZESFriday, October 5, 12
  33. 33. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 BandwidthFriday, October 5, 12
  34. 34. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUNFriday, October 5, 12
  35. 35. “ 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/4DziUNFriday, October 5, 12
  36. 36. “ 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/4DziUNFriday, October 5, 12
  37. 37. Speed test image https://github.com/adamdbradley/foresight.jsFriday, October 5, 12
  38. 38. Speed test image +50k https://github.com/adamdbradley/foresight.jsFriday, October 5, 12
  39. 39. 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-androidFriday, October 5, 12
  40. 40. IMG GIMME THAT OLD SCHOOL 1 2 3Friday, October 5, 12
  41. 41. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 3Friday, October 5, 12
  42. 42. 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-ImagesFriday, October 5, 12
  43. 43. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 4+ 8+Friday, October 5, 12
  44. 44. “ ...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/Friday, October 5, 12
  45. 45. http://adaptive-images.com/Friday, October 5, 12
  46. 46. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>Friday, October 5, 12
  47. 47. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3Friday, October 5, 12
  48. 48. 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/Friday, October 5, 12
  49. 49. <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)"> <!-- <source src="extralarge.jpg" media="(min-width: 1000px)"> --> <source src="extralarge.jpg" media="(min-width: 1000px)"> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://wil.to/picturefill/Friday, October 5, 12
  50. 50. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>Friday, October 5, 12
  51. 51. @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-srcsetFriday, October 5, 12
  52. 52. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> 3 HiSRCFriday, October 5, 12
  53. 53. 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>Friday, October 5, 12
  54. 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>Friday, October 5, 12
  55. 55. 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>Friday, October 5, 12
  56. 56. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...Friday, October 5, 12
  57. 57. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-androidFriday, October 5, 12
  58. 58. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356Friday, October 5, 12
  59. 59. Force speed test +50k https://github.com/adamdbradley/foresight.jsFriday, October 5, 12
  60. 60. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACEFriday, October 5, 12
  61. 61. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED INFriday, October 5, 12
  62. 62. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2Friday, October 5, 12
  63. 63. 2 TRICK PONYFriday, October 5, 12
  64. 64. CSS IS CORE. WE USE CSS MEDIA QUERIES FOR DESIGNFriday, October 5, 12
  65. 65. http://mediaqueri.es/Friday, October 5, 12
  66. 66. 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) { ... }Friday, October 5, 12
  67. 67. Single pixel GIFFriday, October 5, 12
  68. 68. Single pixel GIFFriday, October 5, 12
  69. 69. Single pixel GIFFriday, October 5, 12
  70. 70. Single pixel GIFFriday, October 5, 12
  71. 71. 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/Friday, October 5, 12
  72. 72. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==, 17+ 9+ 11.6+ 5+ 8+Friday, October 5, 12
  73. 73. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: http:// example.com/spg.gif, 17+ 9+ 11.6+ 5+ 6+Friday, October 5, 12
  74. 74. 2 APPROACHES, 1 SIMPLE SOLUTION. https://github.com/teleject/hisrcFriday, October 5, 12
  75. 75. 2 APPROACHES, 1 SIMPLE SOLUTION. HEART WEB DESIGN https://github.com/teleject/hisrcFriday, October 5, 12
  76. 76. WORKAROUNDS & TRICKS 1 2 3 (cc) flic.kr/p/64fGf6Friday, October 5, 12
  77. 77. WORKAROUNDS & TRICKS 1 background-size: auto 2 3 (cc) flic.kr/p/64fGf6Friday, October 5, 12
  78. 78. http://fittextjs.com/Friday, October 5, 12
  79. 79. Friday, October 5, 12
  80. 80. Friday, October 5, 12
  81. 81. 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+Friday, October 5, 12
  82. 82. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 (cc) flic.kr/p/64fGf6Friday, October 5, 12
  83. 83. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20elementFriday, October 5, 12
  84. 84. PNG 16kb SVG 7kb 17+ 9+ 11.6+ 5+ 9+Friday, October 5, 12
  85. 85. 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>Friday, October 5, 12
  86. 86. 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-swapFriday, October 5, 12
  87. 87. http://raphaeljs.com/Friday, October 5, 12
  88. 88. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 font-based solutions (cc) flic.kr/p/64fGf6Friday, October 5, 12
  89. 89. “ ...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.”Friday, October 5, 12
  90. 90. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/Friday, October 5, 12
  91. 91. http://css-tricks.com/examples/IconFont/Friday, October 5, 12
  92. 92. 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>Friday, October 5, 12
  93. 93. Friday, October 5, 12
  94. 94. IMG GIMME THAT NEW SCHOOL 1 2 3Friday, October 5, 12
  95. 95. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 3 #rwdimgFriday, October 5, 12
  96. 96. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 #rwdimgFriday, October 5, 12
  97. 97. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 same, several formats #rwdimgFriday, October 5, 12
  98. 98. “ JavaScript has solved a lot of our past problems, so it’s human nature to beseech her to save us again.” http://www.alistapart.com/articles/mo-pixels-mo-problems/Friday, October 5, 12
  99. 99. #rwdimgFriday, October 5, 12
  100. 100. #rwdimgFriday, October 5, 12
  101. 101. #rwdimgFriday, October 5, 12
  102. 102. #rwdimgFriday, October 5, 12
  103. 103. #rwdimgFriday, October 5, 12
  104. 104. #rwdimgFriday, October 5, 12
  105. 105. <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimgFriday, October 5, 12
  106. 106. <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" /> #rwdimgFriday, October 5, 12
  107. 107. #rwdimgFriday, October 5, 12
  108. 108. THANK YOU! CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS The Non Breaking Space Podcast - http://nonbreakingspace.tv/Friday, October 5, 12
  109. 109. THANK YOU! CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS The Non Breaking Space Podcast - http://nonbreakingspace.tv/Friday, October 5, 12

×