Een breakpoint is de schermbreedte waarop een website overschakelt naar een andere layout. Onder die breedte toont de pagina één indeling, erboven herschikt de inhoud zich naar een andere. Zo kan één site er goed uitzien op een telefoon van 360 pixels en op een monitor van 1440 pixels, zonder dat je twee aparte versies bouwt.
Zie het als water dat je in glazen van verschillende grootte schenkt. Het water is je inhoud, en de breakpoint is het moment waarop je besluit dat een breder glas een andere indeling nodig heeft. Een prijstabel met drie kolommen werkt prima op een laptop, maar wordt onleesbaar als je hem op een telefoon propt. Dus bij een gekozen breedte klapt hij samen tot één gestapelde kolom. Dit is de kern van responsive design, en de meeste teams stellen hun breakpoints in via een mobile-first aanpak: je begint bij het kleinste scherm en voegt regels toe naarmate het venster groter wordt.
In code zitten breakpoints in CSS media queries. Frameworks zoals Tailwind leveren verstandige standaarden (sm, md, lg, xl) mee, zodat je de ruwe query zelden zelf schrijft. De truc is om breakpoints te kiezen op basis van waar je ontwerp echt krap wordt, niet op basis van een lijstje populaire telefoonmodellen. Een veelgemaakte fout is om de exacte pixelbreedtes van de iPhone van vorig jaar over te nemen, en dan de layout uit elkaar te zien vallen zodra er een nieuw formaat uitkomt of iemand de site op een halve laptopbreedte opent. Koppel de breakpoint aan de inhoud, en dat hele probleem verdwijnt. Apparaten veranderen elk jaar. Je inhoud niet.
Bij TopDevs zetten we breakpoints rond de inhoud in plaats van rond apparaatnamen, zodat de site van een klant overeind blijft op welk scherm een bezoeker ook gebruikt.
