Progressive enhancement en graceful degradation zijn technieken die sinds de opkomst van AJAX weer stevig naar de voorgrond zijn getreden. Beide technieken worden gebruikt om - binnen ons beroepenveld althans - een website of webapplicatie toegankelijk en bruikbaar te maken voor eender welke bezoeker (hello Google), terwijl ze krachtigere bezoekers (denk aan recentere browsers) de mogelijkheid bieden om de website of applicatie mooier en vlotter te laten gebruiken. Beide technieken lijken sterk op elkaar, enkel de invalshoek verschilt. Volgt u even mee?

Graceful Degradation

Graceful degradation is de oudste van de twee termen. Bij deze aanpak wordt een applicatie of website gebouwd voor de laatste en beste browsers. Pas als die functionaliteit helemaal voorzien is en in volle glorie werkt in de allernieuwste browsers, wordt meestal op het einde van het project nog support ingebouwd voor oudere browsers of toestellen met minder mogelijkheden.

Hier wringt het schoentje, want vaak komt de deadline aan het einde van een project gevaarlijk dichterbij en ontbreekt het aan veel zin om nog support in te bouwen voor oudere browsers of hardware. Sommige ontwikkelaars beweren dan ook vaak "dat het toch allemaal perfect werkt op de latest & greatest, wat toch voldoende is nietwaar?". Not really.

Progressive Enhancement

Bij progressive enhancement begint men net omgekeerd. Eerst wordt gezorgd dat de meest basic versie van de website perfect werkt, bijvoorbeeld door simpele en semantische xHTML-code te schrijven. Semantische of betekenisvolle xHTML-code zorgt ervoor dat het duidelijk is wat bepaalde tags willen zeggen. Een titel van een artikel zal je bijvoorbeeld steeds tussen een header-tag plaatsen:

Titel van niveau 1

en nooit binnen een div als volgt:

Die laatste heeft voor een browser namelijk helemaal geen betekenis en al zeker voor Google niet. Helaas zien we nog al te vaak mensen zondigen tegen dit principe. Zodra de meest basic versie van de website klaar is, kan deze stapsgewijs verbeterd worden voor bezoekers met meer mogelijkheden: enter progressive enhancement. Denk hier aan het toevoegen van een externe stylesheet om de website netjes op te maken.

Een text-only browser (ja, die bestaan nog) heeft geen CSS-ondersteuning, maar zal toch nog steeds een perfect werkende xHTML-versie van uw site te zien krijgen. Tot zover is deze uitleg nog erg basic en misschien vanzelfsprekend, maar denk verder aan het toevoegen van Javascript om de website gebruiksvriendelijker of aantrekkelijker in gebruik te maken. Javascript wordt door het merendeel van uw bezoekers ondersteund en kan dus gebruikt worden om een website rijker en interactiever te maken.

Er is echter één erg belangrijke bezoeker die niet met Javascript overweg kan en die we zeker niet mogen negeren. Die bezoeker is Google. We zullen er dus voor moeten zorgen dat we een zo rijk mogelijke interface voorzien - vaak door Javascript te gebruiken - die toch steeds bruikbaar blijft voor mensen zonder Javascript.

Een praktisch voorbeeld

Voor één van onze klanten - Nenco, een firma die totaalprojecten in zonnestroom en zonnewarmte ontwerpt - hebben we webpagina's ontworpen die goed in Google scoren. Goede content gecombineerd met onze expertise in zoekmachineoptimalisatie zorgt voor een hoge ranking in Google. Sommige pagina's waren echter te lang om in één keer op het schem te tonen. Echter, we wilden deze content niet verspreiden over meerdere pagina's omdat dit niet meteen voordelig zou zijn voor onze opgebouwde Google ranking.

