Hoe test je of je breakpoints kloppen?
Door je browservenster langzaam smaller te slepen en te kijken waar het misgaat. Dat is de beste test die er is, en hij kost je twee minuten.
Vaste apparaatstanden afvinken lijkt grondiger, maar je slaat dan alles ertussenin over. En juist daar zit het probleem meestal.
De sleeptest
Open je site op een breed scherm en versmal je venster stap voor stap tot de smalste stand. Let op elementen die overlappen, teksten die afbreken en knoppen die buiten beeld vallen.
Noteer de breedte waarop het misgaat. Dat is meteen de plek waar een grens hoort.
Wat je in de gaten houdt
Je menu, je koppen, je afbeeldingen en je tabellen. In die volgorde, want dat is ook de volgorde waarin ze meestal breken.
Let daarnaast op horizontaal scrollen: verschijnt er onderaan een schuifbalk, dan steekt er iets buiten de pagina.
Op een echt toestel
De weergavemodus in je browser is een benadering. Hij houdt geen rekening met de adresbalk en met hoe een echt toestel omgaat met lettergroottes.
Test daarom minstens één keer op een echte telefoon en een echte tablet, staand en liggend. Meer daarover lees je bij waarom valt mijn website uit elkaar op tablet.
Mijn vuistregels
- Sleep je venster langzaam smaller; dat vindt meer dan vaste standen.
- Controleer of er nergens horizontaal gescrold kan worden.
- Test staand en liggend op een echt toestel.
- Zoom in op tweehonderd procent en kijk of alles nog werkt.
Die laatste vinden mensen vaak overdreven en hij hoort bij de toegankelijkheidseisen. Bovendien legt hij precies dezelfde zwakke plekken bloot.
Wat je test na een wijziging
Alle standen, niet alleen degene waarin je hebt gewerkt. Een aanpassing op desktop kan de mobiele indeling stilletjes breken.
Bij een paginabouwer is dat extra belangrijk, omdat instellingen per stand kunnen afwijken zonder dat je het ziet.
Een snelle controle
Zet je site naast elkaar in drie vensters: smal, middel en breed. Scrol ze alle drie helemaal door.
Wat in één van de drie afwijkt, springt er dan meteen uit. Meer daarover lees je bij responsive design.