Progressive enhancement laat oude browsers uitsterven | Intracto

11 februari 2013

Progressive enhancement laat oude browsers uitsterven

Wie mijn vorige blogartikel ’10 Bronnen voor de professionele front-end developer’ gelezen heeft, weet dat ik ‘browsercompatibiliteit’ als een belangrijk element voor front-end development beschouw. Misschien zelfs wel hét belangrijkste! Deze keer tackle ik de gevaren van ‘oudere’ browsers en hoe we die 'bestrijden' in de front-end fase.

Websites maken is geen kinderspel

Sommige mensen denken dat een website ontwikkelen kinderspel is. Integendeel, het is niet zo simpel als je denkt. Eenmaal een design is gemaakt, moet het design omgezet worden in HTML en CSS. HTML-code zijn de ‘bouwstenen’ en met behulp van CSS kan je deze bouwstenen opmaken en positioneren. Met de opkomst van CSS3 is het zelfs mogelijk om coole effecten en animaties mee te geven.

Dat is nog geen rocket science. Maar wat de meeste mensen echter niét weten is dat niet elke browser de laatste webtechnologieën ondersteunt. En door voor elke uitzondering een oplossing te voorzien, wordt het wél snel complex.

Browsers. Chrome leidt het pak en Internet Explorer is ‘evil’

De vijf bekendste en meest gebruikte browsers zijn Internet Explorer, Firefox, Chrome, Safari en Opera.

blog-progressive_enhancement_laat_oude_browsers_uitserven-image2

Daarvan is Internet Explorer de grootste boeman voor iedere front-end developer en zelfs voor gewone developers. Maar waarom eigenlijk? Wel, om verschillende redenen eigenlijk. Internet Explorer ....

  •  
  • ... heeft het grootste marktaandeel van alle browsers – 55.14% (Bron: Marketshare)
  • ... wordt nog gebruikt in verschillende versies (IE6, IE7, IE8, IE9, IE10)
  • ... elke versie heeft zijn eigen problemen en interpretatie van code.
    .

Als we de grafiek bekijken op HTML5test.com zien we dat Internet Explorer sinds geruime tijd een eind achter ligt op de andere browsers qua (nieuwe) webtechnologie. Met de komst van IE10 in 2012 heeft Microsoft een inhaalbeweging gemaakt, maar jammer genoeg nog niet voldoende.

 

blog-progressive_enhancement_laat_oude_browsers_uitserven-image3

Moet elke website er overal hetzelfde uitzien? Antwoord

Vroeger moest een website er in elke browser identiek hetzelfde uitzien, maar de websector is hier meer en meer van aan het afstappen. Nieuwe technologieën maken website-ontwikkeling makkelijker en bieden gebruikers een betere surfervaring aan. Achterop hinkende browsers zijn daarbij een blok aan het been.

Om een voorbeeld te geven. Een knop die in het verleden ronde hoeken had, moest dit over alle browsers hebben. Om dit te bekomen, maakten we gebruik van afbeeldingen om de ronde hoeken vorm te geven. Dit kostte extra werktijd voor front-end developers en extra laadtijd voor de browsers. Dankzij CSS3 is het nu mogelijk om die afbeeldingen achterwege te laten. Het enige nadeel is dat niet alle browsers dit technisch ondersteunen, waardoor die oplossing niet altijd werkt.

Graceful degradation mikt in de eerste plaats op de nieuwste technologie

Om dit technische probleem te omzeilen zijn er in de front-end wereld twee werkmethodes: ‘graceful degradation’ en ‘progressive enhancement’.

Bij graceful degradation gaan we aan de slag met de idee dat we een website bouwen voor browsers die de laatste nieuwe technologieën ondersteunen. Voor verouderde browsers creëren we een elegante fall back oplossing of brengen we de bezoeker op de hoogte dat een bepaalde functionaliteit niet werkt.

Een voorbeeld. De meest gekende toepassing van graceful degradation is het gebruik van mediaqueries bij responsive websites. Internet Explorer-versies pre IE9 ondersteunen namelijk geen mediaqueries. Om ervoor te zorgen dat verouderde browsers dit toch nog kunnen verwerken, moeten we gebruik maken van een alternatieve JavaScript fallback, die enkel in werking treedt als mediaqueries niet ondersteund worden.

Progressive enhancement keert het plaatje om

Bij progressive enhancement gaan we anders te werk of beter gezegd omgekeerd. We gebruiken enkel basis bouwstenen die werken in elke browser en voegen dan extra zaken toe. Progressive enhancement bestaat in feite uit 3 lagen:

blog-progressive_enhancement_laat_oude_browsers_uitserven-image4

Hier bouwen we eerst een perfect werkende basic website (HTML), zonder extra toeters of bellen. Daarna voegen we oa. CSS en JavaScript toe om een rijkere webervaring te creëren voor de nieuwere browsers. Zo moeten er bijna nooit fallback oplossingen bijgebouwd worden.

Enkele voorbeelden:

Basis opmaak:

blog-progressive_enhancement_laat_oude_browsers_uitserven-image6
blog-progressive_enhancement_laat_oude_browsers_uitserven-image1

Geavanceerde opmaak:

blog-progressive_enhancement_laat_oude_browsers_uitserven-image5
blog-progressive_enhancement_laat_oude_browsers_uitserven-image7

Bij het menu voorbeeldje zijn wij gestart vanuit een basis menu. Vervolgens maakten we gebruik van CSS3-pseudo-klasse :nth-child(n), zodat we aan elk menu-element een ander kleur konden meegeven.

Bij het tweede voorbeeld zie je een algemene knop die vervolgens extra opmaak heeft meegekregen. In de betere browsers ziet het knopje er mooier uit en toont het een leuk effectje. Het geeft je een gevoel van een echte knop. Test het zelf maar eens uit. ;-)

Welke werkmethode gebruiken we bij Intracto?

Het allerbelangrijkste is dat een website in alle omstandigheden moet blijven werken. Maar daarbij moet die er natuurlijk ook nog goed uitzien. Hier zouden we de grens moeten kunnen trekken.

Daarom evolueren we bij Intracto stapgewijs van graceful degradation naar progressive enhancement. Twee redenen waarom wij, als front-end developers, dit doen:

 

  • Om de mensen aan te sporen steeds de meest recente browser te gebruiken. Want alleen zo kunnen wij hen de beste webervaring aanbieden.
  • Om de ontwikkelaars van browsers aan te sporen hun browser op gelijk niveau te brengen met de andere. Want alleen zo zal elke browser dezelfde webervaring kunnen aanbieden.

Graceful degradation zorgt ervoor dat we steeds maar alternatieve en elegante oplossingen moeten uitwerken voor verouderde browsers. Zo voelen gebruikers van oude browsers geen behoefte om te updaten naar een nieuwere technologie.

Met progressive enhancement krijgen ze echter enkel een zeer basic webervaring voorgeschoteld. Het verschil met de nieuwere browsers is meer dan duidelijk en zal aansporen om hun browser naar de laatste nieuwe versie te updaten. Mensen met een betere browser krijgen dus een betere webervaring, terwijl anderen een iets mindere ervaring krijgen. Iedereen updaten dus!

(Tip voor developersBrowser Awareness Day genereert code snippets voor je website die gebruikers aanspoort te updaten als ze surfen met een verouderde browser.)