Responsive Design and Progressive Enhancements for the Web (workshop)

by Luca Salvini

Slide 1

Slide 1 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 & RESPONSIVE d e s i g n p r o g r e s s i v e enhancements f  

Slide 2

Slide 2 text

THE WEB LANDSCAPE lucaSALVINI BACKTOTHEFRONT SEP29th2011

Slide 3

Slide 3 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 Viewport diversity SIZE - DPI INterface diversity Keyboard - mouse - touch SPECS diversity processor - memory CONNECtivity diversity mobile - adsl - broadband THE WEB LANDSCAPE

Slide 4

Slide 4 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 ? Viewport diversity SIZE - DPI INterface diversity mouse - touch - keyboard SPECS diversity processor - memory CONNECtivity diversity mobile - adsl - broadband THE WEB LANDSCAPE

Slide 5

Slide 5 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 one web to rule them alL

Slide 6

Slide 6 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 before we start we need to unlearn something a new approach

Slide 7

Slide 7 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach We have no canvas there’s no such thing as pixel perfect we know nothing* *assumption is the mother of all fuckups

Slide 8

Slide 8 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach SO, what’s our starting point if we have no canvas? CONTENT

Slide 9

Slide 9 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach WE have to build AROUND CONTENT

Slide 10

Slide 10 text

AND RELEVANT, POSSIBLY. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach CONTENT structured prioritized &

Slide 11

Slide 11 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach CONTENT structured prioritized & AND RELEVANT, possibly.

Slide 12

Slide 12 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach structured CONTENT SEMANTIC HTML

Emmett Brown committed

Crackpot Inventor Declared Legally Insane

May 23, 1983

Rachel Tennant

! ! !

The facts regarding the situation remain the same, state the authorities. Details concerning the action have been given a preliminary investigation, but it is felt that only by a more detailed study will the true facts become known.

Slide 13

Slide 13 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach structured CONTENT SEMANTIC HTML WAI-ARIA ROLES

Emmett Brown committed

Crackpot Inventor Declared Legally Insane

May 23, 1983

Rachel Tennant

! ! !

Emmett Brown committed

Crackpot Inventor Declared Legally Insane

May 23, 1983

Rachel Tennant

! ! !

Slide 14

Slide 14 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach structured CONTENT SEMANTIC HTML WAI-ARIA ROLES

Emmett Brown committed

Crackpot Inventor Declared Legally Insane

May 23, 1983

Rachel Tennant

! ! !

Slide 15

Slide 15 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach CONTENT structured prioritized & AND RELEVANT, possibly.

Slide 16

Slide 16 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach prioritized CONTENT the order of information is the simplest possible layout The foundation Ok, but what next?

Slide 17

Slide 17 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 institute du monde arabe Photo: Rory Hyde

Slide 18

Slide 18 text

responsive architectures measure actual environmental conditions to enable buildings to adapt their form, shape, color or character responsively. lucaSALVINI BACKTOTHEFRONT SEP29th2011 institute du monde arabe Photo: Rory Hyde

Slide 19

Slide 19 text

“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design” ETHAN MARCOTTE FLUID GRIDS Flexible images media queries lucaSALVINI BACKTOTHEFRONT SEP29th2011 institute du monde arabe Photo: Rory Hyde RWD

Slide 20

Slide 20 text

institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS Flexible images media queries lucaSALVINI BACKTOTHEFRONT SEP29th2011

Slide 21

Slide 21 text

institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS Flexible images media queries lucaSALVINI BACKTOTHEFRONT SEP29th2011

Slide 22

Slide 22 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach Every module of information can be moved and resized as needed REMEMBER OUR foundation layout? FLUID GRIDS

Slide 23

Slide 23 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach Every module of information can be moved and resized as needed REMEMBER OUR foundation layout? FLUID GRIDS The GRID IS our guide

Slide 24

Slide 24 text

FLUID grid relative units lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design FLUID GRIDS fixed WIDTH grid 1000px 250px 250px 250px 250px 25% 25% 25% 25% any width absolute units MATH is SIMPLE CONTENT CONTAINER = %

Slide 25

Slide 25 text

institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS Flexible images media queries lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design

Slide 26

Slide 26 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design FLEXIBLE IMAGES ?

Slide 27

Slide 27 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { max-width:100%; }

Slide 28

Slide 28 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { width:100%; } + imgSizer.js

Slide 29

Slide 29 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design FLEXIBLE IMAGES THE “HIDING” solution

Slide 30

Slide 30 text

institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS Flexible images media queries lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design

Slide 31

