Responsive Web Design & Accessibility

Responsive Web Design
&
Web Accessibility
george zamfir #a11yTO
meetup.com/a11yTO @a11yCampTO

 @good_wally goodwally.ca 🌎
Tuesday, 20 November, 12

RWD & A11Y = ♥
They are really good together!

Responsive Web Design (RWD)
&
Web Accessibility

30 min presentation & 20 min of conversations

• part case study
• part primer on responsive web design
• RWD & A11Y = ♥


For my day job I work on this stuff...


In my spare time...


But I also get to work on cool stuff like
this... ghiglione.ca


What is
Responsive Web Design (rwd) ?


What is

Started off as a technique
for building one website that
would work on all devices.


Why do we need


Why do we need

"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


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)


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">


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?


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;
}


New problem


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


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


RWD - Summary
Fluid Foundation + Media Queries + Responsive Images


RWD = FutureFriend.ly


RWD & A11Y = ♥

So, why are RWD & A11Y
really good together !?

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


Personal Overriding Stylesheet

Less about the design, more about the content!



Less about the design, more about the content!

Think about it!
We’re changing the CSS stylesheet to suit our needs!



“My basic point is that it should be the content
that dictates the media queries.”
@adactio



“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



@wilto

“RWD is designing for more accessible content!”



@wilto

George Zamfir



Moaaar Accessible Content!
@wilto

George Zamfir



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.



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



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.




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;
}


Embracing Web Standards

platform specific hacks
no more custom controls
mouse-only wankery


Embracing Web Standards

platform specific hacks
no more custom controls
mouse-only wankery

HTML5 & ARIA


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


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


Mobile First



It’s all good news
for accessibility!


Caters to Users' Needs, Devices, Context


RWD & A11Y = ♥ ?


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


RWD & A11Y = ♥ ?

“RWD is A11Y in disguise!”
- George Zamfir

Try it for yourself: goodwally.ca/rawd_kit.zip


Thank you!


Credits, Photos, Sources


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


Research & Resources


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

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/


Responsive Web Design & Accessibility

Responsive Web Design & Accessibility

Recommended

More Related Content

Recently uploaded

Recently uploaded(20)

Featured

Featured(20)

Responsive Web Design & Accessibility

Editor's Notes