responsive web design for universal access 2016
TRANSCRIPT
1
Responsive Web Design for Universal Access
Image: http://mashable.com/2012/12/11/responsive-web-design/
Kate WalserCX [email protected] • @kwalser
Slides: http://www.slideshare.net/kwalser
2
Speaker – Kate Walser
- 18 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
3
Slides
http://www.cxinsights.com/print/2016/RWD.pptxhttp://www.slideshare.net/kwalser
4
Challenge:“We want a mobile website”
5
Original mobile strategyTwo sites
- Two sites – – Server checks browser / device– Present that site
6
Responsive One site, Multiple views
Photo credit: http://sixrevisions.com/mobile/methods-mobile-websites/
7
AgendaTopic Time DurationIntroductions 8:30 – 8:40 10 minsWhat is responsive design and how does it work
8:40 – 8:55 15 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 minsGroup exerciseMake TXHHS responsive
9:35 – 9:50 15 mins
Discussion, Wrapup 9:50 – 10:00 10 mins
8
What is responsive design?
9
Elements have a set width, like 600 pixels wide, and don’t adjust for device size, so content is either cut off or really small and hard to read. Images do not resize either.
Non-responsive
10
At a glimpse
Photo credit: Media Queries Gallery, http://mediaqueri.es/
Phone, kindle, tablet, desktop views of TheNextWeb
11
In responsive web design, we use the same content and adjust it to best fit the content and features for that device. Think of pruning a bush – when done well, after trimming back the “overgrown” areas, the bush still resembles the original bush, but is cleaner and more beautiful.
Goals
http://www.texas.gov/Full size (Desktop)
13
http://www.texas.gov/Landscape – tablet (iPad, Samsung Galaxy Tab)
http://www.texas.gov/Smart phone (Galaxy III, iPhone, Android)
15
Demo
16
How does it work?
17
3 main elements1. Fluid grid and adjustable widths
e.g., column width = 45%, 25ems, or 6 columns wide
2. Scalable imagese.g., image is 24em x 12em (vs. 248px x 124px) for desktop,
and 12em x 6em for mobile
3. Media queries (check device / browser width)e.g., if the device width (or the max-width of the viewable area) is
480px or 30em wide, then show this version
18
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
Stack, hide, or change size of items
“Media Queries,” by Juan ArreginSource: http://dribbble.com/shots/185755-Media-Querie
19
Adjust via cascading style sheet (CSS) rules
/* Mobile */#welcome {width: 100%;}.buttons {padding:0.4em 0.5em;margin:0.5em;}.decoration {display:none;}
@media only screen and (min-width: 48em) {/* Desktop and landscape tablet – 768px wide and up*/#welcome {width: 62.5%;}.buttons {padding:0.25em 0.5em;margin:0.25em;}.decoration {display:inline;width:1.5em;height:1em;}
}
20
Looking at the code
http://www.austintexas.gov
21
Another Example
http://stuffandnonsense.co.uk/
22
Responsive and improved access
23
Challenge 1Hard-to-click links
24
Adjust CSS to make larger “touch” targets
25
Challenge 2“Noise,” “fluff” hinder screen readers
http://www.nhl.com/
26
Improve readability for all devices
Use responsive design to hides decorations.decoration, .full-suite {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:30em)" href="minimal.css" />
27
Challenge 3Many tab stops before content
Multiple navigation elements precede the content on the WorldWildlife.org websiteWorld Wildlife Fund
Desktop version
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 adjust CSS to use display:none or accessible rich Internet application (ARIA) standards to “hide” collapsed sub-options from navigation / screen readers unless the user chooses it.
29
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 4Finding needed option in complex menus
30
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)
31
Challenge 5Images 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.
32
Use responsive, scalable images
Scalable vector graphics used for responsive web designs also improve screen usage for those with visual impairments.
33
Challenge 6Surprise content
Images:
Images designed at one resolution degrade as users, especially those with screen magnifiers, increase their screen magnification.
ADD SCREENSHOT OF MY AIR – original – prod?
34
Surprise content
Scalable vector graphics used for responsive web designs also improve screen usage for those with visual impairments.
ADD SCREENSHOT OF MY AIR – link then link + expanded
35
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?
AustinTexas.gov: How does it compare to the desktop version? What works?
37
Planning a responsive design
38
1. Consider users, contexts, goals
39
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
40
2. Define top tasks per context
41
3. Prioritize features & content
1
4
3 5
2
2
42
4. Think “mobile first”, choose breakpoints*Start small and increase width until content starts to look suboptimal.
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.
43
Quick sketches can be enough to create the responsive design.
5. Decide if / how layout changes
44
6. Describe behavior and style rules and translate to CSS rules
Min-width
What it means Behavior / Style Rules
Less than 50em
At widths less than 50em (e.g., 50em x ~12px/em = 600px), article and aside / sidebar should each span the full width.
article {}aside {}
50em Once the width reaches 50ems (~600px), then resize the article so it’s occupies about 2/3 of the container width, and position it on the left, with the aside / sidebar on the right.
article {float: left;width: 66.3333%; }
aside {float: left;width: 66.3333%; }
45
7. Consider interactions, wide itemsEspecially tables, dialogs, drop-down menus, pop-up help
46
8. Adjust padding, positioning for hard to reach / touch items
http://www.fairfaxcounty.gov/library/
47
Group Exercise (15 minutes)Texas Health & Human Services Commissionhttp://www.hhsc.state.tx.us/index.shtml
http://www.hhsc.state.tx.us/
49
Tools & Resources
Google Chrome Browser, Developer Tools – View > Developer > Developer ToolsFirefox Developer Tools – Tools > Web Developer > Responsive Design View
Browser Developer Tools
Google Chrome Firefox
51
Responsive patterns
http://bradfrost.github.io/this-is-responsive/patterns.htmlhttp://bradfrost.github.io/this-is-responsive/resources.html#viewport-testing
Demo: http://bradfrost.com/demo/ish/Source code: https://github.com/bradfrost/ish.
ish.
53
http://lab.maltewassermann.com/viewport-resizer/
54
http://screenqueri.es/
Screenqueri.es gives you a pixel grid to view and check your responsive design on different devices.
55
Summary
- Combine media queries, scalable images, adjustable widths
- Identify the main goals, contexts, and reasons users will visit your site and build up from those (mobile first)
- Design accordingly
56
ContactKate [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