Reflow
Zoekbalk in een tabel die wordt afgesneden
Je hebt een tabel met data. Erboven: een zoekbalk om te filteren. De tabel mag horizontaal scrollen — dat is de uitzondering. Maar die zoekbalk?
Eenvoudige tabel die onnodig horizontaal scrollt
Openingstijden. Twee kolommen. Dag en tijd. Maandag: 09:00 - 17:00 Dinsdag: 09:00 - 17:00
Viewport meta-tag die inzoomen blokkeert
Eén regel code. In de <head> van je website. En je bezoeker kan niet meer inzoomen.
Dialoogvenster met geen ruimte voor de inhoud
Je klikt op “Meer informatie”. Een dialoogvenster opent. Header bovenaan: titel + sluitknop. Footer onderaan: twee knoppen. Daartussen: de inhoud.
Vaste elementen die het scherm overnemen
Je opent een webpagina en zoomt in tot 400%. Onderaan: een cookiemelding. Die is nu niet meer een bescheiden balkje — het neemt de helft van je scherm in beslag.
Navigatiemenu verdwijnt bij inzoomen
Home. Over ons. Diensten. Projecten. Contact. Vijf links op een rij. Op een breed scherm prima. Bij 400% zoom? Dan past “Contact” niet meer. Die link valt buiten het scherm. Zonder scrollbar. Zonder hamburgermenu.
Kolommen die niet onder elkaar gaan
Sidebar links. Content rechts. Op een groot scherm: perfect. Bij 400% zoom: twee kolommen gepropt in 320 pixels. De sidebar neemt de helft in beslag. De content wordt zo smal dat je twee woorden per regel leest. Of je moet horizontaal scrollen.
Tekst afgesneden door een vaste hoogte
Een banner van 200 pixels hoog. Past precies. Mooie headline, korte tekst, call-to-action.
Content verdwijnt door overflow hidden
Je zoomt in op een webpagina. De tekst wordt groter. En dan, halverwege een zin, houdt de tekst op. Alsof iemand de rest heeft afgeknipt.
