Inhoud

Je website optimaliseren voor mobiel

Wereldwijd beschikt ongeveer 84% van de mensen over een smartphone, en vaak bezitten ze meerdere mobiele apparaten. Dit aantal overtreft veruit het aantal mensen met toegang tot desktopcomputers en laptops.

Sterker nog, voor velen is de smartphone het enige computerapparaat dat zij gebruiken, waardoor het de primaire manier is waarop zij het internet ervaren. Veel mensen hebben hun smartphone dan ook altijd bij zich.

Niet verrassend is dat het mobiele internetverkeer de afgelopen jaren enorm is toegenomen. Het heeft het gebruik van desktopcomputers ingehaald, met meer dan 54% van al het internetverkeer dat afkomstig is van mobiele apparaten, tegenover ongeveer 43% van desktopcomputers.

Concreet betekent dit dat als je website niet geoptimaliseerd is voor mobiele apparaten, je mogelijk een aanzienlijk aantal gebruikers misloopt. Met zoveel beschikbare content zullen potentiële bezoekers (en klanten) waarschijnlijk niet genoegen nemen met een slechte gebruikerservaring. Ze zullen snel ergens anders kijken voor wat ze nodig hebben.

Wat is een responsief ontwerp?

Een responsief ontwerp zorgt ervoor dat een website zich automatisch aanpast aan de grootte van het scherm, of het nu gaat om een telefoon, tablet, desktopcomputer of zelfs een smartwatch.

Bij het bezoeken van een responsieve website zul je merken dat de site zich aanpast aan jouw schermgrootte. Op grotere schermen worden elementen proportioneel vergroot, zonder te overdrijven, terwijl ze toch gebruiksvriendelijk blijven.

Ditzelfde principe geldt voor mobiele apparaten. Op kleinere schermen is het belangrijk dat de inhoud van de site verkleint, maar nog steeds leesbaar en interactief blijft.

Websites die deze subtiele balans weten te vinden, worden beschouwd als responsief. Hierbij spelen webdesign en -ontwikkeling een grote rol, omdat grafische elementen van de site mee moeten kunnen schalen.

Achter de schermen zorgen CSS en stylesheets ervoor dat de website zich correct weergeeft op verschillende schermformaten.

Tot voor kort was responsief ontwerp vaak een bijzaak. Websites werden voornamelijk ontworpen met de desktopervaring als uitgangspunt.

Nu mobiel verkeer de overhand heeft, staat het mobiele ontwerp op de eerste plaats. Daarom hoor je vaak de term ‘mobile-first’ in de wereld van webdesign.

Het is belangrijk om te begrijpen dat er een verschil is tussen responsief en adaptief ontwerp. Adaptief ontwerp houdt in dat er meerdere versies van een webpagina worden gemaakt en getoond, afhankelijk van het apparaat van de bezoeker.

Deze benadering van webdesign wordt tegenwoordig als verouderd beschouwd, omdat responsiviteit een efficiëntere optie is.

Ook is Google sinds kort (eind 2023) volledig overgestapt op het mobile-first princiepen. Dit betekend dat Google jouw website bezoekt op de mobiele versie, en dat je ook beoordeeld wordt op de mobiele versie van jouw website.

Laat je website beoordelen door Google

Voordat je verdere acties onderneemt, is het verstandig om eerst te controleren hoe jouw website scoort op het gebied van mobielvriendelijkheid.

Dit helpt je om specifieke aspecten van je site te identificeren die verbetering nodig hebben en biedt waardevolle informatie over hoe je verbeteringen kunt aanbrengen.

Een manier om dit te doen is simpelweg door je website op verschillende apparaten te gebruiken. Probeer je site uit op je eigen smartphone of tablet en bekijk hoe deze eruitziet en aanvoelt.

Deze test geeft je inzicht in de laadtijden, de effectiviteit van het ontwerp op een kleiner scherm, de leesbaarheid van de content en de gebruiksvriendelijkheid van de navigatie.

Na deze eigen test, kun je dieper graven door gebruik te maken van een gespecialiseerde testtool. Gelukkig heeft Google een gratis tool ontwikkeld die je kunt gebruiken, genaamd Google Lighthouse. Deze tool laat zien of je site voldoet aan de mobiele standaarden van Google.

