Progressive enhancement in practice

The web is constantly growing. In terms of underlying technologies, variety of connected devices and last but not least its worldwide users. This growth is a real challenge when it comes to developing modern web applications. Common requirements in these projects are: Establish a codebase that is maintainable, modular and reusable; keep up with new technologies and standards; and deliver new features to a maximum of users without breaking the whole application.
This talk points out that these conflicting goals can actually be fulfilled with the help of progressive enhancement – a founding principle of the web in which base technologies like HTML, CSS and JavaScript are safely layered on top of each other. The given examples help to understand how this principle works in practice and show how to build robust but interactive and future-friendly web applications.

Transcript

1. PROGRESSIVE ENHANCEMENT IN PRACTICE
2. MY NAME IS ROMAN HI, @rstrangh
3. I WORK AT innoQ © Robert Glaser
4. © Kristina Alexanderson https://flic.kr/p/doNnfg
6. WEB DEVELOPMENT IS HARD © Sandra Fauconnier https://flic.kr/p/6RQkGZ
7. THERE ARE
8. WEB TECHNOLOGIES
9. https://github.com/alrra/browser-logos BROWSERS
10. https://github.com/alrra/browser-logos MORE BROWSERS 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 3 3.5 3.6 4 5 6 7 8 9 10 11 12 13 14 15 16 5.5 6 7 8 9 10 11 9.5-9.6 10.0-10.1 10.5 10.6 11 11.1 11.5 11.6 12 12.1 15 16 17 18 19 20 21 22 23 24 25 3.1 3.2 4 5 5.1 6 6.1 7 7.1 8 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 + MOBILE
11. © Luke Wroblewski https://flic.kr/p/gS7txD DEVICES
12. © Mike Weber https://flic.kr/p/gonfmL 2.802.478.934 USERS WORLDWIDE http://www.internetworldstats.com
13. DEAL WITH IT
14. Progressive Enhancement
15. Progressive enhancement
 is a technique to apply web technologies in layers on top of each other in such a way that all content und core functionality of a website is accessible for 
 every user.
16. … once a test ensures that the user’s browser supports the respective feature, the core experience of a website can be enhanced stepwise.
17. „Progressive Enhancement is a way of building websites that complements the philosophies that the web is build upon. “ –Some guy on HasGeek TV
18. IN THEORY © Christian Senger https://flic.kr/p/8gdpaH
19. HTML CSS JavaScript ARIA Sparse, semantic markup contains all content Stylesheets enhance design und layout Unobtrusive JavaScript enhances interaction and behavior WAI-ARIA maintains and improves accessibility
20. BENEFITS
21. © Jody Frost https://flic.kr/p/9JAbJN FAULTTOLERANT
22. „Basically, when an elevator fails, it’s useless. When an escalator fails, it becomes stairs. We should be building escalators, not elevators.“ –Jake Archibald
23. FUTURE- FRIENDLY © Jeff Eaton https://flic.kr/p/b33qWt
24. „Progressive enhancement is not about dealing with old browsers, it’s about dealing with new browsers.“ –Jeremy Keith
25. ACCESSIBLE © Steven Damron https://flic.kr/p/5CRJRE
26. © Yahoo! Accessibility Lab https://flic.kr/p/ax2JmR
27. ALSO
28. FAST LINKABLE SEARCHABLE PROFITABLE © Matthew Black https://flic.kr/p/YFYnd
29. BUT
30. © Jacob Bøtter http://flic.kr/p/5TeTqw REQUIRES THINKING
31. THERE ARE EXCEPTIONS © OSMOS by Hemisphere Games
32. „Be pragmatic – not dogmatic.“ –Me, always
33. IN PRACTICE © JD Hancock https://flic.kr/p/6zA7Pf
34. Online  Check-­‐in https://roca-airways.herokuapp.com
35. http://roca-style.org RESOURCE-ORIENTED CLIENT ARCHITECTURE
36. Input name and flight number Show flight details Preselected seat Change to a different seat Complete check-in FEATURES
37. CORE FUNCTIONALITY
39. Use semantic markup Add ARIA landmarks Provide basic navigation (e.g. skip links) Embrace HTML5 form validation Fall back to server-side validation
40. STYLING
42. Basic styling should be safe Use external stylesheet(s) Provide fallbacks Add styles for states Use separate classes for enhancements Layout is optional, start mobile first
43. FEATURE-DETECTION &
 INTERACTION
45. Use feature-detection (e.g. Modernizr) Test for CSS and JS Features Load in additional enhancements Use JavaScript unobtrusively Provide keyboard access Set proper ARIA attributes
46. © John Morgan https://flic.kr/p/9PbSNB IN DETAIL
47. FEATURE DETECTION
50. SVG
53. WEBFONTS
56. CLIENT-SIDE
 VALIDATION
59. SEAT SELECTION
64. TAKING IT FURTHER Offline Notifications Service Workers WebGL
65. IN SUMMARY
66. WORKS
67. WORKS
68. WORKS
69. WORKS
70. KTHXBYE roman.stranghoener@innoq.com @rstrangh
71. RESOURCES Designing with progressive enhancement
 by Filament Group https://www.gov.uk/service-manual/making- software/progressive-enhancement http://jakearchibald.com/2013/progressive- enhancement-still-important/ http://alistapart.com/article/ understandingprogressiveenhancement