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.

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

3. 3
Slides
http://www.cxinsights.com/print/2016/RWD.pptx
http://www.slideshare.net/kwalser

4. 4
Challenge:
“We want a mobile website”

5. 5
Original mobile strategy
Two sites
- Two sites –
– Server checks browser / device
– Present that site

6. 6
Responsive
One site, Multiple views
Photo credit: http://sixrevisions.com/mobile/methods-mobile-websites/

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

8. What is responsive design?
8

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

12. http://www.texas.gov/
Full size (Desktop)

13. 13
http://www.texas.gov/
Landscape – tablet (iPad, Samsung Galaxy Tab)

15. 15
Demo

16. How does it work?
16

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;}
}

20. 20
Looking at the code
http://www.austintexas.gov

21. 21
Another Example
http://stuffandnonsense.co.uk/

22. Responsive and improved access
22

23. 23
Challenge 1
Hard-to-click links

24. 24
Adjust CSS to make larger “touch” targets

25. 25
Challenge 2
“Noise,” “fluff” hinder screen readers
http://www.nhl.com/

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

37. Planning a responsive design
37

38. 38
1. Consider users, contexts, goals

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

40. 40
2. Define top tasks per context

41. 41
3. Prioritize features & content
1
4
3 5
2
2

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%; }

45. 45
7. Consider interactions, wide items
Especially tables, dialogs, drop-down menus, pop-up help

46. 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 Commission
http://www.hhsc.state.tx.us/index.shtml
47

49. Tools & Resources
49

50. Google Chrome Browser, Developer Tools – View > Developer > Developer Tools
Firefox Developer Tools – Tools > Web Developer > Responsive Design View
Browser Developer Tools
Google Chrome Firefox

51. 51
Responsive patterns
http://bradfrost.github.io/this-is-responsive/patterns.html
http://bradfrost.github.io/this-is-responsive/resources.html#viewport-testing

52. Demo: http://bradfrost.com/demo/ish/
Source code: https://github.com/bradfrost/ish.
ish.

53. 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.
54

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