Maak je website mobiel vriendelijk & user proof met deze 10 tips

De afgelopen weken was er veel aandacht voor Google’s mobile friendly update a.k.a. de ‘Mobilegeddon Update’.

De verwachtingen voor deze nieuwe Google update waren hooggespannen. De voorspellingen van de verschillende marketeers en SEO specialisten waren niet mals en de gevolgen van mobilegeddon konden weleens bijbelachtige proporties aannemen.

Is jouw website niet mobiel vriendelijk? Dan kan je weleens een flinke vrije val gaan in de mobiele zoekresultaten.

mobiel vriendelijk websiteNu we ongeveer een maand verder zijn en de eerste resultaten beginnen binnen te druppelen, lijkt het zo op het eerste gezicht wel mee te vallen met het aantal gewonden op het achtergebleven (zoekresultaten) slagveld.

Ondanks dat de impact van de Google update minder groot is dan verwacht, blijft het hebben van een mobiel vriendelijke website een must have voor elke organisatie. Wij hebben het hier al eerder uitgebreid over gehad. Een mobile friendly website heb je niet voor Google maar voor je gebruikers! Het is een stukje klantenservice en tegelijkertijd goed voor je portemonnee. Het aantal mobiele internetters stijgt namelijk en je wil geen conversies mislopen door het niet hebben van een mobiel vriendelijke website.

Ongeacht welke mobiele configuratie je straks gaat gebruiken, er zijn een aantal overkoepelende mobiele optimalisatie “takeaways” waar elke marketeer zijn voordeel mee doet. Daarom geef ik je in deze blog een tiental tips die je helpen met het optimaliseren van jouw website voor mobiele apparaten. Met deze 10 handige tips wordt het optimaliseren van jouw website voor mobiele gebruiker een eitje. Dus let’s go mobile!


Mobile friendly tip 1: Werk met een designer

Mocht dat je niet lukken, praat dan op zijn minst met een designer om zijn professionele visie en input te krijgen.

Wanneer jij het design van je website in handen legt van een ervaren webdesigner, zul je er uiteindelijk niet alleen van verzekerd zijn dat deze mobiel vriendelijk is, maar dat deze er ook nog eens prachtig uitziet.

Mobiel vriendelijke tip 2: Maak slimme font keuzes

Aanhakend op de eerste tip die ik je gegeven heb, hier meteen het perfecte voorbeeld van waarom een ervaren websitedesigner in de arm nemen een absolute must is. Zij kunnen je namelijk als geen ander helpen bij het maken van de juiste lettertype keuzes.

mobiel vriendelijk comic sans

Wanneer je een lettertype keuze gaat maken, oftewel font, moet je ervoor zorgen dat het lettertype dat je kiest voldoet aan twee eisen:

  1. Het lettertype moet groot genoeg zijn zodat mensen het kunnen lezen zonder te zoomen of te scrollen. (Google raadt 12 pixels aan als het minimum lettertype grootte).
  2. Het lettertype moet “schoon” zijn. Hiermee bedoel ik dat deze niet rommelig moet ogen en professioneel moet overkomen (comic sans anyone?). Leesbaarheid is de naam van het spel wanneer het aankomt op het mobielvriendelijk zijn van je website.

Tip nummer drie: Maak “klik-vriendelijke” navigatie buttons & CTA’s

mobiel vriendelijk menu

Raak jij ook weleens behoorlijk gefrustreerd door kleine, onmogelijk aan te klikken links, knoppen of andere aanklik-opties bij het bezoeken van een website op je mobieltje? Het is een vreselijke ervaring en eentje die eenvoudig te vermijden is door:

  1. een minimum grootte van 7mm x 7mm te gebruiken voor de primaire klik doelen, en
  2. door tenminste 5mm ruimte te laten tussen de klik opties (volgens Google).
Door deze aanbevelingen door te voeren op je website weet je zeker dat mobiele gebruikers gemakkelijk door je website kunnen navigeren. Je kunt bezoekers ook aan je website plakken door je buttons duidelijk te labelen. Hierdoor weten bezoekers precies waar elke klik hen heen zal brengen.

Tip 4: Houd je code simpel

Teveel CSS of Javascript op jouw website kan serieuze vertragingen opleveren voor mobiele bezoekers en je zoekmachine rankings doen kelderen. Daarom raadt Google het comprimeren of “verkleinen” van de code van jouw site waar mogelijk aan en het reorganiseren van je CSS wanneer dit voor vertragingen zorgt.
Pro tip: gebruik Google’s PageSpeed inzichten tool om er verzekerd van te zijn dat de pagina’s van jouw website snel laden op alle apparaten. Na het analyseren van een webpagina, zal de tool je een speed score geven en je laten weten wat (als er iets is) verbetering nodig heeft.

Website vriendelijke tip 5: Toon geen onnodig grote afbeeldingen

Mobiele beeldschermen worden steeds beter en groter. Toch is het niet de bedoeling dat jouw website dat hele scherm vult met één afbeelding. Bovendien moeten mobiele apparaten die afbeeldingen weer verkleinen, waardoor tijd en processorkracht verloren gaat.

Pro tip: maak je content passend voor iedere viewport en zorg dat je er zeker van bent dat je de juiste afbeelding grootte toont voor elk apparaat.

#6: Verbreg je code niet

