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
               geo...
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 Q...
RWD - Fluid Foundation
                 Declare percentage (%) or ratio (em) widths
                       instead of abso...
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 Images




Tuesday, 20 November, 12
RWD - Responsive Images

           How do you make fixed-width elements (i.e.
           images) work with your awesome f...
RWD - Responsive Images




Tuesday, 20 November, 12
RWD - Responsive Images
                           New problem




Tuesday, 20 November, 12
RWD - Responsive Images
                           New problem




Tuesday, 20 November, 12
RWD - Responsive Images
                           New problem




Tuesday, 20 November, 12
RWD - Responsive Images
                              Solutions
           Image Optimization
           Scalable Vector G...
RWD - Responsive Images
                                    Solutions
           Image Optimization
           Scalable Ve...
RWD - Summary
            Fluid Foundation + Media Queries + Responsive Images




Tuesday, 20 November, 12
RWD = FutureFriend.ly




Tuesday, 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 Foundat...
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...
Personal Overriding Stylesheet



          “Mobile users want to see our menu, hours and
          delivery number. Deskt...
Personal Overriding Stylesheet



          “Mobile users want to see our menu, hours and
          delivery number. Deskt...
Personal Overriding Stylesheet



          “Mobile users want to see our menu, hours and
          delivery number. Deskt...
Personal Overriding Stylesheet

           Moaaar Accessible Content!
          “Mobile users want to see our menu, hours ...
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Tuesday, 20 November, 12
Personal Overriding Stylesheet

           Reduced Cognitive & Visual Load

           RWD goes beyond layouts & images, w...
Personal Overriding Stylesheet

           Reduced Cognitive & Visual Load

           RWD goes beyond layouts & images, w...
Tuesday, 20 November, 12
Personal Overriding Stylesheet

           Fat Fingers Syndrome




Tuesday, 20 November, 12
Personal Overriding Stylesheet

           Fat Fingers Syndrome
          Don’t make me think! (Steve Krug)




Tuesday, 2...
Personal Overriding Stylesheet

           Fat Fingers Syndrome
          Don’t make me think! (Steve Krug)


          Wh...
Personal Overriding Stylesheet

           Fat Fingers Syndrome
          Don’t make me think! (Steve Krug)


          Wh...
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 f...
Progressive Enhancement




Tuesday, 20 November, 12
Progressive Enhancement
           An escalator can never break--it can only become stairs.

           You would never se...
Progressive Enhancement




Tuesday, 20 November, 12
Mobile First




Tuesday, 20 November, 12
Mobile First




Tuesday, 20 November, 12
Mobile First & Progressive Enhancement




Tuesday, 20 November, 12
Mobile First & Progressive Enhancement




                           It’s all good news
                           for ac...
Mobile First & Progressive Enhancement




Tuesday, 20 November, 12
Caters to Users' Needs, Devices, Context




Tuesday, 20 November, 12
RWD & A11Y = ♥   ?




Tuesday, 20 November, 12
RWD & A11Y = ♥       ?

           Accessibility is not lagging behind (for once)
           accessibility & web standards...
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, Sources




Tuesday, 20 November, 12
Credits, Photos, Sources
                                        freevector.com

                                       ph...
Research & Resources




Tuesday, 20 November, 12
Research & Resources
        Responsive Web Design
        alistapart.com/articles/responsive-web-design
        bradfrost...
Upcoming SlideShare
Loading in …5
×

of

