5 tips voor een mobielvriendelijke website

1. Mobile-first benadering

Bij een mobile-first benadering ligt de focus van het website ontwerp vooral op de mobiele website. Kijkend naar het aantal bezoekers per device is de mobiele website is belangrijker geworden dan de desktop versie. Kijk daarom tijdens het ontwerpen van een website vooral naar de mobiele versie en hoe de informatie hier wordt weergegeven. Begin daarom bij een mobiele versie en breidt deze uit tot een desktop versie. Het is gemakkelijker om een eenvoudig ontwerp uit te breiden dan een complex ontwerp te vereenvoudigen.

2. Hou de content kort en krachtig

Zodra je op een goede mobiele website komt is er wezelijk een verschil in de content, namelijk de lengte hiervan. Als je dezelfde website op een desktop of laptop bekijkt zie je dat de teksten uitgebreider zijn. Lange stukken tekst kun je prima tonen op een desktop. Echter op een mobiele telefoon ben je dan eeuwig aan het scrollen.

De basisregel van een goede mobiele website is daarom: Hou het kort en krachtig.

3. Vermijd fancy design elementen

Website bezoekers op een mobiele telefoon zijn vaak gericht opzoek naar informatie. Ze willen dus zo snel mogelijk een antwoord vinden. Fancy design elementen zullen de snelheid verstoren en het is daarom aan te raden deze los te laten. Kies voor snel en eenvoud zonder teveel toeters en bellen voor een efficiente mobielvriendelijke website.

Hier zijn de twee onderdelen die je als eerste weglaten.

→ Gebruik weinig animaties / bewegende elementen
Het ziet er harstikke mooi uit natuurlijk, vliegende elemenenten of Call-to-action knoppen die bewegen. Vaak zijn de animaties op een mobiele website storend en werkt het vertragend voor de laadtijden. Zoals benoemd in de vorige alinea willen bezoekers van een mobiele website zo snel en efficient mogelijk door een mobiele website navigeren.
Animaties of bewegende elementen werken als afleiding en dienen daarom zoveel mogelijk te worden geelimineerd.

→Vermijd het gebruik van pop-ups
Op de desktop kun je prima gebruik maken van pop-ups. Bijvoorbeeld om kortingscodes te promoten, aankondigingen te doen of nieuwsbrief ontvangers te werven. Op een desktop zal de pop-up een klein gedeelte van het venster bedekken en een bezoeker kan gemakkelijk er omheen navigeren.

Voor een mobiele website ligt dit iets anders. Bij het tonen van een pop-up op een mobiele telefoon is meestal het gehele scherm bedekt. Men heeft niet de mogelijkheid om hier gemakkelijk omheen te navigeren zoals op de desktop het geval is. Vaak heeft een pop-up in de hoek een ”x” om de pop-up af te sluiten. Probeer deze maar is te raken als je een kleine mobiele telefoon hebt.

Indien je toch specifieke informatie naar voren wilt laten komen, gebruik dan een kleine balk bovenaan de website. Zo kun je toch de gewenste informatie communiceren zonder dat dit storend is voor de bezoeker.

4. Kies de juiste grootte voor knoppen en lettertype

Zorg dat de grootte van het letters en de knoppen zijn geoptimaliseerd voor desktop, tablet en mobiel. Dit betekend dat op elk type apparaat een andere grootte getoond moet worden.

Hoeveel kom je wel niet tegen dat een stuk tekst te klein is op een mobiele website. Dit zorgt ervoor dat je constant moet in-en-uitzoomen om een tekst te lezen. Ook het tegenovergestelde kom je regelmatig tegen. Dat titels of teksten te groot zijn waardoor de hele tekst onleesbaar is geworden.

Als standaard kun je aanhouden dat de font-size voor een mobiele website ten minste 14 pixels moet zijn. Dit is een prettige afmeting om teksten te lezen op een mobiele telefoon. Mocht je dit artikel lezen op je mobiele telefoon, deze tekst is ook 14 px.

Naast het de grootte van de tekst is het ook belangrijk aandacht te schenken aan de andere elementen, waaronder de knoppen. Je wilt voorkomen dat bezoekers van een mobiele website het lastig vinden om knoppen te selecteren omdat deze te klein of onduidelijk zijn. Zorg daarom dat knoppen groot en prominent worden getoond om het de bezoekers zo makkelijk mogelijk te maken. 

5. Optimaliseer afbeeldingen 

Alleen een mobiele website die er goed uitziet is niet het enige, het is net zo belangrijk om ervoor te zorgen dat de snelheid on point is. Nadat het mobiele ontwerp staat is het dus van belang om de snelheid te verbeteren. Omdat afbeeldingen vaak van hoge kwaliteit zijn brengt dit het risico met zich mee dat het de website kan vertragen.

Uiteraard is het belangrijk de website te voorzien van mooie visuals en afbeeldingen, maar niet als dit in grote mate ten koste gaat van de performance. Uit een onderzoek van Google blijkt dat één seconde extra laadtijd een impact van 20% kan hebben op de conversie. Sterker nog, bij een laadtijd van drie seconden verlaat gemiddeld 50% van de bezoekers de website.

Het probleem van een vertraagde mobiele website zit hem vaak in de afbeeldingen.
Je kunt de onderstaande tips volgen om dit te voorkomen:

• Gebruik zoveel mogelijk de moderne ‘’neet-gen’’ formats, zoals WebP
• Gebruik lazy-loading
• Upload afbeeldingen in de juiste afmetingen
• Comprimeer afbeeldingen voordat je deze op de website plaats. Hier zijn genoeg tools voor te vinden op het web.