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

2. 2 Speaker – Kate Walser  16 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 http://www.cxinsights.com/presentations/accessu/responsive- web-design.html 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 TopicTimeDuration Introductions8:30 – 8:4010 mins What is responsive design8:40 – 8:5010 mins How does it work8:50 – 8:555 mins Responsive design & accessibility8:55 – 9:0510 mins Group exercise Look at AustinTexas.gov on your mobile phone 9:05 – 9:2015 mins Planning a responsive design9:20 – 9:3515 mins Group exercise Make TXHHS responsive 9:35 – 9:5015 mins Discussion, Wrapup9:50 – 10:0010 mins

8. What is responsive design? 8

9. At a glimpse Photo credit: Media Queries Gallery, http://mediaqueri.es/ Phone, kindle, tablet, desktop views of TheNextWeb 9

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

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

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

13. 13 Demo

14. 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? 15

16. 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. 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 Arregin Source: http://dribbble.com/shots/185755-Media-Queries

18. 18 2. Check maximum (device) width Option A: Link to a CSS file for that max-width Option B: As lines in CSS file @media (max-width: 60em) {/* styles for 60em - less*/} @media (max-width: 30em) {/* styles for 30em - less*/} @media only screen and (min-width:321px) and (max-width:480px) {/* Include rules here */} Option C: As import statement in CSS file @import url("minimal.css”) screen and max-width:480px

19. 19 3. Use fluid layouts, flexible images (i.e., em or % vs. px) @media only screen and (max-width: 767px) { /* Mobile */ p, ul, li {line-height: 1.5}.buttons {padding:10px 30px;margin:10px;display:block;}.decoration {display:none;} } @media only screen and (min-width: 768px) { /* Desktop and landscape tablet */ p, ul, li {line-height: 1.3}.buttons {padding:5px;margin:5px;display:inline-block}.decoration {display:inline;width:1.5em;height:1em;} }

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

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

22. 22 Updated http://stuffandnonsense.co.uk/

23. Responsive and improved access 23

24. 24 Challenge 1 Hard-to-click links

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

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

27. 27 Improve readability for all devices Responsive design often hides decorations.decoration {display:none} Use for both screen readers and responsive version

28. 28 Challenge 3 Many tab stops before content Multiple navigation elements precede the content on the WorldWildlife.org website World Wildlife Fund Desktop version

29. 29 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.

30. 30 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

31. 31 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)

32. 32 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.

33. 33 Use responsive, scalable images Scalable vector graphics used for responsive web designs also improve screen usage for those with visual impairments.

34. 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? 34

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

36. Planning a responsive design 36

37. 37 1.Consider users  New or existing?  Young or old? Mix?  Devices?

38. 38 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.

39. Sample device widths 39 DevicesMax-(device- )width Design for Desktop--960px Tablet520 – 959px768px Smart phone 0 – 520px320px http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

40. 40 3.Define website goals, contexts

41. 41 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. Define top tasks

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

44. 44 6. See what’s hard to touch http://www.fairfaxcounty.gov/library/

45. 45 Quick sketches can be enough to create the responsive design. 7. Decide if / how layout changes

46. 46 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

47. 47 9. Adjust widths, positioning Max-width# columnsStyles 960px1float:none; width:auto; 2float:left; width:66%; 660px1float:none; width:auto; 2float:left; width: 63.63636363% EXAMPLE

48. Group Exercise (15 minutes) Texas Health & Human Services Commission http://www.hhsc.state.tx.us/index.shtml 48

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

50. Tools 50

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

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

53. 53 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. 55 http://www.responsinator.com/ Responsinator shows your design in viewports representing Apple, Kindle, and some Android devices.

56. 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 56

57. Questions 57

58. 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 58