• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design - An Accessibility Tool
 

Responsive Web Design - An Accessibility Tool

on

  • 2,639 views

This is the "Responsive Web Design & Accessibility" presentation (http://slidesha.re/1awZEmT) from last year updated with more details for The Accessibility Conference in Guelph www.accessconf.ca

This is the "Responsive Web Design & Accessibility" presentation (http://slidesha.re/1awZEmT) from last year updated with more details for The Accessibility Conference in Guelph www.accessconf.ca


George Zamfir, Accessibility Professional, 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: george@goodwally.ca , www.goodwally.ca, http://www.twitter.com/good_wally
Session Date: Tuesday, May 28, 2013

Statistics

Views

Total Views
2,639
Views on SlideShare
2,631
Embed Views
8

Actions

Likes
1
Downloads
23
Comments
1

1 Embed 8

https://twitter.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/i7K0s4
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design - An Accessibility Tool Responsive Web Design - An Accessibility Tool Presentation Transcript

    • Responsive Web Design & Accessibility = ♥Tuesday, 28 May, 13
    • goodwally.ca 🌎 @good_wallyResponsive Web Design&Web Accessibilitygeorge@goodwally.catwitter.com/good_wally#accessconf accessconf.caTuesday, 28 May, 13
    • goodwally.ca 🌎 @good_wallyGeorge ZamfirAccessibility solutioneer at Good Wallygoodwally.caCo-organizer atToronto Accessibility and Inclusive Designmeetup.com/a11yTOAccessibility consultant at ScotiabankPresentations: slideshare.net/GeorgeZamfirPodcast (fairly new): weba.im/webaxe97Tuesday, 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_wallyResponsive Web Design (RWD)&Web Accessibility (A11Y)40 min presentation &10 min of Q & A or more advanced RWD• responsive web design primer• accessibility implicationsTuesday, 28 May, 13
    • The problem reality of today’s webIf 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 designsnavigable on a computer”- A List Apart, Scott JehlRWD Overview - the reality of today’s webWeb is not print (anymore)Tuesday, 28 May, 13
    • Designing for a new resolution was the exception!RWD Overview - the reality of today’s webWeb is not print (anymore)Tuesday, 28 May, 13
    • Tuesday, 28 May, 13
    • RWD Overview - the reality of today’s webDevices changeTuesday, 28 May, 13
    • RWD Overview - the reality of today’s webDevices changeTuesday, 28 May, 13
    • RWD Overview - the reality of today’s webDevices changeTuesday, 28 May, 13
    • RWD Overview - the reality of today’s webDevices changeTuesday, 28 May, 13
    • RWD Overview - the reality of today’s webContext changedTuesday, 28 May, 13
    • RWD Overview - the reality of today’s webContext changedTuesday, 28 May, 13
    • RWD Overview - the reality of today’s webContext changedTuesday, 28 May, 13
    • RWD Overview - the reality of today’s webOne web"The primary design principle underlying the Web’s usefulnessand growth is universality… It must work with any form ofinformation, be it a document or a point of data, andinformation of any quality — from a silly tweet to a scholarlypaper.And it should be accessible from any kind of hardware thatcan connect to the Internet: stationary or mobile, small screenor large."- Tim Berners-Lee, Long Live the Web, 2010http://www.scientificamerican.com/article.cfm?id=long-live-the-webTuesday, 28 May, 13
    • RWD Overview - the reality of today’s webMany webs ?the desktop webmobile webtablet web“phablet” web“tabtop” webinternet-enabled fridge webMore on “one web”: adactio.com/links/4789Tuesday, 28 May, 13
    • RWD Overview - the reality of today’s webGood 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 DetailsWhat is RWD? - a definitionStarted off as a technique for building onewebsite that would work on all devices."Rather than tailoring disconnected designs foran ever-increasing number of web devices, wecan treat them as facets of the same experience."- Ethan Marcotte, Responsive Web Design, 2010alistapart.com/articles/responsive-web-designTuesday, 28 May, 13
    • RWD OverviewWhat 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 DetailsFluid Foundationflexible layout that uses relative sizing (no fixed widths)Media Queriestarget media types and media featuresResponsive Imagesrelative widths (CSS) and / or dynamic replacement (JS)Tuesday, 28 May, 13
    • RWD - The DetailsRWD - Fluid FoundationTuesday, 28 May, 13
    • RWD - Fluid FoundationDeclare 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 DetailsTuesday, 28 May, 13
    • TextRWD - The ViewportTuesday, 28 May, 13
    • RWD - The Viewport... to adapt to the size of the viewport.metaname = "viewport"content = “width = device-width,initial-scale = 1“developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.htmlRWD - The DetailsTuesday, 28 May, 13
    • Tuesday, 28 May, 13
    • RWD - Media Queries<linkrel=”stylesheet”href="layoutPrint.css"media="print"/>RWD - The DetailsTuesday, 28 May, 13
    • RWD - Media Queries<linkrel=”stylesheet”href="layout.css"media="screen and (min-width: 400px)"/>@media screen and (min-width: 30em) {// mobile styles here}RWD - The DetailsTuesday, 28 May, 13
    • RWD - Media QueriesRWD - The DetailsTuesday, 28 May, 13
    • RWD - Media QueriesRWD - The DetailsTuesday, 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, resolutionRWD - The DetailsTuesday, 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 whyRWD - The DetailsTuesday, 28 May, 13
    • RWD - Media Queries(device resolution) device-widthvs(browser / app resolution) widthdevice-width is fixed regardlessof the device orientation!iPhone 4:device-width = 320pxwidth = 640px1 CSS px = 2 device pxRWD - The DetailsTuesday, 28 May, 13
    • RWD - Media Queries(device resolution) device-widthvs(browser / app resolution) widthdevice-width is fixed regardlessof the device orientation!iPhone 4:device-width = 320pxwidth = 640px1 CSS px = 2 device pxRWD - The DetailsTuesday, 28 May, 13
    • RWD - The DetailsRWD - Responsive ImagesTuesday, 28 May, 13
    • RWD - Responsive ImagesHow 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’smuch more easier to maintain.RWD - The DetailsTuesday, 28 May, 13
    • RWD - The DetailsRWD - Responsive ImagesNew problemTuesday, 28 May, 13
    • RWD - The DetailsRWD - Responsive ImagesNo HTML-based solutionTuesday, 28 May, 13
    • RWD - The DetailsRWD - Responsive ImagesSolutions: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 replacementUnfortunately, there is no “one size fits all” solution!Tuesday, 28 May, 13
    • 46.7 kb103.3 kbImage OptimizationsTuesday, 28 May, 13
    • 46.7 kb103.3 kbImage OptimizationsTuesday, 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/respimgNew HTML element proposalRWD under the hoodTuesday, 28 May, 13
    • W3C “Responsive Images Community Group”responsiveimages.orgw3.org/community/respimgNew HTML element proposalRWD under the hoodTuesday, 28 May, 13
    • Image replacement with picturefill.jsgithub.com/scottjehl/picturefillRWD under the hoodLet’s see it in action!Tuesday, 28 May, 13
    • Media Queries - (background) images replacementDisplay 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
    • TextRWD - Responsive Imagesadaptive-images.comfilamentgroup.com/lab/rwd_img_compressioncloudfour.com/examples/mediaqueries/image-testtimkadlec.com/2012/04/media-query-asset-downloading-resultscss-tricks.com/which-responsive-images-solution-should-you-useFurther reading / resourcesTuesday, 28 May, 13
    • RWD - The DetailsRWD - SummaryFluid Foundation + Media Queries + Responsive ImagesTuesday, 28 May, 13
    • RWD - The DetailsMore than just “squishy” designsTuesday, 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 practicesgomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdfWhy 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 Overriding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)Inherent Inclination to Web StandardsMobile First+ Progressive EnhancementCaters to Users Needs, Devices, ContextTuesday, 28 May, 13
    • RWD & A11Y = ♥Personal Overriding StylesheetLess 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 contentthat dictates the media queries.”@adactioTuesday, 28 May, 13
    • RWD & A11Y = ♥“Mobile users want to see our menu, hours anddelivery number. Desktop users definitely want this1mb png of someone smiling at a salad.”@wiltoPersonal Overriding StylesheetTuesday, 28 May, 13
    • RWD & A11Y = ♥“Mobile users want to see our menu, hours anddelivery number. Desktop users definitely want this1mb png of someone smiling at a salad.”@wiltoPersonal Overriding Stylesheet“RWD is designing for more accessible content!”George ZamfirTuesday, 28 May, 13
    • Tuesday, 28 May, 13
    • Tuesday, 28 May, 13
    • Tuesday, 28 May, 13
    • RWD & A11Y = ♥Personal Overriding StylesheetReduced Cognitive & Visual LoadRWD goes beyond layouts & images, we’re now tacklingline & letter spacing (leading & kerning), readabletypefaces (even dyslexia) AND responsive typography.Tuesday, 28 May, 13
    • RWD & A11Y = ♥Personal Overriding StylesheetReduced Cognitive & Visual LoadRWD goes beyond layouts & images, we’re now tacklingline & letter spacing (leading & kerning), readabletypefaces (even dyslexia) AND responsive typography.“Georgia works perfectly as body text up until 16 pixels. Assoon as you go over that size, it starts to look odd. This is not adesign deficiency of the typeface. It was simply not designed towork for big body text sizes and dense screens.”- informationarchitects.netTuesday, 28 May, 13
    • RWD & A11Y = ♥Kerning TypefacesTuesday, 28 May, 13
    • RWD & A11Y = ♥ TextPersonal Overriding StylesheetFat Fingers SyndromeTuesday, 28 May, 13
    • RWD & A11Y = ♥ TextPersonal Overriding StylesheetFat Fingers SyndromeWhat does it mean for a11y?1 finger, no fingers, motor control,dexterity, novice IT users, etc.Tuesday, 28 May, 13
    • RWD & A11Y = ♥ TextPersonal Overriding StylesheetFat Fingers Syndromeheader[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 Standardsno moreplatform specific hacks custom controls mouse-only hackeryHTML5 & ARIATuesday, 28 May, 13
    • RWD & A11Y = ♥Embracing Web StandardsTuesday, 28 May, 13
    • RWD & A11Y = ♥Embracing Web StandardsTuesday, 28 May, 13
    • RWD & A11Y = ♥Mobile First & Progressive EnhancementMobile firstdesigning for the smallest screen resolution first (<320px)and use it as the base for the next, larger screenresolutionsProgressive Enhancementbuilding for the less-capable devices / browsers firstand incrementally enhance for the more capable onesTuesday, 28 May, 13
    • RWD best practicesProgressive EnhancementTuesday, 28 May, 13
    • RWD & A11Y = ♥Progressive Enhancement1. build for the less-capable devices / browsers first2. start low in the stack: HTML(5), CSS, basic JavaScript3. incrementally enhance for the more capable devices4. use @media queries and advanced JavaScriptTuesday, 28 May, 13
    • RWD pitfallsJavaScript-ing everythingTuesday, 28 May, 13
    • RWD & A11Y = ♥Progressive EnhancementTuesday, 28 May, 13
    • RWD & A11Y = ♥Progressive EnhancementTuesday, 28 May, 13
    • Mobile First RWDTuesday, 28 May, 13
    • RWD & A11Y = ♥Mobile First RWDTuesday, 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 RWD1. design for the smallest screen resolution first2. stretch until ugly (not until iPhone screen resolution)3. (aha) use “ugly” as you breakpoint4. adapt the content for the new size (until not “ugly”)Tuesday, 28 May, 13
    • Mobile First RWDTuesday, 28 May, 13
    • TextRWD breakpointsstretch until “ugly” - breakpoint!Tuesday, 28 May, 13
    • RWD planWhat’s wrong with this guy(not liking device-specific breakpoints)?I’m not alone:bradfrostweb.com/demo/ish“Determining breakpoints for a responsive design” chapterfrom the book: implementingresponsivedesign.comTuesday, 28 May, 13
    • RWD planhttp://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planningIt’s a losing battle!Tuesday, 28 May, 13
    • desktop screen resolutionsTuesday, 28 May, 13
    • mobile screen resolutionsTuesday, 28 May, 13
    • mobile browsersTuesday, 28 May, 13
    • your analytics dataTuesday, 28 May, 13
    • RWD planWhich breakpoints should we choose? It depends!Considerations:look at devices & browsers market share and theirassociated screen resolutions & capabilitiesfilter with your own analytics dataassess your current design & nature of the contentMobile first - breakpointsTuesday, 28 May, 13
    • TextTuesday, 28 May, 13
    • TextThere’s no perfect set of breakpoints!Set the breakpoints based on the target audience, the projectgoals, typical device market share, nature of content, design...Tuesday, 28 May, 13
    • RWD & A11Y = ♥It’s all good newsfor accessibility!Mobile First & Progressive EnhancementTuesday, 28 May, 13
    • RWD & A11Y = ♥Mobile First & Progressive EnhancementTuesday, 28 May, 13
    • RWD & A11Y = ♥Caters to Users Needs, Devices, ContextTuesday, 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 RWDRWD is a champion for web accessibilitywe have common goals for our usersRWD is not a fadTuesday, 28 May, 13
    • RWD & A11Y = ♥ ?Accessibility is not lagging behind (for once)accessibility & web standards are core to RWDRWD is a champion for web accessibilitywe have common goals for our usersRWD is not a fada solid framework for us to do better web workTuesday, 28 May, 13
    • RWD & A11Y = ♥Tuesday, 28 May, 13
    • RWD & A11Y = ♥“RWD is A11Y in disguise!”- George ZamfirTry it for yourself: goodwally.ca/rawd_kit.zipTuesday, 28 May, 13
    • goodwally.ca 🌎 @good_wallyThank you!Tuesday, 28 May, 13
    • TextCredits, 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-mobilehttp://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.pdfTuesday, 28 May, 13
    • TextResearch & 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?26christianheilmann.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=apmTuesday, 28 May, 13