Tegenwoordig vinden de meeste website bezoeken op de mobiel plaats. Daarnaast is een mobielvriendelijke website een belangrijke factor voor Google om je website goed vindbaar te maken (SEO). Een goede gebruikerservaring op mobiele apparaten is daarom essentieel. En wezenlijk anders dan je ‘gewone’ website op de desktop. Veel ondernemers denken vaak helemaal niet aan de mobiele versie van hun website. Terwijl dit eigenlijk precies het belangrijkste is om goed te hebben staan. In dit artikel vertel ik je daarom alles over het belang van een goede responsive website en vind je een stappenplan om jouw website zo aan te passen om ook van je mobiele bezoekers klanten te maken.
Wat is een responsive website?
Een responsieve website is een website die zich automatisch aanpast aan de grootte van het scherm waarop deze wordt bekeken. Ongeacht of het nu een desktopcomputer, een laptop, een tablet of een mobiel apparaat is.
Dit betekent dat de website er op elk apparaat goed uitziet en goed functioneert, zonder dat de gebruiker hoeft in te zoomen of horizontaal te scrollen.
De verschillen tussen een responsive en mobielvriendelijke website
Een mobielvriendelijke website is een layout van (delen van) een website die speciaal wordt gemaakt voor een telefoonscherm. Naast een al bestaande desktop-versie. Een soort aparte website dus.
Terwijl responsief betekent dat één website automatisch wordt aangepast aan de schermgrootte.
In dit artikel heb ik het over het maken van responsive websites in combinatie met je website mobielvriendelijk maken. Dat is in de meeste gevallen namelijk nodig om te zorgen dat je mobiele website een goede gebruikerservaring heeft.
Hoe ik zelf de gebruikerservaring van een responsive website aanpas
Hoewel ik altijd gebruik maak van een responsive WordPress theme, en daarmee de website in de meeste gevallen goed zichtbaar is op mobiele apparaten, pas ik vrijwel altijd bepaalde onderdelen van een website specifiek aan voor de mobiele zichtbaarheid.
Een responsive website betekent namelijk niet dat deze ook meteen gebruiksvriendelijk is.
Nu hangt het erg af van het WordPress theme dat je gebruikt wat je nog moet (en kunt) aanpassen en hoe je dat precies doet.
Mijn advies is in ieder geval dit: vertrouw niet blindelings op een responsive design. Bekijk altijd je website op je mobiel en tablet en kijk goed of alles goed staat en lekker loopt.
Vaak wordt de mobiele site compleet vergeten of wordt aangenomen dat de website sowieso goed is op de mobiel omdat deze responsief is. Onterecht, en een goed moment om de mobiele versie van je eigen website eens onder de loep te nemen.
Waarom is een mobielvriendelijke website zo belangrijk?
Een niet-mobielvriendelijke website loopt een hoop klanten mis, want a) mensen haken af en b) een website die niet is aangepast voor de mobiel wordt straks niet eens meer geïndexeerd in Google. Eigenlijk is je website mobielvriendelijk maken onderdeel van SEO én het hebben van een gebruiksvriendelijke website.
Als je je website-statistieken bekijkt zal je waarschijnlijk zien dat de meeste bezoekers je website bekijken op hun mobiel.
Toevallig is dat in mijn geval omgekeerd; mijn website wordt door ongeveer 45% van mijn bezoekers op de mobiel bekeken. Maar dit is bij de meeste websites andersom, met een gemiddelde van 60%. Het is overigens al de moeite waard om je website aan te passen voor de mobiel als ‘maar’ 20% van je bezoekers op mobiele apparaten kijkt. Dat zijn toch klanten die je misloopt als je mobiele website niet goed in elkaar zit.
Een slechte gebruikservaring
Het gedrag van je bezoeker is anders op de mobiel dan op de desktop. Als een website niet goed is geoptimaliseerd voor op de mobiel, kan dit leiden tot een slechte gebruikerservaring. Bijvoorbeeld omdat de site traag laadt, onoverzichtelijk is of slecht leesbaar. Dit kan zorgen voor een hoger bouncepercentage, waarbij je bezoeker op je website komt en meteen weer weg klikt. En lagere conversies, omdat bezoekers sneller geneigd zijn om je website te verlaten op zoek naar een pagina met een betere mobiele ervaring.
In andere woorden: een website die niet is geoptimaliseerd voor de mobiel kost je klanten in plaats van dat het je klanten oplevert.
Een responsive website & SEO
Wist je dat Google je website rankt op basis van je mobiele website? Sinds een aantal jaar is mobielvriendelijkheid één van de SEO-factoren die maken dat Google je website hoger of juist lager weergeeft in de zoekresultaten. Een website met een slechte mobiele gebruikerservaring wordt minder snel hoog in de zoekresultaten getoond. En is daardoor minder goed vindbaar voor potentiële klanten.
Een responsieve website zorgt dus voor hogere zoekresultaten, meer zichtbaarheid, meer verkeer naar je website en daardoor meer klanten en een hogere omzet voor je bedrijf.
Genoeg redenen om extra aandacht te besteden aan de mobiele versie van je website.
Stappenplan| Zó optimaliseer je een responsive website voor de mobiele telefoon
Het is belangrijk om te onthouden dat het ontwerpen van een responsive website niet alleen gaat over het aanpassen van de grootte van de afbeeldingen of tekst. Het gaat om het begrijpen van de unieke behoeften van mobiele bezoekers en het creëren van een ervaring die voor hen intuïtief en gemakkelijk te gebruiken is.
Om het juiste mobiele webdesign te kiezen om je doelgroep te bereiken en geïnteresseerd te houden.
Dit doe je zo:
Stap 1: Kies een responsive WordPress theme
Werk je met WordPress? Dan valt of staat alles met het WordPress theme dat je kiest. Hoewel tegenwoordig de meeste WordPress themes responsief zijn, zijn ze niet allemaal goed extra aan te passen voor mobiele apparaten.
Websites maken voor ondernemers doe ik zelf met het WordPress theme Impreza. Dit thema is niet alleen responsive, maar daarnaast ook nog geheel aanpasbaar voor elk device. Dus apart voor de desktop, tablets en de smartphone.
Andere resposive WordPress themes zijn:
- Astra Pro WordPress theme
- Soledad (WordPress theme voor bloggers)
- Divi WordPress theme
Stap 2: Je website maken
Ontwerp je website op de desktop voor de desktop. Daarna ga je kijken hoe je website er op de mobiel uitziet en aanpassen waar nodig. Dit is niet altijd even makkelijk in elk WordPress theme, dus kies het thema dat je alles laat aanpassen zoals je het wilt.
Stap 3: Optimaliseer je responsive website op deze elementen en functies
Het is altijd een goed idee om extra aandacht te besteden aan bepaalde elementen en functies op de mobiel. Ook al ziet het er op het eerste gezicht goed uit, ga deze punten zeker even langs om te kijken of alles goed staat.
⇒ Het lettertype op mobiele apparaten
Hoewel een responsive website design ervoor zorgt dat ook de tekst goed leesbaar is op mobiele apparaten, gaat dit nog regelmatig mis. Zo zijn hoofdtitels vaak veel te groot of de body tekst te klein. Geef de tekst bij voorkeur specifiek een andere grootte op de mobiel dan op de desktop.
⇒ Verhoog de website snelheid op mobiel
De laadtijd op mobiele apparaten is vaak wat hoger dan op de desktop. Besteed daarom extra aandacht aan de snelheid van je website op alle devices. Je website zo snel mogelijk maken doe je zo.
⇒ Verhoog de leesbaarheid op de mobiel
Op een klein en smal scherm lijkt een korte tekst op de desktop al snel heel lang. Dit los je op door nooit lange stukken tekst te schrijven, de teksten op te delen in korte alinea’s en duidelijke subkoppen. Daarmee verbeter je de leesbaarheid.
Denk daarnaast ook aan de regelafstand en witruimtes. Is de regelafstand niet te groot of te klein? En zitten er te grote of juist te kleine witruimtes tussen de alinea’s en andere elementen?
⇒ Maak de navigatie extra makkelijk
Zorg voor een eenvoudige en intuïtieve navigatie. Gebruik bijvoorbeeld een hamburgermenu om de navigatie te verkleinen en grote knoppen die gemakkelijk te bedienen zijn met een vinger. Zorg er ook voor dat knoppen en links niet te dicht op elkaar staan, dat maakt het klikken met de vinger op één van de twee lastiger.
⇒ Komt de opmaak goed over op mobiel?
Bepaalde elementen kunnen leuk zijn op de desktop maar werken totaal niet op mobiele devices. Bijvoorbeeld kopfoto’s met tekst erin of bewegende blokken. Er zijn ook elementen die bewegen of omdraaien als je er met de muis overheen gaat, die dus niets toevoegen op mobiele apparaten.
Geef deze onderdelen een andere opmaak op de mobiel, pas ze aan of vervang ze voor een mobielvriendelijke versie.
Denk ook aan wat je wilt van je bezoeker. Op de desktop ziet je bezoeker meer content in één oogopslag of na een beetje scrollen. En zal dus sneller op een knop naar je gratis e-book klikken die in het midden van je website staat. Op mobiele apparaten moet je bezoeker veel verder scrollen om alles te zien. Plaats de meest belangrijke onderdelen daarom zo snel mogelijk zichtbaar op de telefoon.
⇒ Test op verschillende apparaten
Test de website op verschillende mobiele apparaten en zorg ervoor dat de website goed werkt op onder andere zowel Android- als iOS-telefoons. En op een tablet en een smartphone. Bij veel WordPress editors kun je de editor laten weergeven in de vorm van een telefoon. De ervaring leert echter dat het er daarop lang niet altijd zo uitziet als op een echte telefoon. Controleer dus altijd.
Onthoud altijd dat een responsive design niet betekent dat de website ook een goede gebruikerservaring heeft. Er zijn bijna altijd dingen die geoptimaliseerd moeten worden voor mobiele apparaten.
⇒ Analyseer en optimaliseer
Google Analytics en Google Search Console zijn ook hier je beste vrienden. Analyseer de prestaties van de website op mobiele apparaten en optimaliseer waar nodig. Gebruik Google Analytics onder andere om te zien hoeveel mobiele bezoekers je website heeft en hoe lang ze op de website blijven. In Google Search Console kun je zien of de website goed is geoptimaliseerd voor de mobiel of dat er fouten zijn. Ga hier naar de Google Search Console Mobile Friendly check. En zie meteen of je website voldoende geoptimaliseerd is voor mobiele apparaten.
Mobielvriendelijk bloggen: hoe doe je dat?
Een responsive website is niet alleen belangrijk voor de pagina’s, maar ook zeker voor de blogs. In tegenstelling tot de rest van je website pas je een blog niet apart aan voor mobiele apparaten, maar houdt je hier simpelweg tijdens het schrijven rekening mee.
Deze vorm van schrijven is niet alleen prettig voor je mobiele lezers, maar ook voor mensen die je blog op de desktop bezoeken.
Daarnaast wordt je blog meteen veel beter geoptimaliseerd voor zoekmachines als je je tijdens het schrijven richt op je mobiele lezer. Je past dan eigenlijk automatische al veel regels van SEO toe. Hiermee maak je je blogs niet alleen fijn leesbaar op alle apparaten, maar ook meteen beter vindbaar in Google.
Drie vliegen in één klap.
7 Tips om je blog op een mobielvriendelijke manier te schrijven.
En je deze daardoor meteen al voor een groot deel SEO-proof maakt.
1. Schrijf korte alinea’s.
Als je op de desktop leest wordt je al moe bij het zien van lange lappen stukken tekst, maar op de mobiel is dit effect nog veel groter. Er wordt immers meer tekst op een kleiner oppervlak gepropt. Schrijf daarom in korte alinea’s om de leesbaarheid te verbeteren en de aandacht van je lezer vast te houden.
2. Gebruik korte zinnen.
Korte zinnen zijn gemakkelijker te lezen op een klein scherm en helpen de lezer de inhoud sneller te begrijpen. Het beste is om af te wisselen met af en toe een langere zin.
3. Subkoppen zijn je beste vrienden.
Gebruik subkoppen om de inhoud in te delen in behapbare secties. Dit maakt de inhoud gemakkelijker te scannen en te begrijpen. Niet alleen op de mobiel, maar ook op de desktop. Daarnaast zijn SEO-geoptimaliseerde subkoppen een heel goede manier om je website beter vindbaar te maken in Google.
4. Gebruik afbeeldingen en video’s.
Afbeeldingen en video’s zijn een geweldige manier om de aandacht van de lezer te trekken en de inhoud te verduidelijken. Zorg er wel voor dat de afbeeldingen en video’s zijn geoptimaliseerd voor mobiele apparaten om de laadtijd te verminderen.
5. Lees op mobiele apparaten.
Na publiceren is het altijd een goed idee om je blog nog een keer door te lezen, maar doe dit ook zeker op de mobiel. Dat is de makkelijkste en snelste manier om te zien of de inhoud goed wordt weergegeven en of je je blog goed leesbaar hebt geschreven.
6. Zijbalk vs footer.
Heb je op de desktop een zijbalk naast je blog? Dan wordt deze op de mobiel meestal direct onder de blog getoond. En daarna meteen de footer van je website. Op de desktop is het niet zo heel erg als je bovenin de zijbalk bijvoorbeeld iets over jou hebt staan. Of je Instagram feed. En dit herhaalt in de footer. Op de mobiel echter worden de zijbalk en footer dus direct onder elkaar getoond, en krijg je dubbele elementen als je hetzelfde in de zijbalk als in de footer zet. Gebruik een eventuele zijbalk dus voor andere dingen dan de footer, om herhaling te voorkomen.
7. De lettergrootte.
Het klinkt zo logisch: een kleiner scherm dus een kleiner lettertype. Maar zo werkt het precies niet. Een te kleine letter is vermoeiend lezen op de mobiel. Maak deze dus groot genoeg zodat het aangenaam is voor de ogen.
Als je deze tips in acht neemt worden zowel je lezers op de mobiel en op de desktop als Google heel blij.
Heb jij je website mobielvriendelijk gemaakt?
Wil je meer inspiratie en praktische tips ontvangen over ondernemen, succesvol bloggen of het maken van een winstgevende website? Meld je dan hier aan!
In dit artikel staat een affiliate link. Klik hier voor meer informatie.
