Progressive Enhancement (PE)

PE is een strategie voor webdesign met de nadruk op de inhoudt waaruit de website gebouwd is. Door het toepassen van dit principe ga je in de verschillende lagen (technische kant, HTML, CSS, JS) verbeteringen aanbrengen, die ervoor zorgt voor betere toegankelijkheid van website, instabiele internetverbinding of browser. Maar ook betere versie aanbieden aan mensen die een geavanceerdere browser of grotere bandbreedte hebben. (wikipedia,2021; Praveen Dubey, 2018)

PE-strategie bestaat uit:

• De basisinhoud moet toegankelijk zijn voor alle webbrowsers.
• De basisfunctionaliteit moet toegankelijk zijn voor alle webbrowsers.
• Kort, HTML-semantisch correct content.
• Verbeterde lay-out, wordt verzorgd door extern gekoppelde CSS.
• Verbeterd gedrag wordt geleverd door JavaScript (onopvallend).

PE kan op twee niveaus toegepast worden:

• website niveau: en basiservaring voor alle browsers met HTML, eenvoudige CSS en zonder JavaScript.
• Component niveau: In plaats van het bouwen van complete webpagina’s ontwikkel je een systeem van componenten. Ook op dit niveau begin je met toegankelijke en semantische HTML. Daaropvolgend ga je CSS en JS enhancement toepassen, die ervoor zorgt dat features goed ondersteunt worden in de browser.(Sanne Veroude, 2015)

PE voorbeeld:

• Font style Het kan voorkomen dat je browser door falende internetverbinding, geen font style kan downloaden. Waardoor bepaalde content misschien niet zichtbaar worden voor de gebruiker. Dit wil je natuurlijk voorkomen en zo snel mogelijk content beschikbaar stellen. Een font request zou geen single point of failure moeten zijn. Hier gaan browser op verschillende manieren mee om. Sommige browser hebben een timeout voor @font-face. Als het font na deze timeout nog niet is geladen, wordt het fallback font (een alternatief font style, ook wanneer het lang duurt met downloaden of als het mislukt) weergegeven. Browser zonder timeout, verbergen de fallback tekst en de gebruiker ziet vervolgens niets (Sanne Veroude, 2015).

• Responsive Er is slechts één website, waarvan de layout zich aanpast aan de resolutie van het beeldscherm. Hierdoor kunnen gebruikers op desktop, tablet of smartphone de website gaan bezoeken.

Bronnen

Praveen Dubey (2018, 26 november). What is Progressive Enhancement, and why it matters. Geraadpleegd van, https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/

Sanne Veroude (2015, 18 mei). Ontwikkelen met progressive enhancement. Geraadpleegd van, https://fronteers.nl/blog/2015/05/ontwikkelen-met-progressive-enhancement

Wikipedia (2021, 8 februari). Progressive Enhancement. Geraadpleegd van, https://en.wikipedia.org/wiki/Progressive_enhancement