Hoe stel je padding in per schermformaat?

Padding stel je per schermformaat in met opmaakpunten. Je geeft een kleine waarde als basis en vergroot die naarmate het scherm breder wordt.

Op een telefoon is ongeveer de helft van je bureaubladwaarde gebruikelijk.

Helemaal weglaten doe je nooit.

De volgorde

Begin bij de kleinste maat en vergroot naar boven. Dat past bij een aanpak waarin je vanaf de telefoon ontwerpt.

Meer daarover lees je bij breakpoint.

Een werkbare reeks

Zestien pixels op een telefoon, tweeëndertig op een tablet en vierenzestig op een bureaublad. Dan verdubbel je steeds.

Meer daarover lees je bij design system.

De handigere manier

Een waarde die meeschaalt met de schermbreedte, met een minimum en een maximum. Dan heb je geen losse opmaakpunten meer nodig.

Meer daarover lees je bij css.

Mijn vuistregels

1. Werk met een vaste reeks: 8, 16, 24, 32, 48, 64.
2. Halveer op een telefoon.
3. Zet zijmarges nooit op nul.
4. Gebruik meeschalende waarden waar je kunt.

Die derde voorkomt tekst die tegen de schermrand plakt.

In een paginabouwer

Daar staat bij elk veld een pictogram voor bureaublad, tablet en telefoon. Vul per apparaat een eigen waarde in.

Meer daarover lees je bij grid.

Wat je controleert

Of je tekst op driehonderdvijfentwintig pixels breed nog ademruimte heeft. Dat is het smalste scherm dat je tegenkomt.

Meer daarover lees je bij accessibility.

Veelgestelde vragen hierover