Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessible Responsive Web Design

12,402 views

Published on

Does responsive design make a website more or less accessible? In this session you will learn best practices and techniques for accessible responsive design.

Responsive web design (RWD) can be very good for accessibility but is also poses some new challenges and design considerations to provide an optimal experience for people with disabilities. When done properly, RWD can address many accessibility issues related to low vision and certain mobility impairments. While responsive web design was not created specifically to address accessibility, its aim is to craft sites to provide an optimal viewing experience and easy navigation for all users and thereby address some accessibility issues. RWD enables the website to adapt its layout to the format of the viewing environment through the use of fluid, proportion-based grids, flexible images and CSS3 media queries. Responsive sites adjust to the screen and presents in the most readable and usable way for that particular screen size and format. This can ensure that font size remains readable and at a high resolution for people with low vision. It also keeps interactive elements large and easier to operate for people with mobility impairments. In this session we will review what a responsive website is and talk about the challenges and opportunities for accessibility in regards to responsive web design.

Published in: Design, Technology
  • If u need a hand in making your writing assignments - visit ⇒ www.HelpWriting.net ⇐ for more detailed information.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ www.WritePaper.info ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to discover how you can increase your cup size within 6 weeks then you need to see this new website... This is an all natural alternative to painful surgery or expensive pills... It's what plastic surgeons have been hiding for years. Jenny went from an A cup to a C cup in just 6 weeks. Want to do the same yourself... 》》》 https://t.cn/A6Li7eze
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Real people just like you are kissing the idea of punching the clock for someone else goodbye, and embracing a new way of living. The internet economy is exploding, and there are literally THOUSANDS of great earnings opportunities available right now, all just one click away. ♣♣♣ http://t.cn/AisJWYf4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Accessible Responsive Web Design

  1. 1. Web Accessibility RESPONSIVE WEB DESIGN November 7, 2013 11/8/2013 © 2013 Interactive Accessibility 1
  2. 2. The Accessibility Experts ™ Kathleen Wahlbin Email: KathyW@ia11y.com Phone: 978-443-0798 http://www.interactiveaccessibility.com 11/8/2013 © 2013 Interactive Accessibility 2
  3. 3. Mobile, Tablets, Laptops, & Desktops RESPONSIVE DESIGN 11/8/2013 © 2013 Interactive Accessibility 3
  4. 4. What is the Problem? • Websites are not optimized for the many different devices available – Sizes – Capabilities – Interaction methods • User experience less than ideal on many sites 11/8/2013 © 2013 Interactive Accessibility 4
  5. 5. Not Just a Problem on Mobile… • The lines are blurring… 11/8/2013 © 2013 Interactive Accessibility 5
  6. 6. The Old Reality… • • • • • Big screen Fast internet connection Powerful processor Efficient input (keyboard/mouse) Desk with chair 11/8/2013 © 2013 Interactive Accessibility 6
  7. 7. The New Reality…. One handed Outside light Aging Eyes Busy Eyes and Hands Noisy, public spaces Fat fingers 11/8/2013 © 2013 Interactive Accessibility 7
  8. 8. Majority of Interactions are Digital Source: http://www.google.com/think/research-studies/thenew-multi-screen-world-study.html 11/8/2013 © 2013 Interactive Accessibility 8
  9. 9. History of Screen Resolution • • • • Desktop resolution has increased More people use high resolution Many resolutions available And of course, mobile devices 11/8/2013 © 2013 Interactive Accessibility Sources: W3C Schools, nngroup.com 9
  10. 10. Mobile Screen Resolution • iPhone 1136 x 640 640 x 960 320 x 480 – 1st / 2nd – 3rd – Mini 1024 x 768 2048 x 1536 1024 x 768 – Phones – Tablets 320 or 360 wide (typically) 800 wide • iPad: • Android Sources: Mobilemoxie.com Mediag.com Onbile.com Developer.android.com 11/8/2013 Android – 5 – 4S – 3GS © 2013 Interactive Accessibility 10
  11. 11. We Need to Rethinking the Web • Interaction models are changing • Dependent on many factors – Browsers – Device capabilities – Situation • Screen resolution and size 11/8/2013 © 2013 Interactive Accessibility 11
  12. 12. What is Responsive Web Design (RWD)? 11/8/2013 © 2013 Interactive Accessibility 12
  13. 13. What is RWD? • Technique of building a website or application for all devices • One code base optimized for the medium and viewport size • It’s about adopting a more flexible, device-agnostic approach Same set of code 11/8/2013 © 2013 Interactive Accessibility 13
  14. 14. Responsive Design – 1024px Desktop 11/8/2013 © 2013 Interactive Accessibility 14
  15. 15. Responsive Design - 768px Tablet 11/8/2013 © 2013 Interactive Accessibility 15
  16. 16. Responsive Design – 360px Mobile 11/8/2013 © 2013 Interactive Accessibility 16
  17. 17. What is the Difference Between RWD & Mobile Website? 11/8/2013 © 2013 Interactive Accessibility 17
  18. 18. Mobile Site vs. RWD • Mobile website is: – – – – – Hard coded for one or a few screen resolutions Coded more simply Not dynamically responsive to changing resolutions Typically not appealing on larger screens / desktops Separate from the desktop website – two code bases • Whereas RWD is: – One code base; one website – Not hard-coded – responds to changing resolutions – More dynamic code – looks at device resolution to determine space available for laying out content in a grid – Adaptive: may show elements, resize text/images, reflow elements as resolution changes – Looks fine on desktop 11/8/2013 © 2013 Interactive Accessibility 18
  19. 19. How is RWD Implemented? • Fluid, flexible layout – Uses relative sizing of grids, not fixed – Based on columns that can be reflowed – Allows grid layout to adjust to viewport size • Media queries – Target media types and media features – Tests for max/min width & height on viewport and device, device orientation, aspect radio, resolution • Responsive images – Relative widths (CSS) or dynamic replacement (JS) 11/8/2013 © 2013 Interactive Accessibility 19
  20. 20. Old Way vs. New Way • CSS 2.1 – Media Types <link href="screen.css“ … media="screen“> • CSS 3 – Media Queries @media screen and (max-width: 30em) { // mobile styles here } 11/8/2013 © 2013 Interactive Accessibility 20
  21. 21. Browser Compatibility • RWD works in the following browsers – – – – – IE 9+ Opera 9.5+ Safari 3+ Firefox 3.5+ Chrome • Can use other browsers with the use of JavaScript coding 11/8/2013 © 2013 Interactive Accessibility 21
  22. 22. Responsive Sites 11/8/2013 © 2013 Interactive Accessibility 22
  23. 23. Is Responsive Design Accessible? RWD CHALLENGES & OPPORTUNITIES 11/8/2013 © 2013 Interactive Accessibility 23
  24. 24. Is RWD Good for Accessibility? 11/8/2013 © 2013 Interactive Accessibility 24
  25. 25. Benefits of RWD • Automatically adjust to user’s device • Inherent inclination to follow web standards • Mobile first + progressive enhancement – Designing first for mobile focuses on key features and accessibility – As screen sizes / resolution increase, add features, content, and interaction modes • Sites can also remember accessibility preferences – Text size – Spacing – Video options, etc. 11/8/2013 © 2013 Interactive Accessibility 25
  26. 26. Is RWD Good for People with Disabilities? 11/8/2013 © 2013 Interactive Accessibility 26
  27. 27. Low Vision Users • Users with low vision may – Have a lower screen resolution – Magnify the screen using browser settings • Benefits – Building experiences mobile first – Images can be optimized – Magnified screen adjusts to smaller viewport size (fluid layout) • Some elements may be removed • Elements are moved below (reflowed) to minimize / eliminate scrolling • Adjusts within browser • Challenges – Permanence of place – as resolutions change, elements may move to an unfamiliar place – Sometimes text will be cut off in magnified page on desktop browsers 11/8/2013 © 2013 Interactive Accessibility 27
  28. 28. Blind Users • Users who are blind will – Use a screen reader – Rely partially on memory and mental map of site structure for navigation • Benefits – Having less content on a page can be easier to understand and navigate • Challenges – Changing organization and navigation is harder to use – Reading order may not match visual order 11/8/2013 © 2013 Interactive Accessibility 28
  29. 29. Mobility-Impaired Users • Users with mobility impairments may – Use alternative input devices – switches, voice • Benefits – Short pages and streamlined navigation easier to use • Challenges – Touch interaction can be difficult 11/8/2013 © 2013 Interactive Accessibility 29
  30. 30. 5 Practical Tips TECHNIQUES FOR RESPONSIVE DESIGN 11/8/2013 © 2013 Interactive Accessibility 30
  31. 31. Mobile First • Build for less-capable devices / browsers first • Enhance for more advanced platforms/browsers • Design for smallest screen resolution Source: http://www.abookapart.com/products/mobile-first 11/8/2013 © 2013 Interactive Accessibility 31
  32. 32. Reduce Cognitive & Visual Load • • • • • Layout Images Line and letter spacing (leading / kerning) Readable typefaces Responsive typography 11/8/2013 © 2013 Interactive Accessibility 32
  33. 33. Use Images that Work Across Devices • Challenges: – Image clarity, designing images to work on all devices and screen resolutions – Download image size • Solutions: – – – – 11/8/2013 Image optimization Icon fonts New HTML picture element (www.responsiveimages.org) Image replacement with polyfills or media queries © 2013 Interactive Accessibility 33
  34. 34. Follow Web Standards • No more platform hacks • Custom controls minimized • Mouse-only functions eliminated 11/8/2013 © 2013 Interactive Accessibility 34
  35. 35. Design for Different Input Methods • Challenges for all users – Touch zone size – Fat finger syndrome – hard to select right icon • Different input devices – Switch device – One handed – Motor control 11/8/2013 © 2013 Interactive Accessibility 35
  36. 36. How do you hold your device? 11/8/2013 © 2013 Interactive Accessibility 36
  37. 37. Touch Zones • • • • Position affects areas reached by thumb and fingers Landscape vs. portrait position affects it too Typical placement of fingers is a factor for RWD Consider touch zones that are easy to reach 11/8/2013 © 2013 Interactive Accessibility 37
  38. 38. What are the Easy Touch Zones? Source: http://www.lukew.com/ff/entry.asp?1649 11/8/2013 © 2013 Interactive Accessibility 38
  39. 39. Touch Interface • Different interpretations of optimal target size – Apple: – Microsoft: – Nokia: 44 px 26-34px 28 px / 1 cm x 1 cm • MIT Touch Lab study – Average index finger width is 1.6 – 2 cm = 45 – 57 px – Thumbs: 2.5 cm = 72 px 11/8/2013 © 2013 Interactive Accessibility 39
  40. 40. Design Touch Targets • A consideration as RWD resizes content, icons, spacing of grouped items, and other targets • Design large touch targets based on density-independent pixels (dp) – WARNING: pixel density changes per handset – Good balance between information density and targetability of UI Elements – Spacing between UI elements should be 8 dp Reference: http://developer.android.com/design/style/metrics-grids.html 11/8/2013 © 2013 Interactive Accessibility 40
  41. 41. Pros & Cons of RWD • Pros – Only have to maintain single site – Don’t have to deal with mobile-specific URLs – Address a wide variety of devices • Cons – Additional time needed to for design – Devices constantly changing – Designing the optimal experience / usability for all devices take more time – Have to consider performance across all devices 11/8/2013 © 2013 Interactive Accessibility 41
  42. 42. Is RWD Good for Accessibility? • YES!!! – Better usability – Generally works better with assistive technology since code is written to standards – Optimize experience across devices and screen size 11/8/2013 © 2013 Interactive Accessibility 42
  43. 43. Questions? 11/8/2013 © 2013 Interactive Accessibility 43
  44. 44. Kathy Wahlbin Email: KathyW@ia11y.com Phone: 978-443-0798 http://www.interactiveaccessibility.com @wahlbin Thank you!

×