Een thema bepaalt vaak jarenlang het gezicht van jouw site. Het is daarom belangrijk dit met zorg te kiezen. Misschien wel de belangrijkste eis van dit moment is dat je thema mobile-first is. Wat mobile-first betekent, waarom het belangrijk is en hoe je checkt of je favoriete thema mobile-first geschikt is vertellen we je in deze blogpost.
Wat betekent een mobile-first website?
De belangrijkste eis voor een mobile-first website is dat hij responsive is. Responsive betekent dat de website zich aanpast aan de device waarmee de bezoeker de website bezoekt. Schermformaat en resolutie is natuurlijk een opvallend verschil tussen smartphones, tablets, laptops en desktop PC’s. Zelfs binnen zo’n groep kunnen schermen nog heel veel verschillen. Wat ons betreft houdt het niet op bij schermformaat, ook de input is belangrijk: denk aan (multi-)touchscreens, trackpads, toetsenbord en muis.
Google maakt onderscheidt in drie manieren om je website aan te passen voor andere devices:
- Responsive: Het responsive aanpassen aan verschillende devices gebeurt onafhankelijk van de HTML-code van de website. De website ziet er dus anders uit op verschillende apparaten maar bestaat uit dezelfde HTML-code. Dit is tegenwoordig dé standaard.
- Dynamische weergave: Als de HTML-code anders is maar de URL nog hetzelfde is, spreek je van ‘dynamische weergave’.
- Afzonderlijke URL’s: Als je verschillende websites of URL’s hebt voor mobiel en desktop spreek van je van ‘afzonderlijke URL’s’.
De laatste twee zijn dus niet responsive.
Naast een responsive design is de grootte van een website ook belangrijk voor mobile devices. De snelheid op een smartphone in Afrika is niet gelijk aan de snelheid van een via LAN aangesloten desktop in West-Europa. Kortom: je website moet snel laden op mobile en op desktop.
Waarom is mobile-first webdesign belangrijk?
Uit onderzoek van Google blijkt dat 80% van de mensen weleens een telefoon gebruikt om online te zoeken. Daarnaast gebruikt 27% alleen een telefoon tegenover 14% alleen een laptop. Er wordt meer via mobiel gezocht dan via desktopcomputers. Kortom, de kans is heel groot dat jouw website meer via mobiel en tablets wordt bezocht dan via desktops.
Op basis van bovenstaande data heeft Google besloten jouw websites te beoordelen op basis van hoe ze er mobiel uitzien en werken, dit noemen ze ‘Mobile-first Indexing’. De ranking voor jouw site voor mensen die op een desktop zoeken en die jouw desktop versie gaan zien wordt dus bepaald door de mobiele versie van jouw site!
Er zijn dus twee heel belangrijke redenen om je thema vooral te kiezen op de mobiele werking en prestaties. Gelukkig heeft Google ons drie tools gegeven om die taak makkelijker te maken. Ook zetten we nog wat andere test opties voor je op een rij.
WordPress thema’s testen met Mobile-Friendly Test van Google
Deze test geeft je een grof idee van de mobile-friendliness van een thema. Volg dit stappenplan om je thema te testen:
- Zoek de URL op van de demo-site van het thema dat je op het oog hebt. Let erop dat je de originele URL gebruikt, dus zonder menubalk van een thema marktplaats als ThemeForest.
- Ga naar de Mobile-Friendly Test website van Google
- Vul de URL van de demo-site in
- Bekijk de resultaten.
Als je thema hier slecht uit komt kun je beter verder zoeken.
WordPress thema’s testen met de ‘Mobile Website Speed and Performance’ check
Google zou Google niet zijn als ze niet meerdere test-tools ter beschikking stellen. De Mobile Website Speed and Performance check, test specifiek de snelheid van je website op een smartphone met 3G verbinding.
Hier kun je dezelfde URL invullen als bij de test hierboven. Let erop dat hosting en afstand tot de server nog een rol spelen in de getallen die bij dit rapport eruit komen.
Google laat de laadsnelheid zien. Ook zie je hoe jouw website zich verhoudt tot sites in dezelfde industrie. Als laatste geven ze nog enkele adviezen om je website nog sneller te maken voor mobiele apparaten.
Je krijgt nog een extra uitgebreid rapport door je e-mailadres achter te laten.
Test WordPress Thema’s met Chrome Developer Tools
Het nadeel van de bovenstaande twee tests is dat je niet precies weet op welke resoluties de tool allemaal checkt. Daarom raden wij aan om de responsiveness van je thema te checken in de browser Chrome. In de Developers Tool van Chrome vind je namelijk een handige functionaliteit waarmee je je website op allerlei resoluties test. Ga als volgt te werkt:
- Browse naar je website in Chrome.
- Open dedeveloperstool (F12 in Windows, Cmd+Opt+I op Mac)
- Klik vervolgens op het ‘Toggle device toolbar’ icoontje, links naast ‘Elements’
In deze tool kun je je website checken op specifieke resoluties. Er staan ook een aantal standaard resoluties in van veelgebruikte devices. Zie ook de handleiding van Google zelf.
Test door je venstergrootte te verslepen
Als je de responsiveness van je site echt goed wilt testen moet je deze testen op een desktop. Pas de grootte van je browservenster aan door deze al slepend groter of kleiner te maken. We raden aan dit altijd ook even te doen, omdat je dan pas echt goed ziet of alle elementen op je website goed meeschalen. Er zijn thema’s die in standaard resoluties goed werken, maar die niet goed werken in tussenliggende resoluties.
Ga niet in het wilde weg allerlei resoluties en devices testen maar controleer eerst in bijvoorbeeld Google Analytics welke devices, resoluties en browsers nu veel gebruikt worden om jouw website te bezoeken.
Test responsiveness van WordPress thema’s met behulp van software
Wil je nog serieuzer aan de slag met het testen van je thema of website? Naast de tests van Google zijn er meer tools op de markt die jouw thema of website kunnen testen op responsiveness. Ze zijn vaak betaald maar bieden ook meer inzicht en functionaliteit dan de tests van Google. Wil je hier mee aan de slag, bekijk dan eens onderstaande lijst:
- BrowerStack: Testen in veel verschillende devices, browsers en resoluties.
- Cross Browser Testing Tool: vergelijkbaar met BrowserStack
- Browsershots: Test jouw website in tientallen verschillende browsers
- Browserling: Test jouw website virtueel in een andere browser
Thema’s testen op echte devices
Wil je niets aan het toeval overlaten voor je nieuwe site of thema? Dan is testen op echte devices het beste. Nu is het een dure grap om zelf allerlei devices aan te schaffen. Gelukkig zijn er bedrijven die je kunnen helpen door deze aan jou uit te lenen. Je hebt ook Labs waar je kunt testen op meerdere devices:
- LabCase: Huur een set devices om een paar weken mee te testen
- OpenDeviceLab: Een lijst met labs waar je kunt testen op meerdere devices
Zoals je ziet kun je heel ver gaan in het testen van websites op mobile-first. Afhankelijk van de grootte van je project is het nuttig zijn om all-the-way te gaan. Wij raden je aan om altijd de tests van Google te doen voordat je een nieuw thema of zelfgemaakt thema op een live omgeving gebruikt. Naast mobile-first zijn er nog veel andere zaken waar je rekening mee moet houden bij het kiezen van een thema. Al deze zaken hebben we voor jou op een rij gezet in een gratis whitepaper. Download de whitepaper nu!
Er is 1 reactie
Junaid Ahmed
For testing responsiveness of my website I used https://www.lambdatest.com/ , the tool helped me to perform cross browser testing of my website on all latest & legacy devices, OS and platforms.