Op mobiel haakt 85,65% van de winkelwagens af, op desktop ligt dat lager. Een groot deel van dat verschil is te voorkomen met de juiste ontwerpkeuzes. In dit artikel lees je wat een webshop echt mobielvriendelijk maakt en hoe je dat pagina voor pagina bereikt.
Wat is het verschil tussen mobielvriendelijk en mobiel geoptimaliseerd?
Mobielvriendelijk betekent dat de webshop niet kapotgaat op een klein scherm. Tekst loopt goed door, afbeeldingen schalen mee en knoppen zijn aantikbaar. Dat is het minimum. Google vindt het noodzakelijk om te indexeren.
Mobiel geoptimaliseerd betekent dat de webshop is ontworpen om te converteren op mobiel. De indeling, de volgorde van informatie, de tikdoelen, het afrekenproces en de laadsnelheid zijn allemaal afgestemd op hoe mensen met een telefoon winkelen. Een webshop kan mobielvriendelijk zijn zonder mobiel geoptimaliseerd te zijn. Dat geldt voor veel shops.
Dit verschil telt, want mobielvriendelijk brengt je in het spel. Mobiel geoptimaliseerd levert omzet op. Een webshop die niet kapotgaat op een telefoon, maar 8 seconden nodig heeft om te laden en een afrekenformulier heeft dat is gemaakt voor muis en toetsenbord, is technisch mobielvriendelijk. Maar hij is niet mobiel geoptimaliseerd. Elke verbetering boven "niet kapot" is een verbetering van je conversieratio.
Waarom mobile-first indexing van Google alles verandert
Google gebruikt mobile-first indexing. Dat betekent dat Google je webshop beoordeelt op de mobiele versie, niet op de desktopversie. Heeft je mobiele shop minder inhoud, minder interne links of afbeeldingen die niet laden, dan baseert Google zich op die tekortkomingen.
Dat heeft directe gevolgen voor je positie in de zoekresultaten. Een webshop die er op desktop compleet uitziet maar op mobiel is uitgekleed, wordt gerangschikt op wat de mobiele versie laat zien. Als productomschrijvingen op mobiel worden ingekort, indexeert Google de ingekorte versie. Als navigatielinks op mobiel achter een ingeklapt menu zitten, kan Google ze minder goed crawlen.
In de praktijk is mobiele prestatie dus niet alleen een gebruikersprobleem. Het is ook een SEO-probleem. Verbeter je je mobiele shop, dan verbeter je ook je positie in Google. Elke mobiele verbetering werkt dubbel.
Core Web Vitals en hoe ze je positie beïnvloeden
Core Web Vitals zijn een set prestatiemetingen die Google gebruikt als rankingsignaal. Largest Contentful Paint meet hoe lang de hoofdinhoud van een pagina nodig heeft om te laden. Interaction to Next Paint meet hoe snel de pagina reageert op wat een bezoeker doet. Cumulative Layout Shift meet hoeveel de indeling onverwacht verspringt tijdens het laden.
Alle drie tellen mee op mobiel, waar netwerksnelheid en rekenkracht lager zijn dan op desktop. Een score die op een desktopbrowser prima is, kan op een middenklasse telefoon met een 4G-verbinding onvoldoende zijn. Een flink deel van je verkeer gebruikt precies zo'n telefoon.
Slechte Core Web Vitals schaden zowel je positie als je conversie, los van elkaar. Volgens onderzoek daalt de conversie met 4,42% voor elke extra seconde laadtijd op een mobiele pagina. Een pagina die 5 seconden laadt in plaats van 2 seconden, kan al de helft van zijn mogelijke conversies kwijt zijn voordat iemand je producten heeft gezien.
Mobiel ontwerp per paginatype
Elk paginatype in een webshop heeft op mobiel andere prioriteiten. Behandel je alle pagina's gelijk, dan optimaliseer je er geen goed.
Homepage
Op mobiel moet de homepage binnen de eerste scroll duidelijk maken wat de shop verkoopt en waar je heen kunt. Desktophomepages hebben vaak een brede hero met meerdere elementen. Op mobiel beslaat diezelfde hero het hele scherm. Als die niet meteen waarde laat zien en tot actie uitnodigt, scrolt de bezoeker door of vertrekt hij.
Houd de hoofdnavigatie bereikbaar zonder veel tikken. Een hamburgermenu is gebruikelijk, maar zet daar alleen de categorieën in die een nieuwe bezoeker echt nodig heeft. Verstopte navigatie is op mobiel onzichtbare navigatie.
Categoriepagina's
Categoriepagina's moeten op mobiel een balans vinden tussen het aantal producten en het gebruiksgemak. Rasters met twee kolommen werken voor de meeste producten goed. Lijsten met één kolom werken beter als de details op de afbeelding ertoe doen. Beide zijn beter dan rasters met drie kolommen, want daarin zijn productafbeeldingen op de meeste telefoons te klein om te lezen.
Filteren en sorteren zijn op categoriepagina's essentieel, maar op mobiel lastig. Een filterpaneel dat als scherm over de pagina opent, in plaats van als zijbalk, maakt filteren bruikbaar op een klein scherm. Lees de volledige gids over wat een categoriepagina is en hoe je er een ontwerpt voor meer over de opbouw van categoriepagina's.
Productpagina's
De productpagina moet op mobiel snel drie vragen beantwoorden. Wat is het? Wat kost het? Kan ik het makkelijk krijgen? De hoofdafbeelding moet direct laden en zijn te swipen. Prijs, variantkeuze en de knop om in de winkelwagen te leggen moeten zichtbaar zijn zonder te scrollen.
Zet de knop voor de winkelwagen op mobiel boven de vouw, of gebruik minstens een vaste knop die meebeweegt terwijl de bezoeker door de productomschrijving scrolt. Wie terug omhoog moet scrollen om iets in de winkelwagen te leggen, krijgt een extra kans om zich te bedenken.
Afrekenen
Bij het afrekenen haken mobiele bezoekers het vaakst af. Hoe minder stappen en velden, hoe beter. Met afrekenen als gast neem je de drempel van een account aanmaken weg, waardoor veel mobiele gebruikers afhaken. Lees de volledige gids over hoe je een afrekenpagina ontwerpt die afhaken vermindert voor uitgebreide tips over het optimaliseren van het afrekenen.
Duimzones en ergonomisch ontwerp
Mensen bedienen hun telefoon met hun duim, en een duim kan maar bepaalde delen van het scherm comfortabel bereiken. Het midden onderaan is het makkelijkst te bereiken. De hoeken bovenaan zijn het moeilijkst. Dat is geen detail. Het is een ergonomisch feit dat direct bepaalt of klanten de belangrijkste onderdelen van je webshop gebruiken.
Zet je belangrijkste actieknoppen, zoals in winkelwagen, doorgaan naar afrekenen en filter toepassen, in de zone midden onderaan, waar de duim vanzelf rust. Navigatiebalken onderaan het scherm zijn op grote telefoons beter bereikbaar dan balken bovenaan. Een balk bovenaan komt uit de desktopwereld en werkt slecht met één hand op mobiel.
Kleine tikdoelen zijn een veelvoorkomend gebruiksprobleem op mobiel. Knoppen en links die makkelijk zijn te klikken met een muiscursor, zijn met een vingertop lastig precies te raken. Google adviseert tikdoelen van minstens 48 bij 48 pixels met voldoende ruimte tussen aangrenzende doelen. Te kleine doelen leiden tot misgetikte knoppen, frustratie en bezoekers die weggaan.
Afrekenen en formulieren op mobiel optimaliseren
Formulieren zijn een van de grootste bronnen van wrijving bij het afrekenen op mobiel. Een formulier dat is ontworpen voor toetsenbord en muis wordt traag en foutgevoelig als je het op een touchscreen invult, met autocorrectie die ingrijpt. Een paar gerichte verbeteringen maken formulieren op mobiel veel makkelijker in te vullen.
Gebruik de juiste toetsenborden
HTML-invoertypes vertellen de mobiele browser welk toetsenbord hij moet tonen. Een e-mailveld met het invoertype email toont een toetsenbord waarop het @-teken goed bereikbaar staat. Een telefoonnummerveld met het invoertype tel toont een numeriek toetsenbord. Een veld met het standaardtype tekst toont voor alles een volledig toetsenbord, ook voor telefoonnummers en postcodes.
Het verkeerde invoertype geeft onnodige wrijving. De klant moet zelf van toetsenbord wisselen of typen met de verkeerde indeling. De oplossing is één attribuut per formulierveld aanpassen. Het is een van de verbeteringen met het beste rendement per uur werk bij het afrekenen op mobiel.
Beperk het aantal velden
Elk veld in een afrekenformulier is op mobiel een obstakel. Loop je afrekenproces na en haal elk veld weg dat niet nodig is om de bestelling af te ronden. Aparte velden voor voornaam en achternaam kun je meestal samenvoegen. Een aanhef is zelden nodig. Meerdere adresregels kun je vaak vervangen door één adreszoeker.
Heb je extra informatie nodig voor marketing of analyse, vraag die dan na de aankoop, niet tijdens het afrekenen. Een enquête na de aankoop levert dezelfde gegevens op zonder het risico dat mensen afhaken.
Ondersteun automatisch invullen
Moderne mobiele browsers en wachtwoordmanagers kunnen velden bij het afrekenen automatisch invullen als je formulier goed is opgebouwd. Het autocomplete-attribuut bij elk veld vertelt de browser om wat voor gegevens het gaat. Een veld met de juiste autocomplete-waarde wordt door de browser automatisch ingevuld als de klant zijn gegevens heeft opgeslagen. Automatisch invullen kan de afrekentijd op mobiel flink verkorten, en dat speelt echt mee bij de vraag of een klant zijn aankoop afrondt.
Bied mobiele betaalmethoden aan
Met mobiele betaalmethoden, zoals digitale wallets, rondt een klant een aankoop af met biometrische verificatie in plaats van zelf kaartgegevens in te typen. Voor een klant op een telefoon scheelt het veel moeite als hij geen kaartnummer van 16 cijfers, een vervaldatum en een beveiligingscode hoeft in te voeren. Webshops die deze betaalmethoden naast gewone kaartbetalingen aanbieden, zien een hogere mobiele conversie, omdat de wrijving op de gevoeligste stap verdwijnt.
Laadsnelheid op mobiel
Laadsnelheid weegt voor mobiele webshops zwaarder dan voor desktopshops, want mobiele verbindingen zijn trager en processors zwakker. Een pagina die op breedband in 2 seconden laadt, kan via mobiele data 6 seconden nodig hebben. Onderzoek laat zien dat 53% van de mobiele bezoekers verwacht dat pagina's binnen 3 seconden laden. Krijgen ze dat niet, dan vertrekken ze.
Comprimeer afbeeldingen
Afbeeldingen zijn de grootste factor in de laadtijd op mobiel. Elke productafbeelding, banner en sfeerfoto moet worden gecomprimeerd voordat hij de browser bereikt. Moderne beeldformaten geven bij dezelfde beeldkwaliteit aanzienlijk kleinere bestanden dan oudere formaten.
Met lazy loading worden afbeeldingen onder de vouw pas geladen als de klant ernaartoe scrolt. Het zichtbare deel van de pagina laadt meteen. Al het andere laadt pas als het nodig is. Zo voelt de pagina sneller, ook als het totale paginagewicht gelijk blijft.
Beperk scripts
Scripts van derden, zoals analysetools, chatwidgets, marketingpixels en reviewtools, maken elke pagina trager. Elk script moet worden gedownload, verwerkt en uitgevoerd. Op mobiel duurt dat langer dan op desktop. Loop de scripts op je webshop na en haal alles weg wat niet aantoonbaar bijdraagt aan omzet of klantervaring.
Scripts die je nodig hebt, kun je vaak asynchroon laden. Ze laden dan na de hoofdinhoud van de pagina in plaats van ervoor. Zo is de pagina bruikbaar voordat de scripts klaar zijn, wat je Core Web Vitals en de ervaring van de klant verbetert.
Test op echte apparaten
De ontwikkelaarstools van je browser hebben een mobiele simulator waarmee je je webshop bekijkt alsof je op een telefoon zit. De simulator is handig om de indeling te controleren, maar laat niet nauwkeurig zien hoe een echt apparaat op een echt netwerk presteert. Een middenklasse telefoon op 4G gedraagt zich anders dan de simulator op een snelle desktop.
Test regelmatig op echte apparaten. Problemen die je in de simulator niet ziet, zoals vertraagde aanraakreacties, lettertypes die slecht worden weergegeven en bepaalde fouten in de indeling, vallen op een echt apparaat meteen op. Heb je niet de beschikking over meerdere apparaten, dan zijn er gratis tools online die je webshop via echte apparatuur op echte netwerken laten zien.
Mobiele SEO naast snelheid
Snelheid en Core Web Vitals krijgen de meeste aandacht bij mobiele SEO, maar nog een aantal andere factoren bepaalt hoe goed je webshop scoort in mobiele zoekresultaten.
Vermijd tussenschermen die de hoofdinhoud op mobiel bedekken. Pop-ups en overlays die de pagina direct na het laden blokkeren, worden bestraft door het mobiele zoekalgoritme van Google. Gebruik je een pop-up om e-mailadressen te verzamelen of een cookiemelding, laat die de hoofdinhoud dan niet bedekken voordat de bezoeker de pagina heeft kunnen zien.
Zorg dat alle inhoud die je op desktop toont, ook op mobiel bereikbaar is. Zit inhoud op mobiel achter een "lees meer"-knop, dan indexeert Google mogelijk de ingeklapte versie in plaats van de volledige tekst. Voor productomschrijvingen en categorieteksten die bijdragen aan je positie, moet de volledige tekst op mobiel beschikbaar zijn zonder extra tikken.
Interne links moeten op desktop en mobiel hetzelfde zijn. Heeft je desktopshop een opvallend blok met gerelateerde producten met links naar andere categorieën, neem die links dan ook op in de mobiele versie. Navigatielinks die Google gebruikt om de structuur van je webshop te begrijpen, mogen op mobiel niet verdwijnen.
Zo pakt WEMASY mobiel aan
Het webshopsysteem van WEMASY maakt standaard responsieve winkelpagina's die zich aanpassen aan elk schermformaat. Productpagina's, categoriepagina's en het afrekenen zijn ontworpen om te voldoen aan de eisen van mobile-first indexing van Google. Het afrekenproces ondersteunt mobiele betaalmethoden en formuliervelden met het juiste type. Core Web Vitals zijn ingebouwd in de hosting en levering van het systeem, dus je hoeft niet handmatig te optimaliseren. Wat er in elk abonnement zit, zie je op de prijspagina.
Veelgestelde vragen
Hoe controleer ik of mijn webshop mobielvriendelijk is?
Google Search Console heeft een rapport over bruikbaarheid op mobiel dat specifieke problemen op je pagina's aanwijst, zoals tekst die te klein is, klikbare elementen die te dicht bij elkaar staan of inhoud die breder is dan het scherm. PageSpeed Insights geeft je Core Web Vitals-scores voor mobiel en desktop apart. Beide tools zijn gratis en geven concrete, bruikbare resultaten in plaats van een algemeen voldoende of onvoldoende. Met de websitebouwer van WEMASY stel je dit direct in op je webshop.
Beïnvloedt mobiel ontwerp mijn positie in Google?
Ja, direct. Google gebruikt mobile-first indexing, dus je webshop wordt gerangschikt op basis van de mobiele versie. Core Web Vitals, die worden beïnvloed door mobiele factoren als laadsnelheid en stabiliteit van de indeling, zijn een bevestigd rankingsignaal. Een webshop die op mobiel goed presteert, heeft een voorsprong op een shop die dat niet doet, ook als de desktopversies gelijk zijn.
Wat is het meest voorkomende probleem bij afrekenen op mobiel?
Wrijving in formulieren is het meest voorkomende probleem. Afrekenformulieren die zijn ontworpen voor muis en toetsenbord kosten op een touchscreen te veel moeite. De oplossingen met de meeste impact: de juiste invoertypes gebruiken zodat het goede toetsenbord verschijnt, het aantal velden verminderen, automatisch invullen aanzetten en mobiele betaalmethoden aanbieden waarbij je geen kaartgegevens met de hand hoeft in te voeren. Met deze vier verbeteringen stijgt het aantal afgeronde bestellingen op mobiel meestal merkbaar.
Hoe beïnvloedt de laadsnelheid op mobiel mijn verkoop?
Het verband is direct en goed onderbouwd. Onderzoek laat een daling van ongeveer 4% in de conversie zien voor elke extra seconde laadtijd. Een webshop die in 1 seconde laadt, converteert aanzienlijk beter dan dezelfde shop die er 4 seconden over doet. Vooral bij mobiele webshops, waar de netwerkomstandigheden wisselen en bezoekers sneller afhaken bij een trage ervaring, levert een snellere pagina vaak het snelst resultaat op van alle technische investeringen.
Moet ik een aparte mobiele webshop bouwen of een responsief ontwerp gebruiken?
Responsief ontwerp, waarbij één webshop zijn indeling aanpast aan het schermformaat, is de standaardaanpak en wat Google adviseert. Aparte mobiele sites kosten meer onderhoud, kunnen inconsistenties in de indexering geven en zijn lastiger gelijk te houden als je producten en inhoud bijwerkt. Tenzij je een specifieke operationele reden hebt voor een aparte mobiele ervaring, is responsief ontwerp op één URL de juiste keuze.
Hoe verminder ik het afhaken van winkelwagens op mobiel?
Afhaken op mobiel komt door een combinatie van wrijving en afleiding. De strategieën met de meeste impact: een eenvoudig afrekenproces met zo min mogelijk stappen en velden, afrekenen als gast zodat er geen account nodig is, mobiele betaalmethoden waarbij je geen kaartgegevens hoeft te typen en een snel ladende afrekenpagina. Retargeting via e-mail voor verlaten winkelwagens werkt ook goed om bezoekers terug te halen die hun aankoop niet in één bezoek hebben afgerond.