WordPress website mobiel vriendelijk maken? | 2022 Handleiding

WordPress-formulier-maken-voor-website
Inhoudsopgave

Het aantal mobiele gebruikers neemt snel toe en er zijn geen aanwijzingen dat deze cijfers zullen dalen, althans niet in de nabije toekomst. Naarmate mobiele toestellen en hun mogelijkheden zich verder ontwikkelen, kiezen steeds meer gebruikers voor het “mobiele kanaal” om te surfen. Voor ondernemers die hun product en diensten onder de aandacht brengen is mobiel dus een essentieel platform geworden voor dergelijke zakelijke toepassingen.

Google’s laatste zoekmachine updates geven dan ook de voorkeur aan websites die responsive en dus mobiel vriendelijk van aard zijn. Het biedt hen betere rankings in tegenstelling tot degenen die niet responsive zijn. Je WordPress website mobiel vriendelijk maken is dus altijd een verstandige beslissing. In deze handleiding laat ik je zien hoe je dit voor elkaar kunt krijgen.

Waarom is een mobielvriendelijke website belangrijk?

Tegenwoordig is het belangrijker dan ooit om een mobiel vriendelijke website te hebben omdat app-gebaseerde diensten een groter publiek bereiken. De meeste mensen (en potentiële klanten) brengen veel tijd door op smartphones. Een andere reden om hier extra aandacht aan te besteden is dat websites die tijdrovend zijn in termen van laden op mobiele apparaten, slechte zoek rankings hebben laten zien. Maar ook de volgende factoren spelen een belangrijke rol in het belang van het hebben van een mobiel vriendelijke website:

1. Steeds meer smartphone zoekopdrachten

Statistieken helpen ons gegevens om te zetten in informatie, zodat we weloverwogen en rationele beslissingen kunnen nemen. Tot medio 2019 waren zoekopdrachten op mobiel en desktop meestal nek-aan-nek, waarbij mobiel om de paar maanden net aan de leiding kwam. In juni 2019 was mobiel echter goed voor 50,71% van de zoekopdrachten, terwijl desktop daalde naar 45,53%. Vanaf dat moment is de kloof tussen mobiele en desktop zoekopdrachten hetzelfde gebleven, waarbij mobiel de grootste optie is voor zoekopdrachten. Dit toont aan dat naarmate meer mensen 24/7 verbonden blijven als gevolg van het bezitten van een smartphone, desktop zoekopdrachten waarschijnlijk zullen blijven afnemen.

2. Een mobielvriendelijke website voor betere SEO

Wat houdt de eerder genoemde verandering in voor de zoekmachines? Op dit moment is slechts 13% van de websites in staat om dezelfde positie te behouden voor een bepaalde zoekopdracht op alle apparaten. Het kan dus zijn dat je goed scoort op desktop, maar niet eens op de eerste pagina met resultaten op mobiel verschijnt. Het is zelfs zo dat 30% van de pagina’s die op de eerste pagina van de desktop zoekresultaten verschijnen, niet in de top 10 resultaten op mobiel verschijnen.

Hoewel naar beneden zakken in de resultaten misschien niet al te belangrijk lijkt, hebben mobiele gebruikers andere gewoonten dan die op een desktop. Niet in de top drie resultaten vermeld worden kan dus een ernstig effect hebben op je mobiele verkeer.

Dit is een belangrijke reden waarom sites in 2020 ervoor moeten zorgen dat ze zo mobiel vriendelijk zijn als mogelijk en dat ze mobiele rankings in de gaten houden, in plaats van zich alleen op de desktop rankings te concentreren. Hoe maak je een website seo vriendelijk voor mobiel? Gebruik zoekmachine marketing statistieken om je optimalisatie prioriteiten te kunnen bepalen.

Website-mobiel-vriendelijk-maken

3. Mobiele gebruikers hebben vaak een koopintentie

Volgens een nieuwe studie van Google doet 92% van de consumenten die een smartphone gebruiken om een product of dienst te onderzoeken, binnen een dag een aankoop. Het onderzoek, zoals gerapporteerd door Ad Week, keek naar hoe mobiele apparaten de consument ten goede komen, waarbij bleek dat 76% van degenen die zochten naar een product dat in de buurt werd aangeboden, binnen een dag een gerelateerd bedrijf bezochten.