Responsive Web Design & Accessibility Slide 1 Responsive Web Design & Accessibility Slide 2 Responsive Web Design & Accessibility Slide 3 Responsive Web Design & Accessibility Slide 4 Responsive Web Design & Accessibility Slide 5 Responsive Web Design & Accessibility Slide 6 Responsive Web Design & Accessibility Slide 7 Responsive Web Design & Accessibility Slide 8 Responsive Web Design & Accessibility Slide 9 Responsive Web Design & Accessibility Slide 10 Responsive Web Design & Accessibility Slide 11 Responsive Web Design & Accessibility Slide 12 Responsive Web Design & Accessibility Slide 13 Responsive Web Design & Accessibility Slide 14 Responsive Web Design & Accessibility Slide 15 Responsive Web Design & Accessibility Slide 16 Responsive Web Design & Accessibility Slide 17 Responsive Web Design & Accessibility Slide 18 Responsive Web Design & Accessibility Slide 19 Responsive Web Design & Accessibility Slide 20 Responsive Web Design & Accessibility Slide 21 Responsive Web Design & Accessibility Slide 22 Responsive Web Design & Accessibility Slide 23 Responsive Web Design & Accessibility Slide 24 Responsive Web Design & Accessibility Slide 25 Responsive Web Design & Accessibility Slide 26 Responsive Web Design & Accessibility Slide 27 Responsive Web Design & Accessibility Slide 28 Responsive Web Design & Accessibility Slide 29 Responsive Web Design & Accessibility Slide 30 Responsive Web Design & Accessibility Slide 31 Responsive Web Design & Accessibility Slide 32 Responsive Web Design & Accessibility Slide 33 Responsive Web Design & Accessibility Slide 34 Responsive Web Design & Accessibility Slide 35 Responsive Web Design & Accessibility Slide 36 Responsive Web Design & Accessibility Slide 37 Responsive Web Design & Accessibility Slide 38 Responsive Web Design & Accessibility Slide 39 Responsive Web Design & Accessibility Slide 40 Responsive Web Design & Accessibility Slide 41 Responsive Web Design & Accessibility Slide 42 Responsive Web Design & Accessibility Slide 43 Responsive Web Design & Accessibility Slide 44 Responsive Web Design & Accessibility Slide 45 Responsive Web Design & Accessibility Slide 46 Responsive Web Design & Accessibility Slide 47 Responsive Web Design & Accessibility Slide 48 Responsive Web Design & Accessibility Slide 49 Responsive Web Design & Accessibility Slide 50 Responsive Web Design & Accessibility Slide 51 Responsive Web Design & Accessibility Slide 52 Responsive Web Design & Accessibility Slide 53 Responsive Web Design & Accessibility Slide 54 Responsive Web Design & Accessibility Slide 55 Responsive Web Design & Accessibility Slide 56 Responsive Web Design & Accessibility Slide 57 Responsive Web Design & Accessibility Slide 58 Responsive Web Design & Accessibility Slide 59 Responsive Web Design & Accessibility Slide 60 Responsive Web Design & Accessibility Slide 61 Responsive Web Design & Accessibility Slide 62 Responsive Web Design & Accessibility Slide 63 Responsive Web Design & Accessibility Slide 64 Responsive Web Design & Accessibility Slide 65 Responsive Web Design & Accessibility Slide 66 Responsive Web Design & Accessibility Slide 67 Responsive Web Design & Accessibility Slide 68 Responsive Web Design & Accessibility Slide 69 Responsive Web Design & Accessibility Slide 70 Responsive Web Design & Accessibility Slide 71 Responsive Web Design & Accessibility Slide 72 Responsive Web Design & Accessibility Slide 73 Responsive Web Design & Accessibility Slide 74 Responsive Web Design & Accessibility Slide 75 Responsive Web Design & Accessibility Slide 76 Responsive Web Design & Accessibility Slide 77 Responsive Web Design & Accessibility Slide 78 Responsive Web Design & Accessibility Slide 79 Responsive Web Design & Accessibility Slide 80 Responsive Web Design & Accessibility Slide 81 Responsive Web Design & Accessibility Slide 82 Responsive Web Design & Accessibility Slide 83 Responsive Web Design & Accessibility Slide 84 Responsive Web Design & Accessibility Slide 85 Responsive Web Design & Accessibility Slide 86 Responsive Web Design & Accessibility Slide 87 Responsive Web Design & Accessibility Slide 88 Responsive Web Design & Accessibility Slide 89 Responsive Web Design & Accessibility Slide 90 Responsive Web Design & Accessibility Slide 91
Upcoming SlideShare
Intro to html5 Boilerplate
Next
Download to read offline and view in fullscreen.

