Responsive Web Design - An Accessibility Tool

Responsive Web Design & Accessibility = ♥
Tuesday, 28 May, 13

goodwally.ca 🌎 @good_wally
Responsive Web Design
&
Web Accessibility
george@goodwally.ca
twitter.com/good_wally
#accessconf accessconf.ca
Tuesday, 28 May, 13

George Zamfir
Accessibility solutioneer at Good Wally
goodwally.ca
Co-organizer at
Toronto Accessibility and Inclusive Design
meetup.com/a11yTO
Accessibility consultant at Scotiabank
Presentations: slideshare.net/GeorgeZamfir
Podcast (fairly new): weba.im/webaxe97
Tuesday, 28 May, 13

Tuesday, 28 May, 13

Responsive Web Design (RWD)
&
Web Accessibility (A11Y)
40 min presentation &
10 min of Q & A or more advanced RWD
• responsive web design primer
• accessibility implications
Tuesday, 28 May, 13

The problem reality of today’s web
If responsive design is the solution, what is the problem?
Tuesday, 28 May, 13

• Web design borrowed from print design
• 640x480, 800x600, 1024x768 (consensual hallucination)
• The browser is an unknown constraint
“Essentially, we were making print designs
navigable on a computer”
- A List Apart, Scott Jehl
RWD Overview - the reality of today’s web
Web is not print (anymore)
Tuesday, 28 May, 13

Designing for a new resolution was the exception!
Web is not print (anymore)
Tuesday, 28 May, 13

Devices change
Tuesday, 28 May, 13

Context changed
Tuesday, 28 May, 13

One web
"The primary design principle underlying the Web’s usefulness
and growth is universality… It must work with any form of
information, be it a document or a point of data, and
information of any quality — from a silly tweet to a scholarly
paper.
And it should be accessible from any kind of hardware that
can connect to the Internet: stationary or mobile, small screen
or large."
- Tim Berners-Lee, Long Live the Web, 2010
http://www.scientificamerican.com/article.cfm?id=long-live-the-web
Tuesday, 28 May, 13

Many webs ?
the desktop web
mobile web
tablet web
“phablet” web
“tabtop” web
internet-enabled fridge web
More on “one web”: adactio.com/links/4789
Tuesday, 28 May, 13

Good News!
The web is inherently fluid & responsive.
We simply need to re-educate ourselves.
Tuesday, 28 May, 13

RWD - The Details
What is RWD? - a definition
Started off as a technique for building one
website that would work on all devices.
"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, Responsive Web Design, 2010
alistapart.com/articles/responsive-web-design
Tuesday, 28 May, 13

RWD Overview
What is RWD?
It’s really an umbrella term for:
• web standards
• best practices
• some new RWD-specific techniques
... formulated in the context of mobile devices.
It’s not new and it’s not revolutionary!
Tuesday, 28 May, 13

RWD - The Details
Tuesday, 28 May, 13

RWD - The Details
Fluid Foundation
flexible layout that uses relative sizing (no fixed widths)
Media Queries
target media types and media features
Responsive Images
relative widths (CSS) and / or dynamic replacement (JS)
Tuesday, 28 May, 13

RWD - The Details
RWD - Fluid Foundation
Tuesday, 28 May, 13

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;
}
RWD - The Details
Tuesday, 28 May, 13

Text
RWD - The Viewport
Tuesday, 28 May, 13

RWD - The Viewport
... to adapt to the size of the viewport.
meta
name = "viewport"
content = “
width = device-width,
initial-scale = 1
“
developer.apple.com/library/safari/#documentation/AppleApplications/Reference/
SafariWebContent/UsingtheViewport/UsingtheViewport.html
RWD - The Details
Tuesday, 28 May, 13

RWD - Media Queries
<link
rel=”stylesheet”
href="layoutPrint.css"
media="print"
/>
RWD - The Details
Tuesday, 28 May, 13

