1. Kies de taak van de pagina voordat je het lay-out kiest
Begin met pagina’s die een klant- of bedrijfstaak dragen: servicedocumentatie, productpagina’s, leadformulieren, boeking, accountinvoer, winkelwagen en hulp. Schrijf één voltooiingszin voor elk, bijvoorbeeld: “Een bezoeker die de site voor het eerst ziet kan deze dienst begrijpen, relevante bewijzen zien en een belverzoek indienen.” Als de pagina meer dan één taak heeft, bepaal welke als eerste verschijnt.
Maak een lijst van de inhoud als essentieel, ondersteunend of optioneel. Essentieel betekent niet kort; een bezoeker kan context over prijs, geschiktheid, levertijd of vergelijkingsinformatie nodig hebben. Geef dat materiaal een duidelijke route in de smalle lay-out. Google adviseert equivalente primaire inhoud op mobiel en desktop, terwijl een andere presentatie zoals tabs of accordeons is toegestaan.
Bij een smalle breedte moet een collega kunnen zeggen wat de pagina aanbiedt, wie er baat bij heeft en de volgende betekenisvolle actie.
2. Maak de smalle basislijn compleet
Begin met een werkend single-column pad in plaats van een desktoplay-out te verkleinen. Gebruik flexibele containers, laat tekst doorlopen en voeg een viewport-instelling toe die de browser de layout naar de apparaatbreedte laat schalen. Voorkom niet dat gebruikers zoomen. Controleer dat menu’s, meldingen, afbeeldingen, ingevoegde elementen en formulierfouten binnen de viewport blijven; onbedoeld pagina-brede horizontaal scrollen is normaal gesproken een defect.
Gebruik 320 CSS-pixels als strenge reflow-check voor gewone lees- en taakinhoud. WCAG 2.2 beschrijft het presenteren van verticale inhoud bij die breedte zonder verlies van informatie of functionaliteit of tweedimensionaal scrollen. Een kaart, grafiek of datatabel kan een eigen scrollgebied nodig hebben, maar dat rechtvaardigt niet het laten schuiven van de omliggende pagina zijwaarts.
Laat afbeeldingen op hun container passen en geef afmetingen zodat de browser ruimte kan reserveren voordat ze laden.
3. Voeg verbeteringen toe zonder het basispad kwetsbaar te maken
Progressive enhancement betekent dat essentiële inhoud en functionaliteit als basis werken, terwijl capabele browsers en grotere schermen extra’s krijgen. Het adres, productdetails, formulierlabels, prijslichting en verzendpad mogen niet afhankelijk zijn van animatie, hover of een laat geladen script. Een bredere lay-out kan een vergelijkingspaneel, persistente navigatie of rijkere filters toevoegen zonder de basis onvolledig te maken.
Vraag de uitvoerder een breakpoint toe te voegen wanneer de inhoud krap of verspild wordt, niet omdat een bepaald apparaat op de lijst staat. Een breakpoint is eenvoudigweg waar een lay-outregel verandert. Gebruik smalle lay-outs niet om hulptekst, beleidsbepalingen, recensies, metadata of belangrijke gestructureerde details stilletjes te verwijderen.
Toon eerst een basisgalerijafbeelding en beschrijving, en voeg daarna zoom- of veegbediening toe wanneer de scripts beschikbaar zijn.
4. Ontwerp bedieningselementen voor aanraakgebruik, helderheid en herstel
Touch-ergonomie betekent ontwerpen voor handen in plaats van een precieze muisaanwijzer. Geef knoppen, selectievakjes, sluiticoontjes, hoeveelheidsselectors en formulierkeuzes voldoende grootte en afstand om verkeerde tikken te verminderen. Label iconen wanneer hun betekenis niet duidelijk is. Maak hover niet de enige manier om een prijs, submenu, uitleg of actie te tonen.
WCAG 2.2 bevat een Level AA-criterium voor target-grootte van ten minste 24 bij 24 CSS-pixels voor pointerdoelen, met genoemde uitzonderingen waaronder spatiëring en inline links. Behandel dat als een minimumreferentie, geen garantie voor comfort. Kritieke acties verdienen duidelijke labels, royale afstand en een omkeerbare bevestigingsstap. Zoek gekwalificeerde toegankelijkheidsreview voor hoog-risico reizen of formele conformiteitsclaims.
Houd labels zichtbaar, toon bruikbare validatiefeedback en behoud ingevoerde waarden na een fout.
5. Behandel media en embeds als onderdeel van de bezoekersreis
Bepaal of elke afbeelding informatief, overtuigend of decoratief is. Een informatieve afbeelding heeft een passende tekstalternatief en een smalle lay-out crop die de noodzakelijke details behoudt. Responsive image-opties laten browsers een geschikte resource kiezen in plaats van elke bezoeker het grootste desktopbestand te laten downloaden. Laat een hero-afbeelding of video de pagina-doelstelling en primaire actie niet verbergen.
Breng kaarten, chat, video, betalingen, planning, toestemmings- en recensie-widgets in kaart. Controleer op een smal scherm hun laadstatus, besturingselementgrootte, begrensde lay-out en een praktische fallback-route. Voor betalingen, identiteit of gereguleerde datastromen betrek gekwalificeerde reviewers voor beveiliging, privacy en compliance; visuele tests zijn geen beveiligingsbeoordeling.
Registreer elk extern component, de eigenaar, de zakelijke functie en de goedgekeurde fallback als het traag of kapot is.
6. Test taakpaden vóór release en plan herstelmaatregelen
Gebruik vroege browser responsive-modus om smalle, middelgrote en brede breedtes te inspecteren. Chrome Device Mode kan viewport, touch, orientatie, netwerk en CPU-condities benaderen, maar Chrome documenteert het als een benadering in plaats van echte apparaatuitvoering. Voltooi kritische paden op echte telefoons en relevante browsers wanneer mogelijk.
Test een taak, niet alleen een screenshot: cold load, navigatie, ongeldige en geldige formulierindiening, oriëntatiewijziging, zoomen en terugkeer van een derde-partij scherm. Noteer de URL, browser of apparaat, taak, verwacht resultaat, eigenaar en rollback-beslissing. Voor grote template-, checkout-, CMS- of afhankelijkheidswijzigingen stage de release en bereid het herstellen van het vorige pad voor in plaats van improvised handelen onder druk.
Keer goedkeuring alleen terug na de kritische taak werkt, bedieningselementen bruikbaar zijn, pagina-breed horizontaal scrollen afwezig is en sleutelafhankelijkheden een fallback hebben.