1

Responsive Web Design for Universal Access

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

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