responsive web design - an accessibility tool
DESCRIPTION
Accessibility questions? Get in contact: [email protected]. This is the newer & updated version of the "Responsive Web Design & Accessibility" presentation (http://slidesha.re/1awZEmT). George Zamfir, Accessibility Specialist, goodwally.ca Description: As we are moving away from traditional computers and towards mobile devices the question is: How do we build our web products to work for all these devices and more importantly, how do we do it accessibly? In my experience, Responsive Web Design (RWD) is a good solution - not only that it doesn't impede accessibility but it promotes it. We'll learn the basics of RWD and accessibility techniques. Objectives: Throughout the different projects I worked on it became apparent to me that Responsive Web Design (RWD) is a good promoter for accessibility. In this session, I will be sharing the lessons learned and practical examples on implementing RWD and accessibility. The objective is 2-fold: A primer on Responsive Web Design (RWD); what it is and how to build responsive websites Best practices cross-overs between RWD and accessibility. Speaker Bio(s): My name is George Zamfir and I'm passionate about web accessibility. I have been working in web accessibility since 2006 touching on the many facets of this field: performed academic research into learning technologies at Ryerson University, built assistive technologies, ran a web development business, developed technical accessibility solutions at Scotiabank working on complex web properties, but even more gratifying is organizing monthly accessibility meetups in Toronto. Did I mention I also played the piano professionally at age 6? Contact Information: George Zamfir: [email protected] , www.goodwally.ca, http://www.twitter.com/good_wally Session Date: Tuesday, May 28, 2013TRANSCRIPT
Responsive Web Design & Accessibility = â„
Tuesday, 28 May, 13
goodwally.ca đ @good_wally
Responsive Web Design&
Web Accessibility
george@goodwal ly.ca
twitter.com/good_wally
#accessconf accessconf.ca
Tuesday, 28 May, 13
goodwally.ca đ @good_wally
George ZamfirAccessibility solutioneer at Good Wallygoodwally.ca
Co-organizer at Toronto Accessibility and Inclusive Designmeetup.com/a11yTO
Accessibility consultant at Scotiabank
Presentations: slideshare.net/GeorgeZamfirPodcast (fairly new): weba.im/webaxe97
Tuesday, 28 May, 13
goodwally.ca đ @good_wallyTuesday, 28 May, 13
goodwally.ca đ @good_wallyTuesday, 28 May, 13
goodwally.ca đ @good_wallyTuesday, 28 May, 13
goodwally.ca đ @good_wallyTuesday, 28 May, 13
goodwally.ca đ @good_wallyTuesday, 28 May, 13
goodwally.ca đ @good_wallyTuesday, 28 May, 13
goodwally.ca đ @good_wally
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!
RWD Overview - the reality of todayâs web
Web is not print (anymore)
Tuesday, 28 May, 13
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
Devices change
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
Devices change
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
Devices change
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
Devices change
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
Context changed
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
Context changed
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
Context changed
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
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, 2010http://www.scientificamerican.com/article.cfm?id=long-live-the-web
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
Many webs ?
the desktop webmobile webtablet webâphabletâ webâtabtopâ webinternet-enabled fridge web
More on âone webâ: adactio.com/links/4789
Tuesday, 28 May, 13
RWD Overview - the reality of todayâs web
Good News!
The web is inherently fluid & responsive.
We simply need to re-educate ourselves.
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
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 DetailsTuesday, 28 May, 13
RWD - The Details
Fluid Foundationflexible layout that uses relative sizing (no fixed widths)
Media Queriestarget media types and media features
Responsive Imagesrelative 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) widthsinstead 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
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
RWD - The Details
Tuesday, 28 May, 13
RWD - Media QueriesCSS 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) { // mobile styles here}
width, height, max-/min-width, max-/min-height, device-height, orientation, aspect-ratio, resolution
RWD - The Details
Tuesday, 28 May, 13
RWD - Media QueriesUse ems instead of pxs in media queries!
@media screen and (max-width: 30em) { // mobile styles here}
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 = 320pxwidth = 640px1 CSS px = 2 device px
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 = 320pxwidth = 640px1 CSS px = 2 device px
RWD - The Details
Tuesday, 28 May, 13
RWD - The Details
RWD - Responsive Images
Tuesday, 28 May, 13
RWD - Responsive Images
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
RWD - Responsive ImagesNew problem
Tuesday, 28 May, 13
RWD - The Details
RWD - Responsive ImagesNo HTML-based solution
Tuesday, 28 May, 13
RWD - The Details
RWD - Responsive Images
Solutions:Image OptimizationScalable Vector Graphics (SVG)Icon Fonts - css-tricks.com/examples/IconFontNew HTML element - www.responsiveimages.orgImage replacement with polyfills -- picturefill.jsMedia Queries - (background) image replacement
Unfortunately, there is no âone size fits allâ solution!
Tuesday, 28 May, 13
46.7 kb 103.3 kb
Image Optimizations
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.orgw3.org/community/respimg
New HTML element proposal
RWD under the hoodTuesday, 28 May, 13
W3C âResponsive Images Community Groupâ
responsiveimages.orgw3.org/community/respimg
New HTML element proposal
RWD under the hoodTuesday, 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 hoodTuesday, 28 May, 13
Text
RWD - Responsive Images
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 - SummaryFluid 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 holeTuesday, 28 May, 13
TextDevice chasing = rabbit holeTuesday, 28 May, 13
RWD & A11Y = â„They are really good together!
Tuesday, 28 May, 13
RWD & A11Y = â„ Why?
Personal Overr iding 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 = â„
Personal Overriding Stylesheet
Less about the design, more about the content!
Tuesday, 28 May, 13
RWD & A11Y = â„
Personal Overriding Stylesheet
â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
Personal Overriding Stylesheet
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
Personal Overriding Stylesheet
âRWD is designing for more accessible content!âGeorge Zamfir
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
RWD & A11Y = â„
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, 28 May, 13
RWD & A11Y = â„
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, 28 May, 13
RWD & A11Y = â„
Kerning Typefaces
Tuesday, 28 May, 13
RWD & A11Y = â„ Text
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday, 28 May, 13
RWD & A11Y = â„ Text
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y?1 finger, no fingers, motor control, dexterity, novice IT users, etc.
Tuesday, 28 May, 13
RWD & A11Y = â„ Text
Personal Overriding Stylesheet
Fat Fingers Syndrome
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 moreplatform specific hacks custom controls mouse-only hackery
HTML5 & ARIA
Tuesday, 28 May, 13
RWD & A11Y = â„
Embracing Web Standards
Tuesday, 28 May, 13
RWD & A11Y = â„
Embracing Web Standards
Tuesday, 28 May, 13
RWD & A11Y = â„
Mobile First & Progressive Enhancement
Mobile firstdesigning for the smallest screen resolution first (<320px) and use it as the base for the next, larger screen resolutions
Progressive Enhancementbuilding for the less-capable devices / browsers first and incrementally enhance for the more capable ones
Tuesday, 28 May, 13
RWD best practices
Progressive Enhancement
Tuesday, 28 May, 13
RWD & A11Y = â„
Progressive Enhancement
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 = â„
Progressive Enhancement
Tuesday, 28 May, 13
RWD & A11Y = â„
Progressive Enhancement
Tuesday, 28 May, 13
Mobile First RWD
Tuesday, 28 May, 13
RWD & A11Y = â„
Mobile First RWD
Tuesday, 28 May, 13
Mobile OnlyTuesday, 28 May, 13
Mobile PleaseTuesday, 28 May, 13
Tuesday, 28 May, 13
All roads lead to mobileTuesday, 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
Mobile First RWD
Tuesday, 28 May, 13
Text
RWD breakpointsstretch 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 & capabilitiesfilter with your own analytics dataassess your current design & nature of the content
Mobile first - breakpoints
Tuesday, 28 May, 13
Text
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!
Mobile First & Progressive Enhancement
Tuesday, 28 May, 13
RWD & A11Y = â„
Mobile First & Progressive Enhancement
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 accessibilitywe 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 accessibilitywe have common goals for our users
RWD is not a fada solid framework for us to do better web work
Tuesday, 28 May, 13
RWD & A11Y = â„
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
goodwally.ca đ @good_wally
Thank you!
Tuesday, 28 May, 13
Text
Credits, Photos, Sourcesfreevector.comphotobucket.comphombo.comipadwallsdepot.comwww.entypo.com splio.com/responsiveflickr.com/photos/merlin/1343376738http://www.flickr.com/photos/lukew/7382743430/sizes/l/in/photostreamhttp://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-webvisions-chicago-2012http://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.jpghttp://www.lukew.comhttp://www.clker.comhttp://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoidhttp://www.slideshare.net/AaronGustafson/progressive-enhancement-mobile
http://www.responsivedesign.cahttp://www.flickr.com/photos/kiwanja/3169449999/sizes/o/in/photostream/http://www.yarn-zombie.com/2012/07/zombie-apocalypse-theres-app-for-that.htmlhttp://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.jpghttp://nasa.gov http://www.3dtotal.com/index_gallery_detailed2.php?id=4798#.UQHDAaUzhH8http://www.flickr.com/photos/danmumford/7945175156/http://assets2.designerpages.com/assets/1589142/AHD_-_KR_-_Endless_Table_-_Corian1.jpghttp://services.google.com/fh/files/misc/multiscreenworld_final.pdf
Tuesday, 28 May, 13
Text
Research & Resourcesalistapart.com/articles/responsive-web-designbradfrostweb.com + bradfrost.github.com/this-is-responsive/resources.htmlnetmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_designmsdn.microsoft.com/en-us/magazine/hh653584.aspxcoding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-designresponsivedesign.ca/blog/slidecast-rwd-introduction-workflow-overviewjohnpolacek.github.com/scrolldeck.js/decks/responsivegithub.com/filamentgroup/Responsive-Imagesinformationarchitects.net/blog/responsive-typographymatanich.com/2012/11/06/picture-polyfillcss-tricks.com/which-responsive-images-solution-should-you-usemediaqueri.es + quirksmode.orghttp://www.lukew.com/ff/entry.asp?1649github.com/bradfrost/Mobile-First-RWDlukew.com/resources/mobile_first.asp lukew.com/presos/preso.asp?26
christianheilmann.com/tag/progressive-enhancement/bdconf.com/2012/orlando/scheduleblog.cloudfour.com/responsive-design-for-apps-part-1bradfrostweb.com/blog/mobile/bdconf-guy-podjarny-presents-performance-implication-of-mobile-designboagworld.com/mobile-web/separate-mobile-site-vs-responsive-designdeveloper.mozilla.org/en-US/docs/Web_Development/Mobilelukew.com/ff/entry.asp?150624ways.org/2011/conditional-loading-for-responsive-designshttp://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.pdfhttp://www.howtogomo.comhttp://www.gomez.com/website-performance-test/thank-you?tid=d5be9cec6d6609c8a046ba3155952b25&lang=en&bu=apm
Tuesday, 28 May, 13