Ben jij een starter en wil je zelf aan de slag? Lees dan hier verder>>

Mobiel vriendelijke website

Aangepast op: 30 nov, 2022

De meeste WordPress thema’s van nu zijn wel mobiel vriendelijk. Dit moet ook wel want steeds meer mensen gebruiken hun mobiel of tablet om een website te bekijken. Hoe ziet die van jou er uit?

Er zijn nog een heel aantal zaken waar je zelf op kan letten als eindgebruiker. In dit blog een aantal tips. Zoals het verkleinen van je afbeeldingen. En het aanmaken van speciale weergaves voor mobiel.

Foto door Jenny Ueberberg on Unsplash

Responsive en/of Adaptive design

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.

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 it 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.

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 >>

Hieronder een aantal tips voor je mobiele weergave.

#1 Zorg dat je makkelijk terug kunt naar de homepage

Zorg dat je logo terug linkt naar de homepage. Kies voor een hamburgermenu, zodat alle menu-items in beeld staan.

#2 Gebruik een responsive thema

Soms moet je kiezen voor een pro versie, maar zorg dat je een responsive thema kiest. Bekijk de demo op desktop en mobiel. En probeer uit te zoeken wat de mogelijkheden zijn voor verschillende weergaves. Hier lees je wat responsive is. De templates van tegenwoordig zijn dat allemaal. Mijn favoriete website hiervoor is Yootheme Pro. Dit is niet een marktplaats van templates maar een stabiel bedrijf dat al meer dan 10 jaar elke maand een nieuwe template uitgeeft. Deze templates zijn responsive en makkelijk aan te passen.

#3 Houd je bezoekers op je website

Op mobiel werkt het niet fijn als je verschillende tabjes open hebt staan. Maar vaak gebruik je voor externe links de opties om ze in een nieuw tabblad te openen. Je browsed dan verder op een ander tabblad waardoor je de weg naar jouw website kwijt raakt. Aan de andere kant zijn externe linkjes ook weer fijn voor je SEO. Maak voor jezelf de overweging wat belangrijker is. Als je meer bezoekers op desktop hebt zou ik kiezen voor de externe linkjes. Voor de interne linkjes zorg je in ieder geval dat ze niet een nieuwe tab openen. Maar dat is vaak ook de standaard keuze bij het aanmaken van een link.

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

Op mobiel moet een button naar contact of een andere call-to-action goed in beeld staan. Dus niet eerst een mooie foto met tekst en daaronder de call-to-action (of taak). Je kan dit ook op een kleurvlak of op de foto zetten.

#5 Menu-items kort en bondig houden

Zorg dat ze duidelijk zijn 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 werken

Gravity Forms blijft mijn favoriete plugin en werkt goed. Niks irritanter dan een formulier wat je niet kan verzenden maar geen melding geeft van waar de fout zit of ergens iets ontbreekt.

# 8 Zorg voor relevante zoekresultaten

Soms is het makkelijker op mobiel om direct iets te zoeken dan 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 een plugin kunnen gebruiken.

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.