Hoe past een grid zich aan op mobiel?
Een grid op mobiel werkt met minder kolommen. Twaalf op een groot scherm, zes op een tablet, en op een telefoon meestal alles onder elkaar.
De blokken die naast elkaar stonden, stapelen dan in een volgorde die jij bepaalt.
Die volgorde is het onderdeel dat het vaakst misgaat.
De stapelvolgorde
Op een groot scherm staat je tekst links en je afbeelding rechts. Onder elkaar wil je meestal de tekst eerst.
Dat moet je opgeven; vanzelf gebeurt het niet altijd goed. Meer daarover lees je bij breakpoint.
Waar je op let
Dat het belangrijkste bovenaan komt, en dat een lange zijkolom niet vóór je hoofdtekst belandt.
Controleer dat op een echte telefoon, niet in een verkleind venster.
Wanneer je kolommen behoudt
Bij korte onderdelen: twee kaarten naast elkaar kan op een telefoon prima. Bij lopende tekst nooit.
Twee kolommen tekst op een telefoon is onleesbaar. Meer daarover lees je bij css.
Mijn vuistregels
- Twaalf, zes, één: groot scherm, tablet, telefoon.
- Bepaal je stapelvolgorde bewust.
- Nooit twee kolommen lopende tekst op een telefoon.
- Test op een echt toestel.
Die tweede is waar het bij de meeste sites misgaat.
Beginnen bij klein
Veel ontwerpers ontwerpen eerst voor de telefoon en breiden daarna uit. Dat dwingt je te kiezen wat echt belangrijk is.
Het resultaat is meestal rustiger dan andersom. Meer daarover lees je bij figma.
De tussenmaten
Vergeet de tablet niet, en het liggende scherm van een telefoon. Daar valt een indeling het vaakst uit elkaar.
Meer daarover lees je bij hoeveel kolommen je gebruikt.