Progressive Enhancement - YunusEmreCMD/blokTech GitHub Wiki
Progressive enhancement (PE) kent vele benamingen, sommige noemen het een krachtige methodologie of techniek, anderen noemen het een ontwerpfilosofie en weer anderen noemen het een strategie. Maar het komt allemaal op hetzelfde neer, bij progressive enhancement wordt binnen een webpagina eerst de nadruk gelegd op de web content. De content/inhoud wordt in eerste instantie beschikbaar gesteld voor alle soorten gebruikers en alle soorten browsers, iedereen heeft toegang tot de basisinhoud en functionaliteit van een webpagina. Gebruikers die een geavanceerdere browser hebben of betere internetverbinding krijgen een betere gebruikservaring. Waarom dit zo is leg ik in dit stuk uit, ik kan begrijpen dat het nog een beetje vaag klinkt, maar alles wordt duidelijk.
Toegankelijkheid
Het is belangrijk om websites voor iedereen toegankelijk te maken, het is belangrijker dat het werkt voor iedereen, dan dat een aantal gebruikers een super ervaring krijgen, omdat ze een betere browser hebben. Er moet een fall-back zijn, wanneer gebruikers geen grote bandbreedte hebben of geavanceerde browser moeten ze ook goed gebruik kunnen maken van de website en eigenlijk niet in de gaten hebben dat ze iets missen of mis zijn gelopen.
Bij progressive enhancement wordt daarom van een website of webapplicatie eerst een basisversie ontwikkeld die volledig werkt voor bezoekers met verouderde browsers, functiebeperkingen, gebruikers die surfen terwijl ze bepaalde technieken zoals JavaScript hebben uitgeschakeld, afwijkende apparaten en schermresoluties hebben of te maken hebben met een trage verbinding.
Gebruikers die hier in tegen wel een beter presenterend apparaat gebruiken (wat kan komen door de internetsnelheid of door een geavanceerde browser) krijgen een betere gebruikservaring met de website, de gebruiks-interface wordt verrijkt. Op de al bestaande basislaag komt als het ware een extra laag met functionaliteiten of opmaak (Dit komt omdat alle vereiste code hiervoor uitgevoerd kan worden.)
Kern principes
De progressieve verbeteringsstrategie bestaat uit de volgende kernprincipes: [3]
- Basisinhoud moet toegankelijk zijn voor alle webbrowsers.
- De basisfunctionaliteit moet toegankelijk zijn voor alle webbrowsers.
- Dunne, semantische opmaak bevat alle inhoud.
- Verbeterde lay-out wordt geleverd door extern gekoppelde CSS.
- Verbeterd gedrag wordt geleverd door onopvallend , extern gekoppeld JavaScript.
- De voorkeuren van de webbrowser van de eindgebruiker worden gerespecteerd.
De 3 fases
Inhoudslaag - HTML
Dit is de laag die zich richt op de kerninhoud van de webpagina door middel van rijke semantische HTML-markeringen. Rijke Semantic HTML-markup-tags zorgen voor een goed gestructureerde inhoud die de vereiste betekenis en idee aan de eindgebruiker overbrengt.
Presentatie laag - CSS
Met de evolutie van HTML5 met Semantic HTML-markup, heeft de website-styling ook een evolutie gezien ten opzichte van CSS3. HTML5 en CSS3 gaan heel goed samen, waardoor de webpagina aantrekkelijker wordt met kleuren, afbeeldingen, achtergronden, verlopen, schaduwen, teksteffecten en heel veel elementen om de algehele gebruikerservaring te verbeteren.
Functionaliteiten - JavaScript
Deze laag verzamelt de bovenstaande lagen samen om een strategisch slimme webpagina op te bouwen. Het richt zich meer op de prestaties van het webontwerp, met behulp van onopvallend JavaScript of jQuery.
JavaScript maakt de robuustheid van de functies mogelijk door ze als afzonderlijke modules te behouden. Hierdoor kunnen de functies onafhankelijk beschikbaar zijn, ondanks dat een paar scripts niet succesvol konden worden uitgevoerd vanwege compatibiliteitsproblemen met de browser.
Dit is een leuke gifje en plaatje die dit visualiseert
Optimalisatie
Je wilt niet dat gebruikers die een oude browser gebruiken of geen goede internetverbinding last krijgen van een niet werkende website of applicatie, ze moeten niet het gevoel krijgen dat ze wat missen. Het is wel jammer dat sommige gebruikers deze extra features niet kunnen zien, maar het heeft ook een voordeel. Het ontwikkelen van een basisversie zonder toeters en bellen, die optioneel wordt verrijkt, komt ten goede aan de toegankelijkheid en de gebruiksvriendelijkheid van een website. Doordat deze basisversie is gebaseerd op ‘gewone’ HTML zijn websites die uitgaan van progressive enhancement doorgaans ook beter geoptimaliseerd voor zoekmachines.
Bronnen
Wikipedia contributors. (2021, 8 februari). Progressive enhancement. Geraadpleegd op 9 maart 2021, van https://en.wikipedia.org/wiki/Progressive_enhancement
Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms | MDN. (2020, 15 september). Geraadpleegd op 9 maart 2021, van https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement
freeCodeCamp.org. (2018, 7 november). What is Progressive Enhancement, and why it matters. Geraadpleegd op 9 maart 2021, van https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/
Online Marketing Agency. (2020, 1 september). Wat is Progressive enhancement? Geraadpleegd op 9 maart 2021, van https://onlinemarketingagency.nl/marketingtermen/progressive-enhancement/
Illustraties
Gustafson, A. (2008). 3 fases progressive Enhancement geïllustreerd a.d.h.v. een man [Illustratie]. Geraadpleegd van https://alistapart.com/wp-content/uploads/2012/07/progenh.jpg?w=540
Korolyov, A. (z.d.). Progressive Enhancement Devices [Illustratie]. Geraadpleegd van https://www.mavenecommerce.com/2017/10/31/progressive-enhancement-vs-graceful-degradation/