1 / 128

There Are No “Buts” in Progressive Enhancement [Øredev 2015]

Progressive enhancement sounds practical, but not for your current project, right? Good news: you’re wrong! <br><br>In this session, Aaron will debunk the myths that often preclude individuals and organizations from embracing progressive enhancement and demonstrate solid techniques for applying progressive enhancement in your work. <br><br>By the end of this session, you’ll walk away with <br><br>* a better sense of the devices people are using to access the Web, <br>* a framework for envisioning experience as a continuum, and <br>* a solid understanding of how to improve the accessibility and reach of your Web projects. <br><br>Come find out why progressive enhancement isn’t just for “content” sites (whatever those are).

AaronGustafson
Download Presentation

There Are No “Buts” in Progressive Enhancement [Øredev 2015]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Hi!
 I’m @AaronGustafson

  2. What is PROGRESSIVE ENHANCEMENT?

  3. TECHNOLOGICAL RESTRICTIONS

  4. USER EXPERIENCE BASIC ADVANCED BROWSER CAPABILITIES

  5. Interactivity Design Semantics Content

  6. reddit.com

  7. Make your mobile site strategy simply your website strategy

  8. bbc.com/news

  9. “We have developed a new version of the News website which implements a responsive design so that we can offer all our users the best experience possible no matter what device they are using.” NIKO VIJAYARATNAM SENIOR PROJECT MANAGER - BBC

  10. EFFORT 4 years 50 contributors 5000 pull requests RESULTS 1 code base 30
 different languages

  11. BEFORE AFTER

  12. “Looking back, using Mobile First was genius. We were able to strip everything back to the core content, the stuff that mattered to users. No JavaScript. No cruft. Just the good stuff. Journalism at its best.” JOHN CLEVELY @JCLEVELEY

  13. cnn.com

  14. bcbst.com

  15. What you’d expect

  16. What you might get

  17. So what’s the PROBLEM?

  18. Assuming JAVASCRIPT is always available

  19. How many people are missing out on JavaScript-based enhancement?

  20. 1.1% according to the UK’s GDS

  21. 0.2% JavaScript disabled or unavailable 0.9% JavaScript enabled but never received +

  22. That’s 1 in 93 people

  23. LOGIN IS AN EASY FIX Include the Login Form in your markup and give it a unique id: <form id="login"> 1. Hide it by default:
 form#login { display: none; } 2. Make the activation link target it:
 <a href="#login">Login…</a> 3. Show the form when someone clicks the link:
 form#login:target { display: block; } 4. Use CSS to transition the opacity to make it look friggin’ sweet! 5.

  24. OR EVEN EASIER… Make the link point to a login page 1.

  25. NAVIGATION Large screen Small screen Touch devices Mouse users Mouse and touch enabled devices Keyboard users Color blind users Screen readers Users without JavaScript thebostoncalendar.com/system/events/photos/000/023/300/original/tumblr_n9wbg5xUuK1qbycdbo1_1280.jpg?1421977741

  26. nichols.edu

  27. SCENARIOS IF NO JS; SMALL SCREEN WIDTH Hamburger menu acts as jump link to navigation at bottom of the page; main and sub nav are shown IF JS; SMALL SCREEN WIDTH Hamburger menu toggles off-screen navigation pattern; two levels of nested navigation - expand/collapse functionality for sub-nav IF NO JS or JS; LARGE SCREEN WIDTH Show main navigation; hide sub nav on default under drop down menus nested within main; use CSS to show sub navigation on hover FOR TOUCH DEVICES; LARGE SCREEN WIDTH Make top level navigation items link to landing pages with sub-nav accessible

  28. Would you believe you CAN DO THAT without JavaScript?

More Related