Je bezoekers komen op alle soorten schermen: een smalle telefoon, een tablet, een laptop, een breed bureaubeeldscherm. Een goede site past zich aan elk daarvan aan. De punten waarop de opmaak verandert, heten breakpoints. Je hoeft de techniek niet te kennen, maar het helpt om te begrijpen waarom die overgangen er zijn en waar het vaak misgaat.
Wat een breakpoint is
Een breakpoint is de schermbreedte waarop de indeling verandert. Onder een bepaalde breedte vallen drie kolommen bijvoorbeeld onder elkaar, of verdwijnt het menu achter een knopje. Het idee is simpel: wat op een breed scherm netjes naast elkaar past, moet op een smal scherm anders worden gestapeld om leesbaar te blijven.
Niet ontwerpen voor één scherm
De klassieke fout is een site bouwen die alleen op de eigen laptop goed oogt. Tussen de breakpoints zit een hele wereld aan schermbreedtes. Sleep het venster van je browser eens langzaam smaller en kijk wat er gebeurt: vaak ontdek je breedtes waarop tekst tegen een beeld aanbotst of een knop half wegvalt.
Een site is niet af op één scherm. Hij is pas af als hij op elke breedte ertussen ook klopt.
Begin klein, bouw op
Het werkt vaak het best om eerst het ontwerp voor de smalle telefoon goed te krijgen en daarna pas de grotere schermen. Op een klein scherm moet je keuzes maken over wat echt belangrijk is. Die discipline maakt ook de bredere versies sterker, omdat je dan al weet wat er toe doet.
Veelvoorkomende knelpunten
- Tabellen die op mobiel buiten het scherm vallen
- Grote koppen die op een telefoon over meerdere regels breken
- Beelden die rekken of juist te klein worden
- Knoppen die te dicht op elkaar staan om met je duim te raken
Test op echte apparaten
Een simulator in je browser is handig, maar niets vervangt je site echt openen op een telefoon en een tablet. Pas dan voel je hoe het scrolt, of knoppen goed te raken zijn en of de tekst prettig leest. Die paar minuten testen voorkomen de meeste klachten achteraf.
Houd het overzichtelijk
Meer breakpoints is niet beter. Een handvol goed gekozen overgangen volstaat meestal. Te veel uitzonderingen maken een site lastig te onderhouden en moeilijk voorspelbaar. Eenvoud werkt ook hier in je voordeel.
Wil je een site die op elk scherm klopt? Neem contact op.
Verder lezen: Mobiel-eerst ontwerpen · Mooi en snel