Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design and Progressive Enhancements for the Web (workshop)

0ed48d32d5616a73e7943889d1a7ac51?s=47 Luca Salvini
October 02, 2011

Responsive Design and Progressive Enhancements for the Web (workshop)

Smartphones, tablets, gaming consoles, ebook readers and internet fridges are becoming our main tools to browse the web and yet websites are strictly made for a desktop consumption.
We need to develop a device agnostic approach and fully embrace the flexibility of the web with semantic coding and progressive enhancements.

From The Front, Back To The Front (Cesena, Sept 29th, 2011)
@lucasalvini

0ed48d32d5616a73e7943889d1a7ac51?s=128

Luca Salvini

October 02, 2011
Tweet

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