What Accessible Design Can Teach You About Responsive Design
Upcoming SlideShare
Loading in...5
×
 

What Accessible Design Can Teach You About Responsive Design

on

  • 2,301 views

This presentation was delivered at: ...

This presentation was delivered at:
- FITC Screens 2013 in Toronto, Canada on October 4, 2013
- CSUN in San Diego, March 2014


In 2010 Ethan Marcotte coined responsive design for all of us to consume content on small (at first) devices without losing our eye-sight. He did not quite phrase it like that, even though he definitely addressed that.

In 1808 Italian Pellegrino Turri designed a typewriter for Countess Carolina Fantoni da Fivizzano, his blind lover, to write him letters when he was away.

That is accessible design, and it paved the way for responsive design in more than one way. We are now bashing mouse-only interactions because they don’t have a place in our responsive, touch-friendly new world. Except it never had a place in any world, accessibility guidelines have advocated for keyboard accessibility (the cornerstone to any accessible interface) long before responsive design – keyboard accessible = no mouse-only interactions = touch accessible.

In this presentation, George Zamfir will show you how you can literally change your users’ lives with responsive design. He will discuss why accessible design is important and draw some surprising parallels between responsive and accessible design.

A prequel to this talk: http://bit.ly/rwd_a11y + podcast: http://bit.ly/rwd_a11y_podcast

Statistics

Views

Total Views
2,301
Views on SlideShare
2,234
Embed Views
67

Actions

Likes
3
Downloads
21
Comments
0

1 Embed 67

https://twitter.com 67

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

