Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Improving the Responsive Web Design Process in 2016

474 views

Published on

It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory.

The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability.

In this session reviewed tools, techniques and concepts to improve our projects:
- Performance and best practices
- CSS structuring and optization (BEM, SMACSS, etc.)
- Fixed-Pixel vs rem, em and %
- Responsive images. Drupal non-Drupal solutions and SVGs
- Asynchronous Javascript loading
- Typography in a responsive environment and FOUT, FOIT effects
- How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help.
- Beyond the Mouse: Touch and keyboard events
- Using RWD patterns

Published in: Internet
  • Be the first to comment

Improving the Responsive Web Design Process in 2016

  1. 1. Improving the Responsive Web Design Process in 2016
  2. 2. @chumillas Cristina Chumillas DESIGNER AND FRONTEND DEVELOPER AT YMBRA ckrina
  3. 3. “Mobile to overtake fixed Internet access by 2014” 2008 by Mary Meeker
  4. 4. @chumillas #DrupalCampEs Modern Design processes Content-First Mobile-First Design
  5. 5. @chumillas #DrupalCampEs Modern Design processes Static compositions Content-First Mobile-First Design
  6. 6. @chumillas #DrupalCampEs Modern Design processes Content-First Mobile-First Design Responsive prototypes Get into the browser quickly!
  7. 7. @chumillas #DrupalCampEs Modern Design processes Content-First Mobile-First Design Responsive prototypes Lorem ipsum
  8. 8. @chumillas #DrupalCampEs Modern Design processes Content-First Mobile-First Design Responsive prototypes Real content (extreme cases)
  9. 9. @chumillas #DrupalCampEs Atomic Design and components Modern Design processes Content-First Mobile-First Design Responsive prototypes Real content (extreme cases)
  10. 10. @chumillas #DrupalCampEs Performance
  11. 11. @chumillas #DrupalCampEs Performance Performance = UX 4” 16% 64% smartphone users page weight 2015 2,2Mb average
  12. 12. @chumillas #DrupalCampEs Performance 5KB HTML 125KB Images 7KB CSS 33KB JS 20KB VIDEO 10KB Fonts 2s Fast 3G (1.6Mb) 200KB http://www.performancebudget.io We have to decide the performance budget
  13. 13. @chumillas #DrupalCampEs Performance Performance = UX “Perceived performance: your most critical metric” Immediate User-flow (human-interaction) Attention span 1s 1-5s 5-10s
  14. 14. @chumillas #DrupalCampEs Performance 238ms 300ms 452ms 497ms 651ms HTML logo header image other images footer background other JS CSS jQuery Modernizr
  15. 15. @chumillas #DrupalCampEs Performance 687ms 825ms 895ms 954ms 1.25ms other images footer background other JS 3rd party stuff (Analytics, Ads, etc) fonts
  16. 16. @chumillas #DrupalCampEs
  17. 17. @chumillas #DrupalCampEs Performance Optimize image files Concatenate text files Minimify text files Compress text files Cache everywhere
  18. 18. @chumillas #DrupalCampEs CSS structuring and optimization
  19. 19. @chumillas #DrupalCampEs CSS structuring and optimization CSS Methodologies CSS Methodologies · OOCSS · BEM · SMACSS
  20. 20. @chumillas #DrupalCampEs Reuse CSS CSS structuring and optimization CSS Methodologies
  21. 21. @chumillas #DrupalCampEs Reuse CSS Reduce page size CSS structuring and optimization CSS Methodologies
  22. 22. @chumillas #DrupalCampEs Reuse CSS Reduce page size Increase page rendering speed CSS structuring and optimization CSS Methodologies
  23. 23. @chumillas #DrupalCampEs Reuse CSS Faster CSS rendering CSS structuring and optimization CSS Methodologies .element-name--last {} .box:nth-last-child(-n+1) .title {}
  24. 24. @chumillas #DrupalCampEs Reuse CSS Faster CSS rendering Large scale ready Helps you figure out what your design is made of. Helps you getting started in a project. CSS structuring and optimization CSS Methodologies
  25. 25. #DrupalCampEs Living document of code that details all the elements of your site. CSS structuring and optimization Living Styleguides
  26. 26. @chumillas #DrupalCampEs Faster build times for new sections and pages Standardize the CSS, keeping it small and quick to load Design consistency is easier to maintain CSS structuring and optimization Living Styleguides
  27. 27. @chumillas #DrupalCampEs Fixed-pixel vs relative units
  28. 28. @chumillas #DrupalCampEs Fixed-pixel vs relative units Layouts benefit from relative units. 16px 1em 1rem
  29. 29. @chumillas #DrupalCampEs Fixed-pixel vs relative units 1.1 x the base 16px 17,6px (1.1 x the previous) 19,36px (1.1 x the previous) 1.1 x the base 1.1 x the base emrem
  30. 30. @chumillas #DrupalCampEs Viewport Sized Units vw vh vmax
  31. 31. @chumillas #DrupalCampEs Responsive Typography
  32. 32. @chumillas #DrupalCampEs Responsive Typography User’s distance from the screen
  33. 33. @chumillas #DrupalCampEs Responsive Typography Title 14px 16px 22-60 rems 40-80 characters Occusapicim dit doluptassum que labo. Em sam ilictumPore quisqui officitaspit volenis eturio est venim ipis ex eturepe llandit eum, untium, quostot aturia sim sam corendanihit fugianis delitio sandae volupta quate re nos aut et dolendi tatium, offic te nos est aliat que perum et eaquatu riberibus mo cus. Peruntio. Nequiam et quo eum lab ipsa cusantiberro maxim faccus am et voluptatem voluptae pa cuptas et quae simagnim facienis et et ese pa sanis aut autem asi unt ommodis aut fugitasped qui omnimag nisimil laborum sunt adit, voluptatur rero opti aris aut rerum eos eatint, vitatem. Rovid quid ma aut maximi, oditat lamus imusdantiis ex excessi tatque poriatur?
  34. 34. @chumillas #DrupalCampEs Responsive Typography 5% 10KB 200KB 38KB ttf 18KB woff2 Open Sans Regular
  35. 35. @chumillas #DrupalCampEs Responsive Typography FOUT FOIT “Flash of Unstyled Text” “Flash of Invisible Text” Browsers used to display a fallback font in the font stack until the custom one loaded. They started to detect if text was set in a custom font that hasn’t loaded yet, and made it invisible until the font did load FOUT, FOIT
  36. 36. @chumillas #DrupalCampEs Responsive Typography Readability Correct font size depending on container
  37. 37. @chumillas #DrupalCampEs Responsive Typography Readability Use less fonts Correct font size depending on container Do you need them?
  38. 38. @chumillas #DrupalCampEs
  39. 39. @chumillas #DrupalCampEs Responsive Typography Readability Use less fonts Use modern font formats Correct font size depending on container Do you need them? Reduce the page weight
  40. 40. @chumillas #DrupalCampEs Images
  41. 41. @chumillas #DrupalCampEs Images JPG PNG 24-bitPNG 8-bit
  42. 42. @chumillas #DrupalCampEs Images Browsers request images asynchronously Images too big for the device website bytes 61%
  43. 43. @chumillas #DrupalCampEs Responsive images The aim is to deliver the highest quality image supported and nothing more.
  44. 44. @chumillas #DrupalCampEs Responsive images Scaled images <img srcset=”image-large.jpg 1920w, image-medium.jpg 960w, image-small.jpg 480w” sizes=”50vw” src=”quilt_2/detail/medium.jpg” alt=”Detail text.”>
  45. 45. @chumillas #DrupalCampEs Responsive images <picture title=”Image title”> <source srcset=”image-big.jpg 1x, image-big2x.jpg 2x” media=”(min-width: 0px) and (max-width: 29.99em)”> <source srcset=”image-big.jpg 1x, image-big2x.jpg 2x” media=”(min-width: 30em)”> <img srcset=”image-big.jpg 180w”> </picture> Adapted images
  46. 46. @chumillas #DrupalCampEs Responsive images Adapted images
  47. 47. @chumillas #DrupalCampEs Responsive images Non Drupal solutions ReSrc, thumbr.io, responsive.io Cloudinary Picturefill Scaling based on the targeted end result Scaling based on url. Scaling based on media-queries. ...
  48. 48. @chumillas #DrupalCampEs SVGs Scaling based on the targeted end result Scales to any size without losing clarity Looks great on retina displays Design control like interactivity and filters Scalable Vector Graphics Future-proof Easy to make and edit Manipulatable with CSS & JS * Highly compressible
  49. 49. @chumillas #DrupalCampEs Asynchronous loading
  50. 50. @chumillas #DrupalCampEs Asynchronous loading Connection Setup Starts printing Request Sent Waiting response Download Default behavior HTML CSS JS 1 JS 2 JS 2 JS 3 JS 3
  51. 51. @chumillas #DrupalCampEs Asynchronous loading Default behavior <html> <head> <link rel=”stylesheet” href=”styles.css”/> <script src=”javascript.js”></script> </head> <body> <div>Page content</div> </body> </html>
  52. 52. @chumillas #DrupalCampEs Asynchronous loading Async <html> <head> <link rel=”stylesheet” href=”styles.css”/> <script src=”javascript.js” async></script> </head> <body> <div>Page content</div> </body> </html>
  53. 53. @chumillas #DrupalCampEs While the JavaScript file is loading, parsing the HTML document can continue JS execution no longer has to wait for CSS You can’t guarantee the order of JS execution The script shouldn’t use document.write() The document parser doesn’t pause while the script is loading, the browser has no idea where any content added by document.write() should go. Doesn’t block the DOMContentLoaded event Asynchronous loading Async i i
  54. 54. @chumillas #DrupalCampEs Asynchronous loading Defer <script src=”javascript.js” defer></script> Deferred scripts are executed only after the HTML page has been parsed It has the potential to interfere with the rendering of the page Deferred scripts will execute in the order they appear in the document ou can’t guarantee the order of JS execution async has priority i i
  55. 55. @chumillas #DrupalCampEs <html> <head> <link rel=”stylesheet” href=”styles.css”/> <script src=”javascript.js”></script> <script src=”javascript.js” async></script> <script> /* JavaScript source code goes here... */ </script> </head> <body> <div>Page content</div> <script src=”javascript.js”></script> </body> </html> Asynchronous loading
  56. 56. @chumillas #DrupalCampEs Proxy-based browsers
  57. 57. @chumillas #DrupalCampEs Proxy-based browsers Reduce bandwidth usage by compressing resources on a proxy server before sending it to the client browser. India, Indonesia, Nigeria, Bangladesh and South Africa Opera Mini users 250 million
  58. 58. @chumillas #DrupalCampEs Use SVG rather than icon fonts Style your HTML with CSS Test your site without JavaScript Make your site performant Test in Opera Mini Proxy-based browsers
  59. 59. @chumillas #DrupalCampEs Progressive enhancement Basic content and functionality of a web page to any browser or Internet connection Enhanced version advanced browser software or greater bandwidth Proxy-based browsers Accessibility
  60. 60. @chumillas #DrupalCampEs Beyond the Mouse Touch and keyboard events
  61. 61. @chumillas #DrupalCampEs Beyond the mouse • Be accessible in browsers where a mouse pointer may not exist. • Don’t assume touch will be used, but design as if it will be. Save hover for shortcuts Keep in touch Gestures: don’t override them
  62. 62. @chumillas #DrupalCampEs Beyond the mouse Save hover for shortcuts Keep in touch 57x45px safe space thumbfinger 72x45px
  63. 63. @chumillas #DrupalCampEs Beyond the mouse Save hover for shortcuts Keep in touch Gestures: don’t override them
  64. 64. @chumillas #DrupalCampEs RWD patterns and Progressively Disclosure
  65. 65. @chumillas #DrupalCampEs RWD Patterns Navigation patterns UI patterns Grid patterns
  66. 66. @chumillas #DrupalCampEs
  67. 67. Thank you! @chumillas

×