Hoeveel breakpoints heeft een website nodig?
Drie is voor de meeste sites genoeg. Soms twee, zelden meer dan vier.
Elke extra grens betekent een extra versie van je ontwerp. Die moet je bouwen, testen en jarenlang onderhouden.
Meer breakpoints maken je site niet beter; ze maken hem duurder.
Waarom drie meestal volstaat
Eén grens voor de overgang van één naar meerdere kolommen. Eén voor de overgang naar een uitgeklapt menu. En één maximale breedte voor grote schermen.
Daarmee dek je telefoon, tablet en laptop af, plus alles ertussenin.
Wat een extra breakpoint kost
Niet alleen de bouwtijd. Bij elke wijziging moet je vier standen nalopen in plaats van drie, en dat blijft zo zolang de site bestaat.
Bij een paginabouwer betekent het bovendien dat elke instelling per stand kan afwijken. Dat wordt snel onoverzichtelijk.
Wanneer je er wel een extra nodig hebt
Bij een tabel die op middenformaat niet past. Bij een productoverzicht dat je op een breed scherm in vier kolommen wilt en op een laptop in drie.
Dat mag, maar houd het bij die onderdelen. Niet je hele ontwerp hoeft een extra stand te krijgen. Meer daarover lees je bij welke breakpoints gebruik je het beste.
Mijn vuistregels
- Begin met drie en voeg alleen toe als je een echt probleem ziet.
- Los eerst op met flexibele opmaak; vaak is een grens dan niet nodig.
- Een extra grens voor één onderdeel is prima; voor je hele site zelden.
- Test na elke toevoeging alle standen opnieuw.
Die tweede voorkomt de meeste extra grenzen. Moderne opmaaktechnieken laten kolommen vanzelf meebewegen.
Flexibel in plaats van vast
Met een raster dat zelf bepaalt hoeveel kolommen er passen, heb je vaak helemaal geen extra breakpoint nodig. De browser rekent dat uit.
Dat scheelt onderhoud en het werkt op formaten die je nooit hebt getest. Meer daarover lees je bij responsive design.
Hoe je ziet dat je er te veel hebt
Als je bij elke tekstwijziging vier of vijf standen moet controleren. Of als niemand meer weet waarom een bepaalde grens er ooit is gekomen.
Dan is opruimen goedkoper dan doorgaan. Meer over testen lees je bij hoe test je of je breakpoints kloppen.