Responsive Web Design & Accessibility
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Web Design & Accessibility

on

  • 38,553 views

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

July 2013 NOTE: I updated a new, more comprehensive version of this presentation - 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

Statistics

Views

Total Views
38,553
Views on SlideShare
35,260
Embed Views
3,293

Actions

Likes
19
Downloads
63
Comments
0

21 Embeds 3,293

http://www.webaxe.org 2588
http://salvadorwebdesign.blogspot.com.es 276
http://salvadorwebdesign.blogspot.com 156
http://salvadorwebdesign.blogspot.mx 69
http://salvadorwebdesign.blogspot.com.ar 57
https://twitter.com 55
http://www.scoop.it 23
http://salvadorwebdesign.blogspot.ca 22
http://salvadorwebdesign.blogspot.ie 14
http://salvadorwebdesign.blogspot.in 7
http://www.twylah.com 6
http://www.linkedin.com 6
http://salvadorwebdesign.blogspot.de 3
http://www.verious.com 3
http://tweetedtimes.com 2
http://salvadorwebdesign.blogspot.co.uk 1
http://salvadorwebdesign.blogspot.com.br 1
http://bayberry-one.com 1
http://abtasty.com 1
http://wave.webaim.org 1
https://si0.twimg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 0. Dan Ariely - classical music experiment\n0. Picture of audience, I never have any pictures from these events.\nEverybody say, really quickly, “responsive web design”\n\nMeetup: monthly, 150 members, come to teach, be taught, share & even build.\n\nI am & we'll talk about\nHi everyone, my name is George Zamfir and I'm here to talk to you about wally & rwd. Why? Because…\n
  • RWD & A11Y are really good together!\nAs in Wall-e & Eva good. If you're emotional like I am, you can go "aaaaaaw".\nI believe RWD is great for accessibility, it's an enabler;\nMany of the RWD best practices also apply to accessibility. \n
  • Bit of information & housekeeping\nLast year - guided conversation; 15 - 20 min talk; around the room conversation;\n\n
  • Day job - work on technical accessibility solutions on websites like these: \nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website. \n
  • Day job - work on technical accessibility solutions on websites like these: \nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website. \n
  • Day job - work on technical accessibility solutions on websites like these: \nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website. \n
  • Day job - work on technical accessibility solutions on websites like these: \nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website. \n
  • Day job - work on technical accessibility solutions on websites like these: \nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website. \n
  • Day job - work on technical accessibility solutions on websites like these: \nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website. \n
  • Day job - work on technical accessibility solutions on websites like these: \nlarge, high-trafficed websites used by millions of people\nSOL - this is an example of a fairly complex, transactional website. \n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • HOWEVER, In my spare time... \nI dance at weddings - SUCCESSFULLY\njump off cliffs - in the wedding tux\nI like my tea out of beer mugs\n
  • Show of hands: Who has experience with RWD?\n\nWhat is RWD?\nEthan coined it in 2010.\nTechnique - one website - flexible enough to work on all web devices & respond to users' needs & context.\nWell, does this mean that websites just don't work on some devices / browsers?\nActually, yes. Some Blackberry phones do not support advanced JS. But of course you can fix that with progressive enhancement.\n
  • Why do we need RWD?\nThere's an ever-increasing number of devices, browsers and screen sizes. \nRather than creating a separate website for each platform or screen size.\nLet's take a look at an example.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • RWD - Under the hood: fluid foundation, media queries, responsive media\n
  • RWD - fluid foundation\njust don't use pixels; there's a lot that can be said about fluid grids and frameworks\nviewport:  scale viewport to actual device width\n
  • no viewport declaration\n
  • no viewport declaration\n
  • no viewport declaration\n
  • no viewport declaration\n
  • RWD - media queries\nW3C recommendation\nmedia types used since CSS 2.1 - print, screen\nmedia queries allow you to target the media features as well.\nbreakpoints\n
  • responsive images\n
  • How do make fixed-width elements work with fluid layouts?\n
  • new problem - 2 options\nsmall mobile-optimized image (that looks pixelated on large screens) or retina-ready image that may not even load on mobile devices.\n\n
  • new problem - 2 options\nsmall mobile-optimized image (that looks pixelated on large screens) or retina-ready image that may not even load on mobile devices.\n\n
  • new problem - 2 options\nsmall mobile-optimized image (that looks pixelated on large screens) or retina-ready image that may not even load on mobile devices.\n\n
  • there isn't one solution to rule them all.\n
  • rwd - with these 3 components\n
  • rwd - this will be the web\n
  • rwd + a11y = *heart*\n
  • But why is that?\n
  • Here's why I think RWD & A11Y are so good for each other\n
  • Ted Drake - video of Karo - iPad use to make all apps look the same\n\nFluid layouts + Media queries + Responsive images\nThink about it: increasing our text size (, , etc.),  we’re changing the layout, colours, margins, etc.\nLess about the design, more about the content.\n\n
  • No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
  • No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
  • No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
  • No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
  • No device-specific breakpoints rwd;\nThat's a win for us! These guys are advocating both substance & form.\n
  • Content accessibility\nFurther more, boston globe - smart loading - no ads on small screens (even for large screens it loads the ads last)\n
  • Content accessibility\nFurther more, boston globe - smart loading - no ads on small screens (even for large screens it loads the ads last)\n
  • Content accessibility\nFurther more, boston globe - smart loading - no ads on small screens (even for large screens it loads the ads last)\n
  • Content accessibility\nFurther more, boston globe - smart loading - no ads on small screens (even for large screens it loads the ads last)\n
  • Content accessibility\nFurther more, boston globe - smart loading - no ads on small screens (even for large screens it loads the ads last)\n
  • Content accessibility\nFurther more, boston globe - smart loading - no ads on small screens (even for large screens it loads the ads last)\n
  • Content accessibility\nFurther more, boston globe - smart loading - no ads on small screens (even for large screens it loads the ads last)\n
  • Content accessibility\nFurther more, boston globe - smart loading - no ads on small screens (even for large screens it loads the ads last)\n
  • Reduced cognitive load\nThey're talking about line spacing, proper kerning, readable & dyslexia typefaces, etc. \nResponsive typography\nMicrosoft built new icon fonts.\n
  • They're going beyond WCAG 2\n
  • "Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
  • "Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
  • "Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
  • "Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
  • "Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
  • "Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
  • "Fat fingers syndrome"\nRWD is advocating large focusable elements.\n
  • LukeW is looking at touch ergonomics.\nDraws conclusions on navigation placement.\n
  • LukeW is looking at touch ergonomics.\nDraws conclusions on navigation placement.\n
  • here's what RWD doesn’t advocate:\nno platform specific hacks: you can still do them but just know, it may not work on blackberrys\nno custom controls: because the native ones are just better; which means more accessible to us.\nno mouse-only wankery: there is no hover intent on touch devices, which means that we're back to keyboard accessibility; awesome!\n--- DOES ALL THIS SOUND FAMILIAR?\nHTML5 + ARIA: thanks to Apple & VoiceOver more developer are aware of accessibility; it's good (awareness) & bad (screen readers != accessibility)\n
  • Mobile First + Progressive enhancement\n
  • Progressive enhancement: HTML+CSS+JS+ARIA, example\n
  • Progressive enhancement: HTML+CSS+JS+ARIA, example\n
  • Progressive enhancement: HTML+CSS+JS+ARIA, example\n
  • Mobile first: advocates building a website for the smallest screen first.\n
  • Mobile first: advocates building a website for the smallest screen first.\n
  • Mobile first: advocates building a website for the smallest screen first.\n
  • Mobile first: advocates building a website for the smallest screen first.\n
  • Mobile first: advocates building a website for the smallest screen first.\n
  • Mobile First + Progressive enhancement = awesomeness\n
  • Mobile First + Progressive enhancement = awesomeness\n
  • Mobile First + Progressive enhancement = awesomeness\n
  • Caters to Users' Needs, Devices, Context\nThis is a pretty common scenario of an user walking & browsing kinda thing using one hand / thumb and "one eyeball".\nBasically you have the user's divided attention & top RWD people say that we should design for that.\nThis is great for us because, a11y folks, because as we know some people do have one eye, thumb, etc.\nAgain RWD is a great advocate for a11y.\n
  • RWD & A11Y = ♥       ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
  • RWD & A11Y = ♥       ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
  • \n
  • \n
  • \n
  • RWD & A11Y = ♥       ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
  • RWD & A11Y = ♥       ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
  • RWD & A11Y = ♥       ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n
  • RWD & A11Y = ♥       ?\nIn this industry of ours we always say that new technologies are great but accessibility is always one step behind. Flash, HTML5 canvas, etc.\nIn many ways RWD is a champion for accessibility and I think it will stay that way going forward.\nNot a fad, but a very solid framework for us to do better web design & development.\n