Als je pagina slaagt voor de test, krijg je een positief resultaat. Echter, als Google mogelijke verbeterpunten detecteert, zal de tool aangeven welke aanpassingen je kunt maken om de mobiele ervaring te verbeteren:

Zelfs als je site over het algemeen een positief resultaat behaalt, kan het nog steeds problemen hebben met het laden van bepaalde elementen.

In dat geval zie je een melding over ‘Paginalaadproblemen’. Door op deze melding te klikken, krijg je een lijst te zien met elementen die de tool niet kon laden op mobiel:

Op dit punt kun je elk van deze problemen één voor één aanpakken.

Gebruik een CSS framewerk

Een belangrijk onderdeel van het implementeren van responsief webontwerp is het gebruik van CSS. Je zult versteld staan hoeveel je kunt bereiken met wat kennis van CSS, vooral als het gaat om het mobielvriendelijk maken van je site.

Als voorbeeld, met CSS kun je zogenaamde ‘media queries’ gebruiken. Met media queries (of responsieve breekpunten) kun je browsers instrueren wanneer ze verschillende lay-outs voor een pagina moeten laden, afhankelijk van de schermgrootte. Media queries zijn een cruciaal onderdeel van HTML, CSS en JS-bibliotheken zoals Bootstrap en Tailwind.

Het creëren van een CSS-rasterlay-out. Rasterlay-outs in CSS, zoals die van Bootstrap, bieden een eenvoudige manier om ontwerpen aan te passen aan verschillende schermgroottes. Een lay-out met duidelijk gedefinieerde elementen stelt je in staat om in te stellen hoe deze elementen verschijnen en hoeveel ruimte ze innemen op verschillende schermformaten.
Gebruik van procentuele grootte voor lay-outelementen. Zoals je wellicht weet, laat CSS je toe om de hoogte en breedte van elementen in te stellen met pixels en andere meeteenheden. Voor een responsievere website raden we aan percentages te gebruiken. Zo passen elementen zoals knoppen zich naadloos aan naarmate schermen kleiner worden.
Lettergroottes aanpassen met media queries. Niet alleen afbeeldingen en andere visuele elementen op een pagina moeten schalen voor kleinere schermen. Ook tekst moet responsief zijn, anders eindig je met een mobiele site waar gebruikers slechts een paar woorden kunnen zien voordat ze moeten scrollen.
De ruimte tussen elementen beheren. Met CSS kun je de ruimte tussen elementen bepalen, zodat er voldoende witruimte is, zelfs wanneer pagina’s verkleinen.

Wanneer je jouw eigen template maakt en niet een vooraf ontwikkelde template download, dan is het altijd slim om gebruik te maken van een CSS framewerk.

Enkele populaire framewerken zijn:

Kies een responsief thema en plugins

Een van de grootste voordelen van WordPress is dat het relatief eenvoudig is om een responsieve website te maken met dit CMS. Tegenwoordig is het zelfs lastiger om een niet-responsieve website te creëren. Als je zorgvuldig je plugins en thema’s kiest, zal je site waarschijnlijk prima functioneren.

Gelukkig zijn de meeste populaire thema’s ontworpen met mobielvriendelijkheid in gedachten. Dit betekent dat het kiezen van het juiste thema je veel tijd kan besparen. Je hoeft dan geen media breakpoints en CSS-rasters handmatig in te stellen.

Wil je controleren of een thema responsief is voordat je het installeert (of koopt)? Bekijk dan de demoversie. Veel themademo’s laten zien hoe hun ontwerp eruitziet op kleinere schermen. Je kunt ook een staging-website gebruiken om nieuwe thema’s te testen en hun mobielvriendelijkheid te beoordelen.

Bij het maken van pagina’s met de blokeditor of paginabouwers zoals Elementor, kun je op elk moment bekijken hoe het ontwerp eruitziet op verschillende apparaten. Als je proactief bent in het voorvertonen van ontwerpen, zou er geen reden moeten zijn dat je pagina’s niet perfect mobielvriendelijk zijn.

