Welke breakpoints gebruik je het beste?
Die van je eigen ontwerp. Er bestaat geen universeel lijstje, want elk ontwerp breekt op een ander punt.
Wil je toch een vertrekpunt: rond de 600, rond de 900 en rond de 1200 pixels dekt de meeste situaties.
Die drie zijn een startpunt, geen wet. Pas ze aan op wat je ziet gebeuren.
Hoe je ze bepaalt
Open je ontwerp en sleep je browservenster langzaam smaller. Op het moment dat iets eruitziet alsof het niet meer past, heb je een breakpoint gevonden.
Noteer die breedte en herhaal het. Zo kom je op grenzen die bij jouw ontwerp horen in plaats van bij een willekeurige telefoon uit 2015.
Waarom niet op apparaten
Omdat de lijst met apparaten elk jaar verandert en de formaten door elkaar lopen. Een grote telefoon overlapt met een kleine tablet.
Ontwerp je op de bekende maten, dan mis je alles ertussenin. Meer daarover lees je bij mobile first.
De drie die meestal werken
Rond de 600 pixels: van één kolom naar twee. Bij 900 pixels: van twee naar drie, en je menu klapt uit. Rond de 1200: je maximale breedte, waarboven je inhoud gecentreerd blijft.
Die laatste wordt vaak vergeten en is juist belangrijk. Zonder maximum wordt je tekst op een breed scherm onleesbaar lang.
Mijn vuistregels
- Bepaal grenzen op je eigen ontwerp, niet op een lijst apparaten.
- Drie is meestal genoeg; meer betekent meer onderhoud.
- Zet altijd een maximale breedte voor je tekst.
- Gebruik ronde getallen, dat leest prettiger terug in je code.
Die derde is de goedkoopste leeswinst die er is. Vijftig tot vijfenzeventig tekens per regel leest het prettigst.
Bij een paginabouwer
Daar zitten drie standen ingebouwd, en die kun je meestal aanpassen. Kijk of de standaardwaarden bij jouw ontwerp passen voordat je begint.
Verander je ze later, dan moet je alle instellingen die je per stand hebt gemaakt opnieuw nalopen. Doe het dus vooraf.
Uitzonderingen
Een tabel of een brede grafiek heeft soms een eigen grens nodig. Dat mag; niet elk onderdeel hoeft op dezelfde breedte om te klappen.
Houd dat wel beperkt, anders wordt je opmaak onvoorspelbaar. Meer daarover lees je bij hoeveel breakpoints heeft een website nodig.