Het geschatte aantal wereldwijde smartphonegebruikers is momenteel 3,5 miljard, een stijging van ruim 9,3% ten opzichte van 2019.
Het overgrote deel van de Nederlandse bevolking bezit nu een soort GSM, waar van de ruime meerderheid een smartphone is.
Surfen doen mensen steeds vaker op hun smartphone, in plaats van achter hun laptop of computer.
Tegen het einde van 2019 waren mobiele apparaten (tablets nog niet eens meegerekend) verantwoordelijk voor 51,5% van het wereldwijde websiteverkeer. Het is dus cruciaal dat je website mobile proof is. Deze best practices voor responsive webdesign gaan daarbij helpen.
1. Minimaliseer en prioriteer
Doordat mobile devices beperkte ruimte bieden aan de website zal je informatie en content anders moeten aanbieden dan hoe dat gebeurt op laptop of computer.
Een goede mobile-proof website is geen desktop-website waar je simpelweg functionaliteiten van verwijdert. Je begint met nadenken wat de beste ervaring is voor iemand die op zijn mobiel de website bezoekt, deze pas je vervolgens aan naar desktop lay-out (mobile first design). Mogelijk ga je dan op desktop de extra beschikbare ruimte benutten.
Om erachter te komen hoe nu enkele van de belangrijkste of best presterende pagina’s het doen kun je een blik werpen in Google Analytics. Kijk naar de tijd die gespendeerd wordt op de pagina, bekijk eventueel heatmaps voor scrollen en kliks, leg de conversiepercentages onder de loep, et cetera.
Neem vervolgens de tijd om de pagina’s in detail te analyseren en te bepalen wat er nodig kan zijn om te optimaliseren voor mobiel.
- Werken bepaalde interacties niet zo goed op mobiel als op desktop?
- Zijn letters moeilijk te lezen op mobiele apparaten?
- Lopen gebruikers op mobiel vast, zodat hun gemiddelde tijd op de website korter is?
Als de probleemgebieden geïdentificeerd zijn kan er, in samenwerken met de designer, worden gewerkt aan een optimalisatie. Misschien dat sommige teksten ingekort dienen te worden, of ze moeten ander gerangschikt worden.
2. Zorg dat Bottom of the Funnel Call-to-Actions goed vindbaar zijn
Elke website heeft wel een ultieme Call-to-Action (CTA) waarvan je het liefst zou willen dat men hem uitvoert, zoals een demo aanvragen of een intake-formulier invullen. Dit zijn vaak Call-to-Actions die zich onderaan de marketingfunnel bevinden, iemand die net voor het eerst op de site kijkt zal mogelijk deze Call to Action nog niet direct invullen (overigens doet een kleine 2% (gemiddeld genomen) dit wel).
Om mensen naar deze Call to Action te leiden heb je mogelijk deze opgenomen in het menu en verspreid over de gehele website. Heb je jouw belangrijkste CTA nog niet opgenomen in het menu, dan is het zeker aan te raden dit nu alvast te doen.
Het is namelijk een gemiste kans om de CTA op mobile te ver weg te stoppen, waardoor koopklare mensen de kans missen om de volgende stap te zetten in het aankoopproces.
3. Gebruik schaalbare vectorafbeeldingen (SVG’s)
Schaalbare vectorafbeeldingen (SVG’s) zijn essenteel voor een responsive website dat gebruik maakt van illustraties of pictogrammen. SVG’s kunnen namelijk, in tegenstelling tot JPG of PNG-bestanden, oneindig schalen.
Dit betekent dat, ongeacht op welk apparaat je de afbeelding bekijkt, deze altijd haarscherp zal zijn, je hoeft je geen zorgen te maken over resolutie of pixelvorming.
Een ander voordeel: SVG’s hebben vaak een kleinere bestandsgrootte, waardoord de website sneller wordt geladen. Niemand wilt zitten wachten op lange laadtijden.
4. Vergroot klikbare gebieden en knoppen
Op mobiele apparaten, zoals tablets en smartphones, worden linkjes en knoppen aangeklikt met een vinger, geen precieze muisklik. Aanklikbare gebieden hebben dus veelal een groter gebied nodig om dit verschil op te vangen.
Hoe groot moeten de klikbare gebieden en knoppen worden? Dat is in grote mate afhankelijk van de gebruiker. Echter is het aan te raden om een klikbaar element op mobiel zeker 48 pixels hoog te maken.
Voor interner links (bijvoorbeeld links in blogs) zou je het aanklikbare gebied rondom de link kunnen vergroten. Een programmeur kan hierbij helpen.
Door knoppen en aanklikbare gebieden te vergroten wordt de gebruikerservaring van de website prettiger en worden frustraties voorkomen.
5. Responsieve afbeeldingen
Elk apparaat toont afbeeldingen op verschillende groottes.
Een desktoppagina kan een afbeelding van 1200 pixels breed makkelijk tonen, terwijl de mobiele versie van die pagina mogelijk slechts 400 pixels nodig heeft.
De oude manier was om deze grote afbeelding (1200 pixels) in te laden op de website en vervolgens hetzelfde bestand op alle apparaten te tonen, maar deze grote bestanden kunnen de laadtijd van de website aanzienlijk vertragen.
Een best practice voor responsive webdesign is dat er verschillende versies van dezelfde afbeelding worden gebruikt voor mobiel en desktop.
Op mobiele apparaten gebruik je bijvoorbeeld enkel de 400 pixels afbeelding, in plaats van de 1200 pixels afbeelding.
Op pagina’s met veel afbeeldingen kan een dergelijke optimalisatie veel extra website snelheid opleveren.
6. Typografie tips
Leesbaarheid op een responsive website is een belangrijk onderdeel om aandacht aan te besteden. Op kleine smartphone schermen is het lastiger om teksten goed te lezen dan op grote laptop schermen.
Als mensen teksten niet of moeilijk kunnen lezen is de kans groot dat ze heel snel afhaken.
Je wilt ervoor zorgen dat de content gemakkelijk te lezen is en geoptimaliseerd is voor het specifieke apparaat.
Dit betekent ook dat je fonts moet kiezen die op elk apparaat goed leesbaar zijn.
Vergeet vooral ook niet om de koppen en hoofdlettergroottes af te stemmen op de grootte van het apparaat. Je wilt namelijk ook niet dat lettergroottes zodanig van elkaar afwijken dat het onnatuurlijk voelt om te lezen.
7. Benut apparaat functies
Met smartphones kun je direct vanuit de browser verschillende taken uitvoeren, zoals bellen, berichten verzenden of apps openen.
Je kunt deze mogelijkheden optimaal benutten om de mobiele ervaring voor de gebruiker te verbeteren, en daarmee zelfs het conversie percentage te verhogen.
Als iemand de website bekijkt op desktop wil je mogelijk enkel het telefoonnummer tonen. Op mobiel kun je het nummer aanklikbaar maken, zodat iemand de vraag krijgt of hij het nummer waarop hij klikte wilt bellen. Hetzelfde geldt voor e-mailadressen. Door te klikken op een e-mailadres kan direct een e-mailapp worden geopend. En tot slot kun je dit principe ook toepassen op social media-iconen; klik je erop, dan ga je rechtstreeks naar de app (als je deze hebt).
Deze best practices voor responsive webdesign zullen een voor een helpen om een betere, gebruiksvriendelijkere website te maken.
