Hoe een WordPress-site in verschillende browsers te testen (Cross Browser-testen gemakkelijk gemaakt)

Wilt u uw WordPress-site testen in verschillende browsers? Cross Browser Testing is uitermate belangrijk bij het wijzigen van WordPress-thema's of het implementeren van een nieuw ontwerp, omdat het u helpt ervoor te zorgen dat uw website er goed uitziet in alle verschillende browsers, schermformaten, besturingssystemen en mobiele apparaten. In dit artikel laten we u zien hoe u eenvoudig een WordPress-site in verschillende browsers kunt testen.

Wat is Cross Browser Testing?

Cross Browser Testing is een proces waarbij websites worden getest in meerdere browsers, besturingssystemen, schermformaten en mobiele apparaten om ervoor te zorgen dat uw website correct werkt in alle verschillende webbrowsers..

Waarom een ​​WordPress-site testen in verschillende browsers?

Google Chrome is de populairste internetbrowser ter wereld met 65% marktaandeel op desktopcomputers en 57% op mobiele apparaten. Andere browsers zoals Firefox, Microsoft Edge, Safari en Opera worden echter nog steeds veel gebruikt door honderden miljoenen gebruikers over de hele wereld.

Vanwege een breed scala aan browsers, besturingssystemen en apparaten is cross-browser testen een belangrijk onderdeel geworden van het bouwen van een website. Met cross-browser testen kunt u een consistente webervaring bieden voor al uw gebruikers in verschillende browsers, apparaten en platforms.

Hoewel alle populaire browsers zich gedragen bijna identiek bij het renderen van webpagina's gebruiken ze allemaal verschillende code, wat betekent dat ze website-elementen van tijd tot tijd anders kunnen verwerken.

Als eigenaar van een website betekent dit dat uw website er anders uit kan zien in browsers. Omdat dit geen gewone WordPress-fouten zijn die voor iedereen zichtbaar zijn, kun je maanden gaan zitten zonder het probleem te kennen totdat iemand het meldt.

Daarom wordt het als de beste praktijk beschouwd om uw WordPress-site te testen in verschillende browsers op meerdere platforms en schermformaten, zodat u ervoor kunt zorgen dat uw website dezelfde gebruikerservaring biedt aan al uw gebruikers..

Nu hebben de meeste mensen geen toegang tot een breed scala aan apparaten om een ​​website te testen. Zelfs als het je lukt om meerdere apparaten van vrienden te lenen, zal het een hoop werk zijn om handmatig heen en weer te schakelen. Gelukkig zijn er tools voor het testen van verschillende browsers die het proces met slechts één muisklik kunnen automatiseren.

Maar voordat we de lijst met beste crossbrowser-testtools voor WordPress delen, is het belangrijk om te weten welke browsers populair zijn onder uw gebruikers, zodat u uw focus hierop kunt richten.

Hoe te vinden welke browsers uw bezoekers van de website gebruiken?

Gezien het aantal beschikbare besturingssystemen, browsers en combinaties van browserversies, is testen via verschillende browsers een lastige taak voor eigenaren van kleine bedrijven.

Als u echter de populaire browsers, besturingssystemen en apparaten kent die uw websitebezoekers gebruiken, kunt u het proces aanzienlijk eenvoudiger voor uzelf maken. Afhankelijk van je specifieke statistieken, kun je misschien wegkomen met het testen van slechts enkele populaire combinaties.

U kunt erachter komen welke browsers, besturingssystemen en apparaten populair zijn bij uw gebruikers met behulp van Google Analytics.

Log gewoon in op uw Google Analytics-account en ga naar Publiek »Technologie verslag doen van. Hier kunt u informatie vinden over browsers, besturingssysteem, schermformaten die door uw websitebezoekers worden gebruikt.

Zodra je deze lijst hebt, kun je je richten op de topcombinaties en de rest vermijden.

Als u net een blog start of Google Analytics niet heeft, raden we u aan om MonsterInsights onmiddellijk te installeren om Google Analytics correct in te stellen. Na installatie kunt u ervoor kiezen om een ​​paar weken te wachten om gegevens te verzamelen of door te gaan met het testen van uw website in alle browsers.

Beste Cross Browser-testtools voor WordPress

Met behulp van cross-browsertesttools kunt u eenvoudig uw WordPress-site testen in meerdere browsers, besturingssystemen en apparaten. Met slechts een paar klikken kunt u uw website automatisch testen in verschillende browsers.

Hieronder vindt u de lijst met testtools voor de beste crossbrowser voor WordPress-sites:

1. Browsershots

Browsershots is een open source-tool waarmee u uw website kunt testen met verschillende browsers op verschillende besturingssystemen. Het beste deel van deze tool is dat het gratis is. De keerzijde is dat het geen Microsoft Edge of Internet Explorer bevat. Het omvat ook geen ondersteuning voor mobiele apparaten.