Slide 31 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES media types @media screen @media print @media handheld {...} {...} {...}

Slide 32

Slide 32 text

Slide 33

Slide 33 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES + logics media types @media screen @media print @media handheld {...} {...} {...} and (exp) and (exp) and (exp) =media queries @media screen and (min-width: 500px) {...} they work as feature detection (if viewport width is at least 500 pixels...)

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES WHAT features can we detect? WIDTH HEIGHT DEVICE-WIDTH DEVICE-HEIGHT ASPECT-RATIO DEVICE-ASPECT-RATIO COLOR COLOR-INDEX MONOCHROME RESOLUTION ORIENTATION SCAN GRID [min/max] [min/max] [min/max] [min/max] [min/max] [min/max] [min/max] [min/max] [min/max] DEVICE-PIXEL-RATIO DEVICE-PIXEL-RATIO DEVICE-PIXEL-RATIO DEVICE-PIXEL-RATIO TOUCH-ENABLED --moz- -moz- [min/max] [min/max] [min/max] -webkit- -o-

Slide 37

Slide 37 text

Slide 38

Slide 38 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES @media [not|only] type [and] (condition) {...} dissection of media queries operators and @media screen and (min-width: 500px) and (max-width: 800px) {...} OR @media screen and (min-width: 500px), screen and (orientation: landscape) {...}

Slide 39

Slide 39 text

Slide 40

Slide 40 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES BE CAREFUL, NOT negates the entire media querY @media not screen and (min-width: 500px) {...}

Slide 41

Slide 41 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES BE CAREFUL, NOT negates the entire media querY @media not screen and (min-width: 500px) {...} So, it doesn’t evaluate like this @media (not screen) and (min-width: 500px) {...} X

Slide 42

Slide 42 text

Slide 43

Slide 43 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES @media [not|only] type [and] (condition) {...} dissection of media queries ONLY AND NOT Hide the media query from OLDER BROWSERS preventing them to uncontitionally apply styles PRO TIP:

Slide 44

