Waarom valt mijn website uit elkaar op tablet?
Omdat die breedte tussen wal en schip valt. Te breed voor de mobiele indeling, te smal voor de desktopversie.
Bijna iedereen ontwerpt op een telefoon en op een laptop. Wat daartussenin gebeurt, ziet niemand tot een klant belt.
Het goede nieuws: het is meestal met één grens en wat opruimen op te lossen.
Wat er precies misgaat
De desktopindeling wordt gebruikt terwijl er te weinig ruimte is. Drie kolommen worden dan drie smalle stroken met afgebroken woorden.
Of andersom: de mobiele indeling wordt gebruikt op een breed scherm, waardoor alles onder elkaar staat met veel lege ruimte ernaast.
Staand en liggend
Een tablet heeft twee heel verschillende breedtes. Staand lijkt hij op een grote telefoon, liggend op een kleine laptop.
Test dus allebei. Meestal klopt er één wel en de andere niet, en dat verklaart waarom het probleem soms verdwijnt als je het toestel draait.
Hoe je het oplost
Open je site en sleep je browservenster langzaam van smal naar breed. Op het punt waar het misgaat, hoort een grens.
Meestal ligt dat rond de 800 tot 900 pixels. Voeg daar een tussenstand toe met bijvoorbeeld twee kolommen in plaats van drie.
Mijn vuistregels
- Test staand én liggend; dat zijn twee verschillende situaties.
- Voeg een tussenstand toe rond de 800 tot 900 pixels.
- Kies daar twee kolommen in plaats van drie.
- Controleer je menu apart; dat klapt vaak op de verkeerde breedte om.
Die laatste is de meest gemaakte fout. Een menu dat pas onder de 768 pixels inklapt, is op een staande tablet al onbruikbaar geworden.
Het menu
Dat is bij tabletproblemen bijna altijd het eerste dat opvalt. Zeven menu-items passen op een laptop en niet op een tablet.
Zet je hamburgermenu dan iets eerder aan, bijvoorbeeld vanaf 1000 pixels. Meer daarover lees je bij mobile first.
Afbeeldingen en tabellen
Dat zijn de tweede en derde veroorzaker. Een afbeelding met een vaste breedte in pixels loopt op tablet buiten zijn kolom.
Geef afbeeldingen een maximale breedte van honderd procent en laat brede tabellen horizontaal scrollen binnen hun eigen kader.