Met de klassieke editor is het wat moeilijker om responsieve pagina’s te creëren, omdat deze niet zo visueel is als de blokeditor. Je kunt echter nog steeds op elk moment voorvertonen hoe pagina’s eruitzien.

Vind je het lastig om responsieve pagina’s te maken, dan is het wellicht een goed idee om een andere paginabouwer te proberen of van thema te wisselen. Dit kunnen grote veranderingen zijn voor elke pagina, dus neem de tijd om vertrouwd te raken met hoe de nieuwe plugins en thema’s werken.

Test met de Google Core Web Vitals

Core Web Vitals zijn een recente toevoeging aan Google’s zoekalgoritmes en bieden inzicht in de gebruikerservaring van een website. Deze ‘vitals’ bestaan uit drie belangrijke metingen:

Grootste Contentvolle Weergave (GCW): Deze meting beoordeelt hoe snel het grootste element op een pagina laadt. Een snelle GCW duidt op een vlotte laadtijd van de pagina.
Eerste Interactie Vertraging (EIV): Deze meting richt zich op interactiviteit. De EIV-score geeft weer hoe lang het duurt voordat een gebruiker kan beginnen met het interactief gebruiken van de pagina tijdens het laden.
Cumulatieve Layout Verschuiving (CLV): Dit meet hoeveel de opmaak van een pagina verschuift tijdens het laden. Een lage CLV-score is gewenst om verschuivingen te minimaliseren.

Hoewel Core Web Vitals slechts een deel van de gebruikerservaring van een website representeren, zijn ze essentieel voor het meten van technische aspecten die de gebruikerservaring direct beïnvloeden.

Deze vitals zijn niet alleen theoretisch van aard; ze hebben ook een directe impact op zoekmachineoptimalisatie (SEO) en de rangschikking van pagina’s. Google’s gratis PageSpeed Insights-tool stelt je in staat de Core Web Vitals van een website te testen. Voer simpelweg een URL in en PageSpeed Insights geeft een overzicht van de Core Web Vitals.

Net als bij de Mobile-Friendly Test-tool, biedt Google specifieke suggesties voor optimalisatie. Aangezien Core Web Vitals zich vooral richten op prestaties, gaan de meeste suggesties over snelheidsoptimalisatie.

Houd er rekening mee dat PageSpeed Insights afzonderlijke resultaten geeft voor mobiele en desktopversies van je site, wat kan leiden tot verschillende sets van aanbevelingen. Door je vooral te richten op optimalisatie voor mobiele apparaten, kun je de scores voor beide versies aanzienlijk verbeteren.

Verbeter de laadtijden van je website

Zoals eerder aangegeven zijn laadtijden van websites van cruciaal belang in een wereld waar mobiel gebruik overheerst.

Het optimaliseren van de snelheid van je site helpt niet alleen om je bounce percentage laag te houden, maar verbetert ook de gebruikerservaring, wat positief is voor je bedrijfsresultaten.

Het testen van de Core Web Vitals van je website geeft je een duidelijk beeld van de laadtijden.

Met deze informatie en de aanbevelingen voor prestatieoptimalisatie die de tool biedt, kun je werken aan het verbeteren van de laadtijden van je site. Hier zijn enkele effectieve optimalisatiemethoden die je kunt toepassen op je website:

Implementeer Caching: Door caching te gebruiken, worden sommige bestanden van je website opgeslagen op een handigere locatie (zoals op het lokale apparaat van elke bezoeker), zodat ze niet elke keer gedownload hoeven te worden als een nieuwe pagina wordt geopend. Er zijn veel gratis caching-plugins beschikbaar, hoewel sommige hostingplannen, zoals DreamPress, deze functie standaard bevatten.
Gebruik een Content Delivery Network (CDN): In plaats van je bestanden vanaf één centrale server te leveren, stelt een CDN je in staat kopieën ervan op te slaan op een reeks geografisch verspreide servers. Dit zorgt voor meer gebalanceerde laadtijden, ongeacht de locatie van de gebruiker, en vermindert ook je bandbreedteverbruik.
Comprimeer Je Afbeeldingen: Grote afbeeldingsbestanden zijn vaak de boosdoeners achter trage laadtijden. Door ze te comprimeren, kun je hun grootte verkleinen zonder de kwaliteit aan te tasten. Er zijn tal van gratis en premium oplossingen om dit te doen, waaronder de ShortPixel-plugin en het TinyPNG-hulpmiddel.
Minimaliseer Je Code: Door je CSS, HTML en JavaScript-code van je site te optimaliseren, maak je deze efficiënter en verkort je de laadtijden.
Houd alle aspecten van je site up-to-date: Het gebruik van verouderde software om je website te beheren, maakt je niet alleen kwetsbaar voor beveiligingsproblemen, maar belemmert ook de maximale prestatie-efficiëntie. Door je plugins, thema’s en CMS altijd bijgewerkt te houden, kun je deze problemen vermijden.

