Als je jouw website wel eens in verschillende browsers (Internet Explorer, Firefox, Safari, etc.) hebt bekeken, heb je vast wel gezien dat het er allemaal niet in elke browser hetzelfde uitzien. Niet alleen de kleuren zijn vaak net een beetje anders op een andere computer, ook als je een website op dezelfde computer bekijkt in een andere browser zul je kleine details tegenkomen die niet helemaal exact hetzelfde zijn.
Browsers werken op verschillende manieren
Ik zal je niet lastigvallen met allemaal vaktermen. Maar het komt er in feite op neer dat websites bestaan uit allerlei verschillende codes en dat elke browser op een andere manier deze codes interpreteert. Grotendeels werkt het hetzelfde, maar niet helemaal. Hieronder een aantal voorbeelden:
- Oude versies van Internet Explorer kennen de code voor afgeronde hoekjes niet. Dat geldt ook voor bijvoorbeeld buttons/knopjes.
- Ook ruimte wordt vaak verschillend weergeven. Wat in de ene browser bijvoorbeeld precies 3 cm is, kan bij de andere browser 3,1 cm zijn.
- Er zijn ook “nieuwere codes”, die nog niet heel lang bestaan en eigenlijk alleen worden weergeven in nieuwere (versies van) browsers. Bijvoorbeeld: gradients/kleurverloop, tekst schaduwen en nog meer. Eerder werden deze effecten nagebootst d.m.v. afbeeldingen, wat eigenlijk niet zo goed is voor de laadtijd/snelheid van de website.
- Ook teksten kunnen anders worden weergeven. De grootte van de tekst kan nét iets verschillen. Bij het gebruik van “custom fonts” (die niet standaard op je computer staan) kan het ook voor komen dat ze in sommige browsers een beetje pixelig/rafelig worden.
- Er zijn elementen die worden gestyled door je browser. En natuurlijk styled elke browser dit anders. Voorbeelden hiervan zijn: elementen van contactformulier (verschillende invulvelden, radio buttons, een klein keuzemenu). Heb je een smartphone? Bekijk dan eens een wat uitgebreidere contactformulier op je smartphone en vergelijk dit met Firefox, Google Chrome en/of Internet Explorer op je computer.
Er zijn nog veel meer verschillen, maar de verschillen die ik hierboven benoemd heb komen (bij mijn projecten) het meest voor.
Is dat niet een probleem?
Nee, dat hoeft helemaal geen probleem te zijn. Zolang de website er goed uitziet (en het er niet uitziet alsof er van alles mis is) en alles goed werkt en duidelijk is, is er helemaal niks aan de hand.
Is de tekst in de ene browser net iets groter of kleiner dan de andere? Zolang de tekst goed leesbaar is, is dat helemaal geen probleem. Heb je in Safari afgeronde hoekjes, terwijl de hoekjes in (een oudere versie van) Internet Explorer rechthoekig zijn? Who cares? Als het maar duidelijk is dat het om een vakje gaat.
Verschillen in browsers die ten koste gaan van de gebruiksvriendelijkheid worden uiteraard wel verholpen.
Zijn die verschillen niet te voorkomen?
Vaak zijn er wel trips & tricks om ervoor te zorgen dat de website er in alle browsers hetzelfde uitziet. Zo kun je bijvoorbeeld afbeeldingen gebruiken om afgeronde hoekjes te creëren. Maar dat zorgt weer voor meer laadtijd. Dan moet je gaan afwegen wat je prioriteiten zijn; wil je dat álle bezoekers de website snel kunnen laden, ook al kunnen gebruikers van oude Internet Explorer versies geen afgeronde hoekjes zien óf moeten álle bezoekers langer wachten tot de website is geladen, hoewel de oude Internet Explorer gebruikers dan wel afgeronde hoekjes kunnen zien. Het is maar net wat je prioriteit is. Mijn prioriteiten zijn uiteindelijk toch wel laadtijd en gebruiksvriendelijkheid, en dat is dan ook wat ik mijn klanten adviseer.
