Help Registreren

Missers op je mobiele website—en hoe je ze voorkomt

“Mobile first” hoor je tegenwoordig veel webexperts zeggen. Maar wat betekent het eigenlijk? Het komt erop neer dat je een website (of software) bouwt waarbij de mobiele ervaring voorop staat, in plaats van de ervaring vanaf een PC. Mensen zijn de laatste jaren steeds meer mobiel gaan surfen op het internet, en experts denken dat dit alleen nog maar meer wordt. Dat is meteen de reden dat het zo belangrijk is dat een website er op een mobiel apparaat goed uitziet. Zo kan de website mogelijke bezoekers aantrekken en verlaag je je bounce rate op mobiele apparaten.

 

Sommige mensen nemen aan dat hun website er op een PC goed uitziet en dat de mobiele versie gewoon een coole miniversie daarvan is, maar dat is niet per se waar. En als een groot deel van je verkeer vanaf mobiele apparaten komt (dit kun je zien in je statistieken), dan moet je er zéker voor zorgen dat je website ook mobiel aantrekkelijk is.

 

Daarom hebben we een paar veel voorkomende missers met mobiele sites voor je op een rij gezet. We leggen je meteen uit hoe je deze missers op je eigen site kunt voorkomen. 


Misser 1: Je hebt geen mobiel responsive design

Waarschijnlijk heb je je website een paar jaar geleden gebouwd. Eindelijk ziet hij er precies zo uit zoals je wilt (op je PC). Als je je design al een tijdje niet hebt veranderd, dan is de kans groot dat je nog een van onze oudere designs gebruikt. De oude designs hebben een code in plaats van de naam van een stad (bv. F4242). Ze zijn “mobile-friendly” maar zien er niet half zo goed uit als de moderne, “responsive” designs (vernoemd naar een stad).

 

Waarom is responsive beter? Je website reageert op de afmetingen van het apparaat dat je bezoeker gebruikt. De resolutie, de afbeeldingen en het menu zien er perfect uit, of je bezoekers nu een tablet, PC of smartphone gebruiken. Een responsive design wordt ook beter gevonden door Google en is dus goed voor je SEO.

 

Misschien heb je gewoon nog geen tijd gehad om je website vanaf een telefoon/tablet te bekijken? Of heb je geen zin om je design te updaten en je website opnieuw in te richten? Dat begrijpen we absoluut. Maar kijk eens naar al die mensen die op hun telefoon aan het browsen zijn in het openbaar vervoer. Dat zijn allemaal potentiële bezoekers die je voor je zou kunnen winnen als je een week lang elke dag een uurtje in je website steekt.

Een voorbeeld van een design dat niet responsive is. Zoals je ziet valt het contactformulier van de pagina af.
Een voorbeeld van een design dat niet responsive is. Zoals je ziet valt het contactformulier van de pagina af.

Een voorbeeld van een design dat niet responsive is. Zoals je ziet valt het contactformulier van de pagina af.

 

Het nieuwe responsive design ziet er perfect uit.

Het nieuwe responsive design ziet er perfect uit.

 


Oplossing: Om te zien welk design je gebruikt open je je menu en kies je Design > Algemeen > Designs. Je ziet je huidige design linksboven. Check of je Jimdo-design de naam van een stad heeft (bv. Stockholm). Zo niet, dan heb je geen responsive design en raden we je aan een moderner design te kiezen. Je kunt deze tool gebruiken om te zien hoe je website er op andere apparaten uitziet!

Misser 2: Je afbeeldingen of video’s maken je website langzaam

Ga op je telefoon naar je website en kijk hoe lang het duurt om de pagina te laden “1-2-3…” Als het langer duurt dan 3 seconden is het belangrijk uit te vinden wat je site langzaam maakt. Hoofdverdachten zijn meestal video’s, animaties of extra add-ons. Vraag je af of deze echt iets toevoegen aan je website en of het de langere laadtijd waard is (om nog te zwijgen van mobiele data!). 

 

Widgets of deelknoppen die op externe JavaScripts draaien maken je site langzamer. Om je site sneller te laten laden kun je het beste 2-4 social media kanalen kiezen of de ingebouwde Jimdo-deelknoppen gebruiken.

 

