Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Next Steps in Responsive Design

6.408 visualizaciones

Publicado el

Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.
We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.
Responsive Images
Improving Performance
Responsive Typography
Media queries in JavaScript
Layout

Publicado en: Tecnología
  • One word – EXCELLENT! These guys really are pros. I've never seen results like this before. I made £13,870.30 last month and I was in Spain for most of that time. It's incredible how much money you can make from just a few minutes betting each day when you have an expert team at your back. ☺☺☺ https://bit.ly/391WONw
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • make your breasts bigger without surgery! NO CREAMS NO PILLS 100% NATURAL. get info! ✤✤✤ https://dwz1.cc/aRWJhQS6
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • boost your bust. increase your breast size by 2 cups, naturally and without surgery. ➣➣➣ https://dwz1.cc/aRWJhQS6
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sex in your area is here: ❶❶❶ http://bit.ly/369VOVb ❶❶❶
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Dating for everyone is here: ❶❶❶ http://bit.ly/369VOVb ❶❶❶
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Next Steps in Responsive Design

  1. 1. The Next Steps in RWD
  2. 2. Justin Avery @justinavery
  3. 3. ami.responsivedesign.isresponsivedesign.is
  4. 4. 1. Responsive Images 2. Improving Performance 3. Responsive Typography 4. Media queries in JavaScript 5. Layout
  5. 5. #1 Responsive Images
  6. 6. #1 Responsive Images
  7. 7. #1 Responsive Images
  8. 8. #1 Responsive Images
  9. 9. #1 Responsive Images http://moto.oakley.com/
  10. 10. #1 Responsive Images http://www.ricg.org
  11. 11. #1 Responsive Images http://www.ricg.org 1. The kilobyte size of the image we were sending over the wire; 2. The physical size of the image we were sending to high DPI devices; and 3. The image crop in the form of art direction for the particular size of the viewport.
  12. 12. #1 Responsive Images 10kB 20kB 45kB 73kB
  13. 13. #1 Responsive Images 200px 400px 800px 1600px
  14. 14. #1 Responsive Images 300px 400px 800px 1600px 600px 800px 1600px 3200px
  15. 15. #1 Responsive Images http://www.html5rocks.com/en/tutorials/responsive/picture-element/
  16. 16. #1 Responsive Images http://www.html5rocks.com/en/tutorials/responsive/picture-element/
  17. 17. #1 Responsive Images picture/srcset
  18. 18. #1 Responsive Images <img src="horse-350.jpg" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  19. 19. #1 Responsive Images <img src="horse-350.jpg" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  20. 20. #1 Responsive Images <img src="horse-350.jpg" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  21. 21. #1 Responsive Images <img src="horse-350.jpg" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  22. 22. #1 Responsive Images <img src="horse-350.jpg" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  23. 23. #1 Responsive Images <img src="horse-350.jpg" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  24. 24. #1 Responsive Images <img src="horse-350.jpg" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  25. 25. #1 Responsive Images <img src="horse-350.jpg" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  26. 26. #1 Responsive Images <img src="horse-350.jpg" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  27. 27. #1 Responsive Images
  28. 28. #1 Responsive Images
  29. 29. #1 Responsive Images <img src="" srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" sizes="(min-width: 64em) 70vw, (min-width: 37.5em) 95vw, 100vw" alt="A horse" />
  30. 30. #1 Responsive Images Things to consider
  31. 31. CSS Specific Images
  32. 32. @media & background-image
  33. 33. http://caniuse.com/#feat=css-image-set
  34. 34. #1 Responsive Images Basics
  35. 35. #1 Responsive Images • Think about whether you really need to include an image. Is it telling part of the story? Is the image core content, or is it decorative. One less image will mean a faster load time. • Have you optimised images using ImageOptim? • Have you set expire headers for your images on your server or .htaccess file? • PictureFill provides polyfill support for picture.
  36. 36. #1 Responsive Images Advanced
  37. 37. #1 Responsive Images • Lazy Load your images using Lazy Load Plugin jQuery • Use HTMLImageElement.Sizes and HTMLPictureElement for feature detection. This is shipped within Modernizr if you are already using it for feature detection.
  38. 38. #2 Improving Performance
  39. 39. #2 Improving Performance
  40. 40. #2 Improving Performance http://speedcure.com
  41. 41. #2 Improving Performance http://www.sitespeed.io/
  42. 42. #2 Improving Performance https://github.com/addyosmani/grunt-uncss
  43. 43. #2 Improving Performance https://github.com/addyosmani/grunt-uncss
  44. 44. #2 Improving Performance https://unused-css.com
  45. 45. #2 Improving Performance
  46. 46. Critical CSS #2 Improving Performance
  47. 47. #2 Improving Performance
  48. 48. #2 Improving Performance
  49. 49. • Capture all styles visible for the first paint (imagine a screen shot) • Move these into <style> within the <head> • Remove @font-face & background url references • Call CSS with Javascript Asynchronously #2 Improving Performance
  50. 50. <script> function loadCSS( href, before, media ){ "use strict"; var ss = window.document.createElement( "link" ); var ref = before || window.document.getElementsByTagName( "script" )[ 0 ]; var sheets = window.document.styleSheets; ss.rel = "stylesheet"; ss.href = href; ss.media = "only x"; ref.parentNode.insertBefore( ss, ref ); function toggleMedia(){ var defined; for( var i = 0; i < sheets.length; i++ ){ if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){ defined = true; } } if( defined ){ ss.media = media || "all"; } else { setTimeout( toggleMedia ); } } toggleMedia(); return ss; } loadCSS( '/css/main.css' ); </script> <noscript><link href="/css/main.css" rel="stylesheet"></noscript> #2 Improving Performance
  51. 51. <script> function loadCSS( href, before, media ){ "use strict"; var ss = window.document.createElement( "link" ); var ref = before || window.document.getElementsByTagName( "script" )[ 0 ]; var sheets = window.document.styleSheets; ss.rel = "stylesheet"; ss.href = href; ss.media = "only x"; ref.parentNode.insertBefore( ss, ref ); function toggleMedia(){ var defined; for( var i = 0; i < sheets.length; i++ ){ if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){ defined = true; } } if( defined ){ ss.media = media || "all"; } else { setTimeout( toggleMedia ); } } toggleMedia(); return ss; } loadCSS( '/css/main.css' ); </script> <noscript><link href="/css/main.css" rel="stylesheet"></noscript> #2 Improving Performance
  52. 52. } else { setTimeout( toggleMedia ); } } toggleMedia(); return ss; } loadCSS( '/css/main.css' ); </script> <noscript><link href="/css/main.css" rel="stylesheet"></noscript> #2 Improving Performance
  53. 53. #2 Improving Performance https://github.com/filamentgroup/grunt-criticalcss
  54. 54. #2 Improving Performance https://github.com/pocketjoso/penthouse
  55. 55. #2 Improving Performance https://github.com/addyosmani/critical-path-css-demo
  56. 56. #2 Improving Performance http://jonassebastianohlsson.com/criticalpathcssgenerator/
  57. 57. Can also user Sass to create our Critical CSS manually/ automatic. #2 Improving Performance https://css-tricks.com/authoring-critical-fold-css/
  58. 58. #2 Improving Performance https://css-tricks.com/authoring-critical-fold-css/
  59. 59. #2 Improving Performance https://css-tricks.com/authoring-critical-fold-css/
  60. 60. #2 Improving Performance 1. https://github.com/at-import/jacket 2. https://github.com/BPScott/breakup 3. https://gist.github.com/benedfit/46da533805566141c42f
  61. 61. Critical CSS with Wordpress #2 Improving Performance
  62. 62. #2 Improving Performance
  63. 63. Critical CSS with Wordpress #2 Improving Performance
  64. 64. Critical CSS with Wordpress #2 Improving Performance
  65. 65. Basics #2 Improving Performance
  66. 66. • Enable GZIPPing for files & set expire headers for all static content • Lazy Load: a jQuery plugin that loads images when approaching the viewport or after a certain timeframe. #2 Improving Performance
  67. 67. Advanced #2 Improving Performance
  68. 68. • Set up Fastly or Cloudflare. • Enable SPDY for http2 enabled browsers to take advantage of HTTP2 features like parallel http requests instead of synchronous. CloudFlare offer this for paid accounts. • Social Count allows for conditional loading of your Social Icons. • Ajax Include Pattern that will load content snippets from either a data-before, data-after data-replace attribute. #2 Improving Performance
  69. 69. #3 Responsive Typography
  70. 70. #3 Responsive Typography body {font-size: 100%;}
  71. 71. #3 Responsive Typography body {font-size: 100%;} .by-line {font-size: 0.8rem;}
  72. 72. #3 Responsive Typography :lang(de) article { max-width: 30em;}
  73. 73. #3 Responsive Typography FOUT
  74. 74. #3 Responsive Typography http://www.w3.org/blog/CSS/2015/06/22/minutes-new-york-f2f-2015-05-20-iii/ • Resolved: accept font-display-thing-whatever-loading property with four values to be renamed later: block | swap | fallback | optional • block shows blank, swaps in fallback at 3s, swaps in real font whenever it loads • swap shows fallback, swaps in real font whenever it loads • fallback shows fallback, swaps in real font if it loads before 3s • optional shows real font if it loads from cache, otherwise shows fallback; optional allows UA to not continue loading the font for the next time
  75. 75. FontFace Observer #3 Responsive Typography https://github.com/bramstein/fontfaceobserver
  76. 76. FOUT #3 Responsive Typography
  77. 77. #3 Responsive Typography
  78. 78. Heading @mixin #3 Responsive Typography
  79. 79. Headings #3 Responsive Typography
  80. 80. @include heading-1 #3 Responsive Typography
  81. 81. @include heading-1 #3 Responsive Typography
  82. 82. Basics #3 Responsive Typography
  83. 83. • Base your font on 100% • Work in relative EM units • Set your margins to your line-height to maintain vertical rhythm #3 Responsive Typography
  84. 84. Advanced #3 Responsive Typography
  85. 85. • Utilise Basket.js (http://addyosmani.github.io/basket.js/) #3 Responsive Typography
  86. 86. #4 Media Queries in Javascript
  87. 87. #4 Media Queries in Javascript http://www.simplestatemanager.com/ http://wicky.nillia.ms/enquire.js/
  88. 88. matchMedia()
  89. 89. #4 Media Queries in Javascript http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
  90. 90. #4 Media Queries in Javascript http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
  91. 91. getActiveMQ.js #4 Media Queries in Javascript https://gist.github.com/aarongustafson/a0558c185264355df359
  92. 92. getActiveMQ.js #4 Media Queries in Javascript <div id="getActiveMQ-watcher"></div>
  93. 93. #4 Media Queries in Javascript
  94. 94. watchResize() #4 Media Queries in Javascript https://gist.github.com/aarongustafson/4157402#file-watchresize-js
  95. 95. Basics #4 Media Queries in Javascript
  96. 96. • Forget about javascript for different viewports. Provide content and website functions to users in a way they can access it across all viewports. We should never need javascript. #4 Media Queries in Javascript
  97. 97. Advanced #4 Media Queries in Javascript
  98. 98. • Extend getActiveMQ method by using Breakup as a predefined list of media queries and automating the creation of the list of font-families for #getActiveMQ-watcher #4 Media Queries in Javascript https://github.com/BPScott/breakup
  99. 99. #5 Layouts
  100. 100. #5 Layouts The mighty float
  101. 101. #5 Layouts
  102. 102. #5 Layouts
  103. 103. #5 Layouts
  104. 104. #5 Layouts
  105. 105. #5 Layouts
  106. 106. #5 Layouts
  107. 107. #5 Layouts
  108. 108. #5 Layouts
  109. 109. Flexbox for Page Layout #5 Layouts
  110. 110. #5 Layouts
  111. 111. #5 Layouts
  112. 112. #5 Layouts
  113. 113. Basics #5 Layouts
  114. 114. • Set up a basic grid with floats and nth-child. #5 Layouts
  115. 115. Advanced #5 Layouts
  116. 116. • Add sprinkles of flexy-ness • Check out Haydon Pickering’s crazy nth-child adventures (http://alistapart.com/article/quantity-queries-for-css) #5 Layouts
  117. 117. “The ultimate RWD technique is to start off by…
  118. 118. …not using any advanced RWD techniques. That's it. Start from the basics and go from there. Start with structured content and build your way up. Only add a breakpoint when the design breaks and the content dictates it and... that's it.”
  119. 119. Thank you @justinavery

×