Responsive Design and Progressive Enhancements for the Web (workshop)

Transcript

1. lucaSALVINI BACKTOTHEFRONT SEP29th2011 & RESPONSIVE d e s i g

   n p r o g r e s s i v e enhancements f  

2. THE WEB LANDSCAPE lucaSALVINI BACKTOTHEFRONT SEP29th2011

3. lucaSALVINI BACKTOTHEFRONT SEP29th2011 Viewport diversity SIZE - DPI INterface diversity

   Keyboard - mouse - touch SPECS diversity processor - memory CONNECtivity diversity mobile - adsl - broadband THE WEB LANDSCAPE

4. lucaSALVINI BACKTOTHEFRONT SEP29th2011 ? Viewport diversity SIZE - DPI INterface

   diversity mouse - touch - keyboard SPECS diversity processor - memory CONNECtivity diversity mobile - adsl - broadband THE WEB LANDSCAPE

5. lucaSALVINI BACKTOTHEFRONT SEP29th2011 one web to rule them alL

6. lucaSALVINI BACKTOTHEFRONT SEP29th2011 before we start we need to unlearn

   something a new approach

7. 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

8. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach SO, what’s our starting

   point if we have no canvas? CONTENT

9. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach WE have to build

   AROUND CONTENT

10. AND RELEVANT, POSSIBLY. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach CONTENT

    structured prioritized &

11. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach CONTENT structured prioritized &

    AND RELEVANT, possibly.

12. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach structured CONTENT SEMANTIC HTML

    <article> <hgroup> <h2>Emmett Brown committed</h2> <h3>Crackpot Inventor Declared Legally Insane</h3> </hgroup> <time datetime="1983-05-23">May 23, 1983</time> <address> ! <p>Rachel Tennant</p> </address>! ! <figure> ! <img src="i/art1.jpg" alt="Mr.Emmett Brown"/> </figure> <p>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.</p> </article>

13. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach structured CONTENT SEMANTIC HTML

    WAI-ARIA ROLES <article role=”article”> <hgroup> <h2>Emmett Brown committed</h2> <h3>Crackpot Inventor Declared Legally Insane</h3> </hgroup> <time datetime="1983-05-23">May 23, 1983</time> <address> ! <p>Rachel Tennant</p> </address>! ! <figure> ! <img src="i/art1.jpg" alt="Mr.Emmett Brown"/> </figure> <p>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.</p> </article> <article role=”article”> <hgroup> <h2>Emmett Brown committed</h2> <h3>Crackpot Inventor Declared Legally Insane</h3> </hgroup> <time datetime="1983-05-23">May 23, 1983</time> <address> ! <p>Rachel Tennant</p> </address>! ! <figure> ! <img src="i/art1.jpg" alt="Mr.Emmett Brown"/> </figure> <p>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.</p> </article>

14. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach structured CONTENT SEMANTIC HTML

    WAI-ARIA ROLES <article role=”article” class=”hentry”> <hgroup> <h2 class=”entry-title”>Emmett Brown committed</h2> <h3>Crackpot Inventor Declared Legally Insane</h3> </hgroup> <time class=”updated” datetime="1983-05-23">May 23, 1983</time> <address class=”vcard”> ! <p class=”fn”>Rachel Tennant</p> </address>! ! <figure> ! <img src="i/art1.jpg" alt="Mr.Emmett Brown"/> </figure> <p class=”entry-content”>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.</p> </article>

15. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach CONTENT structured prioritized &

    AND RELEVANT, possibly.

16. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach prioritized CONTENT the order

    of information is the simplest possible layout The foundation Ok, but what next?

17. lucaSALVINI BACKTOTHEFRONT SEP29th2011 institute du monde arabe Photo: Rory Hyde

18. 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

19. “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

20. institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS

    Flexible images media queries lucaSALVINI BACKTOTHEFRONT SEP29th2011

21. institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS

    Flexible images media queries lucaSALVINI BACKTOTHEFRONT SEP29th2011

22. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach Every module of information

    can be moved and resized as needed REMEMBER OUR foundation layout? FLUID GRIDS

23. 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

24. 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 = %

25. institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS

    Flexible images media queries lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design

26. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design FLEXIBLE IMAGES ?

27. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design FLEXIBLE IMAGES THE “SCALING”

    solution img { max-width:100%; }

28. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design FLEXIBLE IMAGES THE “SCALING”

    solution img { width:100%; } + imgSizer.js <!--[if lte IE 6]>

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

    solution

30. institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS

    Flexible images media queries lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design

31. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES media types

    @media screen @media print @media handheld {...} {...} {...}

32. 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

33. 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...)

34. 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]

35. 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]

36. 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-

37. 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) {...}

38. 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) {...}

39. 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) {...} NOT @media not screen and (min-width: 500px) {...} !!

40. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES BE CAREFUL,

    NOT negates the entire media querY @media not screen and (min-width: 500px) {...}

41. 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

42. 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 But IT evaluates like this @media (not (screen and (min-width: 500px))) {...} ✓

43. 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:

44. 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

45. 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

46. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES THE VIEWPORT

    ISSUE @media only screen and (max-width: 20em) { #test {width:50%} } <meta name=”viewport” content=”width=device-width, initial-scale=1” /> device-width VIEWPORT width

47. 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

48. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design EVOLVE USING THE INCREaSING

    SPACE to rearrange content flow. MEDIA QUERIES

49. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design EVEN MORE SPACE makes

    room for LARGER images and deeper asides MEDIA QUERIES

50. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design MEDIA QUERIES to infinity

    and beyond!

51. lucaSALVINI BACKTOTHEFRONT SEP29th2011 BREAKPOINTS BASED on cONTENT, not on devices

    embrace CASCADING, define only WHAT CHANGES responsive web design MEDIA QUERIES

52. lucaSALVINI BACKTOTHEFRONT SEP29th2011 responsive web design silver bullet or fool’s

    gold?

53. 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

54. BACKTOTHEFRONT progressive enhancement lucaSALVINI SEP29th2011 An escalator can never break;

    it can only become stairs. Mitch hedberg Photo: Niall & Elizabeth Dawson

55. 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

56. 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

57. 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/

58. 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

59. lucaSALVINI BACKTOTHEFRONT SEP29th2011 5. context of “mobile” ≠ context of

    “desktop” ❖ doesn’t respect tipical usage based on context progressive enhancement ISSUES RAISED on RWD

60. DESKTOP USE CASE BACKTOTHEFRONT lucaSALVINI SEP29th2011 progressive enhancement Photo: Michael

    Mandiberg

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

    Diddy

62. 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

63. lucaSALVINI BACKTOTHEFRONT SEP29th2011 RWD + progressive enhancement So, silver bullet

    or fool’s gold?

64. 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

65. lucaSALVINI BACKTOTHEFRONT SEP29th2011 RWD + progressive enhancement it’s a gREAT

    OPPORTUNITY not to miss

66. lucaSALVINI BACKTOTHEFRONT SEP29th2011 Apx

67. 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/)

68. lucaSALVINI BACKTOTHEFRONT SEP29th2011 ONE MORE THING

69. AND RELEVANT, POSSIBLY. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach CONTENT

    structured prioritized &

70. RELEVANT CONTENT lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach

71. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach “MOBILE” “DESKTOP” CONTENT relevant

    WTF?! relevant CONTENT

72. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach “MOBILE” “DESKTOP” UX +

    performances relevant CONTENT

73. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach “MOBILE” “DESKTOP” UX +

    performances number of requests 8 208 relevant CONTENT

74. lucaSALVINI BACKTOTHEFRONT SEP29th2011 a new approach UX + performances “MOBILE”

    “DESKTOP” number of requests 8 208 total page size 30,2KB 1.28Mb relevant CONTENT

75. 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

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

77. lucaSALVINI BACKTOTHEFRONT SEP29th2011 THANK YOU @lucasalvini