Om het mogelijk te maken voor Google om je website te kunnen renderen, te indexeren en uiteindelijk te laten ranken in de de mobiele zoekresultaten moet je er zeker van zijn dat het mogelijk is voor Google’s crawling bots om je website te crawlen. Daarvoor is het nodig dat Google’s mobiele bot toegang heeft tot jouw afbeeldingen, CSS en JavaScript.

Het bepalen van welke onderdelen de Google bots mogen crawlen kan over het algemeen geregeld worden door het updaten van je websites robot.txt file en deze opnieuw in te dienen bij Google.

Website SEO pakketten - webdesign

Tip nummer 7: Zorg ervoor dat je video’s kunnen laden

Niet afspeelbare content kan voor enorme frustratie zorgen bij je bezoekers.

Probeer bij het plaatsen van video’s van YouTube, Vimeo, Wistia, of een andere video hosting services te voorkomen dat je <object> embeds op pagina’s gebruikt. Maak In plaats daarvan  gebruik van <iframe> embeds. Deze zijn compitabel met een veel bredere range aan mobiele apparaten/browsers.

Voor geanimeerde content dat afhankelijk is van Flash, beveelt Google aan om HTML5 animaties te gebruiken. Deze kun je super makkelijk zelf maken met Google Web Designer.

mobiel vriendelijk infographic

Mobile tip #8: Houd HTTP verzoeken minimaal

Hieronder een aantal andere tips om het aantal HTTP verzoeken minimaal te houden: Mobiele bezoekers die al de desktopversie van jouw site gezien hebben, verwachten waarschijnlijk dezelfde features te vinden op de mobiele versie. Het probleem is alleen: op mobiele apparaten is de processing power gelimiteerd en kan de bandbreedte onbetrouwbaar zijn.

Om jouw pagina’s snel te laten laden, beperk je on-page elementen (zoals embedded applicaties) die extra HTTP verzoeken aandrijven.

  • Gebruik afbeeldingsmappen om meerdere afbeeldingen te combineren in een enkele afbeelding. Dit zal niet perse de bestandgrootte verkleinen, maar het zal het aantal HTTP verzoeken die nodig zijn om deze afbeeldingen weer te geven verminderen. Belangrijke notitie: afbeeldingsmappen zijn alleen te gebruiken als de afbeeldingen in kwestie naast elkaar staan.
  • Gebruik CSS sprites om alle afbeeldingen op jouw pagina te combineren in een “master” afbeelding (die je maar eenmalig hoeft te laden). Je kan dan gebruik maken van de CSS “background image” en “background-position” eigendommen, voor het weergeven van het gedeelte van de afbeelding dat jij wilt dat verschijnt.
  • Combineren van bestanden is een andere manier van het verminderen van HTTP verzoeken. Je kunt al je stylesheets combineren in een enkele stylesheet en al je scripts in een enkel script.

Mobiel friendly tip #9: Houd je formulieren kort

We willen allemaal dat onze websites – zowel de mobiele als de desktop versies – geweldig zijn in het genereren van leads. Maar het is belangrijk om de usability te overwegen bij het creëren van landingspagina’s voor mobiele bezoekers. Terwijl het uittypen van je naam, email, telefoonnummer en andere informatie relatief simpel is op een desktop computer, kan dit op een mobiel apparaat veel ergernis opleveren.

Om er zeker van te zijn dat je een geweldige mobiele ervaring levert, houd je formulieren op je landingspagina’s kort. Een typisch desktop formulier vraagt bijvoorbeeld om naam, email, telefoonnummer, industrie en bedrijfsgrootte. In de mobiele versie kun je beter alleen om de naam en het emailadres vragen en de rest schrappen.

mobiel vriendelijk google bot

#10: Vraag Google om je website opnieuw te crawlen!

Wanneer je klaar bent met het mobiel-vriendelijk maken van jouw website, zal Google automatisch jouw website opnieuw gaan crawlen en indexeren. Wil je het proces versnellen? Dan kun je de “Fetch as Google” tool gebruiken om Google te triggeren om jouw site opnieuw te crawlen en te indexeren.

Als jouw site een ton aan URLs heeft die re-processing nodig hebben dan kun je een sitemap toevoegen. Wees er zeker van dat je de “lastmod tag” toevoegd in jouw sitemap, als je mobiele pagina’s gebruik maken van eerder bestaande URLs (wat waarschijnlijk het geval is als je gebruik maakt van een responsive design of een dynamic serving om je website mobiel vriendelijk te maken).


Dit zijn dan de 10 tips die – wanneer goed uitgevoerd – jouw website mobiel vriendelijker maken. Deze tien mobiele optimalisatie-tips komen niet alleen je ranking ten goede in de mobiele zoekresultaten (Google is nou eenmaal gek op mobiel vriendelijke websites), maar zorgen bovenal voor een positieve gebruikerservaring. Uiteindelijk is dat waar het allemaal om moet draaien: jouw bezoekers!

Dus ga aan de slag en maak je website mobile proof. Heb je hulp nodig bij het responsive maken van je website? Neem dan gerust contact op, onze experts zitten klaar voor al jouw vragen. Liever zelf aan de slag? Maak dan gebruik van ons super handige website redesign werkboek. Met dit werkboek kan je eenvoudig het redesign van je website inplannen en opvolgen.

Website redesign werkboek