Google stelde ook vast dat de respondenten smartphones niet alleen gebruikten om onmiddellijke behoeften te vervullen, maar ook om later die dag of in de toekomst in een behoefte te voorzien. Je website mobielvriendelijk maken zal dus niet alleen leiden tot meer mobiele bezoekers, maar ook tot het genereren van meer omzet.

Zo maak jij jouw (WordPress) website mobielvriendelijk

Als het ontwerp en de lay-out van je website niet mobielvriendelijk zijn, zal je dus een groeiend aantal internetgebruikers mislopen die websites eerder bezoeken op apparaten met een kleiner scherm. Neem daarom de volgende richtlijnen in acht voor het maken van een mobielvriendelijke website.

1. Kies een responsive WordPress thema

Een WordPress website mobielvriendelijk maken vereist ten eerste een responsive WordPress thema. Responsive thema’s volgen de responsive web design aanpak die als doel heeft websites te creëren die een optimale gebruikerservaring bieden op verschillende apparaten en schermresoluties, waaronder desktop computers, tablets zoals iPad, smartphones en andere mobiele apparaten. Een responsive WordPress thema past zijn lay-out op soepele wijze aan op basis van de schermgrootte en resolutie.

Responsive thema’s bieden een betere leesbaarheid en bruikbaarheid op kleinere schermen zoals smartphones. Het voorkomt ook dat je een apparaatspecifieke mobiele versie moet maken. Vóór responsieve thema’s moesten sites een verschillende mobiele versie maken voor elk platform, zoals iPhone, Android, enz. Met responsive design kan een enkele site op verschillende apparaten worden bekeken zonder dat er extra thema’s of plugins nodig zijn.

Goede responsive WordPress thema’s voor het maken van een mobielvriendelijke website zijn:

  1. Divi WordPress Theme
  2. Astra WordPress Theme
  3. Elementor Pro Builder
  4. Phoenix Website IMU 
  5. Neve WordPress Theme
Website-sneller-maken-astra-pro-theme

2. Investeer in goede hosting

Kies voor een hosting provider die snel en betrouwbaar is zodat de laadtijd van je website paginas optimaal blijft. Ook voor een mobielvriendelijke website is het belangrijk dat je zo min mogelijk downtime ervaart en dus is het belangrijk dat je een webhost kiest die dit kan garanderen.

Goede hosting providers dragen voor een groot deel bij aan een mobielvriendelijke website. In dit geval zijn de volgende hosting providers zeker een aanrader:

  1. Cloud86 WordPress hosting Review
  2. Hostinger WordPress hosting review
  3. SiteGround WordPress hosting review
Cloud86-hosting-review

3. Maak jouw website sneller

Snelheid speelt een beslissende rol bij het creëren van de eerste indruk van een website. 47% van de bezoekers verlaat een website als het meer dan 3 seconden duurt om te laden. Aan de laadsnelheid van een pagina mag niet worden getornd.

Bovendien beschouwt Google een hoge snelheid als een positieve ranking factor. Om hier voordeel uit te halen, moeten webontwikkelaars alle nodige stappen ondernemen om de snelheid van een website te verhogen.

Om de laadtijd van een website te evalueren, kun je een website speed test uitvoeren op Google Pagespeed Insights. Voer simpelweg de URL in en klik op Start. Deze gratis tool controleert de snelheid van de website op meerdere bestaande browser apparaat combinaties en geeft vervolgens een score weer voor zowel mobiele als desktop platforms. Wil jij de snelheid van jouw website verbeteren? Dan kan ik je zeker aanraden om deze handleiding WordPress website sneller maken te lezen.

WordPress-website-mobiel-vriendelijk-maken-snelheid

4. Gebruik een overzichtelijke & makkelijk navigatie menu

Een mobielvriendelijk design heeft niet alleen te maken met lay-out en snelheid, maar ook met de gebruikerservaring. En voor bezoekers die een klein scherm gebruiken, zullen de vereisten voor navigatie uiteraard anders zijn.

