Hoe test je verschillende viewports?
Je test verschillende viewports in drie stappen: je browservenster langzaam smaller slepen, de apparaatweergave van je browser gebruiken, en het resultaat op een echt toestel bekijken.
Die eerste stap kost een minuut.
De derde vindt wat de andere twee missen.
Het venster slepen
Trek je venster van breed naar smal en kijk waar je indeling omslaat of iets uitsteekt.
Meer daarover lees je bij responsive design.
De apparaatweergave
In je ontwikkelaarsvenster kun je vaste apparaatformaten kiezen. Handig om exacte breedtes te controleren.
Meer daarover lees je bij css.
Het echte toestel
Daar merk je wat geen simulatie toont: raakvlakken, leesbaarheid in daglicht en de verspringende adresbalk.
Meer daarover lees je bij mobile first.
Mijn vuistregels
- Test op 325, 768 en 1440 pixels breed.
- Test ook in liggende stand.
- Controleer op een horizontale schuifbalk.
- Zoom in tot tweehonderd procent.
Die laatste is een toegankelijkheidseis en levert vaak dezelfde problemen op als een smal scherm.
De maat die iedereen vergeet
Achthonderd pixels breed, de tabletstand. Daar valt bij de meeste sites iets uit elkaar.
Meer daarover lees je bij waarom je site uitgezoomd is.
Wat je noteert
Bij welke breedte iets misgaat. Dat is precies de informatie die je bouwer nodig heeft.
Meer daarover lees je bij accessibility.