Reflow

Hvad kriteriet kræver

Når viewporten er 320 CSS-pixel bred — svarende til et 1280px-skrivebordsskærm ved 400% zoom eller en lille mobilenhed — skal indholdet ombryde til en enkelt kolonne uden at kræve vandret scrolling. Brugeren skal aldrig skulle scrolle i begge retninger for at læse kontinuerligt indhold. Nødvendige undtagelser er tilladt: datatabeller, komplekse kort, kodeeksempler og præsentationer, hvor tovejs-scrolling er grundlæggende for indholdet.

Sådan opfyldes det

• Byg layoutet mobile-first med flexbox eller CSS grid, der kollapser til en enkelt kolonne ved smalle bredder.
• Test præcis ved 320px viewport-bredde — eller ved 400% browserzoom på et 1280px-vindue — og kontrollér hver enkelt side.
• Brug max-width: 100% på billeder, videoer og indlejrede medier, så de skalerer med viewporten.
• Kollaps desktop-navigationens vandrette menu til en lodret mobilmenu ved det rette breakpoint.
• For datatabeller: tillad vandret scroll inde i en overflow-x: auto-wrapper — selve tabellen er undtaget, men dens container må ikke skubbe siden til siden.
• Undgå faste pixel-bredder på body-containere eller modaler.

Hyppige fejl

• Hero-sektioner med fast bredde (width: 1200px), der flyder ud af viewporten ved 320px og tvinger vandret scroll.
• Modaldialogbokse angivet i vw eller px, der overstiger 320px i bredde og beskæres på små skærme.
• Kodeeksempler i <pre>-blokke uden ombrydning eller scroll-containere, der skubber siden ud i bredden.
• Marketingsider med absolut-positionerede dekorative elementer, der ikke tager højde for smalle viewporte.
• Sticky-elementer, der overlapper indhold ved 400% zoom, fordi de var dimensioneret til fuld viewport-bredde.
• Tabeller, der ikke er pakket i en overflow-container, så hele siden scroller vandret i stedet for kun tabellen.

Hvorfor det er vigtigt

Reflow er det succeskriterium, der fanger de fleste „responsivt-men-ikke-rigtigt-responsivt“-sider. Et layout, der bryder ved 320 CSS-pixel, svarer til et layout, der bryder ved 400% zoom for en svagtsynet bruger på en computer — de to er matematisk identiske tilfælde. At rette reflow betyder normalt at stramme det responsive design, der allerede var næsten på plads, hvilket gør det til en af de mest effektive WCAG-rettelser.