More Related Content Similar to Accessible Responsive Web Design (20) More from Interactive Accessibility (9) Accessible Responsive Web Design2. The Accessibility Experts ™
Kathleen Wahlbin
Email: KathyW@ia11y.com
Phone: 978-443-0798
http://www.interactiveaccessibility.com
11/8/2013
© 2013 Interactive Accessibility
2
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. Not Just a Problem on Mobile…
• The lines are blurring…
11/8/2013
© 2013 Interactive Accessibility
5
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. 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. 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. 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. 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. 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
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
17. What is the Difference Between RWD & Mobile Website?
11/8/2013
© 2013 Interactive Accessibility
17
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. 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. 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. 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
23. Is Responsive Design Accessible?
RWD CHALLENGES &
OPPORTUNITIES
11/8/2013
© 2013 Interactive Accessibility
23
24. Is RWD Good for Accessibility?
11/8/2013
© 2013 Interactive Accessibility
24
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. Is RWD Good for People with Disabilities?
11/8/2013
© 2013 Interactive Accessibility
26
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. 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. 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
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. Reduce Cognitive & Visual Load
•
•
•
•
•
Layout
Images
Line and letter spacing (leading / kerning)
Readable typefaces
Responsive typography
11/8/2013
© 2013 Interactive Accessibility
32
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. Follow Web Standards
• No more platform hacks
• Custom controls minimized
• Mouse-only functions eliminated
11/8/2013
© 2013 Interactive Accessibility
34
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. How do you hold your device?
11/8/2013
© 2013 Interactive Accessibility
36
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. What are the Easy Touch Zones?
Source: http://www.lukew.com/ff/entry.asp?1649
11/8/2013
© 2013 Interactive Accessibility
38
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. 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. 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. 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