Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive enhancement in practice

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.

8582e25bb23108d9cc68ecbc42a715b4?s=128

Roman Stranghöner

October 27, 2014
Tweet

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

  5. None
  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

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

  41. None
  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

  44. None
  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

  48. None
  49. None
  50. SVG

  51. None
  52. None
  53. WEBFONTS

  54. None
  55. None
  56. CLIENT-SIDE
 VALIDATION

  57. None
  58. None
  59. SEAT SELECTION

  60. None
  61. None
  62. None
  63. None
  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