RWD - Media Queries
<link
rel=”stylesheet”
href="layout.css"
media="screen and (min-width: 400px)"
/>
@media screen and (min-width: 30em) {
// mobile styles here
}
RWD - The Details
Tuesday, 28 May, 13

RWD - Media Queries
RWD - The Details
Tuesday, 28 May, 13

RWD - Media Queries
CSS 2.1 - media types (e.g. screen, print, etc.)
<link href="style.css"... media="screen" />
<link href="stylePrint.css"... media="print" />
CSS 3 - media queries with features:
@media screen and (min-width: 30em) {
}
width, height, max-/min-width, max-/min-height, device-
height, orientation, aspect-ratio, resolution
RWD - The Details
Tuesday, 28 May, 13

RWD - Media Queries
Use ems instead of pxs in media queries!
@media screen and (max-width: 30em) {
}
Your users will thank you
(when zooming in on desktop browsers)
Let’s see why
RWD - The Details
Tuesday, 28 May, 13

RWD - Media Queries
(device resolution) device-width
vs
(browser / app resolution) width
device-width is fixed regardless
of the device orientation!
iPhone 4:
device-width = 320px
width = 640px
1 CSS px = 2 device px
RWD - The Details
Tuesday, 28 May, 13

RWD - The Details
RWD - Responsive Images
Tuesday, 28 May, 13

How do you make fixed-width elements (i.e.
images) work with your awesome fluid layouts?
img {
max-width: 100%;
height: auto;
}
Make images resize with the layout. Also, it’s
much more easier to maintain.
RWD - The Details
Tuesday, 28 May, 13

RWD - The Details
New problem
Tuesday, 28 May, 13

RWD - The Details
No HTML-based solution
Tuesday, 28 May, 13

RWD - The Details
Solutions:
Image Optimization
Scalable Vector Graphics (SVG)
Icon Fonts - css-tricks.com/examples/IconFont
New HTML element - www.responsiveimages.org
Image replacement with polyfills -- picturefill.js
Media Queries - (background) image replacement
Unfortunately, there is no “one size ﬁts all” solution!
Tuesday, 28 May, 13

46.7 kb
103.3 kb
Image Optimizations
Tuesday, 28 May, 13

Scalable Vector Graphics (SVG)
Tuesday, 28 May, 13

Icon Fonts
 
Tuesday, 28 May, 13

W3C “Responsive Images Community Group”
responsiveimages.org
w3.org/community/respimg
New HTML element proposal
RWD under the hood
Tuesday, 28 May, 13

Image replacement with picturefill.js
github.com/scottjehl/picturefill
RWD under the hood
Let’s see it in action!
Tuesday, 28 May, 13

Media Queries - (background) images replacement
Display different sizes of the image with media queries!
<div id="test5"></div>
@media all and (max-width: 600px) {
#test5 { background-image:url('images/test5-mobile.png'); }
}
@media all and (min-width: 601px) {
#test5 { background-image:url('images/test5-desktop.png'); }
}
RWD under the hood
Tuesday, 28 May, 13

Text
adaptive-images.com
filamentgroup.com/lab/rwd_img_compression
cloudfour.com/examples/mediaqueries/image-test
timkadlec.com/2012/04/media-query-asset-downloading-results
css-tricks.com/which-responsive-images-solution-should-you-use
Further reading / resources
Tuesday, 28 May, 13

RWD - The Details
RWD - Summary
Fluid Foundation + Media Queries + Responsive Images
Tuesday, 28 May, 13

RWD - The Details
More than just “squishy” designs
Tuesday, 28 May, 13

Performance
“Well done to Audi and BMW for winning the beauty contest.
From the winner of 2006 International Engine of the Year.”
Tuesday, 28 May, 13

RWD best practices
gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Why is performance important?
Tuesday, 28 May, 13

TextDevice chasing = rabbit hole
Tuesday, 28 May, 13

