Voor de meeste bedrijven komt het grootste deel van de bezoekers inmiddels met een telefoon. Iemand zoekt onderweg, op de bank of in de wachtkamer en belandt op jouw site. Toch worden websites nog vaak eerst op een groot scherm ontworpen en pas daarna in een mobiele jas geperst. Dat is de verkeerde volgorde. Een klein scherm stelt namelijk grotere eisen, niet kleinere: minder ruimte, een duim in plaats van een muis, vaak een tragere verbinding en een ongeduldiger bezoeker. In deze gids loop ik langs waar je op let als je voor mobiel ontwerpt, zodat je juist de bezoekers vasthoudt die het dichtst bij een aanvraag staan.

Waarom mobiel het uitgangspunt is

Wie eerst voor een breed scherm ontwerpt, vult al die ruimte vanzelf op met kolommen, beeld en details. Wanneer dat ontwerp dan naar een telefoon moet, blijkt de helft te veel. Je gaat schrappen, samenvouwen en verstoppen, en het resultaat voelt als een uitgeknepen versie van het origineel.

Begin je andersom, bij het kleine scherm, dan dwing je jezelf om eerst de kern te bepalen: wat moet er echt op deze pagina staan? Wat alleen op mobiel past, is meestal precies wat ertoe doet. Vanuit die kern bouw je naar grotere schermen toe, waar je dan ruimte hebt voor extra's in plaats van dat je moet weglaten. Dit mobiel-eerst denken is ook de rode draad in de gids over responsive design.

Tikgemak: ontwerpen voor de duim

Op een laptop wijs je met een muis precies aan wat je wilt. Op een telefoon doe je dat met een duim, en die is grof en zit vaak vast aan één hand. Dat verandert je hele ontwerp:

Het doel is simpel: iemand moet je site met één hand, lopend op straat, foutloos kunnen bedienen. Lukt dat, dan zit het tikgemak goed.

Leesbaarheid op een klein scherm

Tekst die op een groot scherm prettig leest, kan op een telefoon te klein of te dicht opeen worden. Mensen lezen op mobiel vaak in een omgeving vol afleiding, dus je tekst moet meteen rustig en helder ogen. Kies een ruime tekstgrootte, geef regels genoeg ruimte tussen elkaar en houd alinea's kort. Een muur van tekst schrikt op een klein scherm nog sneller af dan op een groot scherm.

Ook witruimte doet hier zwaar werk. Het lijkt verleidelijk om op een klein scherm alles dicht op elkaar te zetten om ruimte te besparen, maar juist dan wordt het benauwd en onleesbaar. Genoeg lucht tussen blokken maakt een pagina overzichtelijk, ook als hij smal is. Verdiep je verder in deze afwegingen in de gids over ontwerpen voor leesbaarheid.

Een goede mobiele site herken je eraan dat je hem nauwelijks opmerkt: je tikt, je leest en je komt waar je wilt zijn, zonder te knijpen of te zoeken.

Snelheid weegt op mobiel dubbel

Op een telefoon is geduld schaars. De verbinding is soms trager, de bezoeker is vaak onderweg en de concurrentie is één tik verderop. Een pagina die te lang laadt, ziet niemand af. Daarom telt snelheid op mobiel extra zwaar, en daar liggen ontwerp en techniek dicht bij elkaar.

Veel laadtijd gaat verloren aan te zware afbeeldingen. Beeld dat netjes is voorbereid en meeschaalt met het scherm scheelt enorm. Meer daarover lees je in de blog over laadtijd en beeld en in de bredere blog over je website sneller maken. Een snelle pagina is geen luxe op mobiel, maar de voorwaarde om überhaupt gezien te worden.

Veelgemaakte mobiele fouten

Een paar problemen komen op telefoonschermen telkens terug.

Knoppen en links te dicht op elkaar

Wanneer raakbare elementen tegen elkaar aan staan, mist iedereen wel eens. Geef ze ruimte, zodat elke tik raak is.

Verborgen belangrijke informatie

Soms verdwijnt cruciale informatie, zoals een telefoonnummer of openingstijden, achter extra tikken op mobiel. Houd juist op een klein scherm het belangrijkste direct zichtbaar.

Pop-ups die het scherm vullen

Een pop-up die op een laptop een hoekje vult, kan op een telefoon het hele scherm blokkeren. Wees terughoudend en zorg dat alles makkelijk te sluiten is.

Zelf doen of uitbesteden?

Een websitebouwer levert vaak een redelijk mobiel resultaat, en voor een eenvoudige site is dat soms genoeg. Maar de details, of een knop lekker tikt, of tekst rustig leest, of de pagina snel laadt op een matige verbinding, zijn precies waar een geoefend oog het verschil maakt. Daar verlies of houd je de bezoeker die met zijn telefoon bijna klaar is om contact op te nemen.

Wil je een site die op de telefoon net zo verzorgd werkt als op een groot scherm? Bekijk dan de pagina over responsive design of leg me je situatie voor via de contactpagina. Wil je weten op welke schermbreedtes je ontwerp moet kantelen, lees dan ook de gids over breakpoints kiezen.

Veelgestelde vragen

Tegenwoordig wel. Een aparte mobiele website is achterhaald en lastig te onderhouden. Nu maak je één site die zich aanpast aan elk scherm, met extra aandacht voor hoe hij op een telefoon werkt. Je beheert dus één site die overal goed oogt, niet twee versies die uit elkaar gaan lopen.

Groot genoeg om met een duim comfortabel te raken, zonder dat je per ongeluk de buurman aantikt. Een knop die op een laptop met een muis prima werkt, kan op een telefoon te klein zijn. Ruime knoppen met genoeg ruimte eromheen voorkomen ergernis en gemiste tikken.

Op een telefoon is het geduld korter en de afleiding groter. Een trage pagina, te kleine tekst of een formulier dat lastig invult, en de bezoeker is weg. Op een groot scherm vergeven mensen meer. Op mobiel telt elke seconde en elke onhandige stap dubbel zwaar.

Ja, en niet alleen in een verkleind browservenster. Pas op een echt toestel merk je hoe het aanvoelt: de snelheid, het tikgemak, het scrollen met een duim. Wat er op een groot scherm goed uitziet, kan in de hand toch tegenvallen. Echte tests halen problemen boven die je anders mist.

Verder in de kennisbank: Responsive design: de complete gids · Breakpoints kiezen · Ontwerpen voor leesbaarheid