Het is ook een goed idee om de afbeeldingen op je site te optimaliseren. Denk hierbij aan het verkleinen van de afbeelding en het reduceren van de bestandsgrootte. Er zijn vele tools waarmee je je afbeeldingen kleiner kunt maken zonder dat de kwaliteit erop achteruit gaat. Zelfs als je de bestandsgrootte maar een beetje verkleint kan het al heel effectief zijn. Zeker op een pagina met veel afbeeldingen, of als je een grote achtergrondafbeelding gebruikt. Houd in je achterhoofd dat Google de laadsnelheid van je site gebruikt als SEO-factor. Een langzame website kan dus je positie in de zoekresultaten negatief beïnvloeden. 

 

Oplossing: Controleer hoelang je pagina’s erover doen om te laden op een mobiel apparaat. Bekijk vervolgens hoe je dingen die je site langzamer maken kunt verwijderen of optimaliseren.

Misser 3: Er is geen visuele hiërarchie

Er gebeurt teveel op je website en je ogen weten niet of ze zich moeten concentreren op het logo, de header of de call-to-action. Het neemt meer tijd in beslag om door een website te browsen vanaf een telefoon. Zorg er dus voor dat de gebruikerservaring prettig is door je content logisch in secties te verdelen. Maak voor ieder gedeelte een eigen header met de H1, H2 en H3 tags. Een intuïtieve gebruikerservaring houdt bezoekers langer op je site en vergroot de kans dat een bezoeker iets koopt.

 

Belangrijke informatie voor je bezoekers zou bovenaan je website moeten staan. Verder naar beneden kun je dan in meer detail treden. Verplaats je in de bezoeker en beantwoord de 5 W’s: Wie? Wat? Waarom? Waar? Wanneer? Kun je de belangrijkste informatie of boodschap meteen terugvinden op je website?

Voorbeeld van een website met een duidelijke structuur en visuele hiërarchie

Oplossing: Maak een plan voor je website. Dit zal je helpen een overzicht voor je website te maken. Vervolgens kun je je content in categorieën verdelen en overbodige extra’s weglaten.

Misser 4: Je website is moeilijk te lezen

Je kunt de beste content ter wereld hebben… maar niemand zal die lezen als bezoekers naar kleine lettertjes moeten turen en moeten inzoomen om je tekst te kunnen lezen. Dit probleem valt nog meer op bij telefoons dan op bijvoorbeeld tablets omdat telefoonschermen nog een slag kleiner zijn. 

 

Dat fraaie schreeflettertype ziet er misschien geweldig uit op een PC, maar vanaf een mobiel apparaat blijkt het wat moeilijk leesbaar. Probeer een schreefloos lettertype als Open Sans of Roboto dat gemakkelijk leesbaar is en check ook of de grootte van het lettertype groot genoeg is. Een algemene regel is om je hoofdtekst op minimaal 16pt te houden. Dit getal hangt echter af van het lettertype dat je gebruikt. Het kan dus zijn dat op jouw site een andere grootte beter werkt.

 

Sommige achtergrondafbeeldingen hebben een negatief effect op de leesbaarheid op een mobiel apparaat. Probeer de achtergrond simpel te houden en zorg dat de achtergrondkleur en de kleur van de tekst elkaar aanvullen.

Zorg dat het contrast tussen je achtergrond en je tekst groot genoeg is zodat de tekst goed leesbaar is

Oplossing: Check je website altijd in Voorbeeldmodus. Deze functionaliteit geeft je de mogelijkheid je website op je PC te bekijken en te zien hoe deze eruit ziet voor mobiele gebruikers. Je kunt ook vrienden en familie vragen om je website vanaf hun telefoons te bekijken. Als zij de tekst moeilijk kunnen lezen is het misschien tijd om de look van je website te versimpelen. Een witte achtergrond met wat gekleurde blokken hoeft absoluut niet saai te zijn! 

Misser 5: Je website ziet er overvol uit

Witruimte overlaten is nog veel belangrijker op een klein scherm, zodat je vingers één knop kunnen aanklikken, bijvoorbeeld de call-to-action. Mensen die mobiele apparaten gebruiken hebben grotere tekst en knoppen nodig dan je misschien zou verwachten om op de website makkelijk te navigeren.

 

Call to action (CTA) buttons zouden minimaal 30-40 px groot moeten zijn zodat ze goed opvallen. Mensen die mobiel winkelen doen vaak impulsaankopen, dus als de structuur van je website onduidelijk is en het moeilijk is op de juiste knoppen te klikken zou dat een reden kunnen zijn om je site te verlaten zonder iets te kopen. Zorg er dus voor dat de CTA duidelijk herkenbaar is. 

 

