Responsive Web Design for Universal Access


Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • How do users reach your site?What features and content do they use most?
  • What’s the heart, core of your product?If hidden, which elements would be missed by users?Which items are just for visual appeal?Which things are harder to use?
  • WireframesEven Google Chrome developer toolbar
  • Responsive Web Design for Universal Access

    1. 1. 1Responsive Web Design for Universal AccessImage: WalserCX
    2. 2. 2Speaker – 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 ofTritus Technologies, Inc.- Originally from upstate NY, now call Fairfax, VA (near DC) home- Wrote "Usability and Gov 2.0" chapter for Usability in GovernmentSystems book. (June 2012)
    3. 3. 3Slides
    4. 4. 4Challenge:“We want a mobile website”
    5. 5. 5Original mobile strategyTwo sites- Two sites –– Server checks browser / device– Present that site
    6. 6. 6ResponsiveOne site, Multiple viewsPhoto credit:
    7. 7. 7AgendaTopic TimelineIntroductions 9:00 – 9:10What is responsive design 9:10 – 9:20How does it work 9:20 – 9:25Responsive design & accessibility 9:25 – 9:35Group exerciseLook at AustinTexas.govon your mobile phone9:35 – 9:50Planning a responsive design 9:50 – 10:05Group exerciseMake TXHHS responsive10:05 – 10:20Discussion,Wrapup 10:20 – 10:30
    8. 8. What is responsive design?8
    9. 9. At a glimpsePhoto credit: Media Queries Gallery,, kindle, tablet,desktop views ofTheNextWeb9
    10. 10. 11 – tablet (iPad, Samsung Galaxy Tab)
    11. 11. 13Demo
    12. 12. 14The goals of responsive web design are to use thesame content for different devices but trim and moldthe content and features to best fit the device.Goals
    13. 13. How does it work?15
    14. 14. 163 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) is480px wide, then show this version
    15. 15. 171. Decide what to show and how toorder itWireframes show web page elementsand how they look, where they go ondifferent devices“Media Queries,” by Juan ArreginSource:
    16. 16. 182. Check maximum (device) widthOption 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
    17. 17. 193. Use fluid layouts, flexible images(i.e., em or % vs. px)"only screen and (min-width: 768px)"html.details #how-it-works {float: left;width: 64.5%;padding-bottom: 20px;}
    18. 18. 20Looking at the code
    19. 19. Another example
    20. 20. Responsive and improved access22
    21. 21. 23Challenge 1Hard-to-click links
    22. 22. 24Adjust CSS to make larger “touch” targets
    23. 23. 25Challenge 2“Noise,” “fluff” hinder screen readers
    24. 24. 26Improve readability for all devicesResponsive 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" />
    25. 25. 27Challenge 3Many tab stops before contentMultiple navigation elements precede the content on websiteWorld Wildlife FundDesktop version
    26. 26. 28Since the uses a responsive design, at narrower widths, the submenus arehidden, making it easier for users to get to main section options or content.Collapsed navigation can* mean fewer tabstops to reach content*The website doesn’t update its CSS to use display:none to “hide” the collapsed options as tabstops and from screen readers.
    27. 27. 29Challenge 4Images that degrade on zoomImages: designed at one resolution degrade as users, especially those with screen magnifiers,increase their screen magnification.
    28. 28. 30Use responsive, scalable imagesScalable vector graphics used for responsive web designs also improve screenusage for those with visual impairments.
    29. 29. Group Exercise (15 minutes)Take a look – Visit the website on a mobile device- How does it compare to the desktop version?- What works? What could be improved?31
    30. 30. Planning a responsive design33
    31. 31. 341. Consider users- New or existing?- Young or old? Mix?- Devices?
    32. 32. 352. Pick devicesGoogle Analytics reports include Mobile reports. Check the Devices section, and drill down by screen resolution or browser as asecondary dimension to see what users are using to visit your site.
    33. 33. Sample device widths36Devices Max-(device-)widthDesign forDesktop -- 960pxTablet 520 – 959px 768pxSmartphone0– 520px 320px
    34. 34. 373. Define website goals, contexts
    35. 35.’s website hides the gallery of different dishes when auser visits from a mobile site. Instead the menu, locations, news, andspecials take center
    36. 36. 394. Define top tasks
    37. 37. 405. Prioritize features & content1234
    38. 38. 416. See what’s hard to touch
    39. 39. 42Quick sketches can be enough to create theresponsive design.7. Decide if / how layout changes
    40. 40. 438. 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:
    41. 41. 449. Adjust widths, positioningMax-width # columns Styles960px 1 float:none;width:auto;2 float:left;width:66%;660px 1 float:none;width:auto;2 float:left;width: 63.63636363%EXAMPLE
    42. 42. Group Exercise (15 minutes)Texas Health & Human Services Commission
    43. 43. Tools46
    44. 44. 48
    45. 45. 49Viewport Resizer
    46. 46. gives you a pixel grid toview and check your responsive design ondifferent devices.50
    47. 47. 51 shows your design inviewports representing Apple, Kindle, andsome Android devices.
    48. 48. Summary- Combine media queries, responsive images, flexible grid- Identify the main reasons, devices users will use to visityour site- Adjust your design to respond to that53
    49. 49. Questions54
    50. 50. ContactKate• @kwalser• +1 (571) 281-2626To learn more- “Responsive Web Design,” by Ethan MarcotteArticle: “Logical Breakpoints for Your Responsive Design,” by Vasilis van Gemert ResponsiveDesign.is55