Hoewel dit veel werk lijkt, kunnen de meeste van deze technieken eigenlijk worden geïmplementeerd met behulp van eenvoudige, gratis oplossingen die weinig tot geen configuratie vereisen.

Als gevolg hiervan zal je site aanzienlijk beter presteren op mobiele apparaten en een voordeel hebben in zoekmachineranglijsten.

Zorg voor kwalitatieve hosting

We hebben het al eerder gezegd en we benadrukken het graag opnieuw: de juiste webhost kiezen voor je website is een van de belangrijkste beslissingen die je neemt.

Het is een simpel feit dat als je een host of abonnement kiest dat niet de benodigde snelheid en capaciteit biedt, geen enkele inspanning van jouw kant je website van slechte prestaties kan redden.

De webhost speelt een grote rol in de prestaties van je site, en bij mobiel-eerst optimalisatie is snelheid nog crucialer dan anders.

Met dit in gedachten wil je een abonnement kiezen (of upgraden naar een) dat consequent hoge prestaties en minimale uitvaltijd kan garanderen.

Als je nog meer van je webhosting verwacht, overweeg dan een beheerde dedicated server – dit betekent dat je gebruikmaakt van een server die specifiek voor jouw site is gereserveerd.

Dit stelt je niet alleen in staat de server volledig naar wens aan te passen, maar biedt ook verhoogde beveiliging en snelheid – twee essentiële elementen voor een mobielvriendelijke site.

Enkele zeer populaire hosting bedrijven voor WordPress zijn:

Andere populaire hosting bedrijven:

Overige tips

Natuurlijk komt er nog veel meer bij kijken, om een website goed responsief te maken. Daarom heb ik nog een aantal tips voor je op een rijtje gezet.

Gebruik geen pop-ups

Het kan lastig en frustrerend zijn om deze op een mobiel apparaat te sluiten, wat kan leiden tot een hoog afhaakpercentage. Pop-ups kunnen het gebruiksgemak van een website aanzienlijk verminderen, vooral op kleinere schermen zoals smartphones en tablets.

Gebruikers vinden het vaak irritant als ze een pop-up moeten sluiten om de inhoud te kunnen zien, wat kan resulteren in een negatieve gebruikerservaring en mogelijk verlies van potentiële klanten.

Het is raadzaam om pop-ups te vermijden of ze op een subtiele en gebruiksvriendelijke manier te implementeren die de navigatie van de website niet hindert.

Ontwerp voor de ‘dikke vinger’

Navigatie op een touchscreen kan leiden tot onbedoelde klikken als je knoppen te groot, te klein zijn, of op een plek zitten waar een vinger probeert om de pagina te scrollen.

Bij het ontwerpen van een mobielvriendelijke website is het belangrijk om rekening te houden met de ergonomie en de manier waarop gebruikers interactie hebben met hun mobiele apparaten.

Dit betekent dat knoppen en interactieve elementen groot genoeg moeten zijn om gemakkelijk aan te tikken, maar niet zo groot dat ze per ongeluk worden geactiveerd tijdens het navigeren.

De plaatsing van deze elementen moet ook strategisch zijn, zodat ze de normale vingerbewegingen voor scrollen en navigeren niet in de weg zitten.

Een zorgvuldig ontworpen gebruikersinterface helpt om de gebruiksvriendelijkheid te verhogen en de kans op frustratie bij gebruikers te verminderen.

Optimaliseer titels en meta omschrijvingen