Responsive Web Design & Accessibility Presentation Transcript

  • 1. Responsive Web Design & Web Accessibility george zamfir #a11yTO meetup.com/a11yTO @a11yCampTO  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 2. RWD & A11Y = ♥ They are really good together!Tuesday, 20 November, 12
  • 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.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 5. For my day job I work on this stuff...  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 6.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 7.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 8.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 9.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 10. In my spare time...  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 11.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 12.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 13.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 14.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 15.  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 16. But I also get to work on cool stuff like this... ghiglione.ca  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 17. What is Responsive Web Design (rwd) ?Tuesday, 20 November, 12
  • 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. Why do we need Responsive Web Design (rwd) ?Tuesday, 20 November, 12
  • 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. Tuesday, 20 November, 12
  • 22. Tuesday, 20 November, 12
  • 23. Tuesday, 20 November, 12
  • 24. Tuesday, 20 November, 12
  • 25. Tuesday, 20 November, 12
  • 26. Tuesday, 20 November, 12
  • 27. Tuesday, 20 November, 12
  • 28. Tuesday, 20 November, 12
  • 29. Tuesday, 20 November, 12
  • 30. Tuesday, 20 November, 12
  • 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. 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. Tuesday, 20 November, 12
  • 34. Tuesday, 20 November, 12
  • 35. Tuesday, 20 November, 12
  • 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. RWD - Responsive ImagesTuesday, 20 November, 12
  • 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. RWD - Responsive ImagesTuesday, 20 November, 12
  • 40. RWD - Responsive Images New problemTuesday, 20 November, 12
  • 41. RWD - Responsive Images New problemTuesday, 20 November, 12
  • 42. RWD - Responsive Images New problemTuesday, 20 November, 12
  • 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. 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. RWD - Summary Fluid Foundation + Media Queries + Responsive ImagesTuesday, 20 November, 12
  • 46. RWD = FutureFriend.lyTuesday, 20 November, 12
  • 47. RWD & A11Y = ♥Tuesday, 20 November, 12
  • 48. So, why are RWD & A11Y really good together !?Tuesday, 20 November, 12
  • 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. Personal Overriding Stylesheet Less about the design, more about the content!Tuesday, 20 November, 12
  • 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. Personal Overriding Stylesheet “My basic point is that it should be the content that dictates the media queries.” @adactioTuesday, 20 November, 12
  • 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. 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. 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. 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. Tuesday, 20 November, 12
  • 58. Tuesday, 20 November, 12
  • 59. Tuesday, 20 November, 12
  • 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. 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. Tuesday, 20 November, 12
  • 63. Personal Overriding Stylesheet Fat Fingers SyndromeTuesday, 20 November, 12
  • 64. Personal Overriding Stylesheet Fat Fingers Syndrome Don’t make me think! (Steve Krug)Tuesday, 20 November, 12
  • 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. 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. Tuesday, 20 November, 12
  • 68. Tuesday, 20 November, 12
  • 69. Tuesday, 20 November, 12
  • 70. Embracing Web Standards platform specific hacks  no more custom controls  mouse-only wankeryTuesday, 20 November, 12
  • 71. Embracing Web Standards platform specific hacks  no more custom controls  mouse-only wankery HTML5 & ARIATuesday, 20 November, 12
  • 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. Progressive EnhancementTuesday, 20 November, 12
  • 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. Progressive EnhancementTuesday, 20 November, 12
  • 76. Mobile FirstTuesday, 20 November, 12
  • 77. Mobile FirstTuesday, 20 November, 12
  • 78. Mobile First & Progressive EnhancementTuesday, 20 November, 12
  • 79. Mobile First & Progressive Enhancement It’s all good news for accessibility!Tuesday, 20 November, 12
  • 80. Mobile First & Progressive EnhancementTuesday, 20 November, 12
  • 81. Caters to Users Needs, Devices, ContextTuesday, 20 November, 12
  • 82. RWD & A11Y = ♥ ?Tuesday, 20 November, 12
  • 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. RWD & A11Y = ♥ ?Tuesday, 20 November, 12
  • 85. RWD & A11Y = ♥ ? “RWD is A11Y in disguise!” - George Zamfir Try it for yourself: goodwally.ca/rawd_kit.zipTuesday, 20 November, 12
  • 86. RWD & A11Y = ♥ ? “RWD is A11Y in disguise!” - George Zamfir Try it for yourself: goodwally.ca/rawd_kit.zipTuesday, 20 November, 12
  • 87. Thank you!  @good_wally goodwally.ca 🌎Tuesday, 20 November, 12
  • 88. Credits, Photos, SourcesTuesday, 20 November, 12
  • 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. Research & ResourcesTuesday, 20 November, 12
  • 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