accessible responsive web design
Post on 11-May-2015
5.427 Views
Preview:
DESCRIPTION
TRANSCRIPT
Web Accessibility
RESPONSIVE WEB DESIGNNovember 7, 2013
© 2013 Interactive Accessibility11/8/2013 1
11/8/2013 © 2013 Interactive Accessibility 2
Kathleen WahlbinEmail: KathyW@ia11y.comPhone: 978-443-0798http://www.interactiveaccessibility.com
The Accessibility Experts ™
RESPONSIVE DESIGN
Mobile, Tablets, Laptops, & Desktops
11/8/2013 © 2013 Interactive Accessibility 3
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
Not Just a Problem on Mobile…
• The lines are blurring…
11/8/2013 © 2013 Interactive Accessibility 5
The Old Reality…
• Big screen• Fast internet connection• Powerful processor• Efficient input (keyboard/mouse)• Desk with chair
11/8/2013 © 2013 Interactive Accessibility 6
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
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
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
• 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
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
What is Responsive Web Design (RWD)?
11/8/2013 © 2013 Interactive Accessibility 12
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
Responsive Design – 1024px Desktop
11/8/2013 © 2013 Interactive Accessibility 14
Responsive Design - 768px Tablet
11/8/2013 © 2013 Interactive Accessibility 15
Responsive Design – 360px Mobile
11/8/2013 © 2013 Interactive Accessibility 16
What is the Difference Between RWD & Mobile Website?
11/8/2013 © 2013 Interactive Accessibility 17
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
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
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
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
Responsive Sites
11/8/2013 © 2013 Interactive Accessibility 22
RWD CHALLENGES & OPPORTUNITIES
Is Responsive Design Accessible?
11/8/2013 © 2013 Interactive Accessibility 23
Is RWD Good for Accessibility?
11/8/2013 © 2013 Interactive Accessibility 24
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
Is RWD Good for People with Disabilities?
11/8/2013 © 2013 Interactive Accessibility 26
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
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
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
TECHNIQUES FOR RESPONSIVE DESIGN
5 Practical Tips
11/8/2013 © 2013 Interactive Accessibility 30
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
Reduce Cognitive & Visual Load
• Layout• Images• Line and letter spacing (leading / kerning)• Readable typefaces• Responsive typography
11/8/2013 © 2013 Interactive Accessibility 32
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
Follow Web Standards
• No more platform hacks• Custom controls minimized• Mouse-only functions eliminated
11/8/2013 © 2013 Interactive Accessibility 34
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
How do you hold your device?
11/8/2013 © 2013 Interactive Accessibility 36
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
What are the Easy Touch Zones?
11/8/2013 © 2013 Interactive Accessibility 38
Source: http://www.lukew.com/ff/entry.asp?1649
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
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
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
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
Questions?
11/8/2013 © 2013 Interactive Accessibility 43
Thank you!
11/8/2013 © 2013 Interactive Accessibility 44
Kathy WahlbinEmail: KathyW@ia11y.comPhone: 978-443-0798http://www.interactiveaccessibility.com
@wahlbin
top related