Developer workshop: Wat is Progressive Enhancement en hoe pas je het toe?

21 augustus 2017

Onze developers blijven zichzelf ontwikkelen. De workshop Progressive Enhancement is hier een goed voorbeeld van.

Afgelopen vrijdag (21-08) zijn drie van onze developers (Sander Both, Sander Bras en Wessel Kroos) naar de Workshop Progressive Enhancement van Wilfred Nas geweest. Een workshop georganiseerd door Fronteers, de vakvereniging voor front-end developers. De workshop was in Utrecht langs de Oude Gracht.

In een klein zaaltje kregen ze alle ins en outs van Progressive Enhancement gepresenteerd, de ochtend bestond uit een theoretisch stuk, gevolgd door een middag hands-on met praktijkvoorbeelden. Door de kleinschalige setting, 8 man/vrouw, was er ruimte voor voldoende praktijkcases die ze zelf in mochten brengen. 



Maar wat is nu Progressive Enhancement?
Progressive Enhancement om het internet maar even te quoten is:

‘Progressive enhancement is a strategy for web design that emphasizes core webpage content first. This strategy then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content as the end-user's browser/internet connection allow.’

Het komt er in grote lijnen op neer dat je er tijdens het opzetten en coderen van de front-end van een project vanuit gaat dat al je kern content blijft werken, altijd, in alle browsers. De vormgeving en specifieke additionele functies volgen later. Dit concept is gebaseerd op het Form-Follows-Function principe van Louis Sullivan, een architect en industrieel ontwerper, die met het idee kwam dat de presentatie voortvloeit uit het doel en functionaliteit van het project.

Je begint dus zo te coderen dat al je basis functionaliteit werkt in alle browsers (in standaard HTML), daarna voeg je styling toe (door middel van CSS), pas als laatste stap voeg je je third party content toe (zoals JavaScript frameworks). Door op deze manier je project op te zetten zorg je er voor dat je niet afhankelijk bent van features en ondersteuning van moderne browsers. Je tekst, je kern content, blijft altijd leesbaar. Als je browser het ondersteunt, wordt de CSS styling toegepast en komt het er qua opmaak wat mooier uit te zien. Pas als je JavaScript aan zet en de modernste browser hebt geïnstalleerd worden speciale effecten of andere additionele stilistische functionaliteiten toegevoegd.

In dit artikel wordt het concept wat verder uitgelegd:
https://alistapart.com/article/understandingprogressiveenhancement

PE Infographic


Waarom zou je Progressive Enhancement willen toevoegen?
De theorieën zijn natuurlijk erg interessant en je wil deze als developer graag direct toepassen nadat je ze gezien hebt in een workshop, maar hoe krijg je het verkocht, waarom zou je het willen toepassen, wat levert het de klant op?

Een van de belangrijkste redenen waarom je het zou willen gebruiken is het feit dat je content altijd bereikbaar blijft, je bent niet meer afhankelijk van browsers of ondersteuning van third party vendors.

Een technisch voorbeeld:  Stel je site bevat een carrousel met drie slides met drie producten die je verkoopt. Twee van de drie producten worden visueel uitgeschakeld en door middel van Javascript code wordt één voor één een product getoond.

Als deze functionaliteit zonder Progressive Enhancement gebouwd zou zijn dan krijgt een bezoeker die geen JavaScript aan heeft staan nooit de twee niet zichtbare producten te zien. Want het stuk functionaliteit dat er voor zorgt dat een product te zien is wordt niet ondersteund.

Indien deze functionaliteit wel progressive is opgezet dan zou je het volgende scenario kunnen hebben: Standaard zijn alle drie de producten in html code zichtbaar, met CSS zorg je dat de styling er beter uit komt te zien, als laatste pas je je Javascript toe om producten te verbergen en een voor een te tonen. Door je code op deze manier op te zetten voorkom je dus dat je bezoeker informatie mist als ze een oudere browser gebruiken of JavaScript niet aan hebben staan.

Vaak wordt er gedacht dat iedereen JavaScript aan heeft staan, maar dat is lang niet altijd het geval.
Onderstaande url geeft mooi weer wat er allemaal kan gebeuren wanneer een gebruiker geen JavaScript beschikbaar heeft;
https://kryogenix.org/code/browser/everyonehasjs.html

Een andere reden om op deze manier te coderen is dat je heel semantisch in HTML moet gaan coderen, je bent bezig met de site op te zetten in pure HTML code, code die door de zoekmachines begrepen wordt. Hoe beter je HTML gestructureerd is en hoe beter je de specifieke tags voor bijvoorbeeld een article, header, footer etc gebruikt, hoe beter je website wordt geïndexeerd. En hoe beter je website wordt geïndexeerd resulteert weer in betere vindbaarheid en uiteindelijk in betere exposure en leads.

Omdat je met Progressive Enhancement uit gaat van kleine schaalbare op te leveren elementen past het ook erg goed in het Agile denken en de Scrum methodiek. Je levert in eerste instantie de basis op, het minimal viable product, en gaat het daarna pas uitbreiden met styling en extra functionaliteit. Je kunt in een eerste sprint je kern, je HTML code, opleveren en in de volgende sprints je styling en scripts.

En hoe nu verder? Hoe pas je Progressive Enhancement toe?
Dit begint allemaal bij de basis, ga tijdens het coderen er van uit dat je alle browsers moet ondersteunen en niet codeert voor 1 browser. Test in alle browsers!

Maak gebruik van de mogelijkheden die nu al in HTML zitten, je hebt misschien meer code nodig en je moet het misschien wat verder doordenken, maar als je structuur in HTML al goed staat dan kan je er jaren mee vooruit.

Je moet goede browsers belonen en oude browsers helpen!

Mocht je naar aanleiding van dit schrijven nog vragen hebben of wat meer willen weten over Progressive Enhancement dan kun je altijd contact opnemen met onze developer Sander Bras; sander.bras@truelime.nl

Code on!

 

Fronteers logo