15 tips voor een gebruiksvriendelijke mobiele WordPress website

Een gebruiksvriendelijke mobiele WordPress website is de sleutel tot het converteren van bezoekers naar klanten. Lees hier wat je kan doen om de gebruikerservaring op je website te verbeteren.

Waarom is een gebruiksvriendelijke mobiele WordPress website een must?

Het grootste deel van de bezoekers van websites is tegenwoordig mobiel. De laatste cijfers spreken over rond de 60% mobiele bezoekers, afhankelijk van het type website. Aangezien veel van deze bezoekers de website moeten laden over 4G, is het lastig om de website snel en aantrekkelijk tegelijk te houden.

Snelheid is van levensbelang. Uit onderzoek blijkt dat 53% van de bezoekers afhaakt als de laadtijd van een pagina meer dan 3 seconden is op mobiel. Veel van deze tips gaan daarom naast gebruiksvriendelijkheid op de pagina, ook over de snelheid van je mobiele WordPress website.

15 tips voor een gebruiksvriendelijke mobiele WordPress website

Lees hieronder 15 tips voor een gebruiksvriendelijke mobiele WordPress website. Deze tips helpen je om je gebruiker een prettige, snelle en duidelijke beleving te geven op elk mobiel apparaat.

Responsief thema

Het moge duidelijk zijn dat er tegenwoordig diverse soorten bezoekers zijn. Een duidelijke must-have is daarom een thema dat responsief (responsive) is: geschikt voor gebruikers op PC, laptop, tablet en mobiel. Omdat al deze verschillende devices ook nog eens verschillende schermgroottes en resoluties hebben, is het zaak om ervoor te zorgen dat je website er overal goed uitziet en goed functioneert.

Als je Google Chrome gebruikt kan je dit simuleren door CTRL+F12 te klikken in de browser (Rechtermuisknop -> inspect op Mac). Er opent zich dan een venster rechts of onderaan de pagina. Hier zie je een icoontje met mobiel staan. Als je daar op klikt kan je de website in verschillende groottes tonen. Deze afmetingen kan je zelf kiezen, of je kan kiezen voor een van de voorgedefinieerde mobiele devices zoals Iphone X of Galaxy S5.

Deze inspectietool is slechts een simulatie. Wil je een website testen op een echt device? Dan kan je de tool Browserstack gebruiken. Hiermee kan je verschillende devices en verschillende OS versies testen zoals deze in werkelijkheid werken. Helaas is deze tool (en ook de meeste alternatieven) niet gratis. Wel kan je vaak een beperkt aantal tests per maand doen met een gratis account.

Goed leesbaar lettertype

Een mobiele telefoon is vrij klein en kan voor veel gebruikers moeilijk te lezen zijn als het lettertype niet gebruiksvriendelijk is of als het lettertype te klein is. Gebruik een lettertype van minstens 16px om goed leesbaar te zijn op de kleinste mobiele telefoons. Zelf hanteren wij een lettertype van 20px.

Korte paragrafen

Om een gebruiker niet te overprikkelen met teveel tekst is het belangrijk om korte paragrafen te gebruiken, zodat er genoeg adempauze zit tussen de teksten die men leest. Zodoende verdwaald men niet in de hoeveelheid informatie. Ook is het goed om de teksten af te wisselen met andere elementen zoals: citaten, tabellen, foto’s en videomateriaal.

Aangezien mensen op mobiel vaak meer scannen dan echt lezen, is het goed om met duidelijke koppen te werken die een samenvatting geven van de paragraaf.

Duidelijke navigatie

Navigatie is een belangrijk onderdeel van je website. Dit is al het geval bij een website op desktop grootte, maar voor mobiel verdiend dit nog een stukje extra aandacht. Omdat de ruimte beperkt is, is het verstandig om goed na te denken over de inhoud. 

Het kan bijvoorbeeld slim zijn om het hoofdmenu op mobiel aan te passen, zodat slechts de belangrijkste onderdelen van je website zichtbaar zijn. Vanuit die hoofdonderdelen kan vervolgens weer worden doorgelinkt naar de verschillende subonderdelen.

