Improving the Responsive Web Design Process in 2016 Cristina - PowerPoint PPT Presentation

Improving the Responsive Web Design Process in 2016

Cristina Chumillas DESIGNER AND FRONTEND DEVELOPER AT YMBRA ckrina @chumillas

“Mobile to overtake fixed Internet access by 2014” 2008 by Mary Meeker

Modern Design processes Content-First Mobile-First Design @chumillas #DrupalCampEs

Modern Design processes Content-First Mobile-First Design Static compositions @chumillas #DrupalCampEs

Modern Design processes Content-First Mobile-First Design Responsive prototypes Get into the browser quickly! @chumillas #DrupalCampEs

Modern Design processes Content-First Mobile-First Design Responsive prototypes Lorem ipsum @chumillas #DrupalCampEs

Modern Design processes Content-First Mobile-First Design Responsive prototypes Real content (extreme cases) @chumillas #DrupalCampEs

Modern Design processes Content-First Mobile-First Design Responsive prototypes Real content (extreme cases) Atomic Design and components @chumillas #DrupalCampEs

Performance @chumillas #DrupalCampEs

Performance Performance = UX 2,2Mb 4” 16% average 64% page weight smartphone 2015 users @chumillas #DrupalCampEs

Performance 2s Fast 3G 200KB (1.6Mb) 5KB 125KB 7KB 33KB 20KB 10KB HTML Images CSS JS VIDEO Fonts We have to decide the performance budget http://www.performancebudget.io @chumillas #DrupalCampEs

Performance Performance = UX “Perceived performance: your most critical metric” 1s Immediate User-flow (human-interaction) 1-5s 5-10s Attention span @chumillas #DrupalCampEs

Performance 238ms 300ms 452ms 497ms 651ms HTML CSS jQuery Modernizr logo header image other images other JS footer background @chumillas #DrupalCampEs

Performance 687ms 825ms 895ms 954ms 1.25ms other images footer background other JS fonts 3rd party stuff (Analytics, Ads, etc) @chumillas #DrupalCampEs

@chumillas #DrupalCampEs

Performance Optimize image files Concatenate text files Minimify text files Compress text files Cache everywhere @chumillas #DrupalCampEs

CSS structuring and optimization @chumillas #DrupalCampEs

CSS structuring and optimization CSS Methodologies CSS Methodologies · OOCSS · BEM · SMACSS @chumillas #DrupalCampEs

CSS structuring and optimization CSS Methodologies Reuse CSS @chumillas #DrupalCampEs

CSS structuring and optimization CSS Methodologies Reuse CSS Reduce page size @chumillas #DrupalCampEs

CSS structuring and optimization CSS Methodologies Reuse CSS Reduce page size Increase page rendering speed @chumillas #DrupalCampEs

CSS structuring and optimization CSS Methodologies Reuse CSS Faster CSS rendering .box:nth-last-child(-n+1) .title {} .element-name--last {} @chumillas #DrupalCampEs

CSS structuring and optimization CSS Methodologies 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. @chumillas #DrupalCampEs

CSS structuring and optimization Living Styleguides Living document of code that details all the elements of your site. #DrupalCampEs

CSS structuring and optimization Living Styleguides Faster build times for new sections and pages Standardize the CSS, keeping it small and quick to load Design consistency is easier to maintain @chumillas #DrupalCampEs

Fixed-pixel vs relative units @chumillas #DrupalCampEs

Fixed-pixel vs relative units Layouts benefit from relative units. 16px 1em 1rem @chumillas #DrupalCampEs

Fixed-pixel vs relative units rem em 1.1 x the base 16px 1.1 x the base 17,6px (1.1 x the previous) 1.1 x the base 19,36px (1.1 x the previous) @chumillas #DrupalCampEs

Viewport Sized Units vh vw vmax @chumillas #DrupalCampEs

Responsive Typography @chumillas #DrupalCampEs

Responsive Typography User’s distance from the screen @chumillas #DrupalCampEs

Responsive Typography Title 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 14px 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? 16px 22-60 rems 40-80 characters @chumillas #DrupalCampEs

Responsive Typography Open Sans Regular 38KB ttf 18KB woff2 5% 200KB 10KB @chumillas #DrupalCampEs

Responsive Typography FOUT, FOIT FOUT FOIT “Flash of Unstyled Text” “Flash of Invisible Text” Browsers used to display a They started to detect if text fallback font in the font stack was set in a custom font that until the custom one loaded. hasn’t loaded yet, and made it invisible until the font did load @chumillas #DrupalCampEs

Responsive Typography Readability Correct font size depending on container @chumillas #DrupalCampEs

Responsive Typography Readability Correct font size depending on container Use less fonts Do you need them? @chumillas #DrupalCampEs

@chumillas #DrupalCampEs

Responsive Typography Readability Correct font size depending on container Use less fonts Do you need them? Use modern font formats Reduce the page weight @chumillas #DrupalCampEs

Images @chumillas #DrupalCampEs

Images JPG PNG 8-bit PNG 24-bit @chumillas #DrupalCampEs

Images Browsers request images asynchronously Images too big for the device 61% website bytes @chumillas #DrupalCampEs

Responsive images The aim is to deliver the highest quality image supported and nothing more. @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.”> @chumillas #DrupalCampEs

Responsive images Adapted 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> @chumillas #DrupalCampEs

Responsive images Adapted images @chumillas #DrupalCampEs

Responsive images Non Drupal solutions Scaling based on the targeted end result ReSrc, thumbr.io, responsive.io Scaling based on url. Cloudinary Scaling based on media-queries. Picturefill ... @chumillas #DrupalCampEs

SVGs Scalable Vector Graphics 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 Future-proof Easy to make and edit Highly compressible Manipulatable with CSS & JS * @chumillas #DrupalCampEs

Asynchronous loading @chumillas #DrupalCampEs

Asynchronous loading Default behavior Starts printing HTML CSS JS 1 JS 2 JS 3 JS 2 Download JS 3 Waiting response Request Sent Connection Setup @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> @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> @chumillas #DrupalCampEs

Asynchronous loading Async While the JavaScript file is loading, parsing the HTML document can continue JS execution no longer has to wait for CSS i You can’t guarantee the order of JS execution i 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 @chumillas #DrupalCampEs

Asynchronous loading Defer <script src=”javascript.js” defer></script> Deferred scripts are executed only after the HTML page has been parsed Deferred scripts will execute in the order they appear in the document ou can’t guarantee the order of JS execution i It has the potential to interfere with the rendering of the page i async has priority @chumillas #DrupalCampEs