FOUC
Flash of Uncolored Character
Flash of Unstyled Content
Slide 14
Slide 14 text
FOIT
FOUT
https://font-display.glitch.me/
Slide 15
Slide 15 text
FUBC
Flash of Unbehaviored
Content
FUBC
Slide 16
Slide 16 text
First Paint
WebPageTest.org
Slide 17
Slide 17 text
Like?
Slide 18
Slide 18 text
Reflows and
restyles?
Placeholders
and spinners?
Slide 19
Slide 19 text
Tolerate.
Slide 20
Slide 20 text
The Great Lie:
Technology-layered delivery
(HTML -> CSS -> JS) is
"morally" superior
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Mirror, Mirror, on the wall...
Slide 23
Slide 23 text
Responsive
Design
Ethan Marcotte ( @beep )
Slide 24
Slide 24 text
Divide in the Web
Community
https://css-tricks.com/the-great-divide/
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
"Progressive Enhancement
is Dead"
--Tom Dale
https://tomdale.net/2013/09/progressive-enhancement-is-dead/
Slide 27
Slide 27 text
Is "No JavaScript" a
relevant use case
today?
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Fight for the user?
Slide 31
Slide 31 text
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..."
Progressive Enhancement:
developers & technology
Instead, we need design focused
primarily on each person
#ImprintableDesign
Slide 37
Slide 37 text
Flawed: designing
for consistency
Slide 38
Slide 38 text
Flawed:
if the device can
do it, the user
wants it
https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
Slide 39
Slide 39 text
Who's using your site?
Slide 40
Slide 40 text
Google Analytics
Slide 41
Slide 41 text
Statistics Marginalize People
Slide 42
Slide 42 text
Common Thread:
we know better
than any user does
Slide 43
Slide 43 text
E12Y
higher bar:
Empower People
(empowerability)
#ImprintableDesign #E12Y
Slide 44
Slide 44 text
Customer
Customer
User
User
Person
Slide 45
Slide 45 text
Flawed:
browser knows
best
Slide 46
Slide 46 text
Power unlimited?
Data unlimited?
Hands usable?
Lighting conditions?
CPU/Memory available?
Slide 47
Slide 47 text
Can we just ASK
the person?
Slide 48
Slide 48 text
Pick Your
Font Size
https://www.w3.org/TR/WCAG20-TECHS/G178.html
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Flawed: people always
want the most powerful
experience
Slide 51
Slide 51 text
Need a new term:
Progressive Enhancement
Progressive Experience
Personalized Experience
People Empathy
Slide 52
Slide 52 text
How do we begin practicing
People Empathy through
Imprintable Design?
Slide 53
Slide 53 text
People must be given
more control over
their web experiences
Slide 54
Slide 54 text
Precedent
Slide 55
Slide 55 text
"Currencies"
Speed
Battery Level
Cost (Bandwidth)
Slide 56
Slide 56 text
Person and
Browser together
Slide 57
Slide 57 text
Fidelity
Slider
Slide 58
Slide 58 text
"Request-Fidelity"
Header
Slide 59
Slide 59 text
Layers of technology
Degrees of fidelity
Sites/Apps built in...
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Send or Skip
WebGL, animations,
fonts, retina images, etc
Features / Components
Slide 62
Slide 62 text
Alter Behavior
Batching requests
Switching on/off SPA
Treat like offline app
Slide 63
Slide 63 text
Browser (User Advocate)
must veto server over
resource responses
Slide 64
Slide 64 text
First Steps?
Slide 65
Slide 65 text
Should we wait on
browsers to adopt?
No.
Slide 66
Slide 66 text
Start building in
options.
Start exposing
choices.
Slide 67
Slide 67 text
Objections?
Slide 68
Slide 68 text
"[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/
Slide 69
Slide 69 text
Progressive Enhancement
is dead.
Long live People Empathy
and #ImprintableDesign.