Als je een website laat maken, wil je graag dat deze werkt voor ál je bezoekers. We krijgen dan ook vaak de vraag welke browsers de site die wij bouwen gaat ondersteunen. Maar in plaats van antwoord geven op de vraag “welke browsers ondersteunen we?” geven we liever antwoord op de vraag “hoe gaan we om met de content?”

Apparatuur en browsers veranderen namelijk, maar er is één constante factor: de content. Het is belangrijk dat de content die je aanbiedt altijd toegankelijk en bruikbaar zal zijn. Of de site nu bezocht wordt met een iPad, een desktopcomputer of een mobiele telefoon.

We werken voor iedere browser, maar de content wordt niet in iedere browser identiek getoond. Dit is altijd al onmogelijk geweest. Er zijn nu eenmaal browsers die alleen tekst kunnen weergeven, net zoals er apparaten zijn die niet uit de voeten kunnen met JavaScript. En het scherm van je mobiel is uiteraard kleiner dan de monitor op je bureau. Daarnaast verandert het browserlandschap voortdurend: oudere browsers verliezen marktaandeel, nieuwe – al dan niet mobiele – browsers winnen terrein.

Een aparte groep vormen de verouderde desktopbrowsers met een gebrekkige ondersteuning voor CSS en JavaScript (Internet Explorer 6 is een berucht voorbeeld). Deze gebrekkige ondersteuning kan voor een economisch dilemma zorgen. Als de vormgeving en de interactie namelijk identiek moeten zijn aan de vormgeving en interactie in de modernste browsers, moeten we daar als bouwers veel tijd en energie in steken. En dat is tijd die de opdrachtgever uiteindelijk betaalt.

Omdat we geen afhankelijkheid inbouwen van CSS - of JavaScript-ondersteuning, zal in de oudere browsers de content zeker toegankelijk en bruikbaar zijn. De content zal er niet in iedere browser identiek uitzien. We passen de weergave van de content aan op de afmetingen van het scherm en de mogelijkheden die de browser ons biedt.

Concreet

Een voorbeeld van een invulveld en verstuurknop binnen een formulier. Op een smal scherm (mobiel) hebben we niet veel ruimte, dus zetten we het label (e-mailadres) boven het invulveld. Het invulveld en de knop maken we lekker groot, zodat de bezoeker daar makkelijk met zijn duim bij kan. Goed voor de bezoeker en ook beter voor de conversie.

Niet iedereen komt met een mobiel apparaat op ons formulier. Op dit moment komt het meeste verkeer (nog?) van een desktop of notebook op kantoor of thuis. Een gedeelte hiervan komt met een oudere browser zoals IE7 of IE8 . In deze browser hebben het invoerveld en de knop rechte hoeken. De functie is duidelijk, dus ook hier heeft de bezoeker geen moeite om te doen waarvoor zij gekomen was.

Modernere browsers geven echter de mogelijkheid om invulvelden en knoppen verder vorm te geven. Zo kan IE9 goed overweg met een schaduw, zonder dat we hiervoor plaatjes hoeven te maken en in te laden. Door geen plaatjes te gebruiken voor schaduw (of afgeronde hoekjes) houden we de inlaadtijd zo beperkt mogelijk (goed voor de conversie) en houden we onze de mobiele bezoeker te vriend. Deze bezoeker zou immers wel eens minder snelle verbinding kunnen hebben. In IE9 zou het voorbeeld er zo uit kunnen zien:

In nog iets geavanceerdere browsers kunnen we ook de knop nog laten “opbollen” door met meerdere kleuren te werken. Dit alles zonder plaatjes toe te voegen, maar door gebruik te maken van de mogelijkheden die de browser ons geeft.

Zo zal per browser of apparaat de content op een andere manier weergeven of gebruikt worden. Maar één ding staat vast: de content kan gebruikt worden. Nu en in de toekomst.