What Accessible Design Can Teach You About Responsive Design What Accessible Design Can Teach You About Responsive Design Presentation Transcript

  • goodwally.ca 🌎 @good_wally What Accessible Design can teach you about Responsive Design with George Zamfir
  • SCREENS
  • A different SCREEN: SIRI - Dragon - Nuance View slide
  • goodwally.ca 🌎 @good_wally George Zamfir accessibility (A11Y) & responsive web design (RWD) Toronto Accessibility and Inclusive Design - meetup.com/a11yTO Toronto Accessibility Camp - accessibilitycampto.org (Nov 16) Accessibility solutioneer at Good Wally - goodwally.ca slideshare.net/georgezamfir Accessibility consultant at Scotiabank View slide
  • In my spare time...
  • SCREENS Assistive Technologies
  • Assistive Technologies They don't care much about design!
  • Assistive Technologies They don't care much about design! OR they care to change it for the user!
  • Responsive Web Design
  • Content matters more than design!
  • Yo, what’s wrong with this guy?
  • not about the design! Responsive Web Design is
  • not about the design! about updating the design to bring out the content. Responsive Web Design is
  • A11Y -> RWD What Accessible Design can teach you about Responsive Design 1. Design matters not, content does ✓ 2. Users’ context is important 3. Keyboard accessibility = touch-friendly 4. Design for the edge cases (mobile-first derivation)
  • Accessibility (A11Y)
  • Accessibility (A11Y) Accessibility is about disability, riiiight? Visual low vision, colour-blindness, blindness Screen magnifiers, text-to-speech, refreshable braille Auditory hearing loss, deafness Captions & transcripts, haptic feedback Mobility dexterity, strength, loss of limb Speech-to-text, alternative input hardware Cognitive & Speech dyslexia, ADD, lack of skills Word prediction, augmentative devices (hear & see)
  • Accessibility (A11Y) By measuring people through the disability lens we automatically focus on what they’re not able to do!
  • Accessibility (A11Y) Disability: a new definition What we should measure is what the person can do, what their contribution to society is.
  • Accessibility (A11Y) Who is more disabled?
  • Accessibility is not just about disability
  • I’ve heard some serious shit said in meetings: “We don’t care about blind people.” —Shithead McHorrible Here’s some other things we don’t care about: BlackBerries, Windows Phones, Poor people, Androids, IE8, IE7, Definitely IE6, Colorblind people, 7″ tablets, Firefox, Screen readers...
  • Next time you find yourself intentionally depriving someone an experience... picture yourself standing in front of that person in real life, looking them square in the eyes, then firmly and definitively saying “Fuck you.” — Brad Frost, bradfrostweb.com/blog/post/fuck-you
  • “The products / services we sell on our website are not for blind people. So, blind people don’t visit our website!”
  • “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” "The primary design principle underlying the Web’s usefulness and growth is universality… It must work with any form of information [...] from a silly tweet to a scholarly paper. “ - Tim Berners-Lee
  • Accessibility (A11Y) Accessibility is highly contextual
  • Accessibility (A11Y) Accessibility is highly contextual
  • Accessibility (A11Y) Web Accessibility
  • Accessibility (A11Y) Web Accessibility
  • Accessibility (A11Y) Web Accessibility
  • Accessibility (A11Y) Web Accessibility
  • Accessibility (A11Y) Web Accessibility
  • Accessibility (A11Y) Web Accessibility
  • Accessibility (A11Y) Web Accessibility • Semantic markup • Does it work by keyboard alone? • Colour contrast & colour-blindness • Can I navigate with Dragon (voice command) Recommendation: slideshare.net/billygeek/10-tips-in-10-minutes-devto-sept-30-2013
  • Accessibility (A11Y) Web Content Accessibility Guidelines (WCAG 2) • Covers a wide range of needs / disabilities • Developed by the W3C & numerous experts • Set of 12 guidelines, technology agnostic (not just HTML) • 3 levels of conformance: A, AA, AAA • De-facto standard for accessibility compliance • Legislated in many countries, including Canada
  • Accessibility (A11Y) Accessibility for Ontarians with Disabilities Act (AODA) • 5 standards in the Act • Information & Communication standard ON Government: All public & private > 50: Level AA - 2012 Level A – 2014, AA – 2021
  • Accessibility (A11Y) Web Accessibility “Web accessibility is building websites that anybody can access, regardless of the device, ability or assistive technologies - user context” — George Zamfir
  • RWD - The Details
  • 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)
  • RWD - The Details RWD - Fluid Foundation
  • 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
  • Text RWD - The Viewport
  • 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
  • RWD - Media Queries <link rel=”stylesheet” href="layoutPrint.css" media="print" /> RWD - The Details
  • 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
  • RWD - Media Queries RWD - The Details
  • RWD - Media Queries RWD - The Details
  • 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) { // mobile styles here } width, height, max-/min-width, max-/min-height, device-height, orientation, aspect-ratio, resolution RWD - The Details
  • RWD - Media Queries Use 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
  • 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
  • RWD - The Details RWD - Responsive Images
  • 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
  • RWD - The Details RWD - Responsive Images New problem
  • RWD - The Details RWD - Responsive Images No HTML-based solution
  • RWD - The Details RWD - Responsive Images 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
  • RWD - The Details RWD - Responsive Images 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 fits all” solution!
  • 46.7 kb 103.3 kb Image Optimizations
  • 46.7 kb 103.3 kb Image Optimizations
  • Scalable Vector Graphics (SVG)
  • Icon Fonts  
  • W3C “Responsive Images Community Group” responsiveimages.org w3.org/community/respimg New HTML element proposal RWD under the hood
  • W3C “Responsive Images Community Group” responsiveimages.org w3.org/community/respimg New HTML element proposal RWD under the hood
  • Image replacement with picturefill.js github.com/scottjehl/picturefill RWD under the hood Let’s see it in action!
  • 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
  • RWD - The Details 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
  • RWD - The Details RWD - Summary Fluid Foundation + Media Queries + Responsive Images
  • A11Y -> RWD What Accessible Design can teach you about Responsive Design 1. Design matters not, content does ✓ 2. Catering to users’ context 3. Keyboard accessibility = touch-friendly 4. Design for the edge cases (mobile-first derivation)
  • A11Y -> RWD Catering to users’ context (A11Y)
  • A11Y -> RWD Catering to users’ context (A11Y) • ability (Can he use a mouse? What if she only only one hand?) • environment (Office environment? Captions for noisy places?) • device (Mobile phone? Reading on glossy screens in the sun?) • assistive technology (Does it work with VoiceOver?)
  • A11Y -> RWD Catering to users’ context (RWD)
  • A11Y -> RWD Catering to users’ context (RWD) "… when on their mobile devices, people are often just “one eyeball and one thumb”. They need clear, focused designs to get things done—not lots of navigation options getting in their way." — LukeW, alistapart.com/article/organizing-mobile
  • A11Y -> RWD Catering to users’ context (RWD) uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?
  • A11Y -> RWD Catering to users’ context (RWD)
  • A11Y -> RWD Catering to users’ context (RWD)
  • A11Y -> RWD Catering to users’ context (RWD)
  • A11Y -> RWD What Accessible Design can teach you about Responsive Design 1. Design matters not, content does ✓ 2. Catering to users’ context ✓ 3. Keyboard accessibility = touch-friendly 4. Design for the edge cases (mobile-first derivation)
  • A11Y -> RWD Keyboard Accessibility = Touch-Friendly “Oh yes, it's keyboard accessible! To open the menu press Ctrl-Shift-Alt-F2-W-T-F!”
  • A11Y -> RWD Keyboard Accessibility = Touch-Friendly
  • A11Y -> RWD Keyboard Accessibility = Touch-Friendly
  • A11Y -> RWD Keyboard Accessibility = Touch-Friendly <div> <select>
  • A11Y -> RWD What Accessible Design can teach you about Responsive Design 1. Design matters not, content does ✓ 2. Catering to users’ context ✓ 3. Keyboard accessibility = touch-friendly ✓ 4. Design for the edge cases (mobile-first derivation)
  • A11Y -> RWD Design for the edge cases
  • A11Y -> RWD RWD Mobile-first
  • A11Y -> RWD Design for the edge cases (mobile-first) 320px 1920px “4-­‐part  series:  Design  for  the  Edges”  by  LukeW:  h<p://www.lukew.com/ff/entry.asp?554
  • A11Y -> RWD Design for the edge cases (A11Y) 320px 1920px “4-­‐part  series:  Design  for  the  Edges”  by  LukeW:  h<p://www.lukew.com/ff/entry.asp?554 accessibility
  • goodwally.ca 🌎 @good_wally A11Y was a champion for RWD we have common goals for our users What Accessible Design can teach you about Responsive Design
  • goodwally.ca 🌎 @good_wally Use your RWD knowledge to get into A11Y! What Accessible Design can teach you about Responsive Design
  • goodwally.ca 🌎 @good_wally What Accessible Design can teach you about Responsive Design Thank You!