De eerste en meest voor de hand liggende reden hiervoor is de grootte van het scherm zelf; de navigatie zal in die ruimte moeten passen zonder de pagina te domineren (tenzij je dat echt wilt). Een andere factor is dat de navigatie op de meeste mobiele apparaten moet worden aangetikt. Je duim is groter en minder precies dan een computermuis, dus de navigatie links moeten groter zijn. Dit geldt zelfs voor grote tablets zoals een iPad, waarvan de schermgrootte vergelijkbaar is met die van een desktop monitor, maar waarop nog steeds met de vinger wordt getikt in plaats van met een muis wordt geklikt. Zorg er daarom voor dat je navigatiemenu ergonomisch is en de gebruikerservaring complimenteert.

5. Optimaliseer afbeeldingen

Afbeeldingen zijn een standaard gegeven voor de meeste websites. Ze worden gebruikt voor esthetische doeleinden of om informatie over te brengen. Maar omdat afbeeldingen een vaste breedte en hoogte hebben, moeten er aanpassingen worden gemaakt wanneer ze worden weergegeven op het kleinere scherm van een smartphone.

Dit houd in dat je afbeelding responsive moet maken, zodat ze geschaald kunnen worden naar verschillende voor resoluties.Het comprimeren en het gebruik van het juiste format (jpg, gif of png) zijn evenzo belangrijk. Tevens kan het gebruik maken van ‘Lazy Loading’ een groot verschil uitmaken in de laadtijd van een webpagina.

Lazy Loading zorgt ervoor dat niet alle afbeelding bij het openen van een pagina geladen worden, maar naarmate de bezoeker verder naar beneden scrollt. Zelfs als je 100 productafbeeldingen op één pagina moet tonen, hoeven dus niet alle 100 afbeeldingen helemaal aan het begin te laden, omdat de gebruiker, bijvoorbeeld slechts 20 afbeeldingen tegelijk op zijn scherm kan zien. De overige 80 afbeeldingen kunnen dus later worden geladen. Zodra de gebruiker verder naar beneden scrollt op de pagina, kan je de volgende set afbeeldingen laden.

Website-sneller-maken-smush

Website mobiel vriendelijk maken: Hier gaat het vaak fout

Helaas zijn er nog steeds enkele veel voorkomende webdesign fouten die vermeden kunnen worden om een mobielvriendelijke website tot een waar succes te maken. Hier volgen enkele voorbeelden daarvan:

  • Te lange pagina’s: Sommige websites zijn niet ontwikkeld met de vereisten voor een mobiel apparaat in gedachten. De inhoud van desktop-vriendelijke websites is meestal verticaal geoptimaliseerd, voordat de grootte wordt aangepast om aan de behoeften van een mobiele telefoon te voldoen. De totale hoogte van een webpagina neemt dan ook toe op deze telefoons. Zo kan het dus gebeuren dat gebruikers herhaaldelijk moeten scrollen en je hierdoor hun aandacht kwijt raakt.
  • Knoppen dicht op elkaar: Een andere belangrijke factor om te overwegen is dat de knoppen groot genoeg zijn en niet te dicht op elkaar staan voor een mobiel apparaat met touchscreen. Op mobiele sites moeten knoppen gemakkelijk te selecteren zijn. Volgens de vuistregel moet er minstens 45 pixels ruimte zijn voor knoppen of tik-elementen. Hoe groter de knop, hoe beter het zal zijn.
  • Te lange tekst blokken: Niet alles heeft met snelheid te maken. Lange alinea’s tekst maken een mobiele site onleesbaar. Zorg ervoor dat je grote stukken tekst opdeelt met een scheidingsteken of voeg gewoon witruimte toe tussen elke paar zinnen. Je kunt ook afbeeldingen gebruiken om de tekst interactiever te maken, maar zorg ervoor dat je in dat geval geoptimaliseerde afbeeldingen gebruikt.
  • Te kleine lettertypes: Als een mobiele gebruiker het lettertype niet kan lezen, of als het lettertype zich niet automatisch aanpast aan de juiste grootte en opmaak, dan zal je ze namelijk al verliezen voordat ze een Call to Action voltooien. Kies dus de juiste lettertypes voor maximale leesbaarheid, zodat gebruikers met de minste inspanning, de meeste informatie uit je site kunnen halen.

WordPress website mobiel vriendelijk maken? Test jouw website hier