RWD & A11Y = ♥
They are really good together!
Tuesday, 28 May, 13

RWD & A11Y = ♥ Why?
Personal Overriding Stylesheet
(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First+ Progressive Enhancement
Caters to Users' Needs, Devices, Context
Tuesday, 28 May, 13

RWD & A11Y = ♥
Less about the design, more about the content!
Tuesday, 28 May, 13

RWD & A11Y = ♥
“My basic point is that it should be the content
that dictates the media queries.”
@adactio
Tuesday, 28 May, 13

RWD & A11Y = ♥
“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, 28 May, 13

RWD & A11Y = ♥
“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, 28 May, 13

RWD & A11Y = ♥
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, 28 May, 13

RWD & A11Y = ♥
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, 28 May, 13

RWD & A11Y = ♥
Kerning Typefaces
Tuesday, 28 May, 13

RWD & A11Y = ♥ Text
Fat Fingers Syndrome
Tuesday, 28 May, 13

What does it mean for a11y?
1 finger, no fingers, motor control,
dexterity, novice IT users, etc.
Tuesday, 28 May, 13

header[role="banner"] nav a {
padding:0.4em 1em 0.5em;
}
What does it mean for a11y?
1 finger, no fingers, motor control,
dexterity, novice IT users, etc.
Tuesday, 28 May, 13

RWD & A11Y = ♥
Embracing Web Standards
no more
platform specific hacks
custom controls
mouse-only hackery
HTML5 & ARIA
Tuesday, 28 May, 13

RWD & A11Y = ♥
Embracing Web Standards
Tuesday, 28 May, 13

RWD & A11Y = ♥
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, 28 May, 13

RWD best practices
Tuesday, 28 May, 13

RWD & A11Y = ♥
1. build for the less-capable devices / browsers first
2. start low in the stack: HTML(5), CSS, basic JavaScript
3. incrementally enhance for the more capable devices
4. use @media queries and advanced JavaScript
Tuesday, 28 May, 13

RWD pitfalls
JavaScript-ing everything
Tuesday, 28 May, 13

RWD & A11Y = ♥
Tuesday, 28 May, 13

Mobile First RWD
Tuesday, 28 May, 13

RWD & A11Y = ♥
Mobile First RWD
Tuesday, 28 May, 13

Mobile Only
Tuesday, 28 May, 13

Mobile Please
Tuesday, 28 May, 13

All roads lead to mobile
Tuesday, 28 May, 13

RWD & A11Y = ♥
Mobile First RWD
1. design for the smallest screen resolution first
2. stretch until ugly (not until iPhone screen resolution)
3. (aha) use “ugly” as you breakpoint
4. adapt the content for the new size (until not “ugly”)
Tuesday, 28 May, 13

Text
RWD breakpoints
stretch until “ugly” - breakpoint!
Tuesday, 28 May, 13

RWD plan
What’s wrong with this guy
(not liking device-specific breakpoints)
?
I’m not alone:
bradfrostweb.com/demo/ish
“Determining breakpoints for a responsive design” chapter
from the book: implementingresponsivedesign.com
Tuesday, 28 May, 13

RWD plan
http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
It’s a losing battle!
Tuesday, 28 May, 13

desktop screen resolutions
Tuesday, 28 May, 13

mobile screen resolutions
Tuesday, 28 May, 13

mobile browsers
Tuesday, 28 May, 13

your analytics data
Tuesday, 28 May, 13

RWD plan
Which breakpoints should we choose? It depends!
Considerations:
look at devices & browsers market share and their
associated screen resolutions & capabilities
ﬁlter with your own analytics data
assess your current design & nature of the content
Mobile first - breakpoints
Tuesday, 28 May, 13

Text
There’s no perfect set of breakpoints!
Set the breakpoints based on the target audience, the project
goals, typical device market share, nature of content, design...
Tuesday, 28 May, 13

RWD & A11Y = ♥
It’s all good news
for accessibility!
Tuesday, 28 May, 13

RWD & A11Y = ♥
Tuesday, 28 May, 13

RWD & A11Y = ♥
Caters to Users' Needs, Devices, Context
Tuesday, 28 May, 13

RWD & A11Y = ♥
Tuesday, 28 May, 13

RWD & A11Y = ♥
uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?
Tuesday, 28 May, 13

RWD & A11Y = ♥ ?
Tuesday, 28 May, 13

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
Tuesday, 28 May, 13

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, 28 May, 13

RWD & A11Y = ♥
“RWD is A11Y in disguise!”
- George Zamfir
Try it for yourself: goodwally.ca/rawd_kit.zip
Tuesday, 28 May, 13

Thank you!
Tuesday, 28 May, 13

Text
Credits, Photos, Sources
freevector.com
photobucket.com
phombo.com
ipadwallsdepot.com
www.entypo.com
splio.com/responsive
flickr.com/photos/merlin/1343376738
http://www.flickr.com/photos/lukew/7382743430/
sizes/l/in/photostream
http://www.slideshare.net/bradfrostweb/for-a-
futurefriendly-web-webvisions-chicago-2012
http://bradfrostweb.com/blog/post/this-is-the-web/
http://www.flickr.com/photos/hoder/1879222816/
http://www.superiormediasolutions.net/wp-content/
uploads/2012/02/couch-shot_highres.jpg
http://www.lukew.com
http://www.clker.com
http://www.netmagazine.com/features/five-
responsive-web-design-pitfalls-avoid
http://www.slideshare.net/AaronGustafson/
progressive-enhancement-mobile
http://www.responsivedesign.ca
http://www.flickr.com/photos/kiwanja/3169449999/
sizes/o/in/photostream/
http://www.yarn-zombie.com/2012/07/zombie-
apocalypse-theres-app-for-that.html
http://cnnphotos.blogs.cnn.com/2012/02/29/
de_vice-our-mobile-addiction/
http://rochellemoulton.com/wp-content/uploads/
2012/12/When-The-Competition-Is-
Perfection-12-10-2012.jpg
http://nasa.gov
http://www.3dtotal.com/
index_gallery_detailed2.php?
id=4798#.UQHDAaUzhH8
http://www.flickr.com/photos/danmumford/
7945175156/
http://assets2.designerpages.com/assets/1589142/
AHD_-_KR_-_Endless_Table_-_Corian1.jpg
http://services.google.com/fh/files/misc/
multiscreenworld_final.pdf
Tuesday, 28 May, 13

Text
Research & Resources
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
christianheilmann.com/tag/progressive-enhancement/
bdconf.com/2012/orlando/schedule
blog.cloudfour.com/responsive-design-for-apps-part-1
bradfrostweb.com/blog/mobile/bdconf-guy-podjarny-
presents-performance-implication-of-mobile-design
boagworld.com/mobile-web/separate-mobile-site-vs-
responsive-design
developer.mozilla.org/en-US/docs/Web_Development/
Mobile
lukew.com/ff/entry.asp?1506
24ways.org/2011/conditional-loading-for-responsive-
designs
http://www.guypo.com/technical/responsive-web-
design-is-bad-for-performance-there-i-said-it/
http://www.howtogomo.com
http://bradfrostweb.com/blog/mobile/content-parity/
http://www.akamai.com/dl/akamai/
akamai_soti_q312_exec_summary.pdf
http://www.howtogomo.com
http://www.gomez.com/website-performance-test/
thank-you?
tid=d5be9cec6d6609c8a046ba3155952b25&lang=en&
bu=apm
Tuesday, 28 May, 13

Responsive Web Design - An Accessibility Tool

More Related Content

Viewers also liked (13)

Similar to Responsive Web Design - An Accessibility Tool (20)

Recently uploaded (20)

Responsive Web Design - An Accessibility Tool