Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responsive Web Design                                   &                           Web Accessibility               george...
RWD & A11Y = ♥               They are really good together!Tuesday, 20 November, 12
Responsive Web Design (RWD)                                    &                           Web Accessibility              ...
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
For my day job I work on this stuff...          @good_wally                 goodwally.ca   🌎Tuesday, 20 November, 12
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
In my spare time...          @good_wally                      goodwally.ca   🌎Tuesday, 20 November, 12
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
      @good_wally     goodwally.ca   🌎Tuesday, 20 November, 12
But I also get to work on cool stuff like                     this... ghiglione.ca          @good_wally                  ...
What is           Responsive Web Design (rwd) ?Tuesday, 20 November, 12
What is           Responsive Web Design (rwd) ?                             Started off as a technique                    ...
Why do we need           Responsive Web Design (rwd) ?Tuesday, 20 November, 12
Why do we need           Responsive Web Design (rwd) ?           "Rather than tailoring disconnected designs for an       ...
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
RWD - Under the hood           Fluid Foundation           no fixed-width layouts. or PXs. seriously           Media Querie...
RWD - Fluid Foundation                 Declare percentage (%) or ratio (em) widths                       instead of absolu...
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
RWD - Media Queries           It’s how you target specific media AND media features!           /* 30em = 480px */         ...
RWD - Responsive ImagesTuesday, 20 November, 12
RWD - Responsive Images           How do you make fixed-width elements (i.e.           images) work with your awesome flui...
RWD - Responsive ImagesTuesday, 20 November, 12
RWD - Responsive Images                           New problemTuesday, 20 November, 12
RWD - Responsive Images                           New problemTuesday, 20 November, 12
RWD - Responsive Images                           New problemTuesday, 20 November, 12
RWD - Responsive Images                              Solutions           Image Optimization           Scalable Vector Grap...
RWD - Responsive Images                                    Solutions           Image Optimization           Scalable Vecto...
RWD - Summary            Fluid Foundation + Media Queries + Responsive ImagesTuesday, 20 November, 12
RWD = FutureFriend.lyTuesday, 20 November, 12
RWD & A11Y = ♥Tuesday, 20 November, 12
So, why are RWD & A11Y                            really good together !?Tuesday, 20 November, 12
RWD & A11Y = ♥                              Why?             Personal Ov errid ing Stylesheet            (Fluid Foundation...
Personal Overriding Stylesheet           Less about the design, more about the content!Tuesday, 20 November, 12
Personal Overriding Stylesheet           Less about the design, more about the content!           Think about it!         ...
Personal Overriding Stylesheet           “My basic point is that it should be the content           that dictates the medi...
Personal Overriding Stylesheet          “Mobile users want to see our menu, hours and          delivery number. Desktop us...
Personal Overriding Stylesheet          “Mobile users want to see our menu, hours and          delivery number. Desktop us...
Personal Overriding Stylesheet          “Mobile users want to see our menu, hours and          delivery number. Desktop us...
Personal Overriding Stylesheet           Moaaar Accessible Content!          “Mobile users want to see our menu, hours and...
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Personal Overriding Stylesheet           Reduced Cognitive & Visual Load           RWD goes beyond layouts & images, we’re...
Personal Overriding Stylesheet           Reduced Cognitive & Visual Load           RWD goes beyond layouts & images, we’re...
Tuesday, 20 November, 12
Personal Overriding Stylesheet           Fat Fingers SyndromeTuesday, 20 November, 12
Personal Overriding Stylesheet           Fat Fingers Syndrome          Don’t make me think! (Steve Krug)Tuesday, 20 Novemb...
Personal Overriding Stylesheet           Fat Fingers Syndrome          Don’t make me think! (Steve Krug)          What doe...
Personal Overriding Stylesheet           Fat Fingers Syndrome          Don’t make me think! (Steve Krug)          What doe...
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Embracing Web Standards                           platform specific hacks            no more         custom controls      ...
Embracing Web Standards                            platform specific hacks            no more          custom controls    ...
Mobile First & Progressive Enhancement           Mobile first           designing for the smallest screen resolution first...
Progressive EnhancementTuesday, 20 November, 12
Progressive Enhancement           An escalator can never break--it can only become stairs.           You would never see a...
Progressive EnhancementTuesday, 20 November, 12
Mobile FirstTuesday, 20 November, 12
Mobile FirstTuesday, 20 November, 12
Mobile First & Progressive EnhancementTuesday, 20 November, 12
Mobile First & Progressive Enhancement                           It’s all good news                           for accessib...
Mobile First & Progressive EnhancementTuesday, 20 November, 12
Caters to Users Needs, Devices, ContextTuesday, 20 November, 12
RWD & A11Y = ♥   ?Tuesday, 20 November, 12
RWD & A11Y = ♥       ?           Accessibility is not lagging behind (for once)           accessibility & web standards ar...
RWD & A11Y = ♥   ?Tuesday, 20 November, 12
RWD & A11Y = ♥                               ?                           “RWD is A11Y in disguise!”                       ...
RWD & A11Y = ♥                               ?                           “RWD is A11Y in disguise!”                       ...
Thank you!          @good_wally                  goodwally.ca   🌎Tuesday, 20 November, 12
Credits, Photos, SourcesTuesday, 20 November, 12
Credits, Photos, Sources                                        freevector.com                                       photo...
Research & ResourcesTuesday, 20 November, 12
Research & Resources        Responsive Web Design        alistapart.com/articles/responsive-web-design        bradfrostweb...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design & Accessibility

40,917 views

Published on

Accessibility questions? Get in contact: george@goodwally.ca.

July 2013 NOTE: I posted an updated, more comprehensive version of this presentation at http://www.slideshare.net/GeorgeZamfir/responsive-web-design-a-tool-for-accessibility.

How responsive web design is making the case for accessibility. Many of the RWD best practices ARE in fact best practices for accessibility as well. And there's nothing revolutionary about them, however with people using them more and more under the RWD umbrella they basically became more attractive.

"Responsive web design is accessibility in disguise".
"RWD is designing for more accessible content".

Presentation delivered at Accessibility Camp Toronto (AccessibilityCampTO.org) on Nov 17, 2012.
Podcast: http://www.webaxe.org/podcast-97-responsive-design-and-accessibility/
Responsive Accessible Web Design KIT: https://github.com/GeorgeZamfir/RAWD-KIT

Published in: Technology
  • Be the first to comment

Responsive Web Design & Accessibility

  1. 1. Responsive Web Design & Web Accessibility george zamfir #a11yTO meetup.com/a11yTO @a11yCampTO  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  2. 2. RWD & A11Y = ♥ They are really good together!Tuesday, 20 November, 12
  3. 3. Responsive Web Design (RWD) & Web Accessibility 30 min presentation & 20 min of conversations • part case study • part primer on responsive web design • RWD & A11Y = ♥  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  4. 4.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  5. 5. For my day job I work on this stuff...  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  6. 6.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  7. 7.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  8. 8.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  9. 9.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  10. 10. In my spare time...  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  11. 11.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  12. 12.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  13. 13.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  14. 14.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  15. 15.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  16. 16. But I also get to work on cool stuff like this... ghiglione.ca  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  17. 17. What is Responsive Web Design (rwd) ?Tuesday, 20 November, 12
  18. 18. What is Responsive Web Design (rwd) ? Started off as a technique for building one website that would work on all devices.Tuesday, 20 November, 12
  19. 19. Why do we need Responsive Web Design (rwd) ?Tuesday, 20 November, 12
  20. 20. Why do we need Responsive Web Design (rwd) ? "Rather than tailoring disconnected designs for an ever-increasing number of web devices, we can treat them as facets of the same experience." - Ethan Marcotte alistapart.com/articles/responsive-web-designTuesday, 20 November, 12
  21. 21. Tuesday, 20 November, 12
  22. 22. Tuesday, 20 November, 12
  23. 23. Tuesday, 20 November, 12
  24. 24. Tuesday, 20 November, 12
  25. 25. Tuesday, 20 November, 12
  26. 26. Tuesday, 20 November, 12
  27. 27. Tuesday, 20 November, 12
  28. 28. Tuesday, 20 November, 12
  29. 29. Tuesday, 20 November, 12
  30. 30. Tuesday, 20 November, 12
  31. 31. RWD - Under the hood Fluid Foundation no fixed-width layouts. or PXs. seriously Media Queries target media types and media features Responsive Images percentage widths (+ *sigh* serving multiple images)Tuesday, 20 November, 12
  32. 32. RWD - Fluid Foundation Declare percentage (%) or ratio (em) widths instead of absolute values (px) in order to adapt to the size of the viewport. section { margin: 0.5em; width: 75%; height: 10em; } <meta name="viewport" content="width=device-width">Tuesday, 20 November, 12
  33. 33. Tuesday, 20 November, 12
  34. 34. Tuesday, 20 November, 12
  35. 35. Tuesday, 20 November, 12
  36. 36. RWD - Media Queries It’s how you target specific media AND media features! /* 30em = 480px */ @media screen and (min-width: 30em) { h1 {font-size: 1em;} } /* 30em = 480px and 48em = 768px */ @media screen and (min-width: 30em) and (max- width: 48em) { h1 {font-size: 1.5em;} } How about them breakpoints?Tuesday, 20 November, 12
  37. 37. RWD - Responsive ImagesTuesday, 20 November, 12
  38. 38. RWD - Responsive Images How do you make fixed-width elements (i.e. images) work with your awesome fluid layout? img { max-width: 100%; height: auto; }Tuesday, 20 November, 12
  39. 39. RWD - Responsive ImagesTuesday, 20 November, 12
  40. 40. RWD - Responsive Images New problemTuesday, 20 November, 12
  41. 41. RWD - Responsive Images New problemTuesday, 20 November, 12
  42. 42. RWD - Responsive Images New problemTuesday, 20 November, 12
  43. 43. RWD - Responsive Images Solutions Image Optimization Scalable Vector Graphics (SVG) Media Queries - (background) image replacement Icon Fonts - css-tricks.com/examples/IconFont A new HTML element - w3.org/community/respimgTuesday, 20 November, 12
  44. 44. RWD - Responsive Images Solutions Image Optimization Scalable Vector Graphics (SVG) Media Queries - (background) image replacement Icon Fonts - css-tricks.com/examples/IconFont A new HTML element - w3.org/community/respimg Unfortunately, there is no “one solution to rule them all”! css-tricks.com/which-responsive-images-solution-should-you-useTuesday, 20 November, 12
  45. 45. RWD - Summary Fluid Foundation + Media Queries + Responsive ImagesTuesday, 20 November, 12
  46. 46. RWD = FutureFriend.lyTuesday, 20 November, 12
  47. 47. RWD & A11Y = ♥Tuesday, 20 November, 12
  48. 48. So, why are RWD & A11Y really good together !?Tuesday, 20 November, 12
  49. 49. RWD & A11Y = ♥ Why? Personal Ov errid ing Stylesheet (Fluid Foundation + Media Queries + Responsive Images) Inherent Inclination to Web Standards Mobile First + Progressive Enhancement Caters to Users Needs, Devices, ContextTuesday, 20 November, 12
  50. 50. Personal Overriding Stylesheet Less about the design, more about the content!Tuesday, 20 November, 12
  51. 51. Personal Overriding Stylesheet Less about the design, more about the content! Think about it! We’re changing the CSS stylesheet to suit our needs!Tuesday, 20 November, 12
  52. 52. Personal Overriding Stylesheet “My basic point is that it should be the content that dictates the media queries.” @adactioTuesday, 20 November, 12
  53. 53. Personal Overriding Stylesheet “Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad.” @wiltoTuesday, 20 November, 12
  54. 54. Personal Overriding Stylesheet “Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad.” @wilto “RWD is designing for more accessible content!”Tuesday, 20 November, 12
  55. 55. Personal Overriding Stylesheet “Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad.” @wilto “RWD is designing for more accessible content!” George ZamfirTuesday, 20 November, 12
  56. 56. Personal Overriding Stylesheet Moaaar Accessible Content! “Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad.” @wilto “RWD is designing for more accessible content!” George ZamfirTuesday, 20 November, 12
  57. 57. Tuesday, 20 November, 12
  58. 58. Tuesday, 20 November, 12
  59. 59. Tuesday, 20 November, 12
  60. 60. Personal Overriding Stylesheet Reduced Cognitive & Visual Load RWD goes beyond layouts & images, we’re now tackling line & letter spacing (leading & kerning), readable typefaces (even dyslexia) AND responsive typography.Tuesday, 20 November, 12
  61. 61. Personal Overriding Stylesheet Reduced Cognitive & Visual Load RWD goes beyond layouts & images, we’re now tackling line & letter spacing (leading & kerning), readable typefaces (even dyslexia) AND responsive typography. “Georgia works perfectly as body text up until 16 pixels. As soon as you go over that size, it starts to look odd. This is not a design deficiency of the typeface. It was simply not designed to work for big body text sizes and dense screens.” - informationarchitects.netTuesday, 20 November, 12
  62. 62. Tuesday, 20 November, 12
  63. 63. Personal Overriding Stylesheet Fat Fingers SyndromeTuesday, 20 November, 12
  64. 64. Personal Overriding Stylesheet Fat Fingers Syndrome Don’t make me think! (Steve Krug)Tuesday, 20 November, 12
  65. 65. Personal Overriding Stylesheet Fat Fingers Syndrome Don’t make me think! (Steve Krug) What does it mean for a11y? 1 finger, no fingers, motor control, dexterity, novice IT users, etc.Tuesday, 20 November, 12
  66. 66. Personal Overriding Stylesheet Fat Fingers Syndrome Don’t make me think! (Steve Krug) What does it mean for a11y? 1 finger, no fingers, motor control, dexterity, novice IT users, etc. header[role="banner"] nav a { padding:0.4em 1em 0.5em; }Tuesday, 20 November, 12
  67. 67. Tuesday, 20 November, 12
  68. 68. Tuesday, 20 November, 12
  69. 69. Tuesday, 20 November, 12
  70. 70. Embracing Web Standards platform specific hacks  no more custom controls  mouse-only wankeryTuesday, 20 November, 12
  71. 71. Embracing Web Standards platform specific hacks  no more custom controls  mouse-only wankery HTML5 & ARIATuesday, 20 November, 12
  72. 72. Mobile First & Progressive Enhancement Mobile first designing for the smallest screen resolution first (<320px) and use it as the base for the next, larger screen resolutions Progressive Enhancement building for the less-capable devices / browsers first and incrementally enhance for the more capable onesTuesday, 20 November, 12
  73. 73. Progressive EnhancementTuesday, 20 November, 12
  74. 74. Progressive Enhancement An escalator can never break--it can only become stairs. You would never see an "Escalator Temporarily Out Of Order" sign, just "Escalator Temporarily Stairs”. Sorry for the convenience. We apologize for the fact that you can still get up there." - Mitch HedbergTuesday, 20 November, 12
  75. 75. Progressive EnhancementTuesday, 20 November, 12
  76. 76. Mobile FirstTuesday, 20 November, 12
  77. 77. Mobile FirstTuesday, 20 November, 12
  78. 78. Mobile First & Progressive EnhancementTuesday, 20 November, 12
  79. 79. Mobile First & Progressive Enhancement It’s all good news for accessibility!Tuesday, 20 November, 12
  80. 80. Mobile First & Progressive EnhancementTuesday, 20 November, 12
  81. 81. Caters to Users Needs, Devices, ContextTuesday, 20 November, 12
  82. 82. RWD & A11Y = ♥ ?Tuesday, 20 November, 12
  83. 83. RWD & A11Y = ♥ ? Accessibility is not lagging behind (for once) accessibility & web standards are core to RWD RWD is a champion for web accessibility we have common goals for our users RWD is not a fad. a solid framework for us to do better web workTuesday, 20 November, 12
  84. 84. RWD & A11Y = ♥ ?Tuesday, 20 November, 12
  85. 85. RWD & A11Y = ♥ ? “RWD is A11Y in disguise!” - George Zamfir Try it for yourself: goodwally.ca/rawd_kit.zipTuesday, 20 November, 12
  86. 86. RWD & A11Y = ♥ ? “RWD is A11Y in disguise!” - George Zamfir Try it for yourself: goodwally.ca/rawd_kit.zipTuesday, 20 November, 12
  87. 87. Thank you!  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  88. 88. Credits, Photos, SourcesTuesday, 20 November, 12
  89. 89. Credits, Photos, Sources freevector.com photobucket.com phombo.com ipadwallsdepot.com www.entypo.com      splio.com/responsive flickr.com/photos/merlin/1343376738 lukew.com/ff/entry.asp?1649Tuesday, 20 November, 12
  90. 90. Research & ResourcesTuesday, 20 November, 12
  91. 91. Research & Resources Responsive Web Design alistapart.com/articles/responsive-web-design bradfrostweb.com + bradfrost.github.com/this-is-responsive/resources.html netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1 stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_design msdn.microsoft.com/en-us/magazine/hh653584.aspx coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design responsivedesign.ca/blog/slidecast-rwd-introduction-workflow-overview johnpolacek.github.com/scrolldeck.js/decks/responsive github.com/filamentgroup/Responsive-Images informationarchitects.net/blog/responsive-typography matanich.com/2012/11/06/picture-polyfill css-tricks.com/which-responsive-images-solution-should-you-use mediaqueri.es + quirksmode.org http://www.lukew.com/ff/entry.asp?1649 Mobile First & Progressive Enhancement github.com/bradfrost/Mobile-First-RWD lukew.com/resources/mobile_first.asp  lukew.com/presos/preso.asp?26 (preso slides + audio + video) christianheilmann.com/tag/progressive-enhancement/Tuesday, 20 November, 12

×