Een website die er op je laptop prachtig uitziet, kan op een tablet volledig uit elkaar vallen. Kolommen die te smal worden, knoppen die over elkaar heen schuiven, tekst die uit zijn kader loopt. Bijna altijd is er dan één oorzaak: de schermformaten ertussenin zijn nooit getest.
Het punt waarop je ontwerp van opzet verandert, heet een breakpoint. En daar gaat het meestal mis.
Voor Neefjes Groenvoorziening deed ik logo, webdesign, webteksten en zoekoptimalisatie. Die site heeft een dienstenoverzicht in drie kolommen.
Op desktop werkte dat prima. Rond de 900 pixels werden die kolommen zo smal dat woorden afbraken. Ik heb daar een extra omslagpunt ingebouwd. Onder die breedte gaat het overzicht naar twee kolommen, en onder de 600 pixels naar één. Sindsdien breekt er geen woord meer af, op geen enkel formaat.
Op het omslagpunt verandert je hele indeling.
Wat is een breakpoint?
Een breakpoint is een schermbreedte waarop je opmaak verandert. Tot die breedte geldt de ene indeling, daarboven de andere. In code leg je dat vast met een mediaquery.
Het hoort bij responsive ontwerp en het is dus geen apparaat, maar een getal. Dat onderscheid is belangrijk. Je ontwerpt niet voor “de iPad”, je ontwerpt voor een breedte.
Het verschil met viewport
Deze twee worden vaak verward. De viewport is het zichtbare gebied van de browser op dat moment. Een breakpoint is de grens die jij bepaalt. De viewport meet, het breakpoint beslist.
Welke breakpoints gebruik ik?
Ik werk met een beperkte set. Meer omslagpunten betekent meer testwerk en meer plekken waar het mis kan gaan.
Mijn standaardset
Tot 767 pixels: mobiele weergave, alles onder elkaar.
768 tot 1024 pixels: tabletweergave, meestal twee kolommen.
1025 tot 1440 pixels: laptop, volledige indeling.
Boven 1440 pixels: groot scherm, met een maximale breedte.
Die laatste vergeten mensen vaak. Zonder maximum wordt je tekst op een breed scherm onleesbaar lang. Ik houd 1410 pixels aan als maximum.
Kies op basis van je ontwerp
De beste breakpoints komen niet uit een lijstje. Ze komen uit je eigen ontwerp. Rek je venster langzaam smaller en kijk waar het lelijk wordt. Precies daar hoort een omslagpunt.
Dat klinkt simpel, maar het is de enige methode die echt werkt. Standaardwaarden zijn een startpunt, geen eindpunt.
Mobile first als uitgangspunt
Ik begin altijd bij het kleinste scherm. Daarna bouw ik omhoog. Dat heet mobile first, en het levert lichtere code op.
De reden is praktisch. Begin je bij desktop, dan ben je op mobiel voortdurend dingen aan het weghalen. Begin je bij mobiel, dan voeg je alleen toe wat past. Dat scheelt in flexibele opmaak en in laadtijd.
Bij responsive design hoort ook dat je niet alleen naar breedte kijkt. Denk aan liggende telefoons en aan bezoekers die hun tekst vergroten.
Waar het in de praktijk misgaat
Alleen de standaardformaten testen
Veel bouwers testen op drie vaste breedtes in hun bouwer. Daartussen kijkt niemand. Juist daar zitten de problemen. Sleep je venster langzaam smaller, dat kost een minuut.
Te veel omslagpunten
Zie ik zeven breakpoints in een project, dan is er meestal iets anders aan de hand. Vaak is de basisopmaak niet flexibele opmaak genoeg, en worden gaten dichtgeplakt met extra regels.
Afbeeldingen vergeten
De tekst klapt netjes om, maar de afbeelding blijft 1200 pixels breed. Op een telefoon laadt die dan volledig mee. Dat kost data en snelheid. Zie ook WebP en lazy loading.
Hoe je het zelf controleert
Open je site in Chrome en druk op F12. Klik op het icoontje van een telefoon. Nu kun je elke breedte instellen die je wilt.
Loop van 320 pixels naar 1600 pixels en kijk waar iets springt of overlapt. Test daarna op een echt toestel, want een simulatie mist de adresbalk en het scrollgedrag. Bij een webwinkel let ik extra op filters en op de bestelknop.
Meer vragen over Breakpoint
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een breakpoint in webdesign?
Welke breakpoints gebruik je het beste?
Hoeveel breakpoints heeft een website nodig?
Waarom valt mijn website uit elkaar op tablet?
Wat is het verschil tussen een breakpoint en een viewport?
Hoe test je of je breakpoints kloppen?
Welke breakpoints gebruik je het beste?
Zo min mogelijk. Elk omslagpunt is een extra situatie die je moet testen en waar iets kan breken.
Drie tot vier is voor een gewone bedrijfswebsite ruim voldoende. Kom je boven de vijf, dan is er meestal iets anders aan de hand.
Wat ik dan vrijwel altijd zie: de basisopmaak is niet flexibel genoeg. In plaats van een indeling die vanzelf meebeweegt, worden gaten dichtgeplakt met steeds nieuwe regels.
Moderne technieken lossen dat grotendeels op. Met flexibele rasters en relatieve maten beweegt je ontwerp vanzelf mee. Je hoeft dan geen grens te trekken.
Mijn advies: bouw eerst een indeling die soepel meeschaalt. Voeg pas een breakpoint toe als het echt niet anders kan. Zie ook grid.
Tel ze eens na op je eigen site. Kom je boven de vijf, dan is opruimen meestal sneller dan bijplakken. Minder omslagpunten betekent ook minder testwerk bij elke wijziging. Dat merk je jaren later nog.
Hoeveel breakpoints heeft een website nodig?
Ik werk met vier vaste punten en dat is voor de meeste sites genoeg.
Tot 767 pixels is telefoon. Daar zet ik alles onder elkaar, in één kolom. Van 768 tot 1024 pixels is tablet, meestal twee kolommen. Van 1025 tot 1440 pixels is laptop met de volledige indeling. Daarboven een groot scherm met een maximale breedte van 1410 pixels.
Dat laatste punt vergeten mensen het vaakst. Zonder maximum loopt je tekst op een breed scherm door tot honderdvijftig tekens per regel. Dat leest niemand.
Maar de beste breakpoints komen niet uit een lijstje. Ze komen uit je eigen ontwerp. Rek je venster langzaam smaller en kijk waar het lelijk wordt.
Precies daar hoort een omslagpunt. Standaardwaarden zijn een startpunt, geen eindpunt. Zie ook responsive design.
Leg je gekozen punten ook vast in je documentatie. Anders verzint de volgende bouwer weer iets nieuws. Schrijf ze op in je stijlgids, samen met je maximale breedte. Dat scheelt discussie.
Waarom valt mijn website uit elkaar op tablet?
Omdat tablet het formaat is dat vrijwel nooit getest wordt. Bouwers kijken op hun laptop en pakken daarna even hun telefoon. Wat ertussenin gebeurt, ziet niemand.
De klassieke fout is een indeling in drie kolommen. Op desktop past dat prima. Rond de 900 pixels worden die kolommen zo smal dat woorden afbreken of dat afbeeldingen uitrekken.
Een tweede oorzaak zijn vaste breedtes in pixels. Staat er ergens 400 pixels hard ingesteld? Dan blijft dat element even breed terwijl de rest krimpt. Vroeg of laat loopt dat over de rand.
Een derde is het menu. Veel thema’s schakelen pas op 767 pixels over naar een hamburger. Op een tablet in staande stand past het volledige menu dan net niet meer.
Test daarom altijd tussen 700 en 1100 pixels. Daar zitten de meeste problemen. Zie ook viewport.
Pak een tablet erbij en draai hem een keer om. Staand en liggend zijn twee verschillende situaties.
Wat is het verschil tussen een breakpoint en een viewport?
De viewport is het zichtbare gebied van de browser op dat moment. Dat is een gemeten waarde en die verandert zodra iemand zijn venster versleept of zijn telefoon draait.
Een breakpoint is een grens die jij als bouwer bepaalt. Het is een besluit, geen meting. Je zegt: onder deze breedte gaat mijn menu naar een hamburger.
De kortste samenvatting: de viewport meet, het breakpoint beslist.
Er is nog een praktisch verschil. De viewport heeft ook een hoogte, en die telt mee bij het ontwerpen van je eerste scherm. Breakpoints gaan in de praktijk bijna altijd alleen over breedte.
Daarnaast telt de adresbalk van een telefoon mee in die hoogte, en die verdwijnt bij scrollen. Dat maakt hoogte een lastigere maat om op te sturen. Zie ook above the fold.
Onthoud vooral dat je op breedte stuurt en niet op merknaam. Ontwerpen voor de iPad bestaat niet. Houd dat onderscheid scherp, dan praat je met je bouwer over hetzelfde ding.
Hoe test je of je breakpoints kloppen?
Open je site in Chrome en druk op F12. Klik daarna op het icoontje van een telefoon linksboven in het paneel. Nu kun je elke schermbreedte instellen die je wilt.
Sleep vervolgens langzaam van 320 pixels naar 1600 pixels. Kijk waar iets springt, overlapt of afbreekt. Dat langzame slepen is het belangrijkste deel, want vaste testformaten slaan de problemen juist over.
Let daarbij op vier dingen. Breken woorden af? Lopen afbeeldingen buiten hun kader? Blijven knoppen groot genoeg om aan te tikken? En blijft je menu bereikbaar?
Test daarna op een echt toestel. Een simulatie mist de adresbalk, het scrollgedrag en de manier waarop een vinger werkt.
Bij een webshop check ik extra de filters en de bestelknop. Daar kost een fout je direct omzet. Zie ook webwinkel.
Doe die ronde ook na elke grote wijziging. Een nieuw blok kan een oud omslagpunt zo omgooien. Noteer per formaat wat je zag. Zo weet je later of iets nieuw is of al langer speelde.
Valt jouw website ergens uit elkaar en weet je niet waar? Stuur me het adres via het formulier hieronder. Ik loop hem na van 320 tot 1600 pixels en stuur je screenshots van wat er misgaat. Zo weet je precies wat er gefixt moet worden. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Omslagpunt, mediaquery-grens, responsive breekpunt
