Progressive Enhancement 101
3 likes844 views
Progressive enhancement is a strategy for building web interfaces in a layered fashion that allows basic content and functionality for all, while providing enhanced versions to those with more advanced software or bandwidth. It involves layering interface elements from semantic markup and baseline styles through to modern styles and behavior scripts. This approach simplifies development, reduces bugs and improves performance by supporting all users regardless of browser or connection capabilities. It also helps future-proof solutions and make them more mobile-friendly. The document provides further details on key technology enablers and recommendations for implementing progressive enhancement.
Progressive Enhancement 101
- 1. Progressive Enhancement 101 J A M E S C O O K / G A R E T H R O G E R S / K O R N Y S I E T S M A ThoughtWorks
- 3. Progressive Enhancement ! ! What is it?
- 4. Definition Progressive enhancement is a strategy for building web things in a layered fashion that allows everyone to access the basic content and functionality, using any browser or connection, while also providing an enhanced version to those with more advanced software or greater bandwidth.
- 12. Layer your interface Behaviour Scripting Modern styles CSS Baseline styles CSS Semantic markup HTML Content task or prose
- 16. Progressive Enhancement ! ! Why care?
- 21. Simplify your solution Reduce development time Reduce bugs Ease maintenance Improve performance Support the past Future-proof Mobile-critical
- 22. You’ll build a better product
- 23. Think, design, build – iteratively
- 24. You don’t always know from where your stuff will be accessed or by whom or on what
- 25. GDS JavaScript research We didn’t really have any idea how many people are experiencing UK government web services without the enhancement of JavaScript… https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement “
- 26. Temporary network errors DNS lookup failures Server response failures Corporate & Government Firewalls Network Provider filters Browser extensions
- 27. Progressive Enhancement ! ! How to do it
- 31. Key technology enablers Advanced CSS Shared client/server view templates Shared client/server code Nashorn! React / OM / What’s next?
- 32. Further Reading… • Aaron Gustafson’s series on A List Apart: Understanding Progressive Enhancement, Progressive Enhancement with CSS, and Progressive Enhancement with JavaScript. • Progressive enhancement is still important, by Jake Archibald • Progressive Enhancement: What It Is, And How To Use It? on Smashing Magazine • Designing with Progressive Enhancement, by Filament Group • Enough with the JavaScript Already, by Nicholoas Zakas
- 33. Any discussion? S L I D E S AT http://slideshare.net/ohellojames