Progressive Enhancement - Txai-HvA/BlokTech GitHub Wiki

Progressive Enhancement is een ontwikkelings benadering (Tse, 2017) die er voor zorgt dat websites die moderne technologieën gebruiken altijd werken, ongeacht of de browser de functies van de moderne technologieën ondersteund (Online Marketing Agency, 2020).

Lagen van Progressive Enhancement

Een goeie analogie om Progressive Enhancement te beschrijven is een taart.

Taart analogie voor progressive enhancement

Om een taart te maken, moet je beginnen met een basis en structuur. Het betekent dat je een HTML-applicatie bouwt waarbij alle belangrijke processen aan de serverzijde worden weergegeven. Jouw applicatie zou moeten werken in elke browser of elk mobiel apparaat, zonder daarbij gebruik te hoefen maken van stylesheets of JavaScripts (Tse, 2017).

Een taart heeft natuurlijk ook glazuur nodig. Dat is de volgende laag van progressive enhancement: CSS (Tse, 2017).

Tenslotte hebben we de toppings en accessoires. Kaarsen kunnen de functie van een taart veranderen, van een eenvoudig toetje tot een verjaardagstaart. Wat ons naar de volgende stap leidt, het verbeteren van de functionaliteit van onze site of app met JavaScript (Tse, 2017).

Voordelen van Progressive Enhancement

Volgens het Progressive Enhancement principe horen informatie en basisfunctionaliteiten van websites te werken in alle browsers en mobiele apparaten, zonder dat stylesheets of JavaScripts daarbij nodig zijn. Voor verbetering van de layout en werking mag er wel gebruik gemaakt worden van stylesheets en JavaScripts.

Daarnaast wordt de hoeveelheid broncode beperkt gehouden. Het gebruik van de Progressive Enhancement zorgt er ook voor dat je website toegankelijker en de gebruiksvriendelijker wordt (Online Marketing Agency, 2020). Dit komt doordat websites semantisch zijn opgesteld, waardoor screen readers beter door die websites heen gaan (Tse, 2017).

Verder kunnen zoekmachines deze websites beter vinden, omdat de basisversie gebaseerd is op HTML en deze dus beter zijn geoptimaliseerd voor zoekmachines (Online Marketing Agency, 2020).

Progressive Enhancement in mijn app

HTML

HTML Screenshots

CSS

CSS Screenshots

JS

JS Screenshots

Bronnen: