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

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-design
Tuesday, 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 Images
Tuesday, 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 Images
Tuesday, 20 November, 12

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

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

42. RWD - Responsive Images
New problem
Tuesday, 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/respimg
Tuesday, 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-use
Tuesday, 20 November, 12

45. RWD - Summary
Fluid Foundation + Media Queries + Responsive Images
Tuesday, 20 November, 12

46. RWD = FutureFriend.ly
Tuesday, 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, Context
Tuesday, 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.”
@adactio
Tuesday, 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.”
@wilto
Tuesday, 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 Zamfir
Tuesday, 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 Zamfir
Tuesday, 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.net
Tuesday, 20 November, 12

62. Tuesday, 20 November, 12

63. Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday, 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 wankery
Tuesday, 20 November, 12

71. Embracing Web Standards
platform specific hacks
no more custom controls
mouse-only wankery
HTML5 & ARIA
Tuesday, 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 ones
Tuesday, 20 November, 12

73. Progressive Enhancement
Tuesday, 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 Hedberg
Tuesday, 20 November, 12

75. Progressive Enhancement
Tuesday, 20 November, 12

76. Mobile First
Tuesday, 20 November, 12

77. Mobile First
Tuesday, 20 November, 12

78. Mobile First & Progressive Enhancement
Tuesday, 20 November, 12

79. Mobile First & Progressive Enhancement
It’s all good news
for accessibility!
Tuesday, 20 November, 12

80. Mobile First & Progressive Enhancement
Tuesday, 20 November, 12

81. Caters to Users' Needs, Devices, Context
Tuesday, 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 work
Tuesday, 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.zip
Tuesday, 20 November, 12

86. RWD & A11Y = ♥ ?
“RWD is A11Y in disguise!”
- George Zamfir
Try it for yourself: goodwally.ca/rawd_kit.zip
Tuesday, 20 November, 12

87. Thank you!
 @good_wally goodwally.ca 🌎
Tuesday, 20 November, 12

88. Credits, Photos, Sources
Tuesday, 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?1649
Tuesday, 20 November, 12

90. Research & Resources
Tuesday, 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