De meeste mensen bezoeken je webshop op hun telefoon, vaak onderweg of op de bank. Toch wordt een shop nog regelmatig ontworpen op een grote desktopmonitor en daarna haastig ingekrompen voor mobiel. Het resultaat is een shop die op het kleine scherm onhandig aanvoelt, precies waar de meeste verkoop zou moeten vallen. Deze gids legt uit wat mobiel-first design echt inhoudt en hoe je een shop maakt die op de telefoon net zo goed verkoopt als op de desktop.

Inhoudsopgave

Wat mobiel-first echt betekent

Mobiel-first is meer dan een responsieve site die meeschaalt. Het betekent dat je vanaf het eerste idee vanuit het kleine scherm ontwerpt en pas daarna opschaalt naar de desktop. Zo dwing je jezelf om keuzes te maken: wat moet echt op die productpagina, en wat is overbodig? De basis daarvan vind je in waarom mobiel-first telt.

Waarom mobiel de norm is

Het aandeel mobiele bezoekers is voor de meeste shops al jaren in de meerderheid. Daar komt bij dat Google vooral de mobiele versie beoordeelt voor je vindbaarheid. Een shop die op de telefoon traag of onhandig is, scoort dus ook lager bij desktopbezoekers. Mobiel goed doen is daarmee geen detail, maar een voorwaarde, en het hangt direct samen met de complete gids over webshop-SEO.

Op een klein scherm is ruimte schaars, dus elke keuze telt. Een opgeruimd menu, een goed vindbare zoekfunctie en logische categorieen helpen bezoekers snel bij het juiste product. Dat raakt aan de bredere complete gids over UX en navigatie. Praktisch lees je in de zoekfunctie van je webshop en filters en facetten hoe je mensen ook op mobiel moeiteloos laat vinden wat ze zoeken.

Productpagina's en knoppen

Op de productpagina valt de koopbeslissing, ook op mobiel. Houd het overzichtelijk: een duidelijke hoofdfoto, de prijs direct zichtbaar en een grote, goed bereikbare knop om in de winkelmand te leggen.

Hoe je zo'n pagina opbouwt, staat in de complete gids over productpagina's die verkopen.

De mobiele checkout

Nergens haken mobiele bezoekers zo hard af als bij een omslachtige checkout. Kleine velden, te veel stappen en typwerk dat op een toetsenbordje vervelend is, jagen mensen weg vlak voor de finish. Houd het afrekenen kort, bied mobielvriendelijke betaalmethoden en vraag alleen het hoognodige. De volledige aanpak staat in de complete gids over de perfecte checkout; achtergebleven mandjes vang je daarnaast op met aandacht voor verlaten winkelmandjes.

Snelheid op mobiel

Op mobiel telt elke seconde dubbel, want de verbinding is vaak trager dan thuis. Zware afbeeldingen en overbodige scripts maken het verschil tussen een vlotte en een frustrerende ervaring. Snelheid en mobiel-first zijn daarom onlosmakelijk; de diepte vind je in de complete gids over snelheid en performance.

Zelf doen of uitbesteden?

Een mobielvriendelijke shop begint bij goede keuzes in het ontwerp, en daar zit precies het werk dat lastig achteraf te repareren is. Een desktopgerichte shop mobiel-proof maken kost vaak meer dan het meteen goed bouwen. Ik ontwerp elke webshop die ik bouw mobiel-first, en bij onderhoud en beheer houd ik dat op peil. Wil je weten hoe jouw shop op mobiel presteert, neem dan contact op. Ik werk altijd op offerte.

Veelgestelde vragen

Mobiel-first betekent dat je je shop eerst ontwerpt voor het kleine scherm en daarna pas naar de desktop opschaalt, in plaats van andersom. Omdat de meeste bezoekers op hun telefoon komen, ontwerp je voor de meerderheid en niet voor de uitzondering.

Niet helemaal. Responsief betekent dat je site zich aanpast aan het scherm; mobiel-first betekent dat je vanaf het begin vanuit het mobiele gebruik denkt. Een responsieve shop kan op mobiel nog steeds onhandig zijn als hij vanuit de desktop is bedacht en daarna ingekrompen.

Ja, Google beoordeelt vooral de mobiele versie van je shop. Een site die op de telefoon traag of onhandig is, scoort daardoor lager, ook bij bezoekers op de desktop. Mobiel goed op orde hebben is dus geen detail maar een basisvoorwaarde.

Te veel willen tonen op een klein scherm: kleine knoppen, eindeloos scrollen en een omslachtige checkout. Op mobiel wint eenvoud. Grote, goed bereikbare knoppen, een korte route naar de kassa en duidelijke keuzes maken het verschil tussen een verkoop en een afhaker.

Verder in de kennisbank: UX en navigatie voor webshops · De perfecte checkout · Snelheid en performance van je webshop