You can improve how well your website works and looks across different devices using responsive web design techniques. But did you know you can also improve access for all users, including those with disabilities, by applying responsive techniques? Learn how.
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Responsive Web Design for Universal Access 2016
1. 1
Responsive Web Design for Universal Access
Image: http://mashable.com/2012/12/11/responsive-web-design/
Kate Walser
CX Insights
kwalser@cxinsights.com • @kwalser
Slides: http://www.slideshare.net/kwalser
2. 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
7. 7
Agenda
Topic Time Duration
Introductions 8:30 – 8:40 10 mins
What is responsive design and how
does it work
8:40 – 8:55 15 mins
Responsive design & accessibility 8:55 – 9:05 10 mins
Group exercise
Look at AustinTexas.gov on your
mobile phone
9:05 – 9:20 15 mins
Planning a responsive design 9:20 – 9:35 15 mins
Group exercise
Make TXHHS responsive
9:35 – 9:50 15 mins
Discussion, Wrapup 9:50 – 10:00 10 mins
9. 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
10
11. 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
17. 17
3 main elements
1. Fluid grid and adjustable widths
e.g., column width = 45%, 25ems, or 6 columns wide
2. Scalable images
e.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. 18
Wireframes show web page elements and how
they look, where they go on different devices
“Media Queries,” by Juan Arregin
Source: http://dribbble.com/shots/185755-Media-Queries
Stack, hide, or change size of items
“Media Queries,” by Juan Arregin
Source: http://dribbble.com/shots/185755-Media-Querie
19. 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;}
}
26. 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. 27
Challenge 3
Many tab stops before content
Multiple navigation elements precede the content on the
WorldWildlife.org website
World Wildlife Fund
Desktop version
28. 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. 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 4
Finding needed option in complex menus
30. 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. 31
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.
32. 32
Use responsive, scalable images
Scalable vector graphics used for responsive web designs also improve screen
usage for those with visual impairments.
33. 33
Challenge 6
Surprise 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. 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?
35
39. 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
42. 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. 43
Quick sketches can be enough to create the
responsive design.
5. Decide if / how layout changes
44. 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%; }
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
55
56. Contact
Kate Walser
kwalser@cxinsights.com • @kwalser • +1 (571) 281-2626
To learn more
- “Responsive Web Design,” by Ethan Marcotte
Article: http://alistapart.com/article/responsive-web-design
Book: http://www.abookapart.com/products/responsive-web-design
- “Logical Breakpoints for Your Responsive Design,” by Vasilis van Gemert
http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
- ResponsiveDesign.is
56
Notas do Editor
What’s the heart, core of your product?
If hidden, which elements would be missed by users?
Which items are just for visual appeal?
Which things are harder to use?
How do users reach your site?
What features and content do they use most?
