responsive web design for universal access
DESCRIPTION
TRANSCRIPT
![Page 1: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/1.jpg)
1
Responsive Web Design for Universal Access
Image: http://mashable.com/2012/12/11/responsive-web-design/
Kate WalserCX [email protected]
![Page 2: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/2.jpg)
2
Speaker – Kate Walser
- 15 years in usability, accessibility and user experience design
- Member of TEITAC, or Section 508 / Section 255 refresh
committee
- Principal consultant at CX Insights, the user experience
division of Tritus Technologies, Inc.
- Originally from upstate NY, now call Fairfax, VA (near DC) home
- Wrote "Usability and Gov 2.0" chapter for Usability in
Government Systems book. (June 2012)
![Page 3: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/3.jpg)
3
Slides
http://www.cxinsights.com/printhttp://www.cxinsights.com/presentations/accessu/responsive-web-design.htmlhttp://www.slideshare.net/kwalser
![Page 4: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/4.jpg)
4
Challenge:
“We want a mobile website”
![Page 5: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/5.jpg)
5
Original mobile strategy
Two sites
- Two sites – – Server checks browser / device– Present that site
![Page 6: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/6.jpg)
6
Responsive One site, Multiple views
Photo credit: http://sixrevisions.com/mobile/methods-mobile-websites/
![Page 7: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/7.jpg)
7
AgendaTopic Timeline
Introductions 9:00 – 9:10
What is responsive design 9:10 – 9:20
How does it work 9:20 – 9:25
Responsive design & accessibility 9:25 – 9:35
Group exerciseLook at AustinTexas.gov on your mobile phone
9:35 – 9:50
Planning a responsive design 9:50 – 10:05
Group exerciseMake TXHHS responsive
10:05 – 10:20
Discussion, Wrapup 10:20 – 10:30
![Page 8: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/8.jpg)
8
What is responsive design?
![Page 9: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/9.jpg)
9
At a glimpse
Photo credit: Media Queries Gallery, http://mediaqueri.es/
Phone, kindle, tablet, desktop views of TheNextWeb
![Page 10: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/10.jpg)
http://www.texas.gov/Full size (Desktop)
![Page 11: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/11.jpg)
11
http://www.texas.gov/Landscape – tablet (iPad, Samsung Galaxy Tab)
![Page 12: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/12.jpg)
http://www.texas.gov/Smart phone (Galaxy III, iPhone, Android)
![Page 14: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/14.jpg)
14
The goals of responsive web design are to use the same content for different devices but trim and mold the content and features to best fit the device.
Goals
![Page 15: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/15.jpg)
15
How does it work?
![Page 16: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/16.jpg)
16
3 main parts
- Fluid grid (adjustable widths)e.g., column width = 45% (vs. 300px)
- Flexible images (scalable)e.g., image size is 24em wide by 12em high (vs. 248px x 124px)
for desktop viewing, but just 12em x 6em for mobile
- Media queries (check device / browser width)e.g., if the device width (or the max-width of the viewable area) is
480px wide, then show this version
![Page 17: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/17.jpg)
17
1. Decide what to show and how to order it
Wireframes show web page elements and how they look, where they go on different devices“Media Queries,” by Juan ArreginSource: http://dribbble.com/shots/185755-Media-Queries
![Page 18: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/18.jpg)
18
2. Check maximum (device) width
Option A: Link to a CSS file for that max-width<link rel="stylesheet" type="text/css" media="screen and
(max-width:480px)" href="minimal.css" />
Option B: As lines in CSS file@media (max-width: 60em) {/* styles for 60em - less*/}@media (max-width: 30em) {/* styles for 30em - less*/}
Option C: As import statement in CSS file@import url("minimal.css”) screen and max-width:480px
![Page 19: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/19.jpg)
19
3. Use fluid layouts, flexible images (i.e., em or % vs. px)
http://adaptive-images.com/details.htm
media="only screen and (min-width: 768px)"html.details #how-it-works {float: left;width: 64.5%;padding-bottom: 20px;}
![Page 20: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/20.jpg)
20
Looking at the code
http://www.austintexas.gov
![Page 21: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/21.jpg)
Another example
http://stuffandnonsense.co.uk/
![Page 22: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/22.jpg)
22
Responsive and improved access
![Page 23: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/23.jpg)
23
Challenge 1
Hard-to-click links
![Page 24: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/24.jpg)
24
Adjust CSS to make larger “touch” targets
![Page 25: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/25.jpg)
25
Challenge 2
“Noise,” “fluff” hinder screen readers
http://www.nhl.com/
![Page 26: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/26.jpg)
26
Improve readability for all devices
Responsive design often hides decorations
.decoration {display:none}
Use for both screen readers and responsive version
<link rel="stylesheet" type="text/css" media="speech"
href="minimal.css" />
<link rel="stylesheet" type="text/css" media="screen
and (max-width:480px)" href="minimal.css" />
![Page 27: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/27.jpg)
27
Challenge 3
Many tab stops before content
Multiple navigation elements precede the content on the WorldWildlife.org websiteWorld Wildlife Fund
Desktop version
![Page 28: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/28.jpg)
28
Since the AustinTexas.gov uses a responsive design, at narrower widths, the submenus are
hidden, making it easier for users to get to main section options or content.
Collapsed navigation can* mean fewer tab stops to reach content
*The WorldWildlife.org website doesn’t update its CSS to use display:none to “hide” the collapsed options as tab stops and from screen readers.
![Page 29: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/29.jpg)
29
Challenge 4
Images that degrade on zoom
Images: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
Images designed at one resolution degrade as users, especially those with screen magnifiers, increase their screen magnification.
![Page 30: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/30.jpg)
30
Use responsive, scalable images
Scalable vector graphics used for responsive web designs also improve screen usage for those with visual impairments.
![Page 31: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/31.jpg)
31
Group Exercise (15 minutes)
Take a look – AustinTexas.gov
- Visit the AustinTexas.gov website on a mobile device- How does it compare to the desktop version?- What works? What could be improved?
![Page 32: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/32.jpg)
AustinTexas.gov: How does it compare to the desktop version? What works?
![Page 33: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/33.jpg)
33
Planning a responsive design
![Page 34: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/34.jpg)
34
1. Consider users
- New or existing?- Young or old?
Mix?- Devices?
![Page 35: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/35.jpg)
35
2. Pick devices
Google Analytics reports include Mobile reports. Check the Devices section, and drill down by screen resolution or browser
as a secondary dimension to see what users are using to visit your site.
![Page 36: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/36.jpg)
36
Sample device widths
Devices Max-(device-)width
Design for
Desktop -- 960pxTablet 520 – 959px 768pxSmart phone
0 – 520px 320px
http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
![Page 37: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/37.jpg)
37
3. Define website goals, contexts
![Page 38: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/38.jpg)
38
ItalioKitchen.com’s website hides the gallery of different dishes when a user visits from a mobile site. Instead the menu, locations, news, and specials take center stage.
Example:
italiokitchen.com
![Page 39: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/39.jpg)
39
4. Define top tasks
![Page 40: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/40.jpg)
40
5. Prioritize features & content
1
2
3
4
![Page 41: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/41.jpg)
41
6. See what’s hard to touch
http://www.fairfaxcounty.gov/library/
![Page 42: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/42.jpg)
42
Quick sketches can be enough to create the responsive design.
7. Decide if / how layout changes
![Page 43: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/43.jpg)
43
8. Convert widths to % (or ems)Fluid width = Desired width / container width
.container { width: 660px;}section { float: left; margin: 10px; width: 420px;}
.container { max-width: 660px;}section { float: left; margin: 1.51515151%; /* 10px ÷ 660px = .01515151 */ width: 63.63636363%; /* 420px ÷ 660px = .63636363 */ }
Source: http://learn.shayhowe.com/advanced-html-css/responsive-web-design
![Page 44: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/44.jpg)
44
9. Adjust widths, positioning
Max-width
# columns
Styles
960px 1 float:none;width:auto;
2 float:left;width:66%;
660px 1 float:none;width:auto;
2 float:left;width: 63.63636363%
EXAMPLE
![Page 45: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/45.jpg)
45
Group Exercise (15 minutes)
Texas Health & Human Services Commissionhttp://www.hhsc.state.tx.us/index.shtml
![Page 46: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/46.jpg)
46
Tools
![Page 47: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/47.jpg)
http://bradfrost.github.io/this-is-responsive/patterns.html
![Page 48: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/48.jpg)
48
http://lab.maltewassermann.com/viewport-resizer/
![Page 49: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/49.jpg)
49
Viewport Resizer
![Page 50: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/50.jpg)
50
http://screenqueri.es/
Screenqueri.es gives you a pixel grid
to view and check your responsive
design on different devices.
![Page 51: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/51.jpg)
51
http://www.responsinator.com/
Responsinator shows your design in
viewports representing Apple, Kindle, and
some Android devices.
![Page 52: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/52.jpg)
http://www.hhsc.state.tx.us/
![Page 53: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/53.jpg)
53
Summary
- Combine media queries, responsive images, flexible grid
- Identify the main reasons, devices users will use to visit your site
- Adjust your design to respond to that
![Page 54: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/54.jpg)
54
Questions
![Page 55: Responsive Web Design for Universal Access](https://reader036.vdocuments.mx/reader036/viewer/2022062615/548b4aafb47959415b8b4625/html5/thumbnails/55.jpg)
55
Contact
Kate [email protected] • @kwalser • +1 (571) 281-2626
To learn more- “Responsive Web Design,” by Ethan Marcotte
Article: http://alistapart.com/article/responsive-web-designBook: http://www.abookapart.com/products/responsive-web-design
- “Logical Breakpoints for Your Responsive Design,” by Vasilis van Gemerthttp://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
- ResponsiveDesign.is