Tips voor een mobiel vriendelijke website

Aangepast op: 2 dec, 2022
Onderwerp:

De Google ranking van jouw website gebeurd op basis van je mobiele website. Als je al heel lang een website hebt is de kans groot dat er indertijd alleen gekeken is naar een goede weergave voor desktop. In dit blog een aantal tips.

In dit blog een aantal tips. Zoals het verkleinen van je afbeeldingen. En het aanmaken van speciale weergaves voor mobiel.

Gebruiksgemak op mobiele apparaten

Hoe gebruiksvriendelijker je website des te beter je vindbaarheid in de Google zoekresultaten.

Begin 2018 is Google begonnen om de mobielvriendelijkheid van je website mee te rekenen in zijn ranking. Wil je weten hoe jouw website er aan toe is? Je kan het hier testen of jouw website mobielvriendelijk is >>

Acht tips voor een goede mobiele weergave van je website

#1 Zorg dat je makkelijk terug kunt naar de homepage

Zorg dat je logo terug linkt naar de homepage.

#2 Gebruik een responsive en adaptive thema

Jouw website moet zich aanpassen aan het type apparaat waar het op wordt bekeken. Gebeurd dit niet dan heb je geen responsive theme en raad ik je aan een andere te gebruiken.

Daarnaast zorg je dat je voor mobiel een snellere laadtijd krijgt door bepaalde afbeeldingen niet te laden of te switchen naar kleinere (in kb) afbeeldingen.

Responsive is de meest bekende term, maar steeds vaak hoor je ook de term adaptive. De eerste houd in (kort door de bocht) dat je website mee verkleind of vergroot naar gelang je browser scherm verkleind of vergoot. En bij adaptive design zie je dat de website zich aanpast aan het apparaat waar deze op word getoond. Als je handmatig je browserscherm verkleind of vergoot zie je dat bij bepaalde formaten (breakpoints) de blokken van je website verschieten. Dan gaat het bijvoorbeeld van 3 kolommen naar een 2 kolommen op een tablet, en 1 kolom op mobiel formaat. Als je geluk hebt kan je dit instellen als je een pagina gaat opmaken in rijen en kolommen.

2 kolommen op tablet (links zie je mijn pagebuilder)
4 kolommen voor desktop (links zie je mijn pagebuilder)

In sommige thema’s kan je er zelfs voor kiezen een hele andere layout te tonen, blokken met informatie weglaten of juist wel te tonen. Of je menu veranderen in een mobiel uitklapmenu (hamburgermenu). De websites die ik maak met het Yootheme Pro thema hebben standaard dit responsive en adaptive gedrag. Bij alle widgets die je plaats kan je aangeven of je ze wel of niet wil tonen op een mobiel, tablet of desktop. Of het aantal kolommen wijzigen.

#3 Houd je bezoekers op je website

Vaak gebruik je voor externe links de optie om ze in een nieuw tabblad te openen. Je browset dan verder op een ander tabblad waardoor je de weg naar jouw website kwijt raakt. Zorg voor een goede balans met het plaatsen van externe linkjes.

# 4 Zorg dat de call-to-actions goed in beeld staan

Zet de trigger tekst en button op de foto ipv er onder. Qua laadtijd zou een kleurvlak nog beter zijn.

#5 Menu-items kort en bondig houden

Kies voor een speciaal menu voor je mobiel. Dit heet een hamburgermenu (3 streepjes), zodat alle menu-items in beeld staan. En zet er het woordje “menu” naast. Je kan ook een tweede menu aanmaken en daar een verkorte lijst van menu-items opzetten.

Zorg dat de benaming duidelijk is en je bezoeker snel naar de juiste pagina kan navigeren.

#6 Zorg dat er geen pop-ups over het scherm staan

Leuk zo’n pop-up, maar op mobiel blokkeert hij het zicht op je hele website.

#7 Zorg dat je formulier goed werkt

Niks irritanter dan een formulier wat je niet kan verzenden maar geen melding geeft van waar de fout zit of ergens iets ontbreekt. Houd het compact. Overweeg om het formulier er uit te halen als het geen toegevoegde waarde heeft.

# 8 Zorg voor relevante zoekresultaten

Soms is het makkelijker op mobiel om de zoekfunctie te gebruiken i.p.v. door de website te navigeren.

Een goede zoekfuctie gebruikt auto aanvul, verbeterd typefouten en doet zoeksuggesties.

Zorg dat hij duidelijk in beeld komt niet verstopt in het menu. De standaard zoekfunctie van WordPress is niet altijd optimaal. Hiervoor zou je dan de plugin WP search voor kunnen gebruiken. Een bijkomend voordeel is dat dit inzichten oplevert over wat men zoekt.

Een goed thema heeft de optie om zelf een plek te kiezen.

Veelgemaakte fouten

In veel gevallen is het thema geschikt voor mobiele weergave. Maar plaatst men grote foto’s, sliders of slideshows pop-ups of video’s bovenin de pagina. Zelf plaats ik die ook, maar ik let wel op de laadtijd. Vaak zie ik dat hier te grote foto’s worden geplaatst die voor mobiel verkleind moeten worden. Mijn advies is om te kijken naar het aantal Kb’s van een foto en deze als jpg voor web te plaatsen. Wil je zelf proberen het aantal kb’s van je foto’s te verkleinen? Lees hierover dit blog: afbeeldingen te verkleinen.

Daarnaast is het in sommige gevallen beter om voor mobiel en tablet een aparte weergave aan te maken. Dus twee content blokken. De een is alleen zichtbaar op grote apparaten en de ander voor de kleinere.

Weergave voor desktop
Weergave voor mobiel

Sliders en slideshows

Ze zien er heel mooi uit, maar vragen ontzettend veel van je laadtijd. Als je dit gegeven zet tegenover het feit dat veel mensen niet de tijd nemen om alle slides te bekijken. Dan lijkt het me een logische keuze om deze te weren bovenin je pagina. Heb je Lazy load aangezet in je website dan kan het zelfs betekenen dat bezoekers eerst een wit vlak zien totdat alles geladen is.

Pop-ups

Over pop-ups kan je enorme discussies starten. De een vind ze super irritant en de ander ziet meer de voordelen. Als je een pop-up gebruikt, zorg dan dat je deze niet direct laat inladen maar

Laadtijd

Waarom is laadtijd nu zo belangrijk? Dit is vanwege de beleving van de bezoeker, maar ook voor de ranking van je website in Google. Snel ladende website krijgen meer punten dan niet goed ladende websites. Bedenk wat je zelf zou doen als een pagina maar blijft laden. Dan ga je toch naar de volgende website?

De laadtijd kan ook liggen aan de server van je hostingpartij. Hier zit heel veel verschil. Het is wijs om een hosting pakket te kiezen welke geschikt is voor WordPress. Maar ook goed scoort op laadtijd. Ik ben in het verleden overgestapt van hostingpartij, en mijn website laad nu echt stukken sneller.

En hier vind je een test om je laadtijd te checken.

Andere redenen waarom een website langzaam is kan komen door afbeeldingen, externe scripts, slechte code van plugins, instellingen van je WordPress website.

Scripts

Je zult in de resultaten zien dat veel laadtijd op gaat aan scripts voor bijvoorbeeld een Facebook Pixel, de Google Tag manager, misschien een pop-up van MailChimp, Google Fonts. Overweeg of je het allemaal nodig hebt, en zo ja wat je kan laten verbeteren. Maar ook voor alle CSS en javascript bestanden vragen veel laadtijd.

Installeer een goede caching plugin

Een goede plugin om je website sneller te maken is WP Rocket, maar dit is een betaalde plugin. Als je de instellingen goed zet verbeterd dit de laadtijd gigantisch. Een gratis alternatief is W3 Total Cache. Overigens is het instellen vaak een klusje voor de ervaren website bouwer. Maar je kan er uiteraard eerst zelf ook mee experimenteren.

Google Search Console

Log eens in in je Google Search Console, hier vind je interessante rapportages (onder het kopje prestaties) over je website. Hier vind je ook hoeveel personen daadwerkelijk je website op mobiel bekijken. In mijn geval is desktop nog steeds populair. Onder het kopje gebruiksgemak vind je verbeterpunten.

YOOtheme paginabouwer

Dit stukje is speciaal voor de ondernemers die het YOOtheme thema gebruiken. Of nog op zoek zijn naar een nieuw thema. Via een online training kan jij hier ook mee aan de slag.

Met een pagebuilder kan je vrij makkelijk een pagina bij elkaar klikken en slepen. Met de YOOtheme builder is het ook mogelijk om bestaande pagina’s aan te passen voor mobiel. Door bepaalde instellingen aan te passen zoals je in de video hierboven zag. Maar je kan ook bepaalde elementen uitzetten op mobiel. En dan kan je redelijk snel de gewenste aanpassingen doen.

Heb je een template wat gebruik maakt van UIkit class namen dan kan je die gebruiken om bepaalde blokken op zichtbaar en onzichtbaar te zetten. In onderstaande video gebruik ik de classes uk-hidden@s en uk-visible@s

Photo by Paul Hanaoka on Unsplash

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Post- en vestigingsadres

Timmermeesterslaan 44 8014 EM Zwolle

Bezoekadres / Kantoor
Ik heb momenteel een flexplek bij verschillende verzamelgebouwen.

Btw-ID NL001413297B10
KVK 53368959

Let op: alle genoemde prijzen op deze website zijn excl. 21% btw

Contactgegevens

Fotografie

De meeste foto's zijn gemaakt door Marieke Vogelzang van Time to shine. Beelden zijn eigendom van Marieke en mogen niet gebruikt worden zonder toestemming.

Overige foto's komen van Unsplash of zijn in eigen beheer gemaakt met toestemming van mijn klanten.