5 Tips voor een Mobielvriendelijke Website

SEO jun. 05, 2020

User experience op mobile - belangrijker dan ooit!

Twee van de drie minuten die gespendeerd worden op het internet, verloopt via een mobiel apparaat. Je website of blog gebruiksvriendelijk maken voor smartphones en tablets, is de nieuwe standaard. Hoe je dit kan doen, ontdek je in deze blog!


Over het algemeen is de UX van klanten enorm belangrijk om een mooi plekje te bemachtigen in de lijst van zoekresultaten. Let vast en zeker op de volgende elementen:

1. Responsieve frameworks

Responsieve web designs worden alsmaar belangrijker voor je SEO-rangschikking. Wil je weten hoe je site performed op mobile? Doe dan de mobielvriendelijke test van Google.

Als je met een responsief webdesign werkt, bestaat er eigenlijk maar één versie van je website. Het design past zich aan elk device aan, zo zorg je ervoor dat Google je website slechts één keer moet indexeren. Meer hierover bij “De Laadsnelheid van Je Website Drastisch Verbeteren in 10 Stappen

2. Touchscreen leesbaarheid

Knoppen

Op de mobiele weergave van je website moeten je knoppen voldoende groot zijn om ze makkelijk aan te kunnen duiden. Volgens WooRank is het gemiddelde gebied dat een vingertop inneemt 48 pixels hoog en breed. Laat ook voldoende ruimte tussen de verschillende knoppen, geef ze minimum zo’n 8 pixels ademruimte.

Fontgrootte

Hanteer voor minimum 60% van je tekst een fontgrootte van 12 pixels. Pas desnoods de structuur en opbouw van je website en menu aan om de surfervaring van bezoekers te verbeteren.

3. Optimaliseer afbeeldingen (voor mobiel)

Stel jezelf de vraag of al die visuals wel echt nodig zijn?

Kan je je GIF niet vervangen door een animatie die in de CSS-code kan geplaatst worden? Vermijd altijd zware JavaScript frames en verwijder afbeeldingen als ze niet noodzakelijk zijn in je verhaal.

Pas het bestandsformaat van je afbeeldingen aan

Ga in de eerste plaats voor WebP, dit formaat zorgt voor een grote compressie +30% zonder in te boeten op kwaliteit. Of kies voor een van de volgende opties:
JPEG voor normale foto’s (zonder doorzichtigheid), SVG voor schaalbare illustraties en PNG voor afbeeldingen met een transparante achtergrond.

Comprimeer en verklein afbeeldingen

Verwijder de metadata, zoals de tijd en datum van foto’s. Experimenteer met de kwaliteitsinstellingen van je foto’s en bekijk wat het kan opleveren voor hun laadsnelheid.

Test verschillende laadtechnieken uit

Lazy loading is een techniek waarbij foto’s onder de fold pas worden ingeladen wanneer dat nodig is. Ook gebruikmaken van placeholders of progressieve JPEG’s kan je helpen de snelheid van je site te verbeteren.

Voorbeeld van een progressieve JPEG

Foto’s met een resolutie van 72 dpi volstaan voor op het web, met Photoshop kan je makkelijk de resolutie van afbeeldingen verkleinen. Ook de gratis tool Image Optimizer kan je helpen om je afbeeldingen te optimaliseren voor online gebruik.

Favicons

Voorzie je website van een favicon. Dit is een icoontje dat je logo kan vervangen als er geen ruimte is om je volledige logo te tonen.

Voorbeeld van een favicon

4. Een duidelijke navigatiebalk

Voorzie je design van een eenvoudige navigatiebalk op je site zonder al te veel opties. Vertel de bezoeker wat zijn volgende stap zou moeten zijn, laat hen doen wat jij zelf wil. Kies voor concrete rubrieken.

5. Headings & CTA's

Geef je webpagina’s duidelijke en aantrekkelijke headings. Implementeer call-to-actions op goed zichtbare plekken.


In snack formaat

  • Werk met een responsief webdesign: één design dat zich aanpast aan elk device.
  • Knoppen moeten zo’n 48 pixels hoog en breed zijn. Laat 8 pixels ruimte rond je knoppen.
  • Zet je font groot genoeg: 60% moet min 12 pixels groot zijn.
  • Verwijder afbeeldingen waar nodig.
  • Comprimeer en verklein je foto's. Tools zoals Image Optimizer, kunnen hierbij helpen.
  • Experimenteer met verschillende laadtechnieken.
  • Zorg dat je je logo kan vervangen met een favicon.
  • Leid je bezoeker naar waar je wil op je website met een duidelijke navigatiebalk.
  • Geef je pagina’s aantrekkelijke headings en voeg CTA’s toe om bezoekers te converteren.

Laura Verbeke - Marketing Expert

Our youngest team member full of ambition is responsible for all our marketing activities. She’s also the sympathetic and thoughtful contact person for some of our fantastic brands!

Top! je hebt je succesvol ingeschreven.
Top! Nu nog de checkout afronden voor volledige toegang.
Welkom terug! Je bent succesvol ingelogd.
Yes! je account is volledig geactiveerd, je hebt nu toegang to alle inhoud.