Terug naar begrippenlijst
Breakpoint
Een breakpoint is een vooraf ingesteld schermformaat waarop het ontwerp van een website verandert. In de meeste gevallen gaat het om de overstap van desktop naar tablet, of van tablet naar mobiel. Zodra de breedte van het scherm een bepaald punt bereikt, worden andere stijlen of indelingen toegepast. Zo blijft de site goed leesbaar en bruikbaar op elk apparaat.
Inhoudsopgave
Zonder breekpunt, geen goed ontwerp
Websites worden bezocht op allerlei schermen: van grote desktops tot kleine smartphones. Een ontwerp dat alleen voor één formaat is gemaakt, werkt niet goed op andere schermen. Breakpoints zorgen ervoor dat je content zich automatisch aanpast, zonder dat je meerdere versies van een site hoeft te maken.
Breakpoints dragen bij aan:
- Een betere gebruikservaring
- Leesbare teksten en goed geplaatste elementen
- Een consistente uitstraling op verschillende apparaten
- Betere prestaties, omdat content gericht wordt geladen of aangepast
Schermformaten die je vaak tegenkomt
Breakpoints worden vaak gebaseerd op de breedte van standaard apparaten. Er is geen universele set regels, maar veel designers en developers gebruiken ongeveer deze richtlijnen:
- 1200px en hoger voor desktops en grote schermen
- 992px tot 1199px voor laptops en kleinere desktops
- 768px tot 991px voor tablets en grote smartphones
- 480px tot 767px voor kleine smartphones in landscape
- 0px tot 479px voor smartphones in portrait
Afhankelijk van de doelgroep, content en functionaliteit kunnen deze waarden uiteraard verschillen.
Vastklampen of meebewegen?
Breakpoints kunnen op verschillende manieren worden toegepast, afhankelijk van het type ontwerp, de gekozen aanpak (bijvoorbeeld mobile-first) en de mate van flexibiliteit die je nodig hebt voor verschillende schermgroottes.
- Vaste breakpoints: Gebaseerd op specifieke resoluties, bijvoorbeeld 768px.
- Flexibele (fluid) breakpoints: Afgestemd op het gedrag van de content, niet alleen op apparaten.
Sommige frameworks, zoals Bootstrap of Tailwind CSS, gebruiken standaard breakpoints. Maar je kunt er ook voor kiezen om je eigen breakpoints te definiëren, gebaseerd op hoe jouw content breekt of verspringt.
Veelgestelde vragen
Nee. Je kunt ook ‘mobile first’ werken en stijlen opbouwen vanaf kleine schermen, met breakpoints voor grotere schermen waar nodig.
Dat hangt af van je ontwerp. Soms zijn twee of drie breakpoints genoeg, soms heb je meer precisie nodig. Gebruik alleen wat nodig is.
Voornamelijk wel, maar je kunt ze ook gebruiken om lettergroottes, marges of navigatiegedrag aan te passen.
Een breakpoint is het moment waarop iets verandert. Media queries zijn de technische regels in CSS waarmee je dat moment definieert.
Krijn Elders Senior digital designer
