1

Responsive Web Design for Universal Access

Image: http://mashable.com/2012/12/11/responsive-web-design/

Kate WalserCX Insightskwalser@cxinsights.com

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)

3

Slides

http://www.cxinsights.com/printhttp://www.cxinsights.com/presentations/accessu/responsive-web-design.htmlhttp://www.slideshare.net/kwalser

4

Challenge:

“We want a mobile website”

5

Original mobile strategy

Two 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 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

8

What is responsive design?

9

At a glimpse

Photo credit: Media Queries Gallery, http://mediaqueri.es/

Phone, kindle, tablet, desktop views of TheNextWeb

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

11

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

http://www.texas.gov/Smart phone (Galaxy III, iPhone, Android)

13

Demo

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

15

How does it work?

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

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

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

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

20

Looking at the code

http://www.austintexas.gov

Another example

http://stuffandnonsense.co.uk/

22

Responsive and improved access

23

Challenge 1

Hard-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

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" />

27

Challenge 3

Many 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 update its CSS to use display:none to “hide” the collapsed options as tab stops and from screen readers.

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.

30

Use responsive, scalable images

Scalable vector graphics used for responsive web designs also improve screen usage for those with visual impairments.

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?

AustinTexas.gov: How does it compare to the desktop version? What works?

33

Planning a responsive design

34

1. Consider users

- New or existing?- Young or old?

Mix?- Devices?

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.

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

37

3. Define website goals, contexts

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

39

4. Define top tasks

40

5. Prioritize features & content

1

2

3

4

41

6. See what’s hard to touch

http://www.fairfaxcounty.gov/library/

42

Quick sketches can be enough to create the responsive design.

7. Decide if / how layout changes

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

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

45

Group Exercise (15 minutes)

Texas Health & Human Services Commissionhttp://www.hhsc.state.tx.us/index.shtml

46

Tools

http://bradfrost.github.io/this-is-responsive/patterns.html

48

http://lab.maltewassermann.com/viewport-resizer/

49

Viewport Resizer

50

http://screenqueri.es/

Screenqueri.es gives you a pixel grid

to view and check your responsive

design on different devices.

51

http://www.responsinator.com/

Responsinator shows your design in

viewports representing Apple, Kindle, and

some Android devices.

http://www.hhsc.state.tx.us/

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

54

Questions

55

Contact

Kate Walserkwalser@cxinsights.com • @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