GoodBytes Blog
Inspiratie en tips voor webdesigners & webontwikkelaars
Volg artikels via de RSS feed
Progressive Enhancement versus Graceful Degradation
Geschreven door goodbytes op 28 mei 2009 9 reacties
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:
<h1>Titel van niveau 1</h1>
en nooit binnen een div als volgt:
<div class="title">Is dit een titel?</div>
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.
<h2>
<a href="#" title="Meer informatie voor particulieren" class="subsidies1link"
onclick="return(false);">1. Subsidies voor particulieren</a>
</h2>
<div class="subsidies1">
Hier komt alle content.
</div>
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!
Over Joris Hens
Dit blog wordt onderhouden door Joris Hens, freelance webontwikkelaar en docent webtechnologie aan de Katholieke Hogeschool Mechelen. Met dit blog wil hij inspiratie en informatie delen over all-things web design. Volg Joris en GoodBytes op Twitter en op Facebook.
9 commentaren geserveerd
Een suggestie:
in je header met of zonder javascript een class “js” toevoegen aan het html-element. Op die manier kan je vanuit je css, die ja na dat lijntje javascript oproept, alles afhandelen en hoeft: $(".subsidies1").hide();
niet meer.
In CSS wordt dit dan ongeveer:
.js .subsidies1{display:block;}
.subsidies1{display:none;}
Hopelijk ben je hier iets mee ;-)
Hey Jonas, bedankt voor de tip! Dat is inderdaad ook een mogelijkheid.
Wel het is niet enkel een alternatief maar verhelpt het soms “verspringen” of “flashen” van content wanneer de javascript nog moet inladen om je element onzichtbaar te zetten. ;-)
Jonas, de enige manier om dan die content zichtbaar te krijgen is door javascript uit te voeren en die .js klasse te koppelen aan het element. Gebruikers zonder javascript zien niets en kunnen de content ook niet te voorschijn toveren, wat erg onwenselijk gedrag is. Daarom gebruik ik die methode liever niet. Nadeel is inderdaad soms het minieme “flashen” van content, maar dat weegt niet op tegen het feit dat de website volledig bruikbaar blijft voor iedereen.
display:none gebruik ik persoonlijk nooit, javascript uitzetten en je ziet niks, zoals Joris al aangaf.
De gouden regel is: wat je toont met js, verberg je eerst met js. Op die manier ziet iedereen altijd de content
Ik denk dat jullie mij verkeerd begrijpen, ik gebruik deze methode om voorbeeld een meer-knop weg te kunnen laten van de site en in plaats van alles “ingeklapt” te tonen, alles via CSS op “open” zetten. Je kan ook de hoogte van je DIV of dergelijke aanpassen met deze techniek hé ;-) Ik gaf maar een klein voorbeeldje wat de voordelen hiervan zijn. Ik kom persoonlijk liever op een website zonder dat ik de content plots zie verdwijnen… Het zal de gebruiker enkel maar verwarren…
hey Jonas, het artikel gaat net over progressive enhancement en het laten werken van je website voor zoveel mogelijk gebruikers. Met jouw methode ga je juist je website onbruikbaar maken voor mensen zonder javascript, wat volledig haaks staat op het nut van progressive enhancement… Ik denk dat we verder allemaal de voordelen van CSS wel kennen ;)
Toch denk ik nog steeds dat jullie mij verkeerd begrijpen… :) Een niet-javascript gebruiker zal nog steeds tot alles toegang hebben en niet merkens van de niet-toegankelijke javascriptfuncties… Ik denk aan een lees meer en een slideToggle… Zonder javascript is er geen lees meer en toggle, maar staat alles van de eerste keer op de gebruiker zijn scherm…
De display:none wordt gebruikt bij javascript gebruikers ipv $(elem).hide();
Zie hier: http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content Hopelijk begrijp je dan beter waar ik naartoe wil… :-)
Die link maakt het inderdaad duidelijk. Een goede oplossing om eenvoudige stukjes content niet te laten flashen. Bedankt voor de tip!