Wat is een breakpoint in webdesign?
Een breakpoint is de schermbreedte waarop je opmaak omschakelt naar een andere indeling. Onder die breedte drie kolommen naast elkaar, erboven één kolom onder elkaar.
Het is dus een getal, geen apparaat. Dat klinkt als een detail en het is precies waar de meeste verwarring vandaan komt.
Een tablet in liggende stand is breder dan menige laptop. Wie in apparaten denkt, komt daar vanzelf op uit.
Hoe het werkt
In je opmaak staan regels die pas gelden boven of onder een bepaalde breedte. De browser meet het venster en kiest de bijbehorende set.
Dat gebeurt continu. Sleep je je venster smaller, dan zie je de indeling live omklappen.
Waarom het een getal is en geen apparaat
Omdat schermformaten door elkaar lopen. Een grote telefoon in liggende stand is breder dan een kleine tablet staand.
Ontwerp je op apparaten, dan mis je alles ertussenin. Ontwerp je op breedtes, dan klopt het overal. Meer daarover lees je bij responsive design.
Waar je ze legt
Op het punt waar je ontwerp eruit gaat zien alsof het niet meer past. Sleep je venster smaller en kijk waar het wringt; daar hoort een breakpoint.
Dat levert vaak andere getallen op dan de standaardwaarden die je overal tegenkomt. Meer daarover lees je bij welke breakpoints gebruik je het beste.
Mijn vuistregels
- Denk in breedtes, niet in apparaatnamen.
- Leg een breakpoint waar je ontwerp breekt, niet op een rond getal.
- Begin smal en werk naar breed toe.
- Hoe minder breakpoints, hoe minder onderhoud.
Die derde scheelt het meest. Een ontwerp dat smal begint, schaalt vanzelf op; andersom moet je overal dingen weghalen.
Het verschil met een viewport
De viewport is het zichtbare gebied in de browser van je bezoeker. Je breakpoint is de grens die jij daarin legt.
De een is een meting, de ander een keuze. Meer daarover lees je bij het verschil tussen een breakpoint en een viewport.
In een paginabouwer
Daar zitten meestal drie vaste standen: mobiel, tablet en desktop. Je kunt per stand andere waarden instellen.
Dat werkt prima, zolang je je realiseert dat die standen ook gewoon breedtes zijn en dat je ze meestal kunt aanpassen.