Ooit afgevraagd waarom een website er in Safari anders uitziet dan in bijvoorbeeld Chrome of Firefox? Je bent niet de enige! Verschillende webbrowsers ‘lezen’ een website op hun eigen manier. Het liefst ga je ervan uit dat een website áltijd werkt op iedere browser, maar in de praktijk is dit helaas niet het geval. Wij leggen je uit waarom een website er anders uit kan zien in verschillende bladerprogramma’s en wat je kunt doen om browserverschillen te voorkomen.
De browserverschillen van jouw website
De broncode van een website is altijd hetzelfde, maar webbrowsers, zoals Safari, Edge, Firefox of Chrome, vertonen een website of webpagina op hun eigen manier. En dat kan voor problemen zorgen bij de opmaak, inhoud of indeling van je website. Door de verschillende werkwijze van browsers kunnen op jouw website de volgende problemen voorkomen:
- Onverklaarbare lijnen tussen containers of rijen;
- Te veel of te weinig afstand bij een aangepaste ‘gootbreedte’;
- Custom typografie (lettertype) wordt niet vertoond;
- Icoontjes en emoji’s worden omgezet tot rare tekens;
- Radioknoppen of uitklapmenu’s hebben een andere opmaak;
- De site is niet (meer) responsive of adaptive;
5 manieren om te zorgen dat een website op iedere browser werkt:
Bij het maken van een website is het de kunst om een responsive design te ontwerpen dat op iedere verkenner goed wordt weergegeven. Om te zorgen dat jouw website geen vrij van bugs is en goed werkt op verschillende browsers kun je de volgende dingen doen:
1. Handmatig controleren
Controleren of een website werkt is enorm belangrijk. Als websitebouwer is het tenslotte jouw verantwoordelijkheid om een website op te leveren die werkt. Je kunt (samen met je team) handmatig iedere browser afgaan of je kiest ervoor om een programma te gebruiken zoals Browser Shots. Deze site maakt een momentopname van een website of -pagina waarop duidelijk de verschillen te zien zijn. Het nadeel van Browser Shots is alleen dat je niet kunt checken of de dynamische elementen (sliders, animaties etc.) op de juiste manier werken.
2. Controle door een emulator
Geen zin om zelf alle browsers te testen? Laat een robot het zware werk doen! Er zijn verschillende robotsimulaties beschikbaar die websites testen op verschillende webbrowsers, systemen en apparaten. Deze slimme software is ideaal voor het cross browser testen van een site of pagina. Zo’n simulatie is met name handig omdat sommige systemen, zoals Windows, niet meer dan één software versie kunnen gebruiken. De volgende programma’s zijn erg handig om te controleren of jouw website cross-browser-proof is:
3. Check je site op eerder uitgebrachte browsers
Zeker zijn dat er inspringende afbeeldingen, bewegingsparallaxen, kleurverlopen en andere (interactieve) technieken er goed uitzien op andere browsers? Controleer dan niet alleen de meest recente update van een bladerprogramma, maar óók eerdere versies. Niet iedereen maakt gebruik van de meest recente webbrowser. Voor het controleren van eerder uitgebrachte browsersoftware kun je gebruik maken van deze programma’s:
4. Test je website op verschillende apparaten
Per apparaat kan het uiterlijk van je website uiteenlopen. Verzamel daarom verschillende apparaten – zoals een tablet, laptop en smartphone – en test handmatig een pagina of website op alle mogelijke browsers. Ook is het handig om gebruik te maken van eventuele randapparatuur, zoals een bluetooth toetsenbord of een stylus. Misschien kom je bugs tegen die je niet snel zou opmerken, maar wél de gebruiksvriendelijkheid van je website kunnen aantasten.
5. Voorkom browserproblemen vóór het bouwen
Voor het cross-browser optimaliseren van een website is het slim om tijdens het ontwerpen al rekening te houden met potentiele browserproblemen. Hebben alle foto’s écht een slagschaduw nodig? Zou die slider niet vervangen kunnen worden door een statische foto? En hoe groot is de meerwaarde van inspringende afbeeldingen? Als websitebouwer moet je soms keuzes maken: ga je voor een spetterend ontwerp óf kies je voor gebruiksvriendelijkheid? In de meeste gevallen kun je beter kiezen voor dat laatste!
Staar je niet (te vaak) blind op details
Een laatste kanttekening: geen website is 100% cross-browser-proof. Veel van de afwijkingen hebben te maken met bepaalde instellingen of voorkeuren van de eindgebruiker en hier kun je helaas niets aan veranderen. Om te zorgen dat jouw website zo goed mogelijk zichtbaar is, kun je als referentie het beste de webbrowser aanhouden die je zelf gebruikt. Check vervolgens hoe andere browsers het ontwerp interpreteren en probeer hierop in te spelen. Een kleine verandering is niet het einde van de wereld, zolang de boodschap maar wordt overgebracht
Een browservriendelijke website van Dlogic
Zeker zijn dat jouw website schittert op álle soorten webbrowsers? Laat jouw website dan bouwen door een ervaren webdesign bureau in de buurt. Neem snel contact op met Dlogic en ontdek de mogelijkheden.
