FOUC, and the Death of Progressive Enhancement

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

In the beginning...

First webpage (CERN) First web browser Early web browser

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

Change How We Build

<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

<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

Graceful Degradation

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

Progressive Enhancement

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

Web Performance

FOUC Flash of Uncolored Character Flash of Unstyled Content

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

FUBC Flash of Unbehaviored Content FUBC

First Paint WebPageTest.org

Reflows and restyles? Placeholders  and spinners?

Tolerate.

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

Mirror, Mirror, on the wall...

Responsive  Design Ethan Marcotte ( @beep )

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

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

Is "No JavaScript" a relevant use case today?

Fight for the user?

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 speciﬁers over theoretical purity..."

Adaptation

User Agent User Advocate User Agent

Conﬁguration

Product + UI + UX =  Imprintable Design #ImprintableDesign

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

Flawed: designing for consistency

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

Who's using your site?

Google Analytics

Statistics Marginalize People

Common Thread: we know better than any user does

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

Customer Customer User User Person

Flawed:  browser knows best

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

Can we just ASK the person?

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

Flawed: people always want the most powerful experience

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

How do we begin practicing People Empathy through Imprintable Design?

People must be given more control over their web experiences

Precedent

"Currencies" Speed Battery Level Cost (Bandwidth)

Person and Browser together

Fidelity  Slider

"Request-Fidelity" Header

Layers of technology Degrees of ﬁdelity Sites/Apps built in...

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

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

Browser (User Advocate) must veto server over resource responses

First Steps?

Should we wait on browsers to adopt? No.

Start building in options. Start exposing choices.

Objections?

"[N]o one has disproved the beneﬁts of Progressive Enhancement or
proposed a better technique." https://www.sitepoint.com/javascript-dependency- backlash-myth-busting-progressive-enhancement/

Progressive Enhancement is dead.    Long live People Empathy and
#ImprintableDesign.

FOUC, and the Death of Progressive Enhancement

FOUC, and the Death of Progressive Enhancement

More Decks by Kyle Simpson

Other Decks in Programming

Featured

Transcript