Improving the Responsive Web Design Process in 2016

A presentation at Drupalcon Dublin 2016 in September 2016 in Dublin, Ireland by Cristina Chumillas

Slide 1

Slide 1

Slide 2

Slide 2

IMPROVING THE RESPONSIVE WEB DESIGN PROCESS IN 2016 Cristina Chumillas @chumillas @chumillas

Slide 3

Slide 3

Cristina Chumillas DESIGNER AND FRONTEND DEVELOPER AT YMBRA ckrina @chumillas @chumillas

Slide 4

Slide 4

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

Slide 5

Slide 5

Modern Design processes

Slide 6

Slide 6

Content-First Mobile-First @chumillas

Slide 7

Slide 7

Content-First Mobile-First Static compositions @chumillas

Slide 8

Slide 8

Content-First Mobile-First Responsive prototypes Get into the browser quickly! @chumillas

Slide 9

Slide 9

Content-First Mobile-First Responsive prototypes Lorem ipsum @chumillas

Slide 10

Slide 10

Content-First Mobile-First Responsive prototypes Real content (extreme cases) @chumillas

Slide 11

Slide 11

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

Slide 12

Slide 12

Performance

Slide 13

Slide 13

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

Slide 14

Slide 14

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

Slide 20

Slide 20

TIPS Optimize image files Concatenate text files Minimify text files Compress text files Cache everywhere @chumillas

Slide 21

Slide 21

CSS structuring and optimization

Slide 22

Slide 22

CSS Methodologies · OOCSS · BEM · SMACSS @chumillas

Slide 23

Slide 23

CSS Methodologies Reuse CSS @chumillas

Slide 24

Slide 24

CSS Methodologies Reuse CSS Reduce page size @chumillas

Slide 25

Slide 25

CSS Methodologies Reuse CSS Reduce page size Increase page rendering speed @chumillas

Slide 26

Slide 26

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

Slide 27

Slide 27

CSS Methodologies 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 @chumillas

Slide 28

Slide 28

Living styleguides Living document of code that details all the elements of your site. @chumillas

Slide 29

Slide 29

Living styleguides Give faster build times for new sections & pages Standardize the CSS, keeping it small & quick to load Design consistency is easier to maintain @chumillas

Slide 30

Slide 30

“Fifty Shades of Grey in CSS” by @pistenprinz

Slide 31

Slide 31

Fixed-pixel vs relative units

Slide 32

Slide 32

Layouts benefits from relative units.

16px @chumillas

1em 1rem

Slide 33

Slide 33

rem em 1.1 x the base 1.1 x the base 1.1 x the base 16px 17,6px (1.1 x the previous) 19,36px (1.1 x the previous) @chumillas

Slide 34

Slide 34

Viewport Sized Units vh vw vmax @chumillas

Slide 35

Slide 35

Slide 36

Slide 36

Responsive Typography

Slide 37

Slide 37

Decide on user’s distance from the screen @chumillas

Slide 38

Slide 38

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

Slide 39

Slide 39

5% 10KB FONTS 200KB TOTAL @chumillas Open Sans Regular 38KB 20KB 119KB 23KB TTF TrueType font EOT Embedded Open Type SVG Scalable Vector Graphics font WOFF/WOFF2 Web Open Font Format

Slide 40

Slide 40

WEB FONT FORMATS EOT OTF/TTF WOFF WOFF2 SVG IE 8-11 IE 9-11 Edge Firefox Chrome Safari Opera iOS Android @chumillas https://creativemarket.com/blog/the-missing-guide-to-font-formats

Slide 41

Slide 41

FOUT “Flash of Unstyled Text” FOIT “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. @chumillas

Slide 42

Slide 42

@font-face PROS: CONS: @chumillas Fonts.com • Powered by CSS, no JS • Accessible • No external plugins • Too big fonts • No common format • Limited to open source fonts Google fonts Typekit

Slide 43

Slide 43

@font-face PROS: CONS: @chumillas Fonts.com Google fonts • Large selection • Exclusive fonts • Language support • Monthly fees • Limited to their library Typekit

Slide 44

Slide 44

@font-face PROS: CONS: @chumillas Fonts.com Google fonts Typekit • Powered by CSS, no JS • Accessible • Cached & fast • Easy implementation • Limited choice • Not exclusive design

Slide 45

Slide 45

@font-face PROS: CONS: @chumillas Fonts.com Google fonts Typekit • Largest fonts library • Accessible • Cached & fast • Easy implementation • Premium service

Slide 46

Slide 46

TIPS Readability Correct font size depending on container @chumillas

Slide 47

Slide 47

TIPS Readability Correct font size depending on container Use less fonts Do you need them? @chumillas

Slide 48

Slide 48

Slide 49

Slide 49

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

Slide 50

Slide 50

Images

Slide 51

Slide 51

JPG @chumillas PNG 8-bit PNG 24-bit

Slide 52

Slide 52

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

Slide 53

