Download pdf - Accessible Responsive Web Design

Web Accessibility

RESPONSIVE WEB DESIGNNovember 7, 2013

© 2013 Interactive Accessibility11/8/2013 1

11/8/2013 © 2013 Interactive Accessibility 2

Kathleen WahlbinEmail: [email protected]: 978-443-0798http://www.interactiveaccessibility.com

The Accessibility Experts ™

RESPONSIVE DESIGN

Mobile, Tablets, Laptops, & Desktops


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


Not Just a Problem on Mobile…

• The lines are blurring…


The Old Reality…

• Big screen• Fast internet connection• Powerful processor• Efficient input (keyboard/mouse)• Desk with chair


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


Source: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html

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


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


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


What is Responsive Web Design (RWD)?


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

Responsive Design – 1024px Desktop


Responsive Design - 768px Tablet


Responsive Design – 360px Mobile


What is the Difference Between RWD & Mobile Website?


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


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)


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}


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


Responsive Sites


RWD CHALLENGES & OPPORTUNITIES

Is Responsive Design Accessible?


Is RWD Good for Accessibility?


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.


Is RWD Good for People with Disabilities?


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


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


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


TECHNIQUES FOR RESPONSIVE DESIGN

5 Practical Tips


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

http://www.abookapart.com/products/mobile-first

Reduce Cognitive & Visual Load

• Layout• Images• Line and letter spacing (leading / kerning)• Readable typefaces• Responsive typography


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


http://www.responsiveimages.org/

Follow Web Standards

• No more platform hacks• Custom controls minimized• Mouse-only functions eliminated


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


How do you hold your device?


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


What are the Easy Touch Zones?


Source: http://www.lukew.com/ff/entry.asp?1649

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


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

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


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


Questions?


Thank you!


Kathy WahlbinEmail: [email protected]: 978-443-0798http://www.interactiveaccessibility.com

@wahlbin

mailto:[email protected]

http://www.interactiveaccessibility.com/