Skip to content

Progressive Enhancement

Thimo edited this page Feb 17, 2023 · 1 revision

Progressive Enhancement

Wat is Progressive Enhancement (PE)?

Het principe van Progressive Enhancement is het starten met een sterke basis waarna er verbeteringen toegevoegd kunnen worden waarvan je weet dat gebruikers hier goed gebruik van kunnen maken. Het zorgt ervoor dat je eigenlijk wordt gedwongen om een werkende applicatie te maken met alleen de basis van web technologie waarna je deze ervaring verbeterd door bijvoorbeeld CSS (styles) en javascript toe te passen wat meer mogelijkheden opent en de ervaring beter kan maken en kan uitbreiden voor gebruikers die her belang bij hebben.

Het kan ook helpen om incompatibiliteit in browsers tegen te gaan omdat niet elke browser dezelfde kracht heeft en dus niet elke browser alle extra toevoegingen kan laten zien, daarom is een sterke basis ook nodig om dit op zoveel mogelijk verschillende browsers goed te laten werken.

De afbeelding hieronder laat zien dat er bij progressive enhancement een werkend middel bestaat zodat de gebruiker kan bereiken wat hij/zij wil en het middel gaande weg steeds beter/sneller wordt. voorbeeld-PE

Keuze progressive enhancement

Het component dat ik wil gaan gebruiken voor een progressive enhancement is een formulier. Omdat de gebruiker de voorkeuren kan invullen voor een festival is het handig dat dit ook werkt wanneer Javascript of CSS is uitgeschakeld zodat de gebruiker alsnog kan zoeken naar festivals en andere gebruikers. Onderstaande afbeelding laat het formulier zien van het inloggen en registreren pagina van bol.com. bolcomformulier

In dit formulier kun je inloggen waarbij je na het invullen van je gegevens en het klikken op de inloggen knop wordt ingelogd op de website zonder dat hier Javascript of CSS aan te pas komt. De afbeelding hieronder laat dat zien. bolcominloggen

Dit wil ik ook gaan toepassen in de applicatie zodat de voorkeuren kunnen worden ingevuld en hier ook op te zoeken is of op te slaan in het account met puur en alleen de html. Daarna wil ik nog error handling toepassen met CSS en Javascript zodat er direct kan worden gekeken of het email-adres bijvoorbeeld geen @ bevat. Met Javascript en CSS kan het ook mooier gemaakt worden en kan er bijvoorbeeld autocomplete worden toegepast.

Ik weet nog niet welke web API ik zou kunnen gebruiken om de ervaring voor de gebruiker te kunnen verbeteren, daar zal ik later nog onderzoek naar doen.

Bronnen