1 responsive web design for universal access image: kate walser cx insights [email protected]
TRANSCRIPT
![Page 1: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/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: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/2.jpg)
2
Speaker – Kate Walser
- 16 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
- Design websites, applications to be responsive
![Page 3: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/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: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/4.jpg)
4
Challenge:
“We want a mobile website”
![Page 5: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/5.jpg)
5
Original mobile strategy
Two sites
- Two sites – – Server checks browser / device– Present that site
![Page 6: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/6.jpg)
6
Responsive One site, Multiple views
Photo credit: http://sixrevisions.com/mobile/methods-mobile-websites/
![Page 7: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/7.jpg)
7
AgendaTopic Time Duration
Introductions 8:30 – 8:40 10 mins
What is responsive design 8:40 – 8:50 10 mins
How does it work 8:50 – 8:55 5 mins
Responsive design & accessibility
8:55 – 9:05 10 mins
Group exerciseLook at AustinTexas.gov on your mobile phone
9:05 – 9:20 15 mins
Planning a responsive design 9:20 – 9:35 15 mins
Group exerciseMake TXHHS responsive
9:35 – 9:50 15 mins
Discussion, Wrapup 9:50 – 10:00 10 mins
![Page 8: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/8.jpg)
8
What is responsive design?
![Page 9: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/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: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/10.jpg)
http://www.texas.gov/Full size (Desktop)
![Page 11: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/11.jpg)
11
http://www.texas.gov/Landscape – tablet (iPad, Samsung Galaxy Tab)
![Page 12: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/12.jpg)
http://www.texas.gov/Smart phone (Galaxy III, iPhone, Android)
![Page 14: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/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: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/15.jpg)
15
How does it work?
![Page 16: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/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: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/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: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/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*/}
@media only screen and (min-width:321px) and (max-width:480px) {/* Include rules here */}
Option C: As import statement in CSS file@import url("minimal.css”) screen and max-width:480px
![Page 19: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/19.jpg)
19
3. Use fluid layouts, flexible images (i.e., em or % vs. px)
@media only screen and (max-width: 767px) {/* Mobile */p, ul, li {line-height: 1.5}.buttons {padding:10px 30px;margin:10px;display:block;}.decoration {display:none;}
}@media only screen and (min-width: 768px) {
/* Desktop and landscape tablet */p, ul, li {line-height: 1.3}.buttons {padding:5px;margin:5px;display:inline-block}.decoration {display:inline;width:1.5em;height:1em;}
}
![Page 20: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/20.jpg)
20
Looking at the code
http://www.austintexas.gov
![Page 21: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/21.jpg)
Another example
http://stuffandnonsense.co.uk/
![Page 22: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/22.jpg)
22
Updated
http://stuffandnonsense.co.uk/
![Page 23: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/23.jpg)
23
Responsive and improved access
![Page 24: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/24.jpg)
24
Challenge 1
Hard-to-click links
![Page 25: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/25.jpg)
25
Adjust CSS to make larger “touch” targets
![Page 26: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/26.jpg)
26
Challenge 2
“Noise,” “fluff” hinder screen readers
http://www.nhl.com/
![Page 27: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/27.jpg)
27
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 28: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/28.jpg)
28
Challenge 3
Many tab stops before content
Multiple navigation elements precede the content on the WorldWildlife.org websiteWorld Wildlife Fund
Desktop version
![Page 29: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/29.jpg)
29
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 30: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/30.jpg)
30
With drop-down and complex menus, it can be hard to find option you need. Menu doesn’t stay open to let users use ctrl+f to find nav.
Challenge 4
Finding needed option in complex menus
![Page 31: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/31.jpg)
31
The alternative presentation often used for mobile navigation drawers displays all or top navigation options in a list. Users can then use ctrl+F to find the option they need more easily.
Mobile nav drawers can show all options with ability to search (ctrl+f)
![Page 32: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/32.jpg)
32
Challenge 5
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 33: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/33.jpg)
33
Use responsive, scalable images
Scalable vector graphics used for responsive web designs also improve screen usage for those with visual impairments.
![Page 34: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/34.jpg)
34
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 35: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/35.jpg)
AustinTexas.gov: How does it compare to the desktop version? What works?
![Page 36: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/36.jpg)
36
Planning a responsive design
![Page 37: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/37.jpg)
37
1. Consider users
- New or existing?- Young or old?
Mix?- Devices?
![Page 38: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/38.jpg)
38
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 39: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/39.jpg)
39
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 40: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/40.jpg)
40
3. Define website goals, contexts
![Page 41: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/41.jpg)
41
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 42: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/42.jpg)
42
4. Define top tasks
![Page 43: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/43.jpg)
43
5. Prioritize features & content
1
2
3
4
![Page 44: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/44.jpg)
44
6. See what’s hard to touch
http://www.fairfaxcounty.gov/library/
![Page 45: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/45.jpg)
45
Quick sketches can be enough to create the responsive design.
7. Decide if / how layout changes
![Page 46: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/46.jpg)
46
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 47: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/47.jpg)
47
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 48: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/48.jpg)
48
Group Exercise (15 minutes)
Texas Health & Human Services Commissionhttp://www.hhsc.state.tx.us/index.shtml
![Page 49: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/49.jpg)
http://www.hhsc.state.tx.us/
![Page 50: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/50.jpg)
50
Tools
![Page 51: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/51.jpg)
http://bradfrost.github.io/this-is-responsive/patterns.html
![Page 52: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/52.jpg)
52
http://lab.maltewassermann.com/viewport-resizer/
![Page 53: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/53.jpg)
53
Viewport Resizer
![Page 54: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/54.jpg)
54
http://screenqueri.es/
Screenqueri.es gives you a pixel grid
to view and check your responsive
design on different devices.
![Page 55: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/55.jpg)
55
http://www.responsinator.com/
Responsinator shows your design in
viewports representing Apple, Kindle, and
some Android devices.
![Page 56: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/56.jpg)
56
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 57: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/57.jpg)
57
Questions
![Page 58: 1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights kwalser@cxinsights.com](https://reader035.vdocuments.us/reader035/viewer/2022062804/56649db25503460f94aa13a6/html5/thumbnails/58.jpg)
58
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