Everything can break

Why is progressive enhancement needed? Because everything can break. In this presentation I’ll show you how and why with examples of everyday life. A different take on explaining progressive enhancement, which will help you in communicating with your clients and to make better websites.

Transcript

1. Everything can break
3. Why do things break? real life situations
9. “Lie-Fi is like offline but it trolls you, by pretending to be online. It’ll attempt to make connection for minutes and still fail” – Jake Archibald
10. But there’s more slow devices old browsers enhancement blockers (people forget about it)
11. What gets broken? real life examples
12. No JS
13. No webfonts
14. No images
15. No CSS
16. What’s happening? no separation of concerns (e.g. using Angular) dependency on style or scripting icons in webfonts (it’s an antipattern)
17. Doing it right yes we can
18. Progressive enhancement content should always be available, for everyone
19. Progressive enhancement done right is not serving everything to each browser
20. Good patterns
21. Good patterns mustard cut
22. Good patterns mustard cut no webfonts for slow platforms
23. Good patterns mustard cut no webfonts for slow platforms working with components
24. Good patterns mustard cut no webfonts for slow platforms working with components async JS with requireJS & conditioner.js
25. conditioner.js is awesome
26. A bad example of progressive enhancement
27. no-JS version
28. Style when JS is available .has-js .component p { display: none; }
29. JS version
30. What happens when… 1. JS is enabled 2. CSS hides text 3. Component JS doesn’t load 4. Hidden text stays hidden
31. JS version
32. CSS should be different [data-initialized="component/component"] p { display: none; }
33. A good example of progressive enhancement
34. Basis Hamburger is link to separate page Only logo and icons for menu & search
35. Separate page
36. CSS3 selectors Hamburger opens menu on same page Search can be opened & closed
37. SVG Retina logo and icons for menu & search Adding icons for menu items
38. CSS3 + JS 1st level menu directly available 3 extra menu levels
39. Working together
41. Progressive enhancement content should always be available, for everyone
42. Progressive enhancement done right is not serving everything to each browser
43. Questions? Don’t forget to check conditionerjs.com