Mobiel-eerst ontwerp: waarom je hotelsite op de telefoon moet kloppen

Meer dan de helft van de mensen die je hotelsite bezoeken, doet dat op een telefoon. Op dat kleine scherm beslist een gast in een paar seconden of hij blijft of vertrekt. Een site die op desktop er goed uitziet maar op mobiel hapert, verliest precies die groep.

Waarom mobiel-eerst geen keuze meer is

Vijf jaar geleden was mobiel een extra laag bovenop je desktopsite. Nu is het de standaard. De meeste reizigers oriënteren zich en boeken op de telefoon, zeker als ze onderweg zijn of spontaan besluiten een uitje te plannen.

Google heeft daar zijn indexering op aangepast. Wat Google aanduidt als Mobile-First Indexing (mobiel-eerst indexering) houdt in dat de zoekmachine de mobiele versie van je site gebruikt als basis voor je positie in de zoekresultaten. Een site die op mobiel langzaam laadt of moeilijk te gebruiken is, scoort slechter. Niet alleen op telefoons, maar ook op desktop.

De consequentie is dubbel: je verliest bezoekers die afhaken op mobiel, en je scoort lager in Google waardoor er ook minder bezoekers aankomen. Dat raakt je direct. Mobiel is daarmee een vast onderdeel van het grotere plaatje rond website en conversie, niet een losse technische klus.

En toch zijn de meeste Nederlandse hotelsites nog steeds gebouwd met desktop als uitgangspunt. Je ziet het aan de kleine knoppen, de brede tabellen die buiten het scherm schuiven, de formulieren die de telefoon niet goed opent. Die site kost je de meeste boekingen, niet de minste.

Wat er op mobiel fout gaat

De knelpunten op mobiele hotelsites zijn grotendeels dezelfde. Ze zijn herkenbaar en te herstellen.

Trage laadtijd. Op een mobielverbinding is een grote afbeelding direct dodelijk. Veel sites laden op desktop snel, maar op 4G of een matige wifi-verbinding duurt het te lang. Bezoekers haken al af bij een paar seconden wachten. Controleer je eigen site via PageSpeed Insights van Google. Die tool geeft je een score voor mobiel los van desktop, en laat zien wat het zwaarste weegt.

Knoppen die te klein zijn. Een knop die je met een muis gemakkelijk treft, is met een duim te klein. De vuistregel is dat een klikbaar element minimaal 44 bij 44 pixels groot moet zijn. Kleiner en je mist hem, of je tikt per ongeluk op iets ernaast. Op veel hotelsites is de boekingsknop te klein, staat hij te dicht op andere elementen of verdwijnt hij onder de vouw (alles wat je ziet zonder te scrollen).

Formulieren die niet meewerken. Een datumkiezer die gebouwd is voor een muisklik, werkt niet op een touchscherm. Een invulveld dat het toetsenbord niet automatisch in het juiste formaat opent (cijfers voor telefoonnummers, e-mailadres voor het e-mailveld), creëert wrijving. Elk extra moment van ergernis verhoogt de kans dat de gast het formulier verlaat.

Tekst die te klein of te dicht op elkaar staat. Lopende tekst in een klein lettertype werkt niet op een scherm dat je op 40 centimeter van je gezicht houdt. Een lettergrootte van 16 pixels of meer voor de lopende tekst is een harde ondergrens. Regels die te dicht op elkaar staan zijn moeilijk te lezen, zeker op een helder verlicht scherm in de zon.

Navigatie die niet werkt op een klein scherm. Een horizontale menubalk met zes items past niet op een telefoon. Toch laten veel sites dat menu gewoon afsnijden of verkleinen tot onleesbaarheid. Een hamburger- of collapsibel menu is voor mobiel de standaard oplossing, mits de gast er ook echt de boekingsknop in terugvindt.

De boekingsmodule zelf. Als je boekingsmodule niet mobiel-first gebouwd is, hapert het hele traject op het moment dat het erop aankomt. Goede datumkiezers op mobiel laten de kalender in het scherm passen, vragen niet om het invullen van codes en bevestigen de boeking in zo min mogelijk stappen.

Mobiele aandachtspunten op een rij

Stappenplan: je site mobiel controleren en verbeteren

Je hoeft geen nieuwe site te laten bouwen om mobiel te verbeteren. Begin met de huidige stand.

Stap 1: meet je mobiele situatie. Ga naar Google Analytics en kijk onder Gebruikers naar het aandeel mobiel versus desktop. Noteer het percentage. Open daarna PageSpeed Insights, voer je URL in en bekijk de mobiele score. Alles onder 50 is urgent, alles tussen 50 en 70 is verbeterbaar, boven 90 is goed.

