$30 off During Our Annual Pro Sale. View Details »

FOUC, and the Death of Progressive Enhancement

FOUC, and the Death of Progressive Enhancement

Web developers have long heralded Progressive Enhancement for delivering web experiences in "layers" (HTML, images, CSS, and then JS). It sounds so obvious and elegant, right? But FOUC (Flash of Unstyled Content), exposes the lies we've been telling ourselves and users! It's time to peel back the layers and re-envision how the web is assembled.

Kyle Simpson

September 13, 2019

More Decks by Kyle Simpson

Other Decks in Programming


  1. FOUC, and the Death of Progressive Enhancement Kyle Simpson @getify

  2. In the beginning...

  3. First webpage (CERN) First web browser Early web browser

  4. Dark Mode Disable Progressive Rendering Preload Images ✓ Refresh ✓

    Reduce Motion ✓ ✓
  5. Change How We Build

  6. <html> <body> <a href="javascript:void(0)" style="background- color:#f00;color:#fff" onmouseover="openMenu(this)" onmouseout="closeMenu(this)">Hover Me!</a> </body>

    </html> Early Web
  7. <html> <body> <a id="hover-me">Hover Me!</a> </body> </html> #hover-me { background-color:

    #f00; color: #fff; } var btn = document.getElementById("hover-me"); btn.addEventListener("mouseover",openMenu); btn.addEventListener("mouseout",closeMenu); Separation of Concerns
  8. Graceful Degradation

  9. Graceful Degradation? https://www.slideshare.net/AaronGustafson/progressive-enhancement-mobile/57-SPECIAL_NEEDS_CAN_BE_CONTEXTUAL

  10. Progressive Enhancement

  11. http://hesketh.com/publications/ inclusive_web_design_for_the_future/

  12. Web Performance

  13. FOUC Flash of Uncolored Character Flash of Unstyled Content

  14. FOIT FOUT https://font-display.glitch.me/

  15. FUBC Flash of Unbehaviored Content FUBC

  16. First Paint WebPageTest.org

  17. Like?

  18. Reflows and restyles? Placeholders
 and spinners?

  19. Tolerate.

  20. The Great Lie: Technology-layered delivery (HTML -> CSS -> JS)

    is "morally" superior
  21. None
  22. Mirror, Mirror, on the wall...

  23. Responsive
 Design Ethan Marcotte ( @beep )

  24. Divide in the Web Community https://css-tricks.com/the-great-divide/

  25. None
  26. "Progressive Enhancement is Dead" --Tom Dale https://tomdale.net/2013/09/progressive-enhancement-is-dead/

  27. Is "No JavaScript" a relevant use case today?

  28. None
  29. None
  30. Fight for the user?

  31. Priority of Constituencies https://www.w3.org/TR/html-design-principles/#priority-of-constituencies "In case of conflict, consider users

    over authors over implementors over specifiers over theoretical purity..."
  32. Adaptation

  33. User Agent User Advocate User Agent

  34. Configuration

  35. Product + UI + UX =
 Imprintable Design #ImprintableDesign

  36. Progressive Enhancement: developers & technology Instead, we need design focused

    primarily on each person #ImprintableDesign
  37. Flawed: designing for consistency

  38. Flawed: if the device can do it, the user wants

    it https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
  39. Who's using your site?

  40. Google Analytics

  41. Statistics Marginalize People

  42. Common Thread: we know better than any user does

  43. E12Y higher bar: Empower People (empowerability) #ImprintableDesign #E12Y

  44. Customer Customer User User Person

  45. Flawed:
 browser knows best

  46. Power unlimited? Data unlimited? Hands usable? Lighting conditions? CPU/Memory available?

  47. Can we just ASK the person?

  48. Pick Your
 Font Size https://www.w3.org/TR/WCAG20-TECHS/G178.html

  49. None
  50. Flawed: people always want the most powerful experience

  51. Need a new term: Progressive Enhancement Progressive Experience Personalized Experience

    People Empathy
  52. How do we begin practicing People Empathy through Imprintable Design?

  53. People must be given more control over their web experiences

  54. Precedent

  55. "Currencies" Speed Battery Level Cost (Bandwidth)

  56. Person and Browser together

  57. Fidelity

  58. "Request-Fidelity" Header

  59. Layers of technology Degrees of fidelity Sites/Apps built in...

  60. None
  61. Send or Skip WebGL, animations, fonts, retina images, etc Features

    / Components
  62. Alter Behavior Batching requests Switching on/off SPA Treat like offline

  63. Browser (User Advocate) must veto server over resource responses

  64. First Steps?

  65. Should we wait on browsers to adopt? No.

  66. Start building in options. Start exposing choices.

  67. Objections?

  68. "[N]o one has disproved the benefits of Progressive Enhancement or

    proposed a better technique." https://www.sitepoint.com/javascript-dependency- backlash-myth-busting-progressive-enhancement/
  69. Progressive Enhancement is dead.
 Long live People Empathy and