Als u Browsershots wilt gebruiken, voert u eenvoudig uw website-URL in en selecteert u vervolgens de browsers die u wilt testen. Browsers worden weergegeven in drie kolommen voor Linux, Windows en Mac OS.

Na het indienen van uw verzoek, zult u een tijdje moeten wachten omdat het de tests uitvoert en een screenshot genereert. Als u klaar bent, ziet u de schermafbeeldingen op dezelfde pagina. U kunt nu doorgaan en op een screenshot klikken om het uit te vouwen.

Opmerking: BrowserShots maakt schermafbeeldingen van een website, wat betekent dat het geen live tests zijn. Mogelijk kunt u tijdens de tests niet zien of uw website werkt zoals bedoeld. Daarvoor heb je tools nodig die live tests uitvoeren in echte browsers.

2. CrossBrowserTesting

CrossBrowserTesting is een eenvoudig te gebruiken en zeer krachtige tool voor het testen van meerdere browsers met zowel live-tests als schermafbeeldingen. Dit is de tool die we hier bij Awesome Motive gebruiken om onze websites te testen, zoals WPBeginner en onze premium WordPress-plug-ins.

Het is een betaalde service, maar ze bieden wel een gratis proefaccount met 100 minuten om het product te testen.

Nadat u uw proefaccount hebt gemaakt, gaat u naar het tabblad 'Livetest' waar u een besturingssysteem en browser kunt selecteren. Het laadt de URL van uw website in de actuele browser die live op uw scherm verschijnt.

Als je snel meerdere schermgrepen wilt krijgen, klik je op het tabblad 'Schermafbeeldingen' en voer je een nieuwe screenshots-test uit. CrossBrowserTesting-tool haalt automatisch schermafbeeldingen op Mac, Windows, iPad en Nexus 6P mobiele telefoon met Chrome, Firefox, Safari, Microsoft Edge webbrowsers.

Het vermeldt ook lay-outverschillen onder elke screenshot waarop u kunt klikken om de lay-out te vergelijken met de basislay-out. U kunt ook verschillende lay-outs naast elkaar vergelijken of alle schermafbeeldingen naar uw computer downloaden.

Het gratis account is wat beperkt in termen van combinaties van browsers en besturingssystemen die u kunt uitvoeren. Het dekt echter de meeste populaire browsers op de top mobiele en desktop platforms.

Prijzen: Start vanaf $ 29 per maand, jaarlijks gefactureerd.

3. BrowserStack

BrowserStack is een betaalde cross-browser en platformonafhankelijke testtool voor mobiele apps en websites. Ze bieden ook een beperkt gratis proefaccount waarmee je 30 minuten lang hun platform kunt testen.

Het wordt geleverd met functies voor live testen en schermafbeeldingen. U kunt het platform selecteren dat u wilt testen en vervolgens een browser selecteren. BrowserStack laadt de virtuele emulator met een echt browservenster. U kunt eenvoudig de URL invoeren die u wilt testen om de test te starten.

De resultaten zijn redelijk nauwkeurig en de snelheid is redelijk bevredigend. U moet de tests echter nog steeds handmatig uitvoeren door elke browser te openen.

Prijzen: Start vanaf $ 29 / maand jaarlijks gefactureerd.

Hoe Screenshots van Cross Browser-tests te analyseren?

Nu je de eenvoudigste manier hebt geleerd om je WordPress-site in verschillende browsers te testen, is het volgende deel om je resultaten te analyseren en te zien of er iets kapot is dat moet worden opgelost.

Als u een responsief WordPress-thema met een goede code achter de schermen gebruikt, zullen de meeste van uw schermafbeeldingen er ongeveer hetzelfde uitzien.

In sommige gevallen zien website-elementen er echter enigszins anders uit dan de ene browser naar de andere. Als dit verschil minimaal is en geen invloed heeft op de gebruikerservaring, esthetiek of functionaliteit, kunt u het negeren.

Aan de andere kant, als een verschil te opvallend is, de gebruikerservaring beïnvloedt, er onaangenaam uitziet of voorkomt dat gebruikers uw website gebruiken zoals bedoeld, dan heeft het uw aandacht nodig.

In de meeste browsertests ontdekt u CSS-problemen met uw thema. Dit kan worden opgelost met behulp van Inspect Tool om erachter te komen welke CSS-regels moeten worden bijgewerkt. Hierna kunt u aangepaste CSS toevoegen om deze problemen op te lossen.

Als u de problemen niet kunt oplossen, kunt u altijd een WordPress-ontwikkelaar inhuren om deze te verhelpen.

We hopen dat dit artikel je heeft geholpen bij het eenvoudig testen van een WordPress-site in verschillende browsers. Wellicht wilt u ook onze ultieme stapsgewijze handleiding over het verbeteren van WordPress-snelheid en -prestaties.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.