Online Optimaliseren

De ultieme gids om jouw website geschikt te maken voor mobiel

We maken inmiddels meer gebruik van internet op onze smartphones dan onze desktop computers. Jouw website moet er dus ook op mobiel en tablet goed uit blijven zien. Maar hoe pak je dat aan? Waar begin je? En zijn er ook quick wins zodat je een grote investering kunt voorkomen?

Ontdek alles wat je kunt doen om jouw website smartphone-proof te maken.

Optimaliseer je website voor mobiel

Als je website niet geschikt is voor mobiel, haken bezoekers die je website met hun smartphone bekijken sneller af. Misschien herken je de frustratie als een website niet goed functioneert. Het gevolg is dat bezoekers afhaken en op zoek gaan naar een website die hun wel goed verder helpt. Ook Google heeft een mobile-first algoritme: mobielvriendelijke websites komen hoger in de zoekresultaten. Duizenden ondernemers hebben flink last gehad van de overgang van Google op een mobile-first-index: hun ranking zakte ineens flink terug. Je weet dus wat je te doen staat: Go Mobile Or Go Home. Ik leg je graag uit hoe je dit aan kunt pakken. Zonder veel technische kennis. Zonder grote investeringen. En met een simpele, praktische aanpak. 

1. Hoe mobielvriendelijk is je website nu?

Benieuwd naar hoe goed (of slecht) jouw website nu scoort op mobielvriendelijkheid? Test het in een aantal stappen:

Stap 1: Vraag een paar mensen uit je omgeving

om met hun smartphone je website te bezoeken en er even doorheen te gaan. Wat zijn de eerste dingen die zij roepen? Dit geeft vaak al een goede eerste indruk.

Stap 2: Google het.

Google vindt mobiele vriendelijkheid zo belangrijk dat ze hun tool zelfs tonen in de zoekresultaten. Google mobile friendliness test SERP page - online optimaliseren Google op ‘mobiele website checken’. Dan kom je bij de Google Mobile Friendliness test. Deze test geeft aan hoe mobielvriendelijk je site is en met welke acties je dit zou kunnen verbeteren. Bijvoorbeeld door meer afstand de houden tussen links zodat bezoekers minder snel de verkeerde link aanklikken. Of door te zorgen dat alle content binnen de breedte van het scherm past. Dit is is dé tool die aangeeft of Google jouw website mobielvriendelijk is. Zegt deze tool ‘Nee’, dan wordt jouw site in de zoekresultaten omlaag geduwd om ruimte te maken voor sites die wel een goede mobile experience geven.
Google mobile friendliness test - online optimaliseren

Stap 3: Doe de Google Page Speed test.

Deze test geeft, naast screenshots van jouw mobiele website, ook aan hoe snel jouw website laadt. Bij 6 seconden laadtijd verlies je al een kwart van je bezoekers. Ook Forbes bevestigt de negatieve impact van langere laadtijden. En volgens Google verdienen bedrijven met een laadtijd van 5 seconden 2x meer met hun website dan degenen met een laadtijd van 19 seconds. Je snapt het: het moet snel, sneller, snelst. Deze tool geeft overigens ook feedback over wat je wél goed ingericht hebt. En bruikbare tips voor hoe je nog kunt verbeteren.
Google page speed insights - online mobile optimaliseren

Stap 4: Installeer Google Webmaster Tools.

Ik weet het, dit wordt een Google feestje. Maar met 90% van alle zoekopdrachten is Google een belangrijke bron van verkeer voor iedere website. Daarnaast zijn hun tools handig in gebruik, ook zonder uitgebreide technische kennis. Bekijk hier hoe je Google Webmaster Tools installeert. Ga naar zoekverkeer > mobiele bruikbaarheid. Daar zie je heldere feedback, per pagina, zoals: ‘Content breder dan scherm” of “Klikbare elementen te dicht bij elkaar”. Zo weet je direct wat je aan moet pakken!

Google Mobiele Bruikbaarheid testen - online optimaliseren

Stap 5: Test je design met Browserstack.

Hiermee kun je het uiterlijk van je site op allerlei verschillende devices checken. Check via Google Analytics via welke apparaten jouw website het meest bezocht wordt (Doelgroep > Mobiel > Apparaten). Focus daarop bij je verdere optimalisatie.

 

