Responsive Web Design - An Accessibility Tool

Responsive Web Design & Accessibility = ♥

Tuesday, 28 May, 13

goodwally.ca 🌎 @good_wally

Responsive Web Design&

Web Accessibility

george@goodwal ly.ca

twitter.com/good_wally

#accessconf accessconf.ca

Tuesday, 28 May, 13

George ZamfirAccessibility solutioneer at Good Wallygoodwally.ca

Co-organizer at Toronto Accessibility and Inclusive Designmeetup.com/a11yTO

Accessibility consultant at Scotiabank

Presentations: slideshare.net/GeorgeZamfirPodcast (fairly new): weba.im/webaxe97

Tuesday, 28 May, 13

goodwally.ca 🌎 @good_wallyTuesday, 28 May, 13

Responsive Web Design (RWD)&

Web Accessibility (A11Y)

40 min presentation & 10 min of Q & A or more advanced RWD

• responsive web design primer• accessibility implications

Tuesday, 28 May, 13

The problem reality of today’s web

If responsive design is the solution, what is the problem?

Tuesday, 28 May, 13

• Web design borrowed from print design• 640x480, 800x600, 1024x768 (consensual hallucination)

• The browser is an unknown constraint

“Essentially, we were making print designs navigable on a computer” - A List Apart, Scott Jehl

RWD Overview - the reality of today’s web

Web is not print (anymore)

Tuesday, 28 May, 13

Designing for a new resolution was the exception!

Web is not print (anymore)

Tuesday, 28 May, 13

Devices change

Tuesday, 28 May, 13

Devices change

Tuesday, 28 May, 13

Devices change

Tuesday, 28 May, 13

Devices change

Tuesday, 28 May, 13

Context changed

Tuesday, 28 May, 13

Context changed

Tuesday, 28 May, 13

Context changed

Tuesday, 28 May, 13

One web

"The primary design principle underlying the Web’s usefulness and growth is universality… It must work with any form of information, be it a document or a point of data, and information of any quality — from a silly tweet to a scholarly paper.

And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large."

- Tim Berners-Lee, Long Live the Web, 2010http://www.scientificamerican.com/article.cfm?id=long-live-the-web

Tuesday, 28 May, 13

Many webs ?

the desktop webmobile webtablet web“phablet” web“tabtop” webinternet-enabled fridge web

More on “one web”: adactio.com/links/4789

Tuesday, 28 May, 13

Good News!

The web is inherently fluid & responsive.

We simply need to re-educate ourselves.

Tuesday, 28 May, 13

RWD - The Details

What is RWD? - a definition

Started off as a technique for building one website that would work on all devices.

"Rather than tailoring disconnected designs for an ever-increasing number of web devices, we can treat them as facets of the same experience."

- Ethan Marcotte, Responsive Web Design, 2010 alistapart.com/articles/responsive-web-design

Tuesday, 28 May, 13

RWD Overview

What is RWD?

It’s really an umbrella term for:

• web standards

• best practices

• some new RWD-specific techniques

... formulated in the context of mobile devices.

It’s not new and it’s not revolutionary!

Tuesday, 28 May, 13

RWD - The DetailsTuesday, 28 May, 13

RWD - The Details

Fluid Foundationflexible layout that uses relative sizing (no fixed widths)

Media Queriestarget media types and media features

Responsive Imagesrelative widths (CSS) and / or dynamic replacement (JS)

Tuesday, 28 May, 13

RWD - The Details

RWD - Fluid Foundation

Tuesday, 28 May, 13

RWD - Fluid Foundation

Declare percentage (%) or ratio (em) widthsinstead of absolute values (px)

in order to adapt to the size of the viewport.

section { margin: 0.5em; width: 75%; height: 10em;}

RWD - The Details

Tuesday, 28 May, 13

RWD - The Viewport

Tuesday, 28 May, 13

RWD - The Viewport... to adapt to the size of the viewport.

meta name = "viewport" content = “ width = device-width, initial-scale = 1 “

developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

RWD - The Details

Tuesday, 28 May, 13

RWD - Media Queries

RWD - The Details

Tuesday, 28 May, 13

RWD - Media Queries

