Skip to content

.enhancement

Matthew Tangkilissan edited this page Jun 28, 2023 · 4 revisions

Progressive Enhancement

Wat is progressive enhancement?

Progressive enhancement (PE) is een manier van web ontwikkeling en designing waarbij er wordt gekeken naar manieren om de basisfuncties van een website toegankelijk te maken voor allerlei soorten gebruikers. Deze basisfuncties werken dan ongeacht van een gebruiker hun systeem, of technologische beperkingen. Tegelijkertijd werken deze functies ook voor gebruikers zonder beperkingen, maar is de ervaring beter doordat het systeem zonder beperkingen meer mogelijkheden heeft en dus de functie en presentatie geavanceerder kan maken.

Met elke stap die je maakt tijdens het ontwikkelen van je website voeg je een laag toe die voortbouwt op de laag eronder. Je begint met een solide basis waarop je je website bouwt. Dit is een semantisch correcte HTML pagina die er misschien niet mooi uitziet maar waarbij alle basisfuncties worden getoond en werken. Daarbovenop kan je dan weer een nieuwe laag maken bestaand uit CSS die de website vormgeeft. Vormgeven is ook mogelijk met alleen een HTML-bestand maar wordt over het algemeen vermeden door developers. Als laatst kan je ook nog een JavaScript laag toevoegen. Met JavaScript kan een website nog meer functionaliteit bieden aan gebruikers.

Gmail

Een voorbeeld van PE met alle lagen is Gmail. De webversie van Gmail ziet er prachtig uit met logo's, persoonlijke achtergrond en een georganiseerde indeling die gebruiksvriendelijk wordt gemaakt doormiddel van iconen.

Screenshot 2023-06-28 at 22 56 13

Maar als je de JavaScript uitzet krijg je dit te zien:

Screenshot 2023-06-28 at 22 57 33

Uiteindelijk wordt je dan naar deze pagina toegeleid:

Screenshot 2023-06-28 at 22 59 00

Een groot verschil dus MAAR alle functies werken naar behoren. Een gebruiker kan nog steeds hun emails lezen, schrijven, versturen, archiveren etc. De presentatie is niet even mooi als de versie met JavaScript maar de site is functioneel en werkt zoals bedoelt.

UvA

Op de website van UvA gaat het iets anders.

Screenshot 2023-06-29 at 00 33 05

Als je JavaScript uitzet krijgt een gebruiker bovenaan de pagina een melding te zien waarbij vermeld wordt dat de website beter functioneert als JavaScript aangezet staat. Dit brengt de gebruiker op de hoogte dat hun browser geen JavaScript support of dat iets JavaScript blokkeert.

Als je ook de CSS uitzet is de melding nog steeds zichtbaar en zijn alle pagina's nog steeds toegankelijk. Helaas heeft UvA hierbij geen rekening gehouden met de afbeeldingen en iconen op de site en worden deze buiten proportie gepositioneerd op de site.

Conclusie

  • Een goede site werkt met lagen
  • Het belangrijkste fundament is de HTML
  • Zorg dat de kern functies van de site werken zonder JavaScript en CSS
  • Laat gebruikers weten dat hun JavaScript niet werkt
  • Let op hoe afbeeldingen gepresenteerd worden zonder JavaScript en CSS
Clone this wiki locally