Tegenwoordig zoeken we steeds meer op via onze mobiele telefoon, maar nog lang niet iedere website is mobielvriendelijk. Zonde! Mijn hart doet altijd een beetje pijn als ik op mijn telefoon een website bezoek die eigenlijk een minuscule versie is van de desktopvariant, waar je eindeloos moet inzoomen en de pagina moet verschuiven om dingen te kunnen lezen of aan te klikken. Of nog erger: Wanneer de website compleet onhandelbaar is. Gelukkig is het heel makkelijk om over te schakelen op een mobielvriendelijke website.
1 – Mobile responsive WordPress theme
Kies een WordPress theme dat al jouw pagina’s automatisch geschikt maakt voor mobiel en tablet. Nou – dat zijn ze tegenwoordig allemaal wel, maar bij de een heb je meer controle over hoe dat allemaal in elkaar schuift en opstapelt en transformeert dan bij de ander.
Zo gebruik ik graag Astra: hier kun je per apparaat ook bepaalde instellingen zelf invullen. Bijvoorbeeld hoe groot je teksten en koppen moeten zijn, of in welke volgorde bepaalde blokken op je pagina moeten opstapelen bij de mobiele versie.
2 – Zorg voor een korte laadtijd
Ontwerp je website zo, dat hij een zo kort mogelijke laadtijd heeft. Onze aandachtsspanne wordt steeds korter (tsk tsk tsk), dus het is belangrijk dat je website geladen is voordat je bezoeker zijn aandacht alweer ergens anders op gericht heeft.
3 – Zichtbaarheid en bruikbaarheid van het menu
Schenk even wat extra aandacht aan het menu, en controleer dat ook echt op je eigen telefoon! Soms moet je de goede tekst- en achtergrondkleuren voor het mobiele menu apart instellen. Wit op wit leest zo moeilijk đ
4 – Kies een passende lettergrootte
Dat een bepaalde lettergrootte het heel goed doet op de desktopversie, betekent niet dat dat voor de tablet en telefoon ook geldt. Nou gaat het bij je bodytekst meestal wel goed (snel afkloppen) maar bij grote koppen kan het soms heel raar uitpakken. Soms is het nodig om verschillende lettergroottes in te stellen voor desktop, tablet en mobiel.
5 – Overlappende elementen
Controleer je pagina’s altijd goed op verschillende apparaten. Niks is zo vervelend als een element wat voor iets anders in de weg zit, en niet weg te klikken is. Vooral bij zwevende elementen of popups is dit heel belangrijk.
Dit probleem heb ik een tijdje gehad op mijn blog CherryCharlie.nl, totdat mijn vader (trouwe lezer!) me erop wees: de zwevende deelknoppen vielen over het onderste stukje van de pagina. Niet zo mobielvriendelijk dus! Dit heb ik toen aangepast door ze te laten verdwijnen wanneer je bijna tot het eind van de pagina hebt gescrold.
6 – Marges
Let er ook op dat je tekstblokken op alle verschillende apparaten mooi uitgelijnd zijn. Soms komt het voor dat de tekst helemaal tegen de linker- en rechterrand geplakt zit. In die gevallen is het nodig om de padding of marges van je blok aan te passen.