A refreshment / re-assertion of progressive enhancement principles, with some philosophy and anecdotal examples thrown in. Given at BelfastJS in 2016. I got a job.
Robustness User experience Accessibility PE is the art of starting with the basics and adding complexity on top. If the upper layers fail, the core layer will still work.
a user, I want to get to the next floor... A set of stairs, enhanced with motion. I can walk up the stairs even if there’s no motion. A metal box, enhanced with motion. If there’s no motion, I’m just standing in a box.
diagram slide Progressive enhancement goals: - Respond to the user ASAP - Improve perceived performance - Avoid white screen of death - Remain useful even under stress / error conditions - Improve reach / user base
an ‘app shell’ immediately before loading the JS app, so the user isn’t staring at a white screen while waiting for the rest of the experience to arrive.
JS could fail to load and/or execute for many reasons. It’s not safe to assume that users will receive the JavaScript even if they have it turned on. <noscript> != <crap-connection> <js-error> <cdn-failure> <firewall>
meaningful from the server wherever possible, without relying on the JS app to display initial content. E.g. a weather app could render the current weather for the day based on the user’s IP address, and enhance with geolocation once the JS has loaded. You may not be able to replicate full functionality on the server, and in many cases you shouldn’t try, but think of what core information you could display on first render and try to send it with the initial HTML payload.
diagram slide If you *must* have a scroll-to-section feature in your app, make sure you set it up with basic #anchor links first! If the JS fails, the browser will still be able to jump to the anchor directly. Core functionality: ‘take me to the content’. Enhanced functionality: ‘Smooth scroll to the content’.
diagram slide If you have a dropdown nav which relies on JS, have the nav visible by default, and close it once the JS loads. Otherwise, if the JS fails, you’ll have an invisible navigation and no way to open it.
accordions are just a collapsed list of <div>s with some styling and logic applied. If the JS fails, the content is still present and readable. Use #anchor tags to preserve the basic functionality of the tabs/pagination. 1 2 3 1 | 2 | 3 1 2 3 1 | 2 | 3 1 | 2 | 3 1
diagram slide Progressive enhancement goals: - Respond to the user ASAP - Improve perceived performance - Avoid white screen of death - Remain useful even under stress / error conditions - Improve reach / user base
enhancement What is your critical content / feature? Easy wins for performance and legacy support Put the user’s needs first Make the mobile web a friendlier place
njmcode
hidekatsu_izuno
ivargrimstad
kj455
kasacchiful
palkan
fsubal
syukai
.png){kind=avatar}
elith
hanhan1978
h455h1
ogurotakayuki
sstephenson
ufuk
lauravandoore
mojombo
philhawksworth
bcantrill
kneath
jennybc
pedronauck
zakiwarfel
shlominoach
