Download - Accessible Responsive Web Design
![Page 1: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/1.jpg)
Web Accessibility
RESPONSIVE WEB DESIGNNovember 7, 2013
© 2013 Interactive Accessibility11/8/2013 1
![Page 2: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/2.jpg)
11/8/2013 © 2013 Interactive Accessibility 2
Kathleen WahlbinEmail: [email protected]: 978-443-0798http://www.interactiveaccessibility.com
The Accessibility Experts ™
![Page 3: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/3.jpg)
RESPONSIVE DESIGN
Mobile, Tablets, Laptops, & Desktops
11/8/2013 © 2013 Interactive Accessibility 3
![Page 4: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/4.jpg)
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
![Page 5: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/5.jpg)
Not Just a Problem on Mobile…
• The lines are blurring…
11/8/2013 © 2013 Interactive Accessibility 5
![Page 6: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/6.jpg)
The Old Reality…
• Big screen• Fast internet connection• Powerful processor• Efficient input (keyboard/mouse)• Desk with chair
11/8/2013 © 2013 Interactive Accessibility 6
![Page 7: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/7.jpg)
The New Reality….
7
Aging Eyes
One handed
Fat fingers
Busy Eyes and Hands
Outside light
Noisy, public spaces
11/8/2013 © 2013 Interactive Accessibility
![Page 8: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/8.jpg)
Majority of Interactions are Digital
11/8/2013 © 2013 Interactive Accessibility 8
Source: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html
![Page 9: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/9.jpg)
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 9
Sources: W3C Schools, nngroup.com
![Page 10: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/10.jpg)
• iPhone– 5 1136 x 640– 4S 640 x 960– 3GS 320 x 480
• iPad: – 1st / 2nd 1024 x 768– 3rd 2048 x 1536– Mini 1024 x 768
• Android– Phones 320 or 360 wide (typically)– Tablets 800 wide
11/8/2013 © 2013 Interactive Accessibility 10
Sources: Mobilemoxie.comMediag.comOnbile.comDeveloper.android.com
Mobile Screen Resolution
And
roid
![Page 11: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/11.jpg)
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
![Page 12: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/12.jpg)
What is Responsive Web Design (RWD)?
11/8/2013 © 2013 Interactive Accessibility 12
![Page 13: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/13.jpg)
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
11/8/2013 © 2013 Interactive Accessibility 13
Same set of code
![Page 14: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/14.jpg)
Responsive Design – 1024px Desktop
11/8/2013 © 2013 Interactive Accessibility 14
![Page 15: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/15.jpg)
Responsive Design - 768px Tablet
11/8/2013 © 2013 Interactive Accessibility 15
![Page 16: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/16.jpg)
Responsive Design – 360px Mobile
11/8/2013 © 2013 Interactive Accessibility 16
![Page 17: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/17.jpg)
What is the Difference Between RWD & Mobile Website?
11/8/2013 © 2013 Interactive Accessibility 17
![Page 18: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/18.jpg)
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
![Page 19: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/19.jpg)
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
![Page 20: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/20.jpg)
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
![Page 21: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/21.jpg)
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
![Page 22: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/22.jpg)
Responsive Sites
11/8/2013 © 2013 Interactive Accessibility 22
![Page 23: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/23.jpg)
RWD CHALLENGES & OPPORTUNITIES
Is Responsive Design Accessible?
11/8/2013 © 2013 Interactive Accessibility 23
![Page 24: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/24.jpg)
Is RWD Good for Accessibility?
11/8/2013 © 2013 Interactive Accessibility 24
![Page 25: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/25.jpg)
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
![Page 26: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/26.jpg)
Is RWD Good for People with Disabilities?
11/8/2013 © 2013 Interactive Accessibility 26
![Page 27: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/27.jpg)
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
![Page 28: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/28.jpg)
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
![Page 29: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/29.jpg)
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
![Page 30: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/30.jpg)
TECHNIQUES FOR RESPONSIVE DESIGN
5 Practical Tips
11/8/2013 © 2013 Interactive Accessibility 30
![Page 31: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/31.jpg)
Mobile First
• Build for less-capable devices / browsers first
• Enhance for more advanced platforms/browsers
• Design for smallest screen resolution
11/8/2013 © 2013 Interactive Accessibility 31
Source: http://www.abookapart.com/products/mobile-first
![Page 32: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/32.jpg)
Reduce Cognitive & Visual Load
• Layout• Images• Line and letter spacing (leading / kerning)• Readable typefaces• Responsive typography
11/8/2013 © 2013 Interactive Accessibility 32
![Page 33: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/33.jpg)
Use Images that Work Across Devices
• Challenges: – Image clarity, designing images to work on all devices and
screen resolutions– Download image size
• Solutions:– Image optimization– Icon fonts– New HTML picture element (www.responsiveimages.org)– Image replacement with polyfills or media queries
11/8/2013 © 2013 Interactive Accessibility 33
![Page 34: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/34.jpg)
Follow Web Standards
• No more platform hacks• Custom controls minimized• Mouse-only functions eliminated
11/8/2013 © 2013 Interactive Accessibility 34
![Page 35: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/35.jpg)
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
![Page 36: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/36.jpg)
How do you hold your device?
11/8/2013 © 2013 Interactive Accessibility 36
![Page 37: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/37.jpg)
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
![Page 38: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/38.jpg)
What are the Easy Touch Zones?
11/8/2013 © 2013 Interactive Accessibility 38
Source: http://www.lukew.com/ff/entry.asp?1649
![Page 39: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/39.jpg)
Touch Interface
• Different interpretations of optimal target size– Apple: 44 px– Microsoft: 26-34px– Nokia: 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
![Page 40: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/40.jpg)
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
11/8/2013 © 2013 Interactive Accessibility 40
Reference: http://developer.android.com/design/style/metrics-grids.html
![Page 41: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/41.jpg)
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
![Page 42: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/42.jpg)
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
![Page 43: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/43.jpg)
Questions?
11/8/2013 © 2013 Interactive Accessibility 43
![Page 44: Accessible Responsive Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554fbb26b4c9053d018b4750/html5/thumbnails/44.jpg)
Thank you!
11/8/2013 © 2013 Interactive Accessibility 44
Kathy WahlbinEmail: [email protected]: 978-443-0798http://www.interactiveaccessibility.com
@wahlbin