Responsive Design and Progressive Enhancements for the Web (workshop)

12,685 views

Published on

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

Published in: Design, Business
3 Comments
38 Likes
Statistics
Notes
No Downloads
Views
Total views
12,685
On SlideShare
0
From Embeds
0
Number of Embeds
237
Actions
Shares
0
Downloads
327
Comments
3
Likes
38
Embeds 0
No embeds

No notes for slide

Responsive Design and Progressive Enhancements for the Web (workshop)

  1. 1. RESPONSIVE progressive design & enhancements f  lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  2. 2. THE WEB LANDSCAPElucaSALVINI SEP29th2011 BACKTOTHEFRONT
  3. 3. THE WEB LANDSCAPE Viewport diversity INterface diversity SIZE - DPI Keyboard - mouse - touch SPECS diversity CONNECtivity diversity processor - memory mobile - adsl - broadbandlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  4. 4. THE WEB LANDSCAPE Viewport diversity INterface diversity SIZE - DPI mouse - touch - keyboard SPECS diversity processor - memory ? CONNECtivity diversity mobile - adsl - broadbandlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  5. 5. one web to rule them alLlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  6. 6. a new approach before we start we need to unlearn somethinglucaSALVINI SEP29th2011 BACKTOTHEFRONT
  7. 7. a new approach We have no canvas there’s no such thing as pixel perfect we know nothing* *assumption is the mother of all fuckupslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  8. 8. a new approach SO, what’s our starting point if we have no canvas? CONTENTlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  9. 9. a new approach WE have to build AROUND CONTENTlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  10. 10. a new approach structured & prioritized CONTENT AND RELEVANT, POSSIBLY.lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  11. 11. a new approach structured & prioritized CONTENT AND RELEVANT, possibly.lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  12. 12. a new approach structured CONTENT <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> SEMANTIC HTMLlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  13. 13. a new approach structured CONTENT <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> SEMANTIC HTML WAI-ARIA ROLESlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  14. 14. a new approach structured CONTENT <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> SEMANTIC HTML WAI-ARIA ROLESlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  15. 15. a new approach structured & prioritized CONTENT AND RELEVANT, possibly.lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  16. 16. a new approach prioritized CONTENT The foundation the order of information is the simplest possible layout Ok, but what next?lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  17. 17. institute du monde arabePhoto: Rory HydelucaSALVINI SEP29th2011 BACKTOTHEFRONT
  18. 18. institute du monde arabePhoto: Rory Hyde responsive architectures measure actual environmental conditions to enable buildings to adapt their form, shape, color or character responsively.lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  19. 19. institute du monde arabePhoto: Rory Hyde “Fluid grids, flexible images, and media queries are the RWD FLUID GRIDS Flexible three technical ingredients for responsive web design” ETHAN MARCOTTElucaSALVINI SEP29th2011 BACKTOTHEFRONT
  20. 20. institute du monde arabePhoto: Rory Hyde RWD FLUID GRIDS Flexible images media querieslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  21. 21. institute du monde arabePhoto: Rory Hyde RWD FLUID GRIDS Flexible images media querieslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  22. 22. a new approach FLUID GRIDS REMEMBER OUR foundation layout? Every module of information can be moved and resized as neededlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  23. 23. a new approach FLUID GRIDS REMEMBER OUR foundation layout? Every module of information can be moved and resized as needed The GRID IS our guidelucaSALVINI SEP29th2011 BACKTOTHEFRONT
  24. 24. responsive web design FLUID GRIDS fixed WIDTH grid FLUID grid absolute units relative units 250px 250px 250px 250px 25% 25% 25% 25% 1000px any width CONTENT MATH is SIMPLE CONTAINER =%lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  25. 25. institute du monde arabePhoto: Rory Hyde responsive web design RWD FLUID GRIDS Flexible images media querieslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  26. 26. responsive web design FLEXIBLE IMAGES ?lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  27. 27. responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { max-width:100%; }lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  28. 28. responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { <!--[if lte IE 6]> } width:100%; + imgSizer.jslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  29. 29. responsive web design FLEXIBLE IMAGES THE “HIDING” solutionlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  30. 30. institute du monde arabePhoto: Rory Hyde responsive web design RWD FLUID GRIDS Flexible images media querieslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  31. 31. responsive web design MEDIA QUERIES media types @media screen {...} @media print {...} @media handheld {...}lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  32. 32. responsive web design MEDIA QUERIES media types + logics =media queries @media screen and (exp) {...} @media print and (exp) {...} @media handheld and (exp) {...}lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  33. 33. responsive web design MEDIA QUERIES media types + logics =media queries @media screen and (exp) {...} @media print and (exp) {...} @media handheld and (exp) {...} they work as feature detection @media screen and (min-width: 500px) {...} (if viewport width is at least 500 pixels...)lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  34. 34. responsive web design MEDIA QUERIES WHAT features can we detect? [min/max] WIDTH [min/max] HEIGHT [min/max] DEVICE-WIDTH [min/max] DEVICE-HEIGHT [min/max] ASPECT-RATIO [min/max] DEVICE-ASPECT-RATIO [min/max] COLOR [min/max] COLOR-INDEX MONOCHROME [min/max] RESOLUTION ORIENTATION SCAN GRIDlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  35. 35. responsive web design MEDIA QUERIES WHAT features can we detect? [min/max] WIDTH [min/max] HEIGHT [min/max] DEVICE-WIDTH [min/max] DEVICE-HEIGHT [min/max] ASPECT-RATIO [min/max] DEVICE-ASPECT-RATIO [min/max] COLOR [min/max] COLOR-INDEX MONOCHROME [min/max] RESOLUTION ORIENTATION SCAN GRIDlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  36. 36. responsive web design MEDIA QUERIES WHAT features can we detect? [min/max] WIDTH -webkit- [min/max] DEVICE-PIXEL-RATIO [min/max] HEIGHT [min/max] --moz- DEVICE-PIXEL-RATIO [min/max] DEVICE-WIDTH -o- [min/max] DEVICE-PIXEL-RATIO [min/max] DEVICE-HEIGHT DEVICE-PIXEL-RATIO [min/max] ASPECT-RATIO -moz- TOUCH-ENABLED [min/max] DEVICE-ASPECT-RATIO [min/max] COLOR [min/max] COLOR-INDEX MONOCHROME [min/max] RESOLUTION ORIENTATION SCAN GRIDlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  37. 37. responsive web design MEDIA QUERIES dissection of media queries @media [not|only] type [and] (condition) {...} operators and @media screen and (min-width: 500px) and (max-width: 800px) {...}lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  38. 38. responsive web design MEDIA QUERIES dissection of media queries @media [not|only] type [and] (condition) {...} operators and @media screen and (min-width: 500px) and (max-width: 800px) {...} @media screen and (min-width: 500px), OR screen and (orientation: landscape) {...}lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  39. 39. responsive web design MEDIA QUERIES dissection of media queries @media [not|only] type [and] (condition) {...} operators and @media screen and (min-width: 500px) and (max-width: 800px) {...} @media screen and (min-width: 500px), OR screen and (orientation: landscape) {...} NOT @media not screen and (min-width: 500px) {...} !!lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  40. 40. responsive web design MEDIA QUERIES BE CAREFUL, NOT negates the entire media querY @media not screen and (min-width: 500px) {...}lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  41. 41. 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) {...} XlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  42. 42. 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))) {...} ✓lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  43. 43. responsive web design MEDIA QUERIES dissection of media queries @media [not|only] type [and] (condition) {...} ONLY AND NOT Hide the media query from OLDER BROWSERS PRO TIP: preventing them to uncontitionally apply styleslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  44. 44. responsive web design MEDIA QUERIES THE VIEWPORT ISSUE device-width VIEWPORT width @media only screen and (max-device-width: 20em) { #test {width:50%} }lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  45. 45. responsive web design MEDIA QUERIES THE VIEWPORT ISSUE device-width VIEWPORT width @media only screen and (max-device-width: 20em) { #test {width:50%} }lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  46. 46. responsive web design MEDIA QUERIES THE VIEWPORT ISSUE device-width VIEWPORT width <meta name=”viewport” content=”width=device-width, initial-scale=1” /> @media only screen and (max-width: 20em) { #test {width:50%} }lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  47. 47. responsive web design MEDIA QUERIES THE ABSENCE of a media query is in fact, the first media query Bryan Rieger, Rethinking the Mobile WeblucaSALVINI SEP29th2011 BACKTOTHEFRONT
  48. 48. responsive web design MEDIA QUERIES EVOLVE USING THE INCREaSING SPACE to rearrange content flow.lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  49. 49. responsive web design MEDIA QUERIES EVEN MORE SPACE makes room for LARGER images and deeper asideslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  50. 50. responsive web design MEDIA QUERIES to infinity and beyond!lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  51. 51. responsive web design MEDIA QUERIES BREAKPOINTS BASED on cONTENT, not on devices embrace CASCADING, define only WHAT CHANGESlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  52. 52. responsive web design silver bullet or fool’s gold?lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  53. 53. 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 patternslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  54. 54. Photo: Niall & Elizabeth Dawson progressive enhancement An escalator can never break; Mitch hedberg it can only become stairs.lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  55. 55. progressive enhancement big CSS IMAGES big inline images JS DRIVEN MAP selectivizr.js MODERNIZR.js RESPOND.js PLUGIns, AUDIO & VIDEO with SMALL CSS SMALL inline FALLBACKS responsive STATIC MAPS CSS3 IMAGES IMAGES layout CSS: color and typography STRUCTURED CONTENT with linear layout media queries available Javascript availablelucaSALVINI SEP29th2011 BACKTOTHEFRONT
  56. 56. progressive enhancement ISSUES RAISED on RWD 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 SOLUTION: start from small images and dinamically load bigger assets resources: 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/lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  57. 57. progressive enhancement 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. if (matchMedia(‘only screen and (min-width: 30em)’).matches) { // load more assets } https://github.com/paulirish/matchMedia.js/lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  58. 58. progressive enhancement ISSUES RAISED on RWD 3. media-queries will not remove unnecessary code ❖ unnecessary downloads of code not suitable for SMALL VIEWPORTS 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 SOLUTION: the first media-query is the absence of media-queries use ONLY to prevent older browsers to unconditionally load csslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  59. 59. progressive enhancement ISSUES RAISED on RWD 5. context of “mobile” ≠ context of “desktop” ❖ doesn’t respect tipical usage based on contextlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  60. 60. Photo: Michael Mandiberg progressive enhancement DESKTOP USE CASElucaSALVINI SEP29th2011 BACKTOTHEFRONT
  61. 61. Photo: S. Diddy progressive enhancement MOBILE USE CASElucaSALVINI SEP29th2011 BACKTOTHEFRONT
  62. 62. progressive enhancement ISSUES RAISED on RWD 5. context of “mobile” ≠ context of “desktop” ❖ don’t respect usage patterns SOLUTION: IF YOU REALLY need to, progressive enhance reacting to location, not screen width, and adapt content based to proximitylucaSALVINI SEP29th2011 BACKTOTHEFRONT
  63. 63. RWD + progressive enhancement So, silver bullet or fool’s gold?lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  64. 64. 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 CalhounlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  65. 65. RWD + progressive enhancement it’s a gREAT OPPORTUNITY not to misslucaSALVINI SEP29th2011 BACKTOTHEFRONT
  66. 66. ApxlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  67. 67. 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/)lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  68. 68. ONE MORE THINGlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  69. 69. a new approach structured & prioritized CONTENT AND RELEVANT, POSSIBLY.lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  70. 70. a new approach RELEVANT CONTENTlucaSALVINI SEP29th2011 BACKTOTHEFRONT
  71. 71. a new approach relevant CONTENT t elevan O r NTE NT C WTF?! “MOBILE” “DESKTOP”lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  72. 72. a new approach relevant CONTENT UX + performances “MOBILE” “DESKTOP”lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  73. 73. a new approach relevant CONTENT UX + performances “MOBILE” “DESKTOP” 8 number of requests 208lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  74. 74. a new approach relevant CONTENT UX + performances “MOBILE” “DESKTOP” 8 number of requests 208 30,2KB total page size 1.28MblucaSALVINI SEP29th2011 BACKTOTHEFRONT
  75. 75. a new approach relevant CONTENT UX + performances “MOBILE” “DESKTOP” 8 number of requests 208 30,2KB total page size 1.28Mb 1.82 PAGE LOAD TIME (seconds) 7.95lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  76. 76. a new approach relevant CONTENT xkcd.com/773lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  77. 77. THANK YOU @lucasalvinilucaSALVINI SEP29th2011 BACKTOTHEFRONT

×