Bedenk dat je te maken hebt met minder schermruimte wanneer een gebruiker zoekt via een mobiel apparaat.

Om je website optimaal te presenteren in de zoekresultaten, is het belangrijk om zo beknopt mogelijk te zijn (zonder in te leveren op de kwaliteit van de informatie) bij het maken van titels, URL’s en meta-omschrijvingen.

Korte, maar krachtige titels en beschrijvingen trekken de aandacht en maken het de gebruikers gemakkelijker om snel de relevantie van je pagina te beoordelen.

Dit helpt niet alleen bij het verbeteren van de gebruikerservaring op mobiele apparaten, maar het kan ook de klikfrequentie (CTR) verhogen, wat weer bijdraagt aan een betere SEO-prestatie.

Zorg ervoor dat je belangrijkste trefwoorden op een natuurlijke manier worden opgenomen en dat elke titel en beschrijving duidelijk de inhoud van de pagina weergeeft.

Gebruik structured data

Vanwege de beperkte schermruimte op mobiele apparaten valt een zoekresultaat met uitgebreide snippets nog meer op dan op een desktop.

Het implementeren van Schema.org gestructureerde data op je website kan helpen om deze rijke snippets in zoekresultaten weer te geven. Dit verbetert de zichtbaarheid en aantrekkelijkheid van je website in de zoekresultaten.

Deze gestructureerde data maakt het voor zoekmachines eenvoudiger om de inhoud van je pagina te begrijpen en te categoriseren, wat resulteert in meer relevante en informatieve weergaven in zoekresultaten.

Denk aan sterbeoordelingen, evenementen, recepten of productinformatie die direct in de zoekresultaten getoond worden. Dit kan niet alleen de klikfrequentie verbeteren, maar ook de gebruikerservaring verrijken, aangezien mobiele gebruikers snel en gemakkelijk toegang hebben tot de belangrijkste informatie.

Optimaliseer voor lokale zoekopdrachten

Als je bedrijf een lokale dienst heeft, is het cruciaal om je mobiele content te optimaliseren voor lokale zoekopdrachten. Dit houdt in dat je je bedrijfsnaam, adres en telefoonnummer uniformeert en de naam van je stad en provincie of regio opneemt in de metadata van je website.

Zorg er ook voor dat je bedrijfsgegevens consistent zijn over alle online platforms en directories waar je vermeld staat. Dit verbetert de zichtbaarheid in lokale zoekresultaten en maakt het voor potentiële klanten eenvoudiger om je te vinden en contact met je op te nemen.

Vergeet niet om je bedrijf aan te melden bij Google Mijn Bedrijf en andere relevante lokale bedrijfsdirectories. Voeg ook lokale trefwoorden toe aan je content, zoals de naam van de stad of buurt waar je bedrijf gevestigd is, en integreer deze op natuurlijke wijze in de teksten van je website.

Dit zal helpen om je zichtbaarheid in lokale zoekopdrachten te vergroten en kan de lokale SEO van je site aanzienlijk verbeteren.

Enkele populaire bedrijfsdirectories zijn:

Geef voorrang aan belangrijke inhoud

Gezien de kleinere schermen van mobiele apparaten, is het essentieel om de meest belangrijke inhoud op je website voorrang te geven.

Zorg ervoor dat deze content gemakkelijk toegankelijk en duidelijk zichtbaar is. Dit houdt gebruikers betrokken en voorkomt dat ze je website uit frustratie verlaten.

Overweeg ook om minder belangrijke elementen, zoals secundaire navigatiemenu’s of minder relevante afbeeldingen, te minimaliseren of te verbergen op kleinere schermen.

Dit zorgt ervoor dat de focus op de belangrijkste berichten en functies van je site blijft. Gebruik heldere en beknopte koppen en vermijd lange, overweldigende tekstblokken.

Optimaliseer daarnaast de lay-out zodat de belangrijkste informatie altijd binnen het directe zichtveld van de gebruiker valt, zonder dat ze veel hoeven te scrollen.

Dit helpt om de gebruikerservaring te verbeteren en de kans te vergroten dat bezoekers vinden wat ze zoeken en langer op je site blijven.