Improving Responsive Web Design Process 2016
1 like519 views
The document discusses the evolution and optimization strategies for responsive web design, emphasizing mobile-first and content-first approaches. It highlights the importance of performance as a user experience metric, proposing techniques like image optimization, CSS methodologies, and responsive typography to enhance site efficiency. Additionally, it covers the need for adaptability in design workflows and encourages ongoing learning and user-centric design practices.
Improving Responsive Web Design Process 2016
- 2. @chumillas IMPROVING THE RESPONSIVE WEB DESIGN PROCESS IN 2016 Cristina Chumillas @chumillas
- 3. @chumillas @chumillas Cristina Chumillas DESIGNER AND FRONTEND DEVELOPER AT YMBRA ckrina
- 4. “Mobile to overtake fixed Internet access by 2014” 2008 by Mary Meeker
- 8. @chumillas Get into the browser quickly! Content-First Mobile-First Responsive prototypes
- 10. @chumillas Content-First Mobile-First Responsive prototypes Real content (extreme cases)
- 11. @chumillas Atomic Design and components Content-First Mobile-First Responsive prototypes Real content (extreme cases)
- 12. Performance
- 13. @chumillas Performance = UX 4” 16% 64% smartphone users page weight 2015 2,2Mb average 2,2Mb average
- 15. @chumillas 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
- 16. @chumillas “Perceived performance: your most critical metric” Immediate User-flow (human-interaction) Limit attention span 1s 1-5s 5-10s Performance = UX
- 17. @chumillas 238ms 300ms 452ms 497ms 651ms HTML logo header image other images footer background other JS CSS jQuery Modernizr
- 18. @chumillas 687ms 825ms 895ms 954ms 1.25ms other images footer background other JS 3rd party stuff (Analytics, Ads, etc) fonts FOIT
- 20. @chumillas Optimize image files Concatenate text files Minimify text files Compress text files Cache everywhere TIPS
- 22. @chumillas CSS Methodologies · OOCSS · BEM · SMACSS
- 24. @chumillas Reduce page size Reuse CSS CSS Methodologies
- 25. @chumillas Reduce page size Increase page rendering speed Reuse CSS CSS Methodologies
- 26. @chumillas .element-name--last {} .box:nth-last-child(-n+1) .title {} Reuse CSS Faster CSS rendering CSS Methodologies
- 27. @chumillas Reuse CSS Faster CSS rendering Large scale ready Helps you to figure out what your design is made of Helps you getting started in a project CSS Methodologies
- 28. @chumillas Living document of code that details all the elements of your site. Living styleguides
- 29. @chumillas Give faster build times for new sections & pages Standardize the CSS, keeping it small & quick to load Design consistency is easier to maintain Living styleguides
- 30. “Fifty Shades of Grey in CSS” by @pistenprinz
- 31. Fixed-pixel vs relative units
- 32. @chumillas Layouts benefits from relative units. 16px = = 1em 1rem
- 33. @chumillas 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
- 37. @chumillas Decide on user’s distance from the screen
- 38. @chumillas Title Title 14px 16px60 rems 22 rems 40-80 characters 40-60 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? 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?
- 39. @chumillas 200KB TOTAL 5% 10KB FONTS Open Sans Regular 38KB TTF TrueType font EOT Embedded Open Type WOFF/WOFF2 Web Open Font Format SVG Scalable Vector Graphics font 20KB 23KB 119KB
- 40. @chumillas WEB FONT FORMATS EOT IE 8-11 IE 9-11 Edge Firefox Chrome Safari Opera iOS Android OTF/TTF WOFF WOFF2 SVG https://creativemarket.com/blog/the-missing-guide-to-font-formats
- 41. @chumillas FOITFOUT “Flash of Unstyled Text” “Flash of Invisible Text” Browsers used to display a fallback font in the font stack until the custom one loaded. Browsers 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.
- 42. @chumillas • Powered by CSS, no JS • Limited to open source fonts • Accessible • Too big fonts • No external plugins • No common format @font-face Fonts.com Google fonts Typekit PROS: CONS:
- 43. @chumillas • Large selection • Monthly fees • Exclusive fonts • Limited to their library • Language support @font-face Fonts.com Google fonts Typekit PROS: CONS:
- 44. @chumillas • Powered by CSS, no JS • Limited choice • Accessible • Not exclusive design • Cached & fast • Easy implementation PROS: CONS: @font-face Fonts.com Google fonts Typekit
- 45. @chumillas • Largest fonts library • Premium service • Accessible • Cached & fast • Easy implementation PROS: CONS: @font-face Fonts.com Google fonts Typekit
- 46. @chumillas Readability Correct font size depending on container TIPS
- 47. @chumillas Readability Use less fonts Correct font size depending on container Do you need them? TIPS
- 49. @chumillas Readability Use less fonts Use modern font formats Correct font size depending on container Do you need them? Reduce the page weight TIPS
- 50. Images
- 51. @chumillas JPG PNG 24-bitPNG 8-bit
- 52. @chumillas Browsers request images asynchronously Images too big for the device 61% website bytes FACTS
- 53. @chumillas The aim is to deliver the highest quality image supported and nothing more.
- 54. @chumillas 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.”> (just changing resolutions)
- 55. @chumillas Adapted images (changing images)
- 56. @chumillas <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 (changing images)
- 57. @chumillas Responsive Images in D8 Picture in D7 In core (disabled by default) 1.5x, 2x, ... (hight resolution) Lazy load in D7, contrib in D8
- 59. @chumillas Crop API • Image widget crop • Focal point
- 60. @chumillas Crop API • Image widget crop • Focal point
- 61. @chumillas Crop API • Image widget crop • Focal point
- 64. @chumillas Apple AppleT H I S I S A N A D . T H I S I S A N A D .
- 65. @chumillas Create one field for each image Prepare each picture/image URLs in a variable Create the image styles Print it in a custom template
- 66. @chumillas ReSrc, thumbr.io, responsive.io Cloudinary Picturefill Scaling based on the targeted end result Scaling based on url. Scaling based on media-queries. ... Non Drupal solutions
- 67. @chumillas SVGs Scaling Scales to any size without losing clarity based on the targeted end result 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
- 69. @chumillas Connection Setup Starts printing Request Sent Waiting response Download Default behavior HTML CSS JS 1 JS 2 JS 2 JS 3 JS 3
- 70. @chumillas Default behavior <html> <head> <link rel=”stylesheet” href=”styles.css”/> <script src=”javascript.js”></script> </head> <body> <div>Page content</div> </body> </html>
- 71. @chumillas Async <html> <head> <link rel=”stylesheet” href=”styles.css”/> <script src=”javascript.js” async></script> </head> <body> <div>Page content</div> </body> </html>
- 72. @chumillas 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 Async i
- 73. @chumillas 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 async has priority i i
- 74. @chumillas <html> <head> <link rel=”stylesheet” href=”styles.css”/> <script src=”javascript.js”></script> <script src=”javascript.js” async/defer></script> <script> // JavaScript source code goes here. </script> </head> <body> <!-- Page content --> <script src=”javascript.js”></script> </body> </html> Asynchronous loading
- 76. @chumillas 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
- 77. @chumillas Use SVG rather than icon fonts Style your HTML with CSS Test your site without JavaScript Make your site performant Test in Opera Mini TIPS
- 78. @chumillas Progressive enhancement Basic content and functionality of a web page to any browser or Internet connection Enhanced version advanced browser software or greater bandwidth
- 79. Beyond the Mouse TOUCH & KEYBOARD EVENTS
- 80. @chumillas • 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
- 81. @chumillas Save hover for shortcuts Keep in touch 57x45px safe space thumbfinger 72x45px
- 82. @chumillas Gestures: don’t override system defaults Save hover for shortcuts Keep in touch
- 83. RWD patterns
- 84. @chumillas are recurring solutions that solve common design problems. Design patterns
- 85. @chumillas • Menus • Tabs • Jumping in hierarchy • Content Navigation patterns - breadcrumbs - fat footer - ... - Carousel - Tag cloud - Pagination - ... ui-patterns.com
- 86. @chumillas Navigation patterns Forms • Password Strength Meter • Captcha • WYSIWYG • Calendar Picker • Input Feedback • Inplace Editor • Drag and drop • Good Defaults • ... ui-patterns.com
- 87. @chumillas Navigation patterns Forms Dealing with data ui-patterns.com • Tables • Search (autocomplete, search filters) • Formatting data (FAQs, Dashboard,...) • Images (Slideshow, Gallery, Zoom...) duckduckgo.com/about
- 88. @chumillas Navigation patterns Forms Dealing with data Shopping Progressive Disclosure Onboarding Social, Grids, ... ui-patterns.com
- 89. Conclusions
- 90. @chumillas Keep adapting your workflow Keep in weight Take the most of new technologies Keep the user in mind Be prepared for the uncertain
- 93. @chumillas JOIN US FOR CONTRIBUTION SPRINTS First Time Sprinter Workshop - 9:00-12:00 - Room Wicklow 2A Mentored Core Sprint - 9:00-18:00 - Wicklow Hall 2B General Sprints - 9:00 - 18:00 - Wicklow Hall 2A
- 95. WHAT DID YOU THINK? Evaluate this session events.drupal.org/dublin2016/schedule THANK YOU!