Tegenwoordig is het haast standaard om bij een mobiele website een hamburger menu te gebruiken. Dit is een menu met 3 streepjes waar je op kunt klikken en het hoofdmenu vervolgens toont over de website heen. Zie hieronder een voorbeeld hoe dit eruit ziet bij de mobiele website van Webconstructions Delft.

Mobiel menu uitgeklapt

Mobile first CSS

Google is tegenwoordig fan van Mobile-first, dit houdt in dat zij controleren of websites zijn ontworpen met als eerste de mobiele gebruiker in gedachten. Dit houdt in dat de CSS is opgebouwd vanuit een mobiel device geredeneerd en dat overige devices uitzonderingen zijn op de regel. 

Als CSS op die manier is geprogrammeerd is er dus een minimaal aantal regels code voor de styling op mobiel. Zodoende is er een zo klein mogelijke laadtijd voor het inladen van de styling regels voor de mobiele website. 

Hieronder een voorbeeld van code die niet is geoptimaliseerd voor mobiel en een voorbeeld waarbij de CSS wel is geoptimaliseerd voor mobiel.

 

Je ziet hier dat de code voor mobiel, de uitzondering is: alle regels worden eerst ingeladen en daarna wordt een deel overschreven voor mobiel. Dit zorgt er dus voor dat er een grote hoeveelheid van de styling regels overbodig wordt ingeladen. 

In deze CSS, zijn juist de grotere schermen de uitzondering. Zodoende wordt voor mobiel alleen het eerste gedeelte van de code ingeladen en is er dus een minimaal aantal regels code vereist.

CSS bestanden samenvoegen

Bij complexere websites worden vaak meerdere CSS bestanden gebruikt om elk onderdeel apart te stylen. Dit heeft als grote voordeel dat het een overzichtelijk geheel blijft voor programmeurs. Voor een browser zorgt dit echter voor meer laadtijd. Elk bestand moet afzonderlijk worden ingeladen en geanalyseerd. Door CSS bestanden samen te voegen tot één bestand kost dit minder laadtijd. 

Binnen WordPress zijn er verschillende plugins beschikbaar die dit voor je kunnen automatiseren voor je. Een voorbeeld hiervan is de plugin Autoptimize.

CSS comprimeren

In de bovenstaande CSS code is er nog steeds veel witruimte tussen de verschillende codes. Ook alle spaties en witregels worden door een browser geanalyseerd. CSS compressie zorgt ervoor dat er geen karakter te veel staat in de code en er dus een minimale laadtijd is.

Hieronder zie je een voorbeeld van hoe een gecomprimeerde CSS code eruit ziet.

Ook hier zijn er weer diverse WordPress plugins beschikbaar die dit voor je kunnen automatiseren. WP optimize is hier een goed voorbeeld van.

JavaScript bestanden samenvoegen

Net zoals bij CSS bestanden, is het mogelijk om JavaScript bestanden samen te voegen. Door minder bestanden te hebben, zijn minder aanvragen naar de server nodig, wat er dus voor zorgt dat je website sneller kan laden. 

Let er wel op dat alle functionaliteiten nog goed blijven werken na het samenvoegen, dit kan soms voor problemen zorgen.

JavaScript comprimeren

JavaScript kan net als HTML en CSS worden gecomprimeerd om een zo klein mogelijk bestand in te laden op jouw mobiele website.

JavaScript verlaat laden

JavaScript is de taal die voor de interactie met de gebruiker zorgt. Een popup met hierin een formulier wordt bijvoorbeeld getriggerd door JavaScript. Aangezien JavaScript pas nodig is nadat de pagina geladen wordt (je bezoeker kan dan immers pas interactie hebben met de website), is het een idee om de JavaScript op je website pas als allerlaatste in te laden. Het voordeel hiervan is dat de rest van de website reeds zichtbaar is. 