Veel elementen, afbeeldingen en kleuren bij elkaar maken je website druk en onoverzichtelijk. Dit kan je bezoekers afschrikken. Als je website te vol is, voeg dan wat witruimte toe tussen paragrafen, teksten en andere elementen. Witruimte maakt navigeren en het lezen van de belangrijkste info makkelijker.

 

Als je, net als ik, vanuit de bus door een website scrolt, dan scan je de tekst waarschijnlijk. De informatie die je nodig hebt wil je dan het liefst duidelijk in beeld hebben. Er is als je onderweg bent niet veel tijd om grotere lappen tekst te lezen op een telefoon. Houd je teksten kort, scanbaar en zorg voor voldoende witruimte tussen paragrafen. 

 

Oplossing: Zorg voor voldoende witruimte tussen je elementen en tekst zodat je bezoeker niet overladen wordt met informatie. Je kunt ook proberen om knoppen te gebruiken in plaats van tekstlinks, zodat het doorklikken op je site makkelijker is. 

Misser 6: Je overlaadt mensen met formulieren of pop-ups

Ken je dat gevoel van irritatie als je merkt dat je een online formulier moet invullen om de gratis wifi op het vliegveld te gebruiken? Denk daaraan wanneer je overweegt pop-ups toe te voegen waarvoor moet worden getypt op een touchpad. Navigatie op een mobiel apparaat kan al lastig genoeg zijn zonder het extra gedoe van typen op een touchpad. Probeer alles zo simpel mogelijk te houden en met zo min mogelijk handelingen voor je bezoeker.

 

Als je bijvoorbeeld een tevredenheidsenquête wilt toevoegen, zorg dan dat bezoekers eenvoudig kunnen stemmen met smileys. Je kunt een tekstveld toevoegen waar mensen eventueel nog opmerkingen kunnen plaatsen. Als je een formulier voor je nieuwsbrief wilt hebben, zet er dan alleen de noodzakelijke details in, of gebruik drop down lijsten om het je bezoekers zo gemakkelijk mogelijk te maken.

 

Oplossing: Bekijk de vele formulieren van JotForm eens of voeg een chat pop-up toe met Pure Chat. Zoals je in het voorbeeld hieronder kunt zien kun je een add-on vinden die niet opdringerig is, zoals het tekstballonnetje onderaan de pagina. Dit verstoort de gebruikerservaring niet en bezoekers zullen eerder geneigd zijn erop te klikken. Vergeet alleen niet dat ook dit een add-on is en dus invloed kan hebben op de snelheid van je site.

blackyeti.com illustreert het belang van witruimte en een duidelijke call-to-action. Zie je het tekstballonnetje onderaan de pagina? Dat is een add-on voor live ondersteuning.

Subtiele live chat support add-on die alleen in beeld verschijnt als je erop klikt.

 


De sleutel tot mobiel webdesign is eenvoud. Minder is op een klein scherm absoluut meer. Vergeet niet dat een touchpad een uitdaging kan zijn voor de gebruikerservaring. De truc is je site zo te ontwerpen dat je er makkelijk met je vingers doorheen kunt bladeren. Zorg dat je bezoekers de belangrijkste informatie meteen kunnen vinden en maak gebruik van de tips hierboven. Dan komt het zeker goed! Als je niet zeker van je zaak bent, kun je vrienden of klanten vragen het te testen.

 

Als je onze gratis app nog niet uitgeprobeerd hebt is dit een goed moment om hem eens te testen. Het is de perfecte manier om je website bij te werken vanaf een smartphone of tablet als je onderweg bent.


FEM EGGERS

Allrounder


Commentaar schrijven

Commentaren: 2
  • #1

    M.J. Koevoet (donderdag, 03 augustus 2017 16:54)

    Is het mogelijk om de facebooklink (in de rechter kolom) centraal uit te lijnen net als de foto's eronder? Op een smartphone staan de foto's mooi in het midden, echter de afbeelding van de facebooklink staat naar links. Op een normale computer staat het wel goed.

  • #2

    b.j.m. (maandag, 14 augustus 2017 09:10)

    Het is jammer dat je alleen de computer website kan aanpassen en niet de smartphone website (om het zo even te noemen).
    Mijn smartphone website ziet er goedkoop uit en mijn huisstijl is onderander de kleur turquoise, beetje jammer dat hij hier blauw is. Ook foto's, of andere dingen zijn niet terug te vinden van de home pagina. De website van de computer ziet er super uit! Mijn hele huisstijl is hier in terug te vinden. Toch jammer dat je het zelf niet kan aanpassen!!!!