Je website wordt op talloze schermen bekeken: een telefoon in de bus, een tablet op de bank, een breed scherm op kantoor. Een goed responsive ontwerp beweegt met al die formaten mee zonder dat het er ergens raar uitziet. De momenten waarop je layout van vorm verandert, noemen we breakpoints. Kies je ze verkeerd, dan valt je ontwerp net op de verkeerde plek uit elkaar: tekst die te breed wordt om te lezen, kolommen die tegen elkaar aan plakken of knoppen die je nauwelijks raakt. In deze gids leg ik uit op welke breedtes je ontwerp moet meebewegen en hoe je een resultaat krijgt dat overal klopt.

Wat zijn breakpoints precies?

Een breakpoint is een schermbreedte waarop je ontwerp van indeling verandert. Onder die breedte staan blokken bijvoorbeeld onder elkaar, erboven naast elkaar. Het is een soort schakelpunt: tot hier op deze manier, daarboven anders. De rest van de tijd schaalt je ontwerp vloeiend mee, en alleen op die paar punten kantelt de structuur naar een nieuwe opzet.

Het idee komt voort uit een simpele waarheid: wat goed werkt op een breed scherm werkt zelden goed op een smal scherm en andersom. Drie kolommen naast elkaar zijn prettig op een laptop, maar op een telefoon worden ze zo smal dat niemand ze nog leest. Met een breakpoint zeg je: onder deze breedte zet ik die kolommen onder elkaar. Zo houd je het overzicht op elk formaat.

Laat de inhoud bepalen, niet het apparaat

De grootste denkfout bij breakpoints is dat mensen ze afstemmen op specifieke apparaten. Ze zoeken de breedte van de populairste telefoon op en leggen daar een breakpoint. Het probleem is dat schermformaten elk jaar veranderen en dat er tientallen varianten naast elkaar bestaan. Je loopt altijd achter de feiten aan.

Beter is om je eigen ontwerp als maatstaf te nemen. Maak het venster langzaam smaller en kijk waar het beeld begint te wringen. Wordt een regel tekst te lang om comfortabel te lezen? Plakken twee blokken te dicht op elkaar? Precies daar hoort een breakpoint. Zo ontstaan ze vanuit je inhoud en niet vanuit een lijstje toestellen. Dit sluit aan op het bredere principe in de gids over responsive design: je ontwerpt voor mensen op een scherm, niet voor een apparaat.

Hoeveel breakpoints heb je nodig?

Minder dan je denkt. Voor de meeste zakelijke websites volstaan er twee of drie. Een typische opzet ziet er zo uit:

Meer breakpoints toevoegen klinkt grondig, maar maakt je ontwerp vooral lastiger te onderhouden. Elke extra schakeling is een plek waar iets stuk kan gaan bij een latere aanpassing. Houd het overzichtelijk en voeg alleen een breakpoint toe waar het echt nodig is.

Vloeiend blijven tussen de breakpoints

Breakpoints zijn de momenten waarop je layout kantelt, maar het grootste deel van de tijd zit je ertussenin. Daar moet het ontwerp soepel meeschalen. Een veelgemaakte fout is dat een site er op precies de geteste breedtes goed uitziet, maar daartussen verrast met te grote witruimtes of een element dat ineens te breed wordt.

De oplossing zit in flexibele maten in plaats van vaste pixels. Laat afbeeldingen meeschalen met hun container, gebruik percentages en moderne flexibele rasters en stel een maximale breedte in voor tekstblokken zodat regels nooit oncomfortabel lang worden. Zo voelt elke breedte als een bewuste keuze, ook de breedtes die je niet apart hebt bekeken. Het resultaat is een site die niet alleen op drie momenten klopt, maar overal.

Een goed responsive ontwerp herken je niet aan de breakpoints, maar aan het feit dat je ze nergens opmerkt. De overgang voelt vanzelfsprekend.

Valkuilen die je layout breken

Een paar terugkerende problemen zorgen ervoor dat een ontwerp tussen formaten alsnog uit elkaar valt.

Vaste breedtes die niet meebuigen

Een element met een harde breedte van bijvoorbeeld 600 pixels past prima op een laptop, maar duwt op een telefoon zomaar de hele layout scheef. Werk met flexibele maten en maximale breedtes in plaats van vaste getallen.

Beeld dat niet meeschaalt

Een te grote afbeelding die niet meebuigt, breekt het ontwerp en vertraagt de pagina. Zorg dat beeld zich aanpast aan de ruimte en goed is voorbereid. Meer daarover lees je in de blog over laadtijd en beeld.

Het kleinste scherm vergeten

De smalste telefoon krijgt vaak de minste aandacht, terwijl juist daar mensen afhaken bij een rommelig beeld. Test altijd op een echt klein scherm. Meer hierover in de blog over mobiel eerst bouwen.

Zelf doen of uitbesteden?

Met een websitebouwer regel je een deel van het responsive gedrag automatisch, en voor een eenvoudige site kan dat genoeg zijn. Heb je een eigen ontwerp met meerdere kolommen, kaarten en beeld, dan komt het juist op die overgangen aan. Een geoefend oog ziet waar het wringt voordat je bezoekers het merken, en weet de breakpoints zo te kiezen dat het overal rust uitstraalt.

Wil je een site die op elk scherm even verzorgd oogt? Bekijk dan de pagina over responsive design of leg me je situatie voor via de contactpagina. Twijfel je of je huidige site nog meebeweegt met de schermen van nu, lees dan ook de gids over ontwerpen voor mobiel.

Veelgestelde vragen

Vaak volstaan er twee of drie: een overgang van telefoon naar tablet en een van tablet naar groot scherm. Meer breakpoints maken het ontwerp niet beter, ze maken het alleen lastiger te onderhouden. Begin met weinig en voeg er alleen een toe waar het beeld echt breekt.

Nee. Apparaten en schermformaten veranderen continu, dus is het slimmer om de breakpoint te leggen waar je eigen ontwerp gaat wringen. Je kijkt naar de inhoud, niet naar een lijstje telefoonmodellen dat volgend jaar alweer anders is.

Responsive ontwerp is het hele idee dat je site zich aanpast aan elk scherm. Breakpoints zijn de specifieke punten waarop de layout van vorm verandert. Ze zijn een onderdeel van responsive werken, niet hetzelfde.

Allebei. In de browser sleep je het venster smaller en zie je snel waar het breekt. Op een echt toestel merk je daarnaast hoe het aanvoelt: tikgemak, snelheid en leesbaarheid. Die combinatie geeft het volledige beeld.

Verder in de kennisbank: Responsive design: de complete gids · Ontwerpen voor mobiel · Grid en uitlijning