Google noemt dit Largest Contentful Paint, het moment dat het grootste gedeelte van de pagina zichtbaar is voor de bezoeker. Dit is een onderdeel waarop Google de snelheid van mobiele websites beoordeeld. 

Wil je weten hoe jouw website momenteel scoort qua snelheid? Kijk dan eens op Google Pagespeed Insights, dit geeft je waardevolle inzichten over waar jouw website nog kan verbeteren.

Ook hier zijn er weer diverse plugins die JavaScript verlaat voor je kunnen inladen. Onze favoriete plugin voor het comprimeren en verlaat laden van CSS, Javascript is WP Rocket, een betaalde plugin die al deze complexe zorgen wegneemt.

HTML comprimeren

Net als bij CSS, kan ook de HTML worden gecomprimeerd. Alle overbodige witruimte kan worden verwijderd zodat zo min mogelijk regels code hoeven te worden ingelezen en geanalyseerd door de browser. Opnieuw een kleine winst te behalen op dit punt.

Caching

Het is verstandig om een caching plugin te gebruiken. Dit zorgt ervoor dat je website gecached wordt aangeboden. Dit houdt in dat veel van de onderdelen op je website worden opgeslagen en statisch worden aangeboden. Dit kan de laadtijd enorm verbeteren. Een goede caching plugin is dan ook een essentieel onderdeel van je gebruiksvriendelijke mobiele WordPress website.

Wij adviseren om de betaalde plugin WP Rocket te gebruiken voor caching. WP Rocket wordt door velen gezien als de best beschikbare caching plugin voor WordPress. Het pakket is gemakkelijk in gebruik en biedt vele handige opties om je website te versnellen.

Kies je liever voor een gratis plugin? Dan zijn de plugins WP Super Cache, WP Fastest Cache (beginners) en W3 Total Cache (gevorderden) goede alternatieven.

Geoptimaliseerde afbeeldingen tonen

Als je naar de grootte van de website kijkt, bestaat een groot gedeelte hiervan uit afbeeldingen. Kwalitatief goede afbeeldingen kunnen enorm veel ruimte in beslag nemen. Soms zijn foto’s wel 15 MB. Als deze foto’s niet worden geschaald voor gebruik worden ze dus in zijn geheel ingeladen wanneer een gebruiker de website bezoekt. Het is duidelijk dat dit funest is voor de snelheid van de website.

Er zijn een aantal dingen die je kan doen om de grootte van de foto’s te verkleinen.

Schalen van de foto’s

De foto’s hebben een resolutie: de afmetingen waarin deze gemaakt zijn. Vaak worden deze foto’s helemaal niet op die grootte gebruikt op een website en al helemaal niet op een mobiele website. Het is daarom raadzaam om de afmetingen van de foto’s aan te passen. Sowieso gebruik je eigenlijk nooit foto’s die groter zijn dan 2000 pixels breed, dus grotere foto’s kan je direct schalen.

Dit kun je doen door een van de vele gratis online- en desktop tools. Online bijvoorbeeld met PicResize.

Fotocompressie

Naast het schalen van foto’s kan je foto’s ook enorm verkleinen door fotocompressie toe te passen. Alle onnodige informatie wordt dan uit het grafische bestand gefilterd en ook de kwaliteit van de foto kan naar beneden worden bijgesteld.

Bij het afdrukken van foto’s is het belangrijk dat de kwaliteit zo optimaal mogelijk is. Bij het bekijken van dezelfde foto op een mobiele website is dit een stuk minder belangrijk en kan fotocompressie voor een groot verschil in grootte van het bestand zorgen. Vaak is het kwaliteitsverschil voor het blote oog op een mobiele telefoon helemaal niet zichtbaar.

Voor het online comprimeren van foto’s adviseren wij de plugin imagify te gebruiken. Hiermee kan je 25 MB aan fotomateriaal per maand gratis laten comprimeren. Daarnaast hebben zij goede tarieven om compressie MB’s per GB in te kopen. Voor de meeste sites geldt dat je ruim genoeg hebt aan het eenmalige 1GB plan voor $9.99. 