20 Likes

Share

Download to read offline

Responsive Web Design & Accessibility

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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-design Tuesday, 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 Images Tuesday, 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 Images Tuesday, 20 November, 12
  40. 40. RWD - Responsive Images New problem Tuesday, 20 November, 12
  41. 41. RWD - Responsive Images New problem Tuesday, 20 November, 12
  42. 42. RWD - Responsive Images New problem Tuesday, 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/respimg Tuesday, 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-use Tuesday, 20 November, 12
  45. 45. RWD - Summary Fluid Foundation + Media Queries + Responsive Images Tuesday, 20 November, 12
  46. 46. RWD = FutureFriend.ly Tuesday, 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, Context Tuesday, 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.” @adactio Tuesday, 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.” @wilto Tuesday, 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 Zamfir Tuesday, 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 Zamfir Tuesday, 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.net Tuesday, 20 November, 12
  62. 62. Tuesday, 20 November, 12
  63. 63. Personal Overriding Stylesheet Fat Fingers Syndrome Tuesday, 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 wankery Tuesday, 20 November, 12
  71. 71. Embracing Web Standards platform specific hacks  no more custom controls  mouse-only wankery HTML5 & ARIA Tuesday, 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 ones Tuesday, 20 November, 12
  73. 73. Progressive Enhancement Tuesday, 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 Hedberg Tuesday, 20 November, 12
  75. 75. Progressive Enhancement Tuesday, 20 November, 12
  76. 76. Mobile First Tuesday, 20 November, 12
  77. 77. Mobile First Tuesday, 20 November, 12
  78. 78. Mobile First & Progressive Enhancement Tuesday, 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 Enhancement Tuesday, 20 November, 12
  81. 81. Caters to Users' Needs, Devices, Context Tuesday, 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 work Tuesday, 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.zip Tuesday, 20 November, 12
  86. 86. RWD & A11Y = ♥ ? “RWD is A11Y in disguise!” - George Zamfir Try it for yourself: goodwally.ca/rawd_kit.zip Tuesday, 20 November, 12
  87. 87. Thank you!  @good_wally goodwally.ca 🌎 Tuesday, 20 November, 12
  88. 88. Credits, Photos, Sources Tuesday, 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?1649 Tuesday, 20 November, 12
  90. 90. Research & Resources Tuesday, 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
  • HilaGriner

    Jun. 18, 2020
  • thedaviddias

    Jan. 23, 2015
  • sitedudes

    Feb. 24, 2014
  • Ateneae

    Jan. 23, 2014
  • umhealthscienceslibraries

    Jul. 13, 2013
  • Advertisinggenius

    Feb. 19, 2013
  • citrusalice

    Feb. 13, 2013
  • mcassi

    Feb. 2, 2013
  • newvicweb

    Jan. 24, 2013
  • LaetitiaGiannettini

    Jan. 21, 2013
  • szantaikaroly

    Jan. 17, 2013
  • brott

    Jan. 8, 2013
  • rikiha

    Dec. 21, 2012
  • leaphub

    Dec. 7, 2012
  • motchie

    Nov. 29, 2012
  • dotjay

    Nov. 26, 2012
  • angelostzelepis

    Nov. 21, 2012
  • firewalkwizme

    Nov. 21, 2012
  • webaxe

    Nov. 21, 2012
  • CharJTF

    Nov. 20, 2012

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

Views

Total views

41,668

On Slideshare

0

From embeds

0

Number of embeds

4,681

Actions

Downloads

87

Shares

0

Comments

0

Likes

20

×