Stap 2: open je eigen site op je telefoon. Doe dit in een incognitovenster zodat je geen gecachte versie ziet. Probeer de volgende dingen: zoek de boekingsknop zonder te scrollen, tik erop, probeer een datum te kiezen, vul het formulier in en stop bij de betaalstap. Schrijf op waar je haperingen voelt.

Stap 3: pak de afbeeldingen aan. Afbeeldingen zijn in de meeste gevallen de grootste boosdoener voor laadtijd. Comprimeer alle afbeeldingen op je site naar minder dan 200 KB per stuk, bij voorkeur in het WebP-formaat dat moderne browsers ondersteunen. Tools als Squoosh of TinyPNG doen dit gratis.

Stap 4: controleer de knoppen. Zijn alle knoppen en links minstens 44 bij 44 pixels? Staat de boekingsknop boven de vouw op mobiel, of moet de gast scrollen? Als je boekingsknop op de telefoon pas na scrollen verschijnt, los dit als eerste op.

Stap 5: test je boekingsformulier. Doorloop het volledige boekingsproces op je telefoon. Werkt de datumkiezer? Opent het toetsenbord automatisch in het juiste formaat? Hoeveel stappen zijn er van datum kiezen tot bevestiging? Als je ergens haperingen voelt, voelt een gast die ook.

Stap 6: pas je navigatie aan. Als je menu op mobiel moeilijk te lezen of te gebruiken is, laat het verkleinen tot een hamburger-menu met de boekingsknop als eerste item. Zorg dat de boekingsknop ook in het menu zichtbaar blijft als de gast al een stuk gescrolld heeft.

Veelgemaakte fouten bij mobiele optimalisatie

Alleen op desktop testen. Veranderingen doorvoeren en daarna alleen op de computer controleren of ze werken. Open je site na elke aanpassing op een echte telefoon, niet in het browservenster op klein formaat gezet.

De boekingsmodule vergeten. Een site die op mobiel snel en helder is maar waarvan de boekingsmodule niet meewerkt, verliest de gast op het beslissende moment. Mobiele optimalisatie stopt pas bij de bevestiging van de boeking, niet bij de homepage.

Een te brede tabel laten staan. Tabellen met meerdere kolommen, zoals een kameroverzicht of prijstabel, schuiven op mobiel buiten het scherm. De gast ziet de rechterkolom niet. Los dit op met een aangepaste weergave voor mobiel: kaartjes per kamertype in plaats van een horizontale tabel.

Denken dat een score van 70 goed genoeg is. Een PageSpeed-score van 70 betekent nog altijd dat er verbeterpunten zijn die bezoekers kosten. Op mobiel geldt: elke seconde laadtijd minder levert meer bezoekers op die blijven.

Te veel pop-ups of banners. Op een desktopscherm past een cookiebanner en een welkomstbericht samen op het scherm. Op mobiel nemen ze het halve scherm in beslag. Google bestraft sites met opdringerige pop-ups op mobiel in de zoekresultaten. Houd het scherm schoon.

Mobiel meten: kijk naar mobiel apart, niet naar het gemiddelde

Veel hoteliers kijken in hun cijfers naar één conversiepercentage en denken dat ze het beeld compleet hebben. Dat klopt niet. Splits je cijfers altijd uit naar mobiel versus desktop. In Google Analytics doe je dat onder Doelgroep, Apparaten. Wat je vrijwel altijd ziet: desktop converteert hoger, mobiel lager, en juist op mobiel komt het meeste verkeer binnen.

Stel je hebt 1.000 bezoekers per maand, waarvan 600 op mobiel. Op desktop boekt 3 procent, op mobiel 1 procent. Dat zijn 12 desktopboekingen en 6 mobielboekingen. Til je het mobiele percentage van 1 naar 2 procent, dan win je 6 boekingen per maand zonder een euro extra aan advertenties. Dat is precies waarom mobiel het eerste is waar je kijkt als je je conversie wilt optimaliseren.

Meet, splits uit, en reken het verschil door naar boekingen. Een gemiddelde verbergt het gat dat je het meeste geld kost.

Wat je nu kunt doen

Begin vandaag met drie dingen: open je site op je telefoon, noteer de drie punten waar je haperingen voelt, en check je PageSpeed-score voor mobiel. Die drie stappen kosten een halfuur en geven je een concreet startpunt.

Voor de bredere checklist van wat er op een hotelsite moet staan, lees wat een hotelwebsite minimaal nodig heeft. De relatie tussen laadtijd en boekingen staat uitgewerkt in page speed voor je hotelsite. En als je wilt weten of je knoppen wel goed geplaatst zijn op mobiel, kijk bij CTA-knoppen die werken voor hotels.

Wil je weten wat sneller laden en een betere mobiele ervaring je oplevert in euro's directe boekingen, reken het door via de besparingscalculator. Liever laten doen? Bekijk wat er mogelijk is bij website bouwen voor hotels.