Een ander voordeel van Imagify, is dat zij foto’s kunnen plaatsen in WebP formaat.

WebP formaat

WebP is een nieuwe generatie foto formaat. De definitie van Wikipedia:

WebP (uitgesproken als Weppie) is een vrij bestandsformaat voor het opslaan van afbeeldingen. Het maakt gebruik van beeldcompressie. Het formaat is ontwikkeld door Google en maakt afbeeldingen gemiddeld 39% kleiner dan beelden opgeslagen met de veelgebruikte standaard JPEG-compressie en tot 64% kleiner dan animated GIF en 45% kleiner dan PNG.

Deze vorm van compressie is dus door Google zelf ontwikkeld en geeft een enorme reductie is grootte van de verschillende afbeeldingen. Dit is iets waar Google ook op hamert in zijn analyse van mobiele websites. Uiteraard is het aan te raden om de standaard van Google te implementeren.

AMP Pagina’s

Een ander formaat dat Google heeft ontwikkeld is AMP (Accelerated Mobile Pages). Zoals de naam al zegt, biedt deze standaard mobiele pagina’s aan in een versneld formaat. Dit houdt in dat slechts nog de basisopzet van een pagina wordt getoond en deze in een speciaal gecachte opzet toont aan de bezoekers. 

AMP is supersnel en is dus een uitermate geschikte manier om te zorgen voor een gebruiksvriendelijke mobiele WordPress website. 

De gratis WordPress plugin AMP for WP biedt de mogelijkheid om jouw pagina’s, blogberichten en Custom Post Types (CPT) als AMP versie aan te bieden. Deze AMP versies worden getoond in een aparte URL: /amp. Zo is dit artikel ook als AMP versie terug te vinden.

Google toont AMP resultaten afzonderlijk in de zoekresultaten op mobiel met een bliksemschicht om aan te geven dat dit een supersnelle AMP pagina betreft. 

Bonus Tip: klik en bel direct links

Tegenwoordig is het ook mogelijk om van een telefoonnummer een link te maken. Als je hierop klikt, vraagt de browser toestemming om het telefoongesprek te starten. Deze manier maakt het voor de gebruiker nog makkelijker om over te gaan tot telefonisch contact en kan dus helpen om de conversie van je website te verhogen. 

Bonus Tip 2: CDN (Content Delivery Network)

Heb je een website met internationale klanten? En wil je ervoor zorgen dat je mobiele website overal ter wereld snel laad? Dan is het gebruik van een CDN wellicht een goede optie voor jou.

Je website wordt gehost vanaf een server op een bepaalde locatie (waarschijnlijk in Nederland). Hoe dichter je bij die locatie bent, des te sneller de website geladen kan worden. Als je aan de andere kant van de wereld bent, doet de informatie er immers even over om te worden opgehaald van de Nederlandse server.

Een CDN biedt een website aan vanaf verschillende servers in de wereld. Hierbij wordt de website aangeboden door de server die het dichtst bij jouw huidige locatie zit. Zodoende wordt je mobiele website op de zo snelst mogelijke manier getoond.

Samenvatting

Het opzetten van een gebruiksvriendelijke mobiele WordPress website is nog best een karwei. Er zijn veel dingen waar je aan moet denken om je bezoeker een fijne gebruikservaring te geven en een supersnelle en duidelijke website te tonen.

Toch is het belangrijk om jouw bezoekers een zo prettig mogelijke ervaring te geven op je mobiele website. Dit is immers het visitekaartje van jouw bedrijf. Zoals aan het begin van dit artikel al genoemd: meer en meer mensen bezoeken een website met mobiel. Ga daarom met je mobiele website aan de slag! Er valt enorm veel te winnen zoals je hieronder kunt zien:

Wil je liever dat wij jouw mobiele WordPress website gebruiksvriendelijker maken en je website optimaliseren voor je bezoekers? Neem dan vrijblijvend contact op voor een offerte op maat.