1. Accessibility Through Responsive Design Ben Wetzel Justin Stockton

2. Materials Available Online www.devis.com/presentations/csun-2013 2

3. Justin Stockton Application Developer – Devis Email: jstockton@devis.com Twitter: @poorgeek 3

4. Ben Wetzel Application Developer – Devis Email: bwetzel@devis.com Twitter: @bensashi 4

5. Overview Access Jobs Elements of Responsive design Additional Considerations Testing Basics 5

6. Disability Employment App Challenge 6 Presented through Challenge.gov in summer of 2012 Sponsored by Department of Labor’s Office of Disability Employment Policy (ODEP) Build accessible websites and apps to help employers and people with disabilities

7. accessjobs.devis.com Proof of Concept! 7

8. Our Goals Very focused and simple to use Accessible (508 and WCAG 2.0 compliant) Easy for employers to manage – Adding markup to existing job postings includes them in our search Challenge ourselves to achieve a more universal design 8

9. Smartphone Ownership August 2012 - 45% of Americans (16+) now own smartphones (~107 million people) Increased from 35% in May 2011 (increase of ~24 million people) Surveys done by Pew Internet and American Life Project http://www.pewinternet.org/Reports/2012/S martphone-Update-Sept-2012/Findings.aspx http://www.pewinternet.org/Reports/2012/S martphone-Update-Sept-2012/Findings.aspx 9

10. Tablet Ownership August 2012 - 25% of Americans (16+) now own tablet computers, up from 4% in September 2010 Increase of around 50 million owners in 2 years – Census defines adults as 18+, so real numbers would be somewhat higher http://www.pewinternet.org/Reports/2012/Ta blet-Ownership-August-2012/Findings.aspx http://www.pewinternet.org/Reports/2012/Ta blet-Ownership-August-2012/Findings.aspx 10

11. Why is this Meaningful? 17% of cell phone owners primarily use their phone to access the internet – ~36 million people If websites are not accessible or usable on mobile, a huge population is excluded http://pewinternet.org/Reports/2012/Cell- Internet-Use-2012.aspx http://pewinternet.org/Reports/2012/Cell- Internet-Use-2012.aspx 11

12. Refining Our Definition of Accessibility We have a responsibility to ensure that the web is usable for everyone Accessibility as “availability” Taking a device–agnostic approach to accessible web design and making it available to as many people as possible on as many devices as possible 12

13. “No Mobile” Approach 13 Website that does not offer a tailored mobile experience (either app or website) Can still be viewable on most devices, but not particularly usable Not common, but still a problem

14. What’s Wrong With Traditional Mobile Approaches? Features left out for mobile users – Might make sense, but too often due to assumptions instead of user studies Content parity – Same content should be available everywhere – If redirects are not properly set up, sharing links can be problematic Maintaining several code bases 14

15. Native Mobile Applications Barrier to entry – Device and even OS version Accessibility – Different considerations and techniques compared to web design – varies based on platform Less of an issue for web applications – Some apps like Kindle on iOS are not accessible 15

16. Mobile Websites “Browser sniffing” – Method that identifies which browser and operating system you are using – Requires maintaining a list of browsers and operating systems – Some websites only serving mobile to Webkit- based browsers, regardless of whether other browsers could render them Accessibility – Many mobile websites disable zooming 16

17. Mobile Websites and Native Apps Are Not Evil Both offer experience tailored to mobile devices Native applications can take advantage of advanced device capabilities – Web browsers are catching up 17

18. We Can Do Better 18

19. New Approach - Responsive Design Proposed by Ethan Marcotte on A List Apart in May 2010 – http://www.alistapart.com/articles/responsive-web- design/ http://www.alistapart.com/articles/responsive-web- design/ One website for all devices Optimized for different contexts (not devices) using: – Fluid grids – Flexible media – CSS Media Queries 19

20. Grid Systems 20 A way of visually laying out different pieces of information along vertical and horizontal axes Have existed in some form since medieval times

21. Fluid Grids Fluid grid = width of content areas is defined in percentage rather than fixed units (pixels, em) – Can grow or shrink as the screen width changes – Allows for utilizing all available space – Avoids issue of horizontal scrolling with fixed width sites on smaller displays 21

22. Fluid Grids on Access Jobs 22

23. Fluid Grids on Access Jobs Used the Semantic Grid System library Allowed us to avoid presentation class names in HTML markup – Best Practice to keep presentation (CSS) and structure (HTML) separate 23