Is de conclusie dat je website nog wel wat verbetering kan gebruiken? Lees dan vooral verder!

2. Technieken om je website smartphone-proof te maken

Als je je website mobiel-vriendelijk laat maken, kun je voor verschillende technieken kiezen. Een mobiele website, een responsive website of een PWA/AMP. Bij een responsive website heb je één site met één ontwerp dat geschikt is voor alle apparaten, van mobiele telefoon of tablet tot laptop of desktop-computer, ongeacht welke resolutie.

Mobiele
website

Website voor mobiel - mobiele website

Een mobiele website is eigenlijk een tweede website, speciaal voor mobiele apparaten. Vaak draait deze op een eigen subdomein (bijvoorbeeld m.online-optimaliseren.nl). Een script leest uit welk apparaat je gebruikt en stuurt je aan de hand daarvan naar de gewone of de mobiele website.

Voordelen van een mobiele website
Een mobiele website kan helemaal geoptimaliseerd worden voor smartphones. Dus de code kan super snel en clean zijn. 

Nadelen van een mobiele website
In de praktijk is de mobiele website te vaak een uitgeklede variant van de gewone website. Als je dit goed inzet bied je content op een andere manier aan mobiele bezoekers, maar vaak wordt er alleen content of functionaliteit weggelaten. Het geeft je daarnaast een extra website om te onderhouden. Ook is het vaak geen mooie oplossing voor tabletbezoekers.

Responsive
Website

Website voor mobiel - responsive design

Bij een responsive website heb je een site met één ontwerp dat geschikt is voor alle apparaten, van mobiele telefoon of tablet tot laptop of desktop-computer, ongeacht welke resolutie.

Voordelen van responsive design
Het grote voordeel is dat je maar 1 website hoeft te onderhouden. Met responsive technieken kun je website optimaliseren voor elk scherm, van mobiel tot tablet, of zelfs TV. Wel moet de laadtijd goed in de gaten gehouden worden, omdat er complexere code voor nodig is. 

Nadelen van responsive design
De grootste uitdaging met responsive design is om het op alle apparaten goed te krijgen. De lay out kan op een Iphone in Safari heel anders uitpakken dan op een Samsung in Chrome. Hetzelfde geldt voor de volgorde van de content, afbeeldingen en de leesbaarheid. 

Adaptive
Website

Website voor mobiel - adaptive website

Een adaptive website past zich niet alleen aan naar de schermgrootte van een device, maar ook naar de schermresolutie en internetsnelheid. Zo worden grote afbeeldingen bijvoorbeeld weggelaten of verkleind om lange laadtijd te voorkomen.  

Voordelen van een adaptive website
Een adaptive website biedt vaak de beste ervaring aan de bezoeker. Ze hoeven minder lang te wachten tot de content verschijnt, en alle content is goed in beeld voor hun schermgrootte.

Nadelen van een adaptive website
Het is technisch complexer om een adaptive website te maken. En dus duurder. Ook het onderhoud van de website kost meer tijd, omdat er aparte pagina’s gemaakt moeten worden voor verschillende devices. 

Naast de bovenstaande technieken, zijn er ook nieuwere technieken in de markt. Google pusht deze enorm, omdat ze zó snel laden. Fijn voor de gebruiker, dus is Google fan. En ik ook. 

AMP
Accelerated mobile page

Een AMP pagina is eigenlijk een normale webpagina, maar met extra regels en beperkingen. Hierbij staan mobielvriendelijkheid en laadsnelheid centraal. AMP pagina’s laden in 0.5 seconden vanuit Google Search, tegenover 22 seconden voor andere mobiele sites. Je herkent ze aan het logo van een bliksemschicht in Google. 

Progressive Web Apps zijn enorm in opmars. Dit is een website met functionaliteiten van een app, zoals het aanroepen van de camera. Ook wordt de website vooruit geladen en is hij offline te gebruiken. Het biedt de voordelen van een app, zonder dat iemand een app hoeft te downloaden en installeren. Voor jou als website beheerder hoef je niet een aparte website én app of mobiele website te beheren. 

PWA
Progressive web app

Welke techniek kies je?

Heb je jouw website zelf gebouwd in een tool als WordPress of Joomla?