We hebben er dan voor gekozen om de pagina leesbaar te maken voor alle browsers en bezoekers, ook die zonder Javascript (Google!). Daarna hebben we de pagina's in kwestie opgewaardeerd met jQuery, om bepaalde content te verbergen en via een subtiele animatie te voorschijn te toveren wanneer een gebruiker daarom vraagt. Gevolg: wanneer een bezoekers zonder javascriptondersteuning de pagina bezoekt - en hier denken we vooral aan Google - dan willen we dat alle content gelezen kan worden en dat de website volledig bruikbaar is. Beschikt een bezoeker echter wel over Javascript, dan kunnen we de pagina gebruiksvriendelijker maken door de pagina in te korten en alle content pas zichtbaar te maken wanneer een gebruiker daar expliciet om vraagt. Het resultaat kan bekeken worden op de website van onze klant. Wanneer Javascript is ingeschakeld - en enkel dan - worden de details van de subsidies verborgen tot iemand klikt op de subsidies die bij hem of haar passen, bijvoorbeeld "subsidies voor particulieren". Staat Javascript uitgeschakeld, dan is alle informatie in één keer perfect zichtbaar voor die bezoekers en belangrijker nog: voor Google.

Progressive enhancement met jQuery en CSS

Wanneer je bepaalde content gaat verbergen voor je gebruikers is het steeds belangrijk om je zwakste gebruikersgroep in het achterhoofd te houden, namelijk de personen of bezoekers zonder Javascript. Google kan of wil geen Javascript code interpreteren en het zou jammer zijn dat je pagina's niet deftig geïndexeerd worden in de zoekmachine door een foute uitwerking van je webpagina. Denk daarom even na over het volgende: als je een stuk content, in ons voorbeeld de details van de subsidies, zou verbergen via CSS (display:none;), kunnen gebruikers die geen Javascript hebben deze details dan nog zien?

Het antwoord is natuurlijk volmondig NEEN. Wat je via CSS verbergt heeft niets te maken met de javascriptcapaciteiten van een bezoeker. Ze krijgen simpelweg de subsidiedetails niet te zien, en dat is niet de bedoeling. Wanneer je bepaalde inhoud via een Javascript effect te voorschijn wil laten komen, zorg er dan ook voor dat je deze specifieke content verbergt met - u raadt het al - Javascript. Hieronder staat de ingekorte xHTML-code van de subsidies die we gaan verbergen en animeren.

1. Subsidies voor particulieren

Deze code ziet er op onze pagina uit zoals op onderstaande schermafdruk. Let op, de div met klasse "subsidies1" is verborgen via Javascript, zoals je hieronder kan lezen. De jQuery code nodig om de elementen te verbergen kan je hier vinden op de eerste regel. Kort geschreven staat hier voor mensen met javascriptondersteuning: "verberg alle elementen met klasse .subsidies1". De volgende regels zorgen ervoor dat wanneer er geklikt wordt op een link met klasse subsidies1link (zie de xHTML code hiervoor), dat eender welk element met klasse subsidies1 te voorschijn zal komen via een slide-effect. In onze pagina werken we met een zelfgeschreven fadeToggle functie, maar dit voorbeeld toont op eenvoudige wijze de werking van jQuery in onze progressively enhanced pagina aan.

$(".subsidies1").hide();

$("a.subsidies1link").click(function () { 
    $('.subsidies1').slideToggle('normal');
});

Conclusie

Kort gezegd kunnen we concluderen dat we via progressive enhancement gaan zorgen voor een perfect werkende website voor de meest basic browsers en bezoekers. Zodra die pagina's werken gaan we ze uitbreiden met bijvoorbeeld Javascript om ze interactiever en gebruiksvriendelijker te maken, zonder dat daarbij problemen kunnen opduiken wanneer Javascript is uitgeschakeld. Zorg daarbij dat alle pagina's steeds perfect leesbaar en toegankelijk zijn, ook zonder Javascript. Dit laatste test je het makkelijkst door de NoScript plugin te installeren voor Firefox. Hiermee kan je met een enkele muisklik Javascript blokkeren of inschakelen voor een bepaalde website om te testen of alles naar behoren blijft werken. Dat was het voor deze keer. Als er specifieke vragen zijn bij dit topic, laat dan een commentaar achter hieronder. Happy coding everyone!