24. Semantic Grid Code Example article {.column(9); } Traditional grid markup in HTML: 24

25. Flexible Media Similar concept to fluid grids, but applied to images and movies Width of media can change depending on screen size Examples of flexible media on Access Jobs – Logo – Screenshots 25

26. Flexible Media Code Example img, object { max-width: 100%; } Can result in problems in older browsers that don’t support max-width (Internet Explorer 7) – Set width to 100% Flickr documented how to deal with poor image scaling using proprietary Microsoft CSS filters – http://code.flickr.net/2008/11/12/on-ui-quality-the-little- things-client-side-image-resizing/ http://code.flickr.net/2008/11/12/on-ui-quality-the-little- things-client-side-image-resizing/ 26

27. Responsive Images Need has arisen to serve different images based on media queries – Existing images look blurry on displays with high pixel density – If images are going to be viewed at small sizes, no point in serving large resolution images – Tricky because bandwidth != screen size May also want to provide user control for this – HD video toggle on Youtube 27

28. Several Approaches New attribute for HTML image element – “srcset” New HTML picture element Both allow specifying additional image sources depending on different criteria Still in “proposed” status, not part of specification W3C Responsive Images Community Group 28

29. Media Queries Part of CSS3 specification Extends existing media type functionality that allowed style sheets for print, screen, etc. Gives more granular control as to when different CSS rules are applied – Based on media features such as screen width/height, screen orientation, pixel density, etc… 29

30. Media Query Code Example.job { display: block; } @media screen and (min-width: 650px) and (max- width: 960px) {.job { margin: 0.52%; display: inline-block; width: 48.6111%; } 30

31. Breakpoints Breakpoints are defined resolution points (typically width) specified in media queries at which different CSS styles are applied Breakpoints used on Access Jobs: – Below 650 (small screen) – 650-960 (tablet) – Above 960 (desktop) Should be chosen based on your content rather than known resolutions of popular devices 31

32. Media Queries In Action 32

33. Media Query Support Mobile browsers – iOS Safari (3.2+) – Android Browser (2.1+) Desktop browsers – Internet Explorer (9+) – Firefox (3.5+) – Chrome (4+) – Safari (4+) Full list at http://caniuse.com/css-mediaquerieshttp://caniuse.com/css-mediaqueries 33

34. How To Handle Lack of Media Query Support Respond.js – Adds support for min/max-width to IE 6-8 Mobile-first approach for other browsers – Default CSS = single column layout – Introduce additional complexity inside media queries (unsupported browsers will just ignore this) Can still target with browser-specific style sheets if this approach is undesirable 34

35. Responsive Design and Accessibility Responsive does not equal accessible, so care must be taken to comply with existing accessible development guidelines Besides improving availability: – Flexible layouts handle zooming/scaling very well No horizontal scroll bars – Lowers barrier to entry for assistive technology Inexpensive mobile devices now come with built-in assistive technology – Freedom of choice for assistive technology 35

36. Testing Need to take a pragmatic approach – testing on every device is unrealistic – Examine web analytics to find appropriate devices to target – Take advantage of devices owned by yourself and coworkers – Consider starting a local device lab – Simulators/Emulators are available for iOS (Mac Only), Android Desktop browsers are typically multi-platform – If not, virtualization can be used Either locally or through something like Browserstack.comBrowserstack.com http://www.modern.ie/ 36

37. Mobile Testing and Debugging Don’t need to manually retest on each device – Adobe Edge Inspect Adobe Edge Inspect – Mixture Mixture Remote inspection – Web Inspector Remote Web Inspector Remote – Edge Inspect Edge Inspect – Remote Web Inspector (iOS/Mac) Remote Web Inspector 37

38. Testing Access Jobs Physical Device Testing – iPhone, iPad, Android Phones, Blackberry Desktop Testing – Testing multiple versions of IE through IE Developer Tools Testing breakpoints – Manually (resizing browser) – http://responsivepx.com/ http://responsivepx.com/ 38

39. Beyond Access Jobs Content-specific considerations – Responsive data tables Reading order – Making sure reading order always matches visual order 39

40. Takeaways Responsive design is the most future-friendly approach to universal – not just mobile – design Focus is on the content and optimizing for different contexts, not chasing latest devices By giving up some control over a consistent appearance, we ensure our content is available to the largest audience 40

41. ANY QUESTIONS? COME TALK TO DEVIS AT BOOTH 713-A Ben Wetzel bwetzel@devis.com Justin Stockton jstockton@devis.com 41