Slide 44 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES THE VIEWPORT ISSUE @media only screen and (max-device-width: 20em) { #test {width:50%} } VIEWPORT width device-width

Slide 45

Slide 45 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES THE VIEWPORT ISSUE @media only screen and (max-device-width: 20em) { #test {width:50%} } device-width VIEWPORT width

Slide 46

Slide 46 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES THE VIEWPORT ISSUE @media only screen and (max-width: 20em) { #test {width:50%} } device-width VIEWPORT width

Slide 47

Slide 47 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES THE ABSENCE of a media query is in fact, the first media query Bryan Rieger, Rethinking the Mobile Web

Slide 48

Slide 48 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design EVOLVE USING THE INCREaSING SPACE to rearrange content flow. MEDIA QUERIES

Slide 49

Slide 49 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design EVEN MORE SPACE makes room for LARGER images and deeper asides MEDIA QUERIES

Slide 50

Slide 50 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES to infinity and beyond!

Slide 51

Slide 51 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 BREAKPOINTS BASED on cONTENT, not on devices embrace CASCADING, define only WHAT CHANGES responsive web design MEDIA QUERIES

Slide 52

Slide 52 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design silver bullet or fool’s gold?

Slide 53

Slide 53 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design ISSUES RAISED on RWD 1. one (image) size doesn’t fit all ❖ unnecessary downloads on small viewports or bad quality on large ones ❖ real-time image resizing is cpu and memory intensive 2. non viewable assets are downloaded anyway (display: none is not download:none) ❖ unnecessary downloads 3. media-queries will not remove unnecessary code ❖ unnecessary downloads of code not suitable for “mobile” 4. media-queries are not supported by older devices ❖ unnecessary downloads ❖ unpredictable css results 5. context of “mobile” ≠ context of “desktop” ❖ RWD doesn’t respect contextual usage patterns

Slide 54

Slide 54 text

BACKTOTHEFRONT progressive enhancement lucaSALVINI SEP29th2011 An escalator can never break; it can only become stairs. Mitch hedberg Photo: Niall & Elizabeth Dawson

Slide 55

Slide 55 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 progressive enhancement STRUCTURED CONTENT with linear layout CSS: color and typography SMALL inline IMAGES big inline images STATIC MAPS JS DRIVEN MAP SMALL CSS IMAGES big CSS IMAGES PLUGIns, AUDIO & VIDEO with FALLBACKS RESPOND.js CSS3 selectivizr.js responsive layout MODERNIZR.js media queries available Javascript available

Slide 56

Slide 56 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 1. one (image) size does’t fit all ❖ unnecessary downloads on small viewports or bad quality on large ones ❖ real-time image resizing is cpu and memory intensive start from small images and dinamically load bigger assets http://adaptive-images.com/ http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/ http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/ http://csswizardry.com/2011/07/responsive-images-right-now/ http://nicolasgallagher.com/responsive-images-using-css3/ http://blog.keithclark.co.uk/responsive-images-using-cookies/ progressive enhancement SOLUTION: resources: ISSUES RAISED on RWD

Slide 57

Slide 57 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 ISSUES RAISED on RWD 2. non viewable assets are downloaded anyway (display: none is not download:none) ❖ unnecessary downloads SOLUTION: start from the cleanest solution and progressive enhance adding what MORE capable browsers can use. progressive enhancement if (matchMedia(‘only screen and (min-width: 30em)’).matches) { // load more assets } https://github.com/paulirish/matchMedia.js/

Slide 58

Slide 58 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 3. media-queries will not remove unnecessary code ❖ unnecessary downloads of code not suitable for SMALL VIEWPORTS progressive enhancement SOLUTION: use javascript & media-queries to add, not to remove it 4. media-queries are not supported by older devices ❖ unnecessary downloads ❖ unpredictable css results the first media-query is the absence of media-queries use ONLY to prevent older browsers to unconditionally load css SOLUTION: ISSUES RAISED on RWD

Slide 59

Slide 59 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 5. context of “mobile” ≠ context of “desktop” ❖ doesn’t respect tipical usage based on context progressive enhancement ISSUES RAISED on RWD

Slide 60

Slide 60 text

DESKTOP USE CASE BACKTOTHEFRONT lucaSALVINI SEP29th2011 progressive enhancement Photo: Michael Mandiberg

Slide 61

Slide 61 text

MOBILE USE CASE BACKTOTHEFRONT lucaSALVINI SEP29th2011 progressive enhancement Photo: S. Diddy

Slide 62

Slide 62 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 5. context of “mobile” ≠ context of “desktop” ❖ don’t respect usage patterns IF YOU REALLY need to, progressive enhance reacting to location, not screen width, and adapt content based to proximity progressive enhancement SOLUTION: ISSUES RAISED on RWD

Slide 63

Slide 63 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 RWD + progressive enhancement So, silver bullet or fool’s gold?

Slide 64

Slide 64 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 RWD + progressive enhancement Maybe people resize windows, maybe they don’t. The point is a responsive site means they no longer NEED to. Scott Jehl, Filament Group Photo: David Calhoun

Slide 65

Slide 65 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 RWD + progressive enhancement it’s a gREAT OPPORTUNITY not to miss

Slide 66

Slide 66 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 Apx

Slide 67

Slide 67 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 TESTING DESKTOP test on every possible browser you can install USe offsite browser testing services1 use “responsiveness” testing services2 MOBILE Nothing is like the real thing Android simulator ios simulator opera mini simulator 1 CrossBrowserTesting (http://crossbrowsertesting.com/), Browsershots (http://browsershots.org/), Litmus (http://litmus.com/), Browsercam (http://www.browsercam.com/), etc... 2 Resize My Browser (http://resizemybrowser.com/), ResponsivePx (http://responsivepx.com/), ScreenFly (http:// quirktools.com/screenfly/), Responsive Design Testing (http://mattkersley.com/responsive/)

Slide 68

Slide 68 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 ONE MORE THING

Slide 69

Slide 69 text

AND RELEVANT, POSSIBLY. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach CONTENT structured prioritized &

Slide 70

Slide 70 text

RELEVANT CONTENT lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach

Slide 71

Slide 71 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach “MOBILE” “DESKTOP” CONTENT relevant WTF?! relevant CONTENT

Slide 72

Slide 72 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach “MOBILE” “DESKTOP” UX + performances relevant CONTENT

Slide 73

Slide 73 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach “MOBILE” “DESKTOP” UX + performances number of requests 8 208 relevant CONTENT

Slide 74

Slide 74 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach UX + performances “MOBILE” “DESKTOP” number of requests 8 208 total page size 30,2KB 1.28Mb relevant CONTENT

Slide 75

Slide 75 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach UX + performances “MOBILE” “DESKTOP” number of requests 8 208 total page size 30,2KB 1.28Mb PAGE LOAD TIME (seconds) 1.82 7.95 relevant CONTENT

Slide 76

Slide 76 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach xkcd.com/773 relevant CONTENT

Slide 77

Slide 77 text

lucaSALVINI BACKTOTHEFRONT SEP29th2011 THANK YOU @lucasalvini