Waarom mobielvriendelijk ontwerpen?
Een pagina die op een groot scherm werkt, kan op een telefoon toch te brede kolommen, kleine tekst of lastig aanklikbare knoppen hebben. Responsive design laat de indeling meebewegen met de beschikbare ruimte.
1. Stel de viewport in
Zet deze regel in de <head> van je HTML-pagina. Zonder deze instelling kan een telefoon de pagina verkleind weergeven.
<meta name="viewport" content="width=device-width, initial-scale=1">2. Gebruik flexibele breedtes
Gebruik bijvoorbeeld max-width en percentages in plaats van overal vaste pixelbreedtes. Beperk de tekstbreedte voor prettig lezen en voorkom horizontaal scrollen.
.container { width: min(100% - 2rem, 1100px); margin-inline: auto; }3. Laat kolommen zich aanpassen
Met CSS Grid kun je kaarten automatisch onder elkaar laten komen zodra er minder ruimte is.
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }4. Maak afbeeldingen schaalbaar
Gebruik max-width: 100% en height: auto voor afbeeldingen in de inhoud. Lever niet onnodig grote bestanden en geef waar mogelijk breedte en hoogte op om verspringen te beperken.
img { max-width: 100%; height: auto; }5. Denk aan vingers én toetsenbord
Zorg voor voldoende ruimte tussen links en knoppen, zichtbare focusranden en leesbare tekst. Verstop belangrijke informatie niet achter een hover-effect dat op een touchscreen niet werkt.
6. Test op verschillende schermen
Gebruik de apparaatweergave van je browser als eerste controle, maar test bij voorkeur ook op een echte telefoon. Kijk naar menu’s, formulieren, lange woorden, tabellen en liggende schermstand.
Lees verder over afbeeldingen en gebruiksvriendelijkheid.