Date post: | 28-Jan-2015 |
Category: |
Technology |
Upload: | george-zamfir |
View: | 104 times |
Download: | 0 times |
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
goodwally.ca 🌎 @good_wally
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
goodwally.ca 🌎 @good_wallyTuesday, 28 May, 13
goodwally.ca 🌎 @good_wallyTuesday, 28 May, 13
goodwally.ca 🌎 @good_wallyTuesday, 28 May, 13
goodwally.ca 🌎 @good_wallyTuesday, 28 May, 13
goodwally.ca 🌎 @good_wallyTuesday, 28 May, 13
goodwally.ca 🌎 @good_wally
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!
RWD Overview - the reality of today’s web
Web is not print (anymore)
Tuesday, 28 May, 13
Tuesday, 28 May, 13
RWD Overview - the reality of today’s web
Devices change
Tuesday, 28 May, 13
RWD Overview - the reality of today’s web
Devices change
Tuesday, 28 May, 13
RWD Overview - the reality of today’s web
Devices change
Tuesday, 28 May, 13
RWD Overview - the reality of today’s web
Devices change
Tuesday, 28 May, 13
RWD Overview - the reality of today’s web
Context changed
Tuesday, 28 May, 13
RWD Overview - the reality of today’s web
Context changed
Tuesday, 28 May, 13
RWD Overview - the reality of today’s web
Context changed
Tuesday, 28 May, 13
RWD Overview - the reality of today’s web
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
RWD Overview - the reality of today’s web
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
RWD Overview - the reality of today’s web
Good News!
The web is inherently fluid & responsive.
We simply need to re-educate ourselves.
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
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
Text
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
Tuesday, 28 May, 13
RWD - Media Queries
<link rel=”stylesheet” href="layoutPrint.css" media="print" />
RWD - The Details
Tuesday, 28 May, 13
RWD - Media Queries
<link rel=”stylesheet” href="layout.css" media="screen and (min-width: 400px)" />
@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
RWD - Responsive Images
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
RWD - Responsive Images
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
RWD under the hoodTuesday, 28 May, 13
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!
<div id="test5"></div>
@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'); }}
RWD under the hoodTuesday, 28 May, 13
Text
RWD - Responsive Images
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
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 = ♥
Personal Overriding Stylesheet
“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
Personal Overriding Stylesheet
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
Personal Overriding Stylesheet
“RWD is designing for more accessible content!”George Zamfir
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
Tuesday, 28 May, 13
RWD & A11Y = ♥
Personal Overriding Stylesheet
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 = ♥
Personal Overriding Stylesheet
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
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday, 28 May, 13
RWD & A11Y = ♥ Text
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y?1 finger, no fingers, motor control, dexterity, novice IT users, etc.
Tuesday, 28 May, 13
RWD & A11Y = ♥ Text
Personal Overriding Stylesheet
Fat Fingers Syndrome
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 = ♥
Embracing Web Standards
Tuesday, 28 May, 13
RWD & A11Y = ♥
Embracing Web Standards
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 = ♥
Progressive Enhancement
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 = ♥
Progressive Enhancement
Tuesday, 28 May, 13
RWD & A11Y = ♥
Progressive Enhancement
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
Text
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
Text
Tuesday, 28 May, 13
Text
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!
Mobile First & Progressive Enhancement
Tuesday, 28 May, 13
RWD & A11Y = ♥
Mobile First & Progressive Enhancement
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
goodwally.ca 🌎 @good_wally
Thank you!
Tuesday, 28 May, 13
Text
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
Text
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