$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
PRO

September 13, 2019
Tweet

More Decks by Kyle Simpson

Other Decks in Programming

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