@media screen and (min-width: 30em) { // mobile styles here}

RWD - The Details

Tuesday, 28 May, 13

RWD - Media Queries

RWD - The Details

Tuesday, 28 May, 13

RWD - Media Queries

RWD - The Details

Tuesday, 28 May, 13

RWD - Media QueriesCSS 2.1 - media types (e.g. screen, print, etc.)<link href="style.css"... media="screen" /><link href="stylePrint.css"... media="print" />

CSS 3 - media queries with features:@media screen and (min-width: 30em) { // mobile styles here}

width, height, max-/min-width, max-/min-height, device-height, orientation, aspect-ratio, resolution

RWD - The Details

Tuesday, 28 May, 13

RWD - Media QueriesUse ems instead of pxs in media queries!

@media screen and (max-width: 30em) { // mobile styles here}

Your users will thank you (when zooming in on desktop browsers)

Let’s see why

RWD - The Details

Tuesday, 28 May, 13

RWD - Media Queries(device resolution) device-width

vs(browser / app resolution) width

device-width is fixed regardless of the device orientation!

iPhone 4:device-width = 320pxwidth = 640px1 CSS px = 2 device px

RWD - The Details

Tuesday, 28 May, 13

RWD - Media Queries(device resolution) device-width

vs(browser / app resolution) width

device-width is fixed regardless of the device orientation!

iPhone 4:device-width = 320pxwidth = 640px1 CSS px = 2 device px

RWD - The Details

Tuesday, 28 May, 13

RWD - The Details

RWD - Responsive Images

Tuesday, 28 May, 13

How do you make fixed-width elements (i.e. images) work with your awesome fluid layouts?

img { max-width: 100%; height: auto;}

Make images resize with the layout. Also, it’s much more easier to maintain.

RWD - The Details

Tuesday, 28 May, 13

RWD - The Details

RWD - Responsive ImagesNew problem

Tuesday, 28 May, 13

RWD - The Details

RWD - Responsive ImagesNo HTML-based solution

Tuesday, 28 May, 13

RWD - The Details

Solutions:Image OptimizationScalable Vector Graphics (SVG)Icon Fonts - css-tricks.com/examples/IconFontNew HTML element - www.responsiveimages.orgImage replacement with polyfills -- picturefill.jsMedia Queries - (background) image replacement

Unfortunately, there is no “one size fits all” solution!

Tuesday, 28 May, 13

46.7 kb 103.3 kb

Image Optimizations

Tuesday, 28 May, 13

46.7 kb 103.3 kb

Image Optimizations

Tuesday, 28 May, 13

Scalable Vector Graphics (SVG)

Tuesday, 28 May, 13

Icon Fonts

Tuesday, 28 May, 13

W3C “Responsive Images Community Group”

responsiveimages.orgw3.org/community/respimg

New HTML element proposal

RWD under the hoodTuesday, 28 May, 13

W3C “Responsive Images Community Group”

responsiveimages.orgw3.org/community/respimg

New HTML element proposal

Image replacement with picturefill.js

github.com/scottjehl/picturefill

RWD under the hood

Let’s see it in action!

Tuesday, 28 May, 13

Media Queries - (background) images replacement

Display different sizes of the image with media queries!

@media all and (max-width: 600px) { #test5 { background-image:url('images/test5-mobile.png'); }}

@media all and (min-width: 601px) { #test5 { background-image:url('images/test5-desktop.png'); }}

adaptive-images.com

filamentgroup.com/lab/rwd_img_compression

cloudfour.com/examples/mediaqueries/image-test

timkadlec.com/2012/04/media-query-asset-downloading-results

css-tricks.com/which-responsive-images-solution-should-you-use

Further reading / resources

Tuesday, 28 May, 13

RWD - The Details

RWD - SummaryFluid Foundation + Media Queries + Responsive Images

Tuesday, 28 May, 13

RWD - The Details

More than just “squishy” designs

Tuesday, 28 May, 13

Performance

“Well done to Audi and BMW for winning the beauty contest.From the winner of 2006 International Engine of the Year.”

Tuesday, 28 May, 13

RWD best practices

gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

Why is performance important?

Tuesday, 28 May, 13

TextDevice chasing = rabbit holeTuesday, 28 May, 13

RWD & A11Y = ♥They are really good together!

Tuesday, 28 May, 13

RWD & A11Y = ♥ Why?

Personal Overr iding Stylesheet(Fluid Foundation + Media Queries + Responsive Images)

Inherent Inclination to Web Standards

Mobile First + Progressive Enhancement

Caters to Users' Needs, Devices, Context

Tuesday, 28 May, 13

RWD & A11Y = ♥

Personal Overriding Stylesheet

Less about the design, more about the content!

Tuesday, 28 May, 13

RWD & A11Y = ♥

“My basic point is that it should be the content that dictates the media queries.”

@adactio

Tuesday, 28 May, 13

RWD & A11Y = ♥

“Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad.”

@wilto

Tuesday, 28 May, 13

RWD & A11Y = ♥

“Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad.”

@wilto

“RWD is designing for more accessible content!”George Zamfir

Tuesday, 28 May, 13

RWD & A11Y = ♥

Reduced Cognitive & Visual Load

RWD goes beyond layouts & images, we’re now tackling line & letter spacing (leading & kerning), readable typefaces (even dyslexia) AND responsive typography.

Tuesday, 28 May, 13

RWD & A11Y = ♥

Reduced Cognitive & Visual Load

RWD goes beyond layouts & images, we’re now tackling line & letter spacing (leading & kerning), readable typefaces (even dyslexia) AND responsive typography.

“Georgia works perfectly as body text up until 16 pixels. As soon as you go over that size, it starts to look odd. This is not a design deficiency of the typeface. It was simply not designed to work for big body text sizes and dense screens.”

- informationarchitects.net

Tuesday, 28 May, 13

RWD & A11Y = ♥

Kerning Typefaces

Tuesday, 28 May, 13

RWD & A11Y = ♥ Text

Fat Fingers Syndrome

Tuesday, 28 May, 13

What does it mean for a11y?1 finger, no fingers, motor control, dexterity, novice IT users, etc.

Tuesday, 28 May, 13

header[role="banner"] nav a { padding:0.4em 1em 0.5em;}

What does it mean for a11y?1 finger, no fingers, motor control, dexterity, novice IT users, etc.

Tuesday, 28 May, 13

RWD & A11Y = ♥

Embracing Web Standards

no moreplatform specific hacks custom controls mouse-only hackery

HTML5 & ARIA

Tuesday, 28 May, 13

RWD & A11Y = ♥

Tuesday, 28 May, 13

RWD & A11Y = ♥

Tuesday, 28 May, 13

RWD & A11Y = ♥

Mobile First & Progressive Enhancement

Mobile firstdesigning for the smallest screen resolution first (<320px) and use it as the base for the next, larger screen resolutions

Progressive Enhancementbuilding for the less-capable devices / browsers first and incrementally enhance for the more capable ones

Tuesday, 28 May, 13

RWD best practices

Progressive Enhancement

Tuesday, 28 May, 13

RWD & A11Y = ♥

1. build for the less-capable devices / browsers first

2. start low in the stack: HTML(5), CSS, basic JavaScript

3. incrementally enhance for the more capable devices

4. use @media queries and advanced JavaScript

Tuesday, 28 May, 13

RWD pitfalls

JavaScript-ing everything

Tuesday, 28 May, 13

RWD & A11Y = ♥

Tuesday, 28 May, 13

RWD & A11Y = ♥

Tuesday, 28 May, 13

Mobile First RWD

Tuesday, 28 May, 13

RWD & A11Y = ♥

Mobile First RWD

Tuesday, 28 May, 13

Mobile OnlyTuesday, 28 May, 13

Mobile PleaseTuesday, 28 May, 13

Tuesday, 28 May, 13

All roads lead to mobileTuesday, 28 May, 13

RWD & A11Y = ♥

Mobile First RWD

1. design for the smallest screen resolution first

2. stretch until ugly (not until iPhone screen resolution)

3. (aha) use “ugly” as you breakpoint

4. adapt the content for the new size (until not “ugly”)

Tuesday, 28 May, 13

Mobile First RWD

Tuesday, 28 May, 13

RWD breakpointsstretch until “ugly” - breakpoint!

Tuesday, 28 May, 13

RWD plan

What’s wrong with this guy(not liking device-specific breakpoints)

I’m not alone:bradfrostweb.com/demo/ish

“Determining breakpoints for a responsive design” chapter

from the book: implementingresponsivedesign.com

Tuesday, 28 May, 13

RWD plan

http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

It’s a losing battle!

Tuesday, 28 May, 13

desktop screen resolutions

Tuesday, 28 May, 13

mobile screen resolutions

Tuesday, 28 May, 13

mobile browsers

Tuesday, 28 May, 13

your analytics data

Tuesday, 28 May, 13

RWD plan

Which breakpoints should we choose? It depends!

Considerations:look at devices & browsers market share and their associated screen resolutions & capabilitiesfilter with your own analytics dataassess your current design & nature of the content

Mobile first - breakpoints

Tuesday, 28 May, 13

There’s no perfect set of breakpoints!

Set the breakpoints based on the target audience, the project goals, typical device market share, nature of content, design...

Tuesday, 28 May, 13

RWD & A11Y = ♥

It’s all good news for accessibility!

Tuesday, 28 May, 13

RWD & A11Y = ♥

Tuesday, 28 May, 13

RWD & A11Y = ♥

Caters to Users' Needs, Devices, Context

Tuesday, 28 May, 13

RWD & A11Y = ♥Tuesday, 28 May, 13

RWD & A11Y = ♥

uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?

Tuesday, 28 May, 13

RWD & A11Y = ♥ ?

Tuesday, 28 May, 13

RWD & A11Y = ♥ ?

Accessibility is not lagging behind (for once)

accessibility & web standards are core to RWD

RWD is a champion for web accessibilitywe have common goals for our users

RWD is not a fad

Tuesday, 28 May, 13

RWD & A11Y = ♥ ?

Accessibility is not lagging behind (for once)

accessibility & web standards are core to RWD

RWD is a champion for web accessibilitywe have common goals for our users

RWD is not a fada solid framework for us to do better web work

Tuesday, 28 May, 13

RWD & A11Y = ♥

Tuesday, 28 May, 13

RWD & A11Y = ♥

“RWD is A11Y in disguise!” - George Zamfir

Try it for yourself: goodwally.ca/rawd_kit.zip

Tuesday, 28 May, 13

Thank you!

Tuesday, 28 May, 13

Credits, Photos, Sourcesfreevector.comphotobucket.comphombo.comipadwallsdepot.comwww.entypo.com splio.com/responsiveflickr.com/photos/merlin/1343376738http://www.flickr.com/photos/lukew/7382743430/sizes/l/in/photostreamhttp://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-webvisions-chicago-2012http://bradfrostweb.com/blog/post/this-is-the-web/http://www.flickr.com/photos/hoder/1879222816/http://www.superiormediasolutions.net/wp-content/uploads/2012/02/couch-shot_highres.jpghttp://www.lukew.comhttp://www.clker.comhttp://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoidhttp://www.slideshare.net/AaronGustafson/progressive-enhancement-mobile

http://www.responsivedesign.cahttp://www.flickr.com/photos/kiwanja/3169449999/sizes/o/in/photostream/http://www.yarn-zombie.com/2012/07/zombie-apocalypse-theres-app-for-that.htmlhttp://cnnphotos.blogs.cnn.com/2012/02/29/de_vice-our-mobile-addiction/http://rochellemoulton.com/wp-content/uploads/2012/12/When-The-Competition-Is-Perfection-12-10-2012.jpghttp://nasa.gov http://www.3dtotal.com/index_gallery_detailed2.php?id=4798#.UQHDAaUzhH8http://www.flickr.com/photos/danmumford/7945175156/http://assets2.designerpages.com/assets/1589142/AHD_-_KR_-_Endless_Table_-_Corian1.jpghttp://services.google.com/fh/files/misc/multiscreenworld_final.pdf

Tuesday, 28 May, 13

Research & Resourcesalistapart.com/articles/responsive-web-designbradfrostweb.com + bradfrost.github.com/this-is-responsive/resources.htmlnetmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_designmsdn.microsoft.com/en-us/magazine/hh653584.aspxcoding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-designresponsivedesign.ca/blog/slidecast-rwd-introduction-workflow-overviewjohnpolacek.github.com/scrolldeck.js/decks/responsivegithub.com/filamentgroup/Responsive-Imagesinformationarchitects.net/blog/responsive-typographymatanich.com/2012/11/06/picture-polyfillcss-tricks.com/which-responsive-images-solution-should-you-usemediaqueri.es + quirksmode.orghttp://www.lukew.com/ff/entry.asp?1649github.com/bradfrost/Mobile-First-RWDlukew.com/resources/mobile_first.asp lukew.com/presos/preso.asp?26

christianheilmann.com/tag/progressive-enhancement/bdconf.com/2012/orlando/scheduleblog.cloudfour.com/responsive-design-for-apps-part-1bradfrostweb.com/blog/mobile/bdconf-guy-podjarny-presents-performance-implication-of-mobile-designboagworld.com/mobile-web/separate-mobile-site-vs-responsive-designdeveloper.mozilla.org/en-US/docs/Web_Development/Mobilelukew.com/ff/entry.asp?150624ways.org/2011/conditional-loading-for-responsive-designshttp://www.guypo.com/technical/responsive-web-design-is-bad-for-performance-there-i-said-it/http://www.howtogomo.com http://bradfrostweb.com/blog/mobile/content-parity/http://www.akamai.com/dl/akamai/akamai_soti_q312_exec_summary.pdfhttp://www.howtogomo.comhttp://www.gomez.com/website-performance-test/thank-you?tid=d5be9cec6d6609c8a046ba3155952b25&lang=en&bu=apm

Tuesday, 28 May, 13

Responsive Web Design - An Accessibility Tool

Technology

Transcript of Responsive Web Design - An Accessibility Tool

Institutionalizing Gender Responsive Budgeting in State ...mobipotcms.com/storage/upload/brg/files/arc/... · Understanding Gender Responsive Budgeting (GRB) Concept: GRB is a tool

UX Camp Ottawa: Accessibility as a Design Tool

SMART Tool: Data Accessibility Made Easier The Cal-PASS Way.

Accessibility Through Responsive Design

Email Marketing Essentials Your Strategy May Be Missingfiles.constantcontact.com/bac0c1c4101/a8d60f37-abde-478f-8965-3… · Use a mobile responsive email tool. Mobile responsive.

DRT Accessibility Tool (P1) User Guide (P2) …library.ctr.utexas.edu/ctr-publications/0-6768-p2p3.pdfDRT ACCESSIBILITY TOOL User Guide | 3 Figure 1: DRT Accessibility Tool: Service

T-Orienta: An accessibility diagnostic tool.

Accessibility Requirements These slides are at goo.gl ... · 18F Accessibility Guide WAVE (free page accessibility testing tool) SortSite Desktop (paid site testing tool, including

A Tool for Evaluating Demand Response Transit Accessibility · Web viewKessler, D.S. (2004). “TCRP Synthesis 57: Computer Aided Scheduling and Dispatch In Demand Responsive Transit

Accessibility Challenges and Tool Features: An IBM Web Developer Perspective

Techniques for Authoring Tool Accessibility€¦ · appendix to "Authoring Tool Accessibility Guidelines 1.0". The Working Group expects to update this document in response to queries

Accessibility & Multi-Screen DesignDesign Responsive & Accessible Future Eric Eggert — Accessibility & Multi-Screen Design – #cos18 Disclaimer This course is not a W3C course.

Design of an Environmentally Responsive Grooming Tool to ...

Proposed Procurement Assistance Tool Accessibility Forum

Gender Responsive Budgeting (GRB) as a Policy Tool for Women’s Advancement

Responsive Web Design and its Impact on Web …...Responsive Web Design and its Impact on Web Accessibility Elena Artz A research paper submitted to the University of Dublin, in partial

Responsive Accessibility in der Praxis

Responsive Web Design & Accessibility

Accessibility as a Design Tool

Responsive Web Design and Accessibility: Challenges and Solutions