Waarom ziet mijn website er niet op elke browser hetzelfde uit?

Een responsive website… een absolute must! Buiten dat er veel verschillende beeldschermafmetingen zijn waarvoor je een responsive website nodig hebt, zijn er ook veel verschillende browsers.

Vroeger was het makkelijk… iedereen gebruikte Internet Explorer (gewoonweg omdat er geen andere keus was…)en alle beeldschermen hadden dezelfde verhouding (800*600 px – Bedenk effe hoe klein, hoe cute!!! Hahaha!).

Maar effe, hè?! Wat een verademing, zo lekker simpel… hahaha!

Maar gaandeweg zijn er steeds meer browsers bijgekomen. Denk maar aan Google Chrome, Firefox, Edge en Opera… om maar niet te spreken van de diversiteit aan beeldscherm resoluties.

Als je jouw website op elke van deze browsers bekijkt, dan zul je zien dat je website niet in elke browser hetzelfde getoond wordt. Ja, ik hoor je denken… “Getver!”

Verschillende webbrowsers ‘lezen’ een website op hun eigen manier. Het liefst ga je ervan uit dat een website áltijd werkt op iedere browser, maar helaas… ik moet je teleurstellen… in de praktijk is dit helaas niet het geval.

“Maar Sas, hoe kan het dan dat elke browser mijn website anders toont?”

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.

“Sas, wat voor problemen zijn dat dan? Ik heb nog niet echt helemaal beeld, hoor…” Nou, door de verschillende werkwijze van browsers kunnen op jouw website de volgende issues voorkomen:

• Onverklaarbare lijnen tussen containers of rijen
• Regelafstanden of afstanden tussen afbeeldingen en teksten kunnen verschillen
• Te veel of te weinig afstand bij een aangepaste breedte
• Custom typografie (als je dus bijvoorbeeld je eigen lettertype upload. NOTE: in dit blog lees je trouwens hoe dat moet in Divi… Lees hier) wordt niet vertoond
• Icoontjes en emoji’s worden omgezet tot hele rare tekens
• Radioknoppen of uitklapmenu’s hebben ineens een totaal andere opmaak
• De site is niet (meer) responsive of adaptive

“Wat kan ik dan het beste doen om mijn website op iedere browser goed te laten werken???”

Goede vraag!!! Ik adviseer altijd om 2 dingen te testen:

1. Test in verschillende browsers
2. Test op verschillende schermen en apparaten

Ik zal op beide even wat dieper ingaan, hoor…

1. Test in verschillende browsers

Test de website in ieder geval in de browsers Google Chrome, Firefox, Chrome en Safari.

Maar hoe weet je nu met welke besturingssystemen, browserversies en resoluties je webpagina’s meestal worden bekeken? Eén methode om daarachter te komen, is door gebruik te maken van Google Analytics.

Oke, dit is wel effe een stukkie voor de wizzies onder ons… : Je moet in je webpagina’s een stukje code plaatsen, en met behulp daarvan worden dan allerlei gegevens verzameld over de bezoekers aan je website, o.a. met welke browsers en beeldschermresoluties ze je website bekijken.

Een andere (mss net effe iets simpeler voor de meesten!!!) methode, is door de statistieken van gebruikte besturingssystemen, browsers en resoluties voor een bepaalde periode en een bepaald land op te vragen van de website StatCounter.

Hieronder zie je bijvoorbeeld de grafieken die ik via deze site heb opgevraagd over de gebruikte browserversies en besturingssystemen in Nederland over de afgelopen laatste drie maanden (Q3 2022 dus). Zoals je ziet, is op het moment van schrijven Google Chrome de meest populaire browser, en Windows samen met Android het meest gebruikte besturingssysteem.

2. Test op verschillende schermen en apparaten

Test een website op verschillende schermresoluties.

Zorg dat de site er op een laptop nét zo mooi uitziet als op een grote 34 inch monitor (met een resolutie van 3440*1440 px), zoals ik hier heb staan, of als op een Samsung S21 Ultra, om er maar een te noemen… Hahaha!!!

Ik weet dat er maar weinig mensen zijn die hun website op een 3440*1440 px beeldscherm zullen bekijken, dus ik loop de websites die ik bouw altijd goed na! Hoe ik dat doe, zonder al die apparaten met verschillende beeldresoluties hier te hebben staan??? Zal ik je verklappen!

Binnen WordPress heb je een simulator. Via die simulator kun je een beetje beeld krijgen of je website er ook op smartphone goed uitziet. Maar ja… de keuze in smartphoneland is reuze… dus voor welk model loop je dan alles na?? Mijn ervaring is dat je het beste alles kunt nalopen met de voorkeuze Iphone 6/7/8. Niet omdat dat de meest hippe smartphone is… hahaha, maar omdat als je website er dan goed uitziet, hij daarna op 95% van alle smartphones goed toont.

Handig, hè?!

En eh… hoe staat het met jouw website?

Ik ben reuze benieuwd. Maar eh… voelt het nu alsof je wel wat hulp kunt gebruiken??? Heeft je website wel wat verbeterpuntjes? Geen probleem! Ik help je graag!

TIP: Je kunt een strippenkaart bij mij kopen voor dit soort klusjes.