Layout grid-calculator Breedte, padding en gutters van je e-mailtemplate, op hele pixels.

Waarom een layout grid voor e-mail?

Een e-mailtemplate bestaat uit blokken met één, twee, drie of meer kolommen. Als je vooraf een vaste breedte, padding en gutter kiest, passen al die blokken op elkaar. Teksten en afbeeldingen lijnen dan netjes uit, en je team kan modules combineren zonder dat er iets verspringt.

Waarom hele pixels belangrijk zijn

In e-mail bouw je kolommen nog steeds met tabellen en vaste breedtes, omdat Outlook voor Windows geen moderne CSS-layout ondersteunt. Komt een kolom uit op 173,33 pixels, dan rondt elk mailprogramma dat op zijn eigen manier af. Het resultaat: kolommen die net niet gelijk zijn, een witte streep aan de rand of een laatste kolom die naar de volgende regel valt.

Met waarden waarbij elke kolomindeling op hele pixels uitkomt, voorkom je dat. Daarom kleurt deze calculator rijen met halve pixels rood.

Zo gebruik je de calculator

1. Kies de breedte van je template. 600 pixels is de gangbare standaard.
2. Stel de padding aan de zijkanten en de gutter tussen kolommen in.
3. Vink aan welke kolomindelingen je template gaat gebruiken; alleen die zie je in het overzicht. Klopt er één niet, kies dan een van de voorstellen.
4. Klik op een rij voor de tabelcode met de juiste breedtes, en gebruik die als basis voor je module.

Veelgebruikte combinaties

Bij een breedte van 600 pixels kloppen deze combinaties voor 1, 2, 3 en 4 kolommen:

Denk ook aan mobiel

Op een telefoon is er geen ruimte voor drie of vier kolommen naast elkaar. Zet de kolommen met een media query onder elkaar en geef ze dan de volle breedte. De padding aan de zijkanten blijft meestal gelijk of wordt iets kleiner.