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.

Transcript

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

   View Slide

2. In the beginning...
   

   View Slide

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

   View Slide

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

   View Slide

5. Change How We
   Build
   

   View Slide

6. 
   
   onmouseover="openMenu(this)"
   onmouseout="closeMenu(this)">Hover Me!
   
   
   Early Web
   

   View Slide

7. 
   
   Hover Me!
   
   
   #hover-me {
   background-color: #f00;
   color: #fff;
   }
   var btn = document.getElementById("hover-me");
   btn.addEventListener("mouseover",openMenu);
   btn.addEventListener("mouseout",closeMenu);
   Separation
   of Concerns
   

   View Slide

8. Graceful
   Degradation
   

   View Slide

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

   View Slide

10. Progressive
    Enhancement
    

    View Slide

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

    View Slide

12. Web Performance
    

    View Slide

13. FOUC
    Flash of Uncolored Character
    Flash of Unstyled Content
    

    View Slide

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

    View Slide

15. FUBC
    Flash of Unbehaviored
    Content
    FUBC
    

    View Slide

16. First Paint
    WebPageTest.org
    

    View Slide

17. Like?
    

    View Slide

18. Reflows and
    restyles?
    Placeholders

    and spinners?
    

    View Slide

19. Tolerate.
    

    View Slide

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

    View Slide

21. View Slide

22. Mirror, Mirror, on the wall...
    

    View Slide

23. Responsive

    Design
    Ethan Marcotte ( @beep )
    

    View Slide

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

    View Slide

25. View Slide

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

    View Slide

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

    View Slide

28. View Slide

29. View Slide

30. Fight for the user?
    

    View Slide

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..."
    

    View Slide

32. Adaptation
    

    View Slide

33. User Agent
    User Advocate
    User Agent
    

    View Slide

34. Configuration
    

    View Slide

35. Product + UI + UX
    =

    Imprintable
    Design
    #ImprintableDesign
    

    View Slide

36. Progressive Enhancement:
    developers & technology
    Instead, we need design focused
    primarily on each person
    #ImprintableDesign
    

    View Slide

37. Flawed: designing
    for consistency
    

    View Slide

38. Flawed:
    if the device can
    do it, the user
    wants it
    https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
    

    View Slide

39. Who's using your site?
    

    View Slide

40. Google Analytics
    

    View Slide

41. Statistics Marginalize People
    

    View Slide

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

    View Slide

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

    View Slide

44. Customer
    Customer
    User
    User
    Person
    

    View Slide

45. Flawed:

    browser knows
    best
    

    View Slide

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

    View Slide

47. Can we just ASK
    the person?
    

    View Slide

48. Pick Your

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

    View Slide

49. View Slide

50. Flawed: people always
    want the most powerful
    experience
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. Precedent
    

    View Slide

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

    View Slide

56. Person and
    Browser together
    

    View Slide

57. Fidelity

    Slider
    

    View Slide

58. "Request-Fidelity"
    Header
    

    View Slide

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

    View Slide

60. View Slide

61. Send or Skip
    WebGL, animations,
    fonts, retina images, etc
    Features / Components
    

    View Slide

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

    View Slide

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

    View Slide

64. First Steps?
    

    View Slide

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

    View Slide

66. Start building in
    options.
    Start exposing
    choices.
    

    View Slide

67. Objections?
    

    View Slide

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/
    

    View Slide

69. Progressive Enhancement
    is dead.

    

    Long live People Empathy
    and #ImprintableDesign.
    

    View Slide