Google Search Console biedt een mobielvriendelijke testpagina aan waarmee je een website kunt bekijken op mobielvriendelijkheid naar Google’s maatstaven. Plak de URL van je website in en klik vervolgens op “Analyseren”. Binnen een paar seconden zal Google je vertellen of je website mobielvriendelijk is. Als dit niet het geval is, zullen ook meteen de redenen hiervoor aangegeven worden.

Website-mobiel-vriendelijk-maken-testen

Is een aparte website voor mobiel noodzakelijk voor een mobielvriendelijke website?

Er is een langdurige oorlog gaande over het mobiele web en deze kan worden samengevat met de volgende vraag: “Is er een mobiel web?” Dat wil zeggen, is het mobiele apparaat zo fundamenteel anders dat je er verschillende websites voor zou moeten maken, of is er maar één web waartoe we toegang hebben met behulp van een verscheidenheid aan verschillende apparaten?

Waarschijnlijk heb je wel eens eerder de “m.website.nl” url gezien; dit is een indicatie van een aparte mobiele website. Dit betekent dat de mobiele site op een totaal ander domein staat dan de desktop versie van je site. Aparte mobiele websites zijn speciaal ontworpen voor mobiele telefoons en zijn meestal heel anders dan de desktopversie van je website. Meestal wordt de inhoud tot een minimum beperkt en toont de mobiele website slechts een aangepaste versie van de informatie die op de volledige desktopversie van je site staat. Afzonderlijke mobiele sites tonen alleen de informatie die geschikt is bevonden voor mobiele telefoons, waarbij de meeste extra details worden weggelaten.

Dit is een ouderwetse aanpak en heeft een aantal nadelen die je niet uit het oog moet verliezen. Het onderhouden van een extra site levert meer kosten op en de content is vaak niet hetzelfde als de normale website waardoor gebruikers soms belangrijke informatie niet te zien krijgen. Google heeft onlangs geadviseerd geen aparte mobiele site te gebruiken en dat mobiele inhoud gelijkwaardig moet zijn aan desktop inhoud. Het maken van een responsive website die geschaald wordt naar verschillende schermen en resoluties is dus het beste alternatief om een website simpel mobiel vriendelijk maken.

Conclusie: Hoe website mobiel vriendelijk maken

Als jouw website (nog) niet mobielvriendelijk is, kunnen de problemen die hieraan ten grondslag liggen dan worden opgelost? Absoluut! Kunnen ze alleen ook snel en gemakkelijk worden opgelost? Misschien, misschien ook niet. Dit hangt namelijk af van de huidige staat van jouw website of webshop. 

In sommige gevallen zijn een paar kleine aanpassingen al voldoende. In andere gevallen kan het de beste optie zijn om een nieuwe website of webshop te laten bouwen. Weet je niet zeker in welke situatie in jouw geval van toepassing is? Neem dan vandaag nog contact op met Nolimit Webdesign voor een analyse van jouw website.

Bouw jij jouw website of webshop liever zelf? Dan zal ik je aanraden om gebruik te maken van mijn handleidingen, omdat ik hier uitgebreid in ga op alle punten uit deze blog!

Website mobiel vriendelijk maken - Veelgestelde vragen

Hoe maak je een website mobiel vriendelijk? Je maakt een website mobiel vriendelijk door jouw website of webshop responsive te maken. Hierdoor schaalt jouw website mee op de grootte van het scherm waardoor bezoekers op elk apparaat de beste gebruikservaring krijgen.

Hoe maak je een responsive website? Je kunt een website eenvoudig responsive te maken door te kiezen voor een goed WordPress thema. Denk in dit geval bijvoorbeeld aan een thema als Astra, OceanWP, Neve of Divi.

Tim-Gerrits

Tim Gerrits

Mijn naam is Tim Gerrits en ik heb een passie voor het bouwen van websites en webshops. Via deze blog help ik jou met het bouwen van jouw eigen website, webshop of online cursus. Daarnaast review ik ook WordPress thema’s, page builders en hostingpartijen zodat jij direct met de juiste tools van start kunt gaan!

Ook interessant

Binnen 2 uur eenvoudig jouw eigen droom website maken?

Ga jij deze kans echt laten liggen? Je kunt deze handleiding om binnen 2 uur jouw eigen droom website te maken nu tijdelijk gratis downloaden!

Handleiding-website-maken-ebook