Slide 53

The aim is to deliver the highest quality image supported and nothing more. @chumillas

Slide 54

Slide 54

Scaled images (just changing resolutions) <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

Slide 55

Slide 55

Adapted images (changing images) @chumillas

Slide 56

Slide 56

Adapted images (changing 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

Slide 57

Slide 57

Responsive Images in D8 Picture in D7 In core (disabled by default) 1.5x, 2x, … (hight resolution) Lazy load in D7, contrib in D8 @chumillas

Slide 58

Slide 58

Slide 59

Slide 59

Crop API • Image widget crop • Focal point @chumillas

Slide 60

Slide 60

Crop API • Image widget crop • Focal point @chumillas

Slide 61

Slide 61

Crop API • Image widget crop • Focal point @chumillas

Slide 62

Slide 62

What else? @chumillas

Slide 63

Slide 63

What else? Designer’s creativity. @chumillas

Slide 64

Slide 64

Apple T H I S I S A N A D. Apple T H I S I S A N A D. @chumillas

Slide 65

Slide 65

Create one field for each image Create the image styles Prepare each picture/image URLs in a variable Print it in a custom template @chumillas

Slide 66

Slide 66

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

Slide 67

Slide 67

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

Slide 68

Slide 68

Asynchronous loading

Slide 69

Slide 69

Default behavior Starts printing HTML CSS JS 1 JS 2 JS 3 Download JS 2 Waiting response JS 3 Request Sent Connection Setup @chumillas

Slide 70

Slide 70

Default behavior

<html> <head> <link rel=”stylesheet” href=”styles.css”/> <script src=”javascript.js”></script> </head> <body> <div>Page content</div> </body> </html> @chumillas

Slide 71

Slide 71

Async

<html> <head> <link rel=”stylesheet” href=”styles.css”/> <script src=”javascript.js” async></script> </head> <body> <div>Page content</div> </body> </html> @chumillas

Slide 72

Slide 72

Async While the JavaScript file is loading, parsing the HTML document can continue JS execution no longer has to wait for CSS i @chumillas You can’t guarantee the order of JS execution

Slide 73

Slide 73

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 i i @chumillas It has the potential to interfere with the rendering of the page async has priority

Slide 74

Slide 74

Asynchronous loading <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> @chumillas

Slide 75

Slide 75

Proxy-based browsers

Slide 76

Slide 76

250 million Opera Mini users India, Indonesia, Nigeria, Bangladesh and South Africa Reduce bandwidth usage by compressing resources on a proxy server before sending it to the client browser. @chumillas

Slide 77

Slide 77

TIPS Use SVG rather than icon fonts Style your HTML with CSS Test your site without JavaScript Make your site performant Test in Opera Mini @chumillas

Slide 78

Slide 78

Progressive enhancement Basic content and functionality of a web page to any browser or Internet connection Enhanced version advanced browser software or greater bandwidth @chumillas

Slide 79

Slide 79

Beyond the Mouse TOUCH & KEYBOARD EVENTS

Slide 80

Slide 80

Save hover for shortcuts • 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. @chumillas

Slide 81

Slide 81

Save hover for shortcuts Keep in touch 57x45px 72x45px safe space finger @chumillas thumb

Slide 82

Slide 82

Save hover for shortcuts Keep in touch Gestures: don’t override system defaults @chumillas

Slide 83

Slide 83

RWD patterns

Slide 84

Slide 84

Design patterns are recurring solutions that solve common design problems. @chumillas

Slide 85

Slide 85

Navigation patterns • Menus • Tabs • Jumping in hierarchy - breadcrumbs - fat footer - … • Content - Carousel - Tag cloud - Pagination - … @chumillas ui-patterns.com

Slide 86

Slide 86

Navigation patterns Forms • Password Strength Meter • WYSIWYG • Input Feedback • Captcha • Calendar Picker • Inplace Editor • Drag and drop • Good Defaults • … @chumillas ui-patterns.com

Slide 87

Slide 87

Navigation patterns Forms Dealing with data • Tables • Formatting data (FAQs, Dashboard,…) • Images (Slideshow, Gallery, Zoom…) • Search (autocomplete, search filters) duckduckgo.com/about @chumillas ui-patterns.com

Slide 88

Slide 88

Navigation patterns Forms Dealing with data Shopping Progressive Disclosure Onboarding Social, Grids, … @chumillas ui-patterns.com

Slide 89

Slide 89

Conclusions

Slide 90

Slide 90

Keep adapting your workflow Keep in weight Take the most of new technologies Keep the user in mind Be prepared for the uncertain @chumillas

Slide 91

Slide 91

Keep evolving. @chumillas

Slide 92

Slide 92

Thank you! @chumillas

Slide 93

Slide 93

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 @chumillas

Slide 94

Slide 94

Slide 95

Slide 95

WHAT DID YOU THINK? Evaluate this session events.drupal.org/dublin2016/schedule THANK YOU!