Deze platforms bieden vaak responsive thema’s en templates aan. Dit is op dit moment nog de eenvoudigste techniek om te implementeren zonder technische kennis. Kies bijvoorbeeld voor Twenty Seventeen (van WordPress.org) of BLDR (van Modern Themes). 

Ook bieden deze platforms steeds vaker plugins aan voor AMP en PWA. In veel CMS’en is dit heel eenvoudig te configureren met plugins. Toch is dit een grotere technische uitdaging dan responsive. Je zou voorzichtig kunnen experimenteren met AMP voor een aantal pagina’s. Begin met een aantal landingspagina’s en gebruik daarvoor de plugin AMP for WP – Accelerated Mobile Pages. Deze alles-in-1 plugin helpt jou eenvoudig om de pagina niet alleen snel te maken, maar ook (bijna) alle functionaliteit te geven die je wil. 

Is jouw website door een developer gebouwd?

Overleg dan met je ontwikkelaar wat haalbaar is. Is je website in een standaard CMS gebouwd? Dan kun je even Googlen welke mogelijkheden dit CMS biedt voor mobiele websites, en daarmee naar de developer gaan. Is jouw website custom gebouwd? Dan ben je vooral afhankelijk van de skills van de developer.  Welke techniek het voordeligst en meest effectief is, hangt ook af van hun bronnen, bedrijfsmodel en expertise. AMP en PWA zorgen voor de beste gebruikerservaring en de beste vindbaarheid, maar zijn moeilijker te implementeren. 

3. De juiste lay out op smartphone schermen

De layout van je website is één van de belangrijkste factoren voor het succes. Het geeft een eerste indruk. Helpt mensen om snel de info te vinden die ze zoeken. En zorgt ervoor dat je beter scoort in Google, als je dit goed aanpakt. Maar hoe pak je dit goed aan? Ik leg het je uit met een aantal basistips en een aantal voorbeelden van suuupergoede mobile layouts. Te beginnen met een voorbeeld:

Zo moet het niet:

Zo moet het wel:

Mobielvriendelijke website - voorbeeld - online optimaliseren

Tips voor een goede mobile layout

1. Viewport meta

Begin met een viewport metatag. Dit is een stukje code dat de mobiele browser vertelt  dat deze op een kleiner scherm moet passen. Zonder dit zal de site niet goed werken op een mobiel apparaat. Je hoeft dit stukje code maar 1 keer toe te voegen aan desectie van je website. Je kunt hiervoor verschillende configuraties kiezen, maar ik raad de volgende aan:

"viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

2. Let op je toptaken

Waarvoor komt een klant op jouw website? Misschien is dat maar één ding, zoals het boeken van een hotelovernachting bij Booking.com. Misschien zijn het wel 50 dingen, zoals bij de overheid. Je kunt, naast gezond verstand, ook in Google analytics gebruiken om je toptaken te bepalen. Bijvoorbeeld door te checken welke pagina’s het meest bezocht worden, of welke documenten het meest gedownload worden. Zorg hoe dan ook dat toptaken (top 3 dingen waar een bezoeker voor komt), direct in  beeld zijn. Komtie weer: kijk naar Google. Zij hebben alleen die ene zoekbalk op een verder vrijwel lege pagina.

3. Maak elementen groot genoeg

Het ‘fat finger syndrome’, misschien ken je het wel: je drukt per ongeluk op de verkeerde toets, bijvoorbeeld tijdens het typen op je smartphone of het aanklikken van een link. Superirritant. Juist daarom is het belangrijk dat de knoppen op je website groot genoeg zijn en niet te dicht op elkaar staan. Apple beveelt aan om knoppen minstens 44px bij 44px te maken.

4. Gebruik bekende gebruikpatronen

Wij smartphone gebruikers zijn inmiddels gewend om te swipen en tappen. Zorg dat jouw componenten herkenbaar zijn, zodat een gebruiker weet wat hij ermee moet doen. Als je verwacht dat je ergens kunt klikken of swipen, en het werkt niet, levert dit frustratie op. En haak je sneller af. Hoe vloeiender je door een website kunt gaan, zonder na te denken, hoe groter de kans op conversie. Wat voorbeelden van bekende UX-patronen zijn:

Mobile user experience patterns - online optimaliseren

Hier weten we dat we moeten swipen naar links om naar de volgende te gaan. En naar rechts om deze man te ‘liken’.

Responsive menu - website optimaliseren voor mobiel

Hier begrijpen we dat het hamburgertje een menu opent. En dat we op het kruisje kunnen klikken om het menu weer te sluiten.

Mobile user experience patterns forms - online optimaliseren

Hier weten we hoe elk van deze velden werkt. Zelfs als we nog nooit een interface als deze hadden gezien, bijvoorbeeld het schuifbalkje met de prijs, hadden we het begrepen. Omdat het intuïtief is en gebaseerd op patronen die we kennen. 

5. Minimaliseer typwerk

Mobiele bezoekers hebben geen muis en toetsenbord zoals een desktop computer. Dit maakt het invullen van formulieren lastiger en de afhaak groter. Vraag dus echt om de minimale informatie die je nodig hebt voor de koop. Ieder veld extra zorgt voor meer afhakers. En probeer velden waar mogelijk in de vorm van checkboxes, dropdown-menu’s en sliders aan te bieden (zie ook de afbeelding hierboven). Dit is prettiger werken dan typen voor mobiele bezoekers. 

6. Verdeel je content 

Probeer lappen tekst te voorkomen en verdeel je content in plaats daarvan over verschillende pagina’s. Of plaats content in een uitklapper. Dit om te voorkomen dat een bezoeker wordt overstelpt met informatie en veel moet scrollen. 

7. Voorkom grote afbeeldingen 

Ben jij één van die bedrijven die zo’n grote carrousel bovenaan iedere pagina heeft staan? Met geweldige foto’s van uitstekende kwaliteit die langskomen sliden. Niet doen. Gewoon, niet doen. Want:

1) Niemand ziet de tweede en derde foto van die carrousel. 

2) Waarschijnlijk zien de meesten zelfs de eerste foto niet, omdat het te lang duurt voordat deze geladen is. En dan zijn ze alweer weg.

3) Het kost veel snelheid, dus minpunten in Google en van je bezoeker.

4) Het zorgt ervoor dat een bezoeker meer moet scrollen dan nodig. 

Dus: mooie afbeeldingen, doen! Maar alleen als het iets toevoegt. En zorg dat je elke afbeelding zo klein mogelijk maakt: is je pagina 1200px breed, dan hoeft je afbeelding geen 6000px breed te zijn. Gebruik daarnaast een tooltje zoals TinyJPG of een WordPress plugin om al je afbeeldingen te comprimeren. Zo wordt het bestand minder zwaar, je pagina sneller, en je bezoeker blijer. 

 

4. Je content fijn leesbaar maken op mobiel

Geef mobiele gebruikers snel de informatie die ze zoeken. Mobiel bezoek is vaak tegelijkertijd met andere dingen bezig. Ze willen dus snel een antwoord op hun vraag, zonder lappen tekst door te moeten spitten. En jij gaat ze die geven.

1. Schrap alles wat niet nodig is

Voorkom lange zinnen en onnodige woorden: schrijf alleen wat echt nodig is. Helder en beknopt. Zo zorg je dat bezoekers alles kunnen lezen, zonder te hoeven scrollen of klikken. In het onderstaande voorbeeld zie je het verschil:

Content leesbaar op mobiel - online optimaliseren

2. Begin meteen met je boodschap

Zoveel mogelijk info moet ‘boven de vouw’ staan. Een mobiele sessie duurt gemiddeld maar 72 seconden. Begin dus met het allerbelangrijkste deel van je tekst. 

Dus niet: Bij het verkopen van je huis komen een heleboel zaken kijken. Je wil een zo hoog mogelijke prijs voor je woning, maar ook zo snel mogelijk verkopen. Ook het regelen van zaken als bezichtigingen, de optimale vraagprijs bepalen en onderhandelingen is niet eenvoudig. Makelaars helpen hierbij. Een nieuwe trend is het inhuren van een stylist. Een stylist helpt u om uw huis zo goed mogelijk te presenteren, waardoor kopers vaak bereid zijn meer te bieden.

Maar wel: Met een stylist verkoop je sneller je huis. En meestal ook voor een hogere prijs. Gemiddeld zelfs voor € 5.000 meer. Dat betekent dat je de kosten van de stylist er altijd uithaalt.

3. Schrijf een ‘killer’-kopregel

De kopregel is de belangrijkste zin van je tekst. Als mensen niet nieuwsgierig gemaakt worden door je kopregel, zullen ze niet verder lezen. Je kunt ook een kopregel en een subkop in je tekst gebruiken: zo heb je meer ruimte om de aandacht te trekken. Gebruik je keywords in de kop: zo snapt zowel Google als je mobiele bezoeker direct waar je tekst over gaat. 

De ideale lengte van je kop is 6 woorden, met maximaal 60 tekens (excl. spaties). Bekijk voor een pakkende kop bijvoorbeeld magazines. Wat zij doen is het volgende:

Nummer of trigger woord + bijvoeglijk naamwoord + zoekwoord + belofte

Schrijf jij iets over ramen lappen? Dan zou je kop ‘Hoe je het beste ramen kunt lappen’ kunnen zijn, of:

’19 bliksemsnelle manieren om al je ramen te lappen binnen een kwartier’

4. Gebruik actiegerichte tekst

Haal hulpwerkwoorden weg: geen kunnen, worden, hebben in jouw tekst. 

Dus niet: Als we een bieding hebben ontvangen voor uw woning, zullen we dit direct laten weten. Zo kunt u zo snel mogelijk beslissen of u interesse heeft in het bod. 

Maar wel: Bieding ontvangen? Wij bellen u direct. Zo kunt u snel beslissen of u wil verkopen. 
Durf ook in gebiedende wijs te schrijven. Let hierbij op dat je niet onvriendelijk overkomt.

Dus niet: Als u uw gegevens heeft ontvangen kunt u deze opslaan, zodat u ze snel kunt vinden als u ze nodig heeft. Hiervoor dient u wel eerst te registeren voor een eigen account. 

Maar wel: Gegevens ontvangen? Registreer uw account en sla uw gegevens op. Zo vindt u ze gemakkelijk terug. 

Een grote, opgemaakte tekst valt op tussen je alinea’s. 

5. Gebruik tekstopmaak

Zoals hierboven: als je wil dat een tekst gelezen wordt, moet je hem opvallend opmaken. Zorg dus dat je tekst op zo’n manier opmaakt dat hij makkelijker te scannen is, en de belangrijkste zaken eruit springen. 
    • Bullets lezen makkelijker dan paragrafen.
    • Gebruik minstens lettergrootte 14px. Dit lijkt groot, maar voorkomt dat bezoekers moeten inzoomen.
    • Gebruik kopjes om je tekst scanbaar te maken. Het liefst niet langer dan 3 woorden.
    • Korte alinea’s met witruimte maken een tekst rustiger
    • Een grote, opgemaakte tekst valt op tussen je alinea’s.

5. Bonus: Quick wins voor een mobielvriendelijke website

  1. Kies een responsive thema op WordPress, Joomla of een ander CMS.
  2. Voorkom kolommen. Één van de meest-voorkomende fouten is dat content naast elkaar staat op mobiel, in plaats van onder elkaar. Door geen kolommen te gebruiken zal dit bij jou nooit gebruiken.
  3. Voeg de metatag voor de viewport toe.
  4. Houd ruimte tussen linkjes. Per ongeluk op de verkeerde link klikken blijft éen van de grootste ergernissen bij mobiele gebruikers.
  5. Kies een groot en simpel lettertype.
  6. Zorg ervoor dat content niet breder is dan het scherm en dat horizontaal scrollen niet nodig is.
  7. Verwijder of comprimeer grote afbeeldingen. Dit zal de laadtijd op mobiel meteen stukken verbeteren!

 

Is het gelukt om jouw website helemaal mobielvriendelijk te maken? Dan is het zaak om dit aan Google te laten weten! Om te zorgen dat Google jouw mobielvriendelijke website sneller opnieuw crawlt en indexeert, kun je Google Webmaster tools gebruiken. Gebruik daarvoor de knop ‘Fetchen als Google’. Zo hebben jouw bezoekers snel profijt van een verbeterde mobiele ervaring op jouw website! 

Hulp nodig bij jouw mobiele website?

Vraag een gratis mobile quickscan aan!

Online optimaliseren - Myrna Pruijn - Cursus Online Marketing consultant -