How to: e-mail design verbeteren in e-mail marketing (24 praktische tips)

E-mail en design horen bij elkaar: elke mailing verdient een professionele vormgeving die herkenbaar, leesbaar en conversiegericht is. In deze guide leer je in 24 onderdelen hoe je e-mailtemplates ontwerpt op drie niveaus: basis, geavanceerd en expert. Je krijgt praktische tips voor typografie, mobiel design, CTA’s, personalisatie, beeldgebruik en interactieve elementen.

Terminologie die je moet kennen (zodat je sneller werkt)

Een e-mailtemplate bestaat uit vaste bouwblokken zoals preheader, header, contentblokken (kolommen), CTA’s en footer.

Belangrijkste termen in één overzicht:

• Preheader: het bovenste deel van de e-mail (vaak met snippet + servicelinks).
• Snippet: eerste stukje tekst in de inbox naast/onder de onderwerpregel.
• Header: deel boven het eerste contentblok (logo, navigatie, soms hero).
• Contentblok(ken): secties met tekst/beeld (1 kolom, 2 kolommen, 3 kolommen).
• Footer: afsluitend blok met contact, servicelinks (afmelden/profiel), socials.

De basis van e-mail design

De eerste zaken die je moet weten voor het ontwerpen van een e-mail template.

1. Stijl: herkenbaarheid eerst

Baseer je e-maildesign op je huisstijl, zodat de lezer direct ziet van wie de mail komt. Herkenbaarheid bouwt vertrouwen en verhoogt de kans dat iemand verder leest of je email opent.

Actiestappen:

• Gebruik consistente kleuren, tone-of-voice en visuele elementen.
• Laat logo en headerstructuur aansluiten op je merk.
• Durf af te wijken van je website als conversie in e-mail andere keuzes vraagt (korter, directer, meer CTA’s).

Gebruik een basis-template waarin je merkstijl al is doorgevoerd, zodat elke mailing consistent blijft.

In onderstaand voorbeeld van Rituals zie je dat ze in hun e-mail design een duidelijk herkenbare stijl hanteren: Het logo bovenaan, lettertype met schreef in de headers en een duidelijke button.

Op hun website vind je een vergelijkbare stijl:

2. Typografie: kies veilige lettertypes

Gebruik websafe fonts (zoals Arial, Verdana, Georgia) zodat je e-mail bij iedereen goed laadt. Veel e-mailprogramma’s ondersteunen niet elk font; fallback fonts voorkomen ‘rommelige’ weergave.

Actiestappen:

• Kies 1 lettertype voor bodytekst en 1 voor koppen (of houd het bij 1).
• Let op corpsgrootte, regelafstand en contrast.
• Check of je fonts overal correct renderen.

Kijk op cssfontstack.com als je een overzicht wil van lettertypes die je probleemloos voor je e-mail kunt gebruiken. Om enkele van deze websafe lettertypes te noemen:

3. Desktop en mobiel: responsive is standaard

Ontwerp je e-mail voor mobiel, want een groot deel van je lezers opent op smartphone. Op mobiel is aandacht vluchtiger. Je moet sneller overtuigen, met minder afleiding.

Actiestappen:

• Houd desktopbreedte rond 640 px, mobiel rond 320 px.
• Stapel kolommen onder elkaar op mobiel.
• Maak CTA’s groot genoeg om te tikken.

4. Preheader: maak van je snippet een tweede onderwerpregel

Gebruik de snippet om je onderwerpregel te versterken; houd het kort (max ±15 woorden). Veel inboxen tonen snippet + onderwerp samen. De tekst kan zichtbaar of onzichtbaar in de mailing geplaatst worden. Je kunt de snippet gebruiken om samen met de onderwerpregel de interesse van de lezer aan te wakkeren.

Actiestappen:

• Zet in de snippet: voordeel + urgentie + context (niet ‘bekijk online’ als eerste).
• Plaats ‘online lezen’ en ‘afmelden’ als servicelinks, liefst subtiel maar vindbaar.
• Vermijd spam-gedrag door een duidelijke afmeldoptie te bieden.

Meer conversies halen uit e-mail marketing met bewezen technieken? Lees dan ons guide “21 best practices voor meer conversie met e‑mail marketing”

5. Plaatsing logo: kies de plek die altijd zichtbaar is

Zet je logo bij voorkeur linksboven, omdat dat vrijwel altijd direct zichtbaar is na openen. Gebruik een vaste headercomponent waarin logo en navigatie consistent staan.

Actiestappen:

• Logo linksboven in header.
• Houd het formaat compact zodat de eerste content snel in beeld komt.

6. Call-to-action: het belangrijkste element mag opvallen

Maak je call-to-action duidelijk, klikbaar en visueel herkenbaar als button. Veel lezers scannen en klikken. Een button is sneller herkenbaar dan een tekstlink.

Actiestappen:

• Gebruik contrasterende kleur en voldoende witruimte.
• CTA-tekst: actiegericht (“Download de gids”, “Bekijk aanbod”).
• Plaats CTA boven de vouw én herhaal lager in de mail.

Je kunt CTA-blokken hergebruiken en consistent stylen (kleur, radius, padding).

7. Social media: deelbaar waar het logisch is

Voeg social sharing toe als je content “door te sturen” is, en maak volgen aantrekkelijk met een reden. Social icons kunnen als standaardcomponent in je footer gebruikt worden.

Actiestappen:

• Voeg share-buttons toe bij deelbare content (artikelen, visuals).
• Zet follow-icons in footer met benefit (“Volg ons voor tips…”).

8. Witruimte: rust verkoopt

Witruimte laat koppen en CTA’s beter opvallen en maakt je mail prettiger leesbaar. Met grid/spacing-instellingen per blok houd je consistentie zonder handwerk.

Actiestappen:

• Hanteer vaste marges/padding rondom blokken.
• Wees consequent: dezelfde spacing boven/onder artikelen.

Wees consequent in de witruimte. Als je boven een artikel 30 pixels witruimte aanhoudt, staat het het mooist als je dit aan de onderkant en zijkanten ook doet.

9. Korte artikelen: schrijf voor scanners

Houd tekst compact: de meeste lezers scannen en hebben weinig tijd. Gebruik contentblokken met ‘samenvatting + CTA’ als standaardformat.

Actiestappen:

• Begin met de kernboodschap.
• Gebruik bullets en tussenkopjes.
• Link door naar de website voor verdieping.

10. Test: technisch én inhoudelijk

Test altijd op weergave en werking, en optimaliseer daarna op gedrag (open/click).

Actiestappen:

• Check links, afbeeldingen, dark mode waar relevant, en verschillende e-mailclients.
• Test onderwerpregel (open) en CTA/design (click).

Geen e-mail is ooit helemaal af of perfect. Blijf daarom verschillende elementen testen om voortdurend je resultaten te verbeteren.

Geavanceerdere technieken voor het design van je e-mails

11. De vouw (above the fold)

De ‘vouw’ is het deel van je e-mail dat direct zichtbaar is zonder te scrollen. In veel e-mailprogramma’s en -apps wordt alleen dit bovenste gedeelte meteen getoond, bijvoorbeeld in het leesvenster. Dat maakt dit deel cruciaal: hier beslis je of iemand verder leest of niet.

Actiestappen:

• Plaats je kernboodschap en primaire CTA bovenaan.
• Houd het bovenste deel overzichtelijk en niet te druk.
• Test hoe je mail eruitziet in verschillende e-mailprogramma’s en schermformaten.

Naast de vouw wordt ook vaak de term preview pane of reading pane gebruikt. Binnen dit venster kun je berichten bekijken zonder dat je ze opent. De reading pane is standaard ingesteld op nagenoeg alle e-mail clients (Outlook, Apple Mail, Thunderbird etc.) en toont ook altijd het bovenste deel van een mailing.

12. Leesbaarheid zonder afbeeldingen

Niet alle e-mailprogramma’s laden afbeeldingen automatisch. Als je e-mail volledig leunt op visuals, kan de boodschap daardoor verdwijnen. Een goede mailing blijft begrijpelijk, ook wanneer afbeeldingen niet worden geladen.

Tekst moet daarom altijd de basis vormen van je boodschap, met afbeeldingen als versterking.

Actiestappen:

• Zorg dat koppen en kernboodschap altijd als tekst aanwezig zijn.
• Gebruik afbeeldingen aanvullend, niet als enige informatiedrager.
• Controleer hoe je mailing eruit ziet met afbeeldingen uitgeschakeld.

13. Tekstuitlijning

Tekstuitlijning heeft meer invloed op leesbaarheid dan vaak wordt gedacht. Links uitgelijnde tekst leest het prettigst, vooral bij langere stukken. Centreren kan werken bij korte teksten, maar wordt snel vermoeiend als het te veel wordt toegepast.

Naast uitlijning speelt ook regelafstand een grote rol. Te dicht op elkaar geplaatste regels maken tekst onrustig en moeilijk scanbaar.

Actiestappen:

• Kies standaard voor links uitgelijnde bodytekst.
• Gebruik voldoende regelafstand voor rust.
• Houd regels relatief kort, idealiter rond 12 à 13 woorden.

Leesbaarheid is een belangrijk onderdeel van Digitoegankelijkheid. Nog niet bekend met deze term? Sinds 2025 wordt regelgeving gehanteerd op de toegankelijkheid van je e-mails. Lees er meer over in het blog van Hendrik.

14. Wissel af met je header

De header is het gedeelte boven het eerste contentblok. De grootte en opmaak hiervan bepalen waar de aandacht van de lezer naartoe gaat. Een compacte header zorgt dat de inhoud sneller in beeld komt, terwijl een grotere header juist geschikt is voor campagnes die visueel moeten opvallen.

Door hierin af te wisselen voorkom je voorspelbaarheid en kun je de focus per mailing sturen.

Actiestappen:

• Gebruik compacte headers bij informatieve of contentgedreven mails.
• Zet grotere headers in bij acties of merkcampagnes.
• Laat de header ondersteunen, niet domineren.

15. Afbeelding-tekst ratio

Een e-mail die voornamelijk uit afbeeldingen bestaat, kan problemen opleveren: langere laadtijden, slechtere leesbaarheid en soms zelfs afleverproblemen. Tekst zorgt voor context, overtuiging en toegankelijkheid.

Een goede balans tussen beeld en tekst maakt je mailing effectiever én betrouwbaarder.

Actiestappen:

• Combineer afbeeldingen altijd met voldoende tekst.
• Vermijd e-mails die vrijwel volledig uit visuals bestaan.
• Optimaliseer afbeeldingen voor snelle laadtijd.

16. Gebruik alt-teksten

Alt-teksten worden getoond wanneer afbeeldingen niet worden geladen en worden voorgelezen door screenreaders. Ze zijn vooral belangrijk wanneer een afbeelding een functionele rol heeft, zoals bij een call-to-action.

Te veel alt-teksten kunnen echter rommelig ogen en afbreuk doen aan het design.

Actiestappen:

• Gebruik alt-tekst bij functionele afbeeldingen.
• Houd alt-teksten kort en beschrijvend.
• Laat alt-tekst weg bij puur decoratieve beelden.

17. Uitgebreide personalisatie

Personalisatie gaat verder dan iemand aanspreken bij naam. Je kunt ook onderdelen van je mailing aanpassen op basis van voorkeuren, gedrag of eerdere interacties, zoals afbeeldingen, aanbiedingen of contentvolgorde.

Goed toegepaste personalisatie voelt relevant en versterkt de relatie met de lezer.

Actiestappen:

• Personaliseer alleen op basis van betrouwbare data.
• Stem content af op interesses of aankoopgeschiedenis.
• Houd het subtiel en relevant om weerstand te voorkomen.

18. Menu in de footer

De footer is meer dan een verplicht afsluitend blok. Het is de vaste plek voor servicelinks zoals afmelden en profielbeheer, maar kan ook extra navigatie of context bieden.

Een goed ontworpen footer draagt bij aan vertrouwen en gebruiksgemak.

Actiestappen:

• Plaats servicelinks altijd duidelijk en vindbaar.
• Voeg social links toe waar dat logisch is.
• Houd de footer overzichtelijk en rustig.

19. JPG, PNG en GIF

Niet elk afbeeldingstype is geschikt voor elke toepassing. De verkeerde keuze kan leiden tot kwaliteitsverlies of onnodig grote bestanden.

Door het juiste formaat te kiezen, blijft je e-mail scherp en snel.

Actiestappen:

• Gebruik JPG voor foto’s.
• Gebruik PNG voor illustraties of transparantie.
• Gebruik GIF voor animaties.
• Optimaliseer altijd voor bestandsgrootte.

20. A/B-test op designelementen

Designkeuzes zijn vaak gebaseerd op gevoel, maar data laat regelmatig iets anders zien. Met A/B-tests ontdek je welke ontwerpkeuzes echt bijdragen aan meer klikken en betrokkenheid.

Test altijd één element tegelijk, zodat je weet wat het effect veroorzaakt.

Actiestappen:

• Test bijvoorbeeld kleurgebruik, beeld vs geen beeld of CTA-vorm.
• Vergelijk button met tekstlink of verschillende posities.
• Gebruik de resultaten om structurele designkeuzes te verbeteren.

A. Vogel wilde graag weten of het toevoegen van een inhoudsopgave aan de mail (variant B) een positief effect zou hebben op de klikratio. In de inhoudsopgave wordt een overzicht gegeven van alle artikelen die de lezer in de mail kan verwachten. En met één klik in de inhoudsopgave werd je als lezer direct ‘doorgestuurd’ naar het artikel.

Toch bleek het toevoegen van een inhoudsopgave aan het e-mail template helemaal geen positief effect te hebben. Juist het tegenovergestelde was waar. De mail zonder inhoudsopgave scoorde beter. De klikratio van de A-variant was 24,4% en de klikratio van de B-variant 26,84%. Voor A. Vogel was deze test succesvol. Nu weten zij dat het toevoegen van een inhoudsopgave een negatief effect heeft op de klikratio.

E-mail design expert? Dan zijn deze tips voor jou!

21. Minimalisme

Minimalistisch e-maildesign draait om het weglaten van alles wat niet strikt noodzakelijk is. Met zo min mogelijk elementen bouw je een template dat rust uitstraalt en de aandacht volledig richt op de boodschap. Dat vraagt discipline, want elk detail telt.

Bij minimalisme gaat het niet om leegte, maar om focus. Typografie, witruimte en contrast bepalen samen of het ontwerp krachtig of juist kaal aanvoelt.

Actiestappen:

• Beperk je tot één kernboodschap per mailing.
• Gebruik zo min mogelijk kleuren en lettertypes.
• Schrap elk element dat geen duidelijke functie heeft.

22. Animatie

Animatie, meestal in de vorm van animated GIFs, kan e-maildesign versterken wanneer het doelgericht wordt ingezet. Denk aan het tonen van een werking, het toevoegen van een subtiel verrassingseffect of het versterken van een boodschap met humor.

Omdat animaties meer aandacht trekken dan statische beelden, moet je er spaarzaam mee omgaan. Te veel beweging leidt af van de inhoud.

Actiestappen:

• Gebruik animatie om iets uit te leggen of te demonstreren.
• Zorg dat de eerste frame ook zonder animatie begrijpelijk is.
• Houd animaties kort en bestandsgrootte beperkt.

23. Compositie

Compositie gaat over de ordening van alle elementen in je e-mail. Een goede compositie zorgt voor rust en leidt het oog van de lezer logisch door de mailing heen, van titel naar tekst en uiteindelijk naar de call-to-action.

Door bewust gebruik te maken van beeldlijnen, witruimte en hiërarchie kun je de kijkrichting sturen zonder dat het geforceerd aanvoelt.

Actiestappen:

• Plaats titels, beelden en CTA’s in een duidelijke leesvolgorde.
• Laat afbeeldingen ‘kijken’ in de richting van belangrijke elementen.
• Gebruik witruimte om onderdelen visueel van elkaar te scheiden.

24. Interactiviteit

Interactiviteit in e-maildesign vraagt om actieve deelname van de lezer. Denk aan uitklapbare teksten, menu’s of carrousels waarmee extra content zichtbaar wordt. Dit kan de betrokkenheid verhogen en voorkomt dat e-mails onnodig lang worden, vooral op mobiel.

Niet alle e-mailprogramma’s ondersteunen interactieve elementen. Daarom is het belangrijk dat de mailing ook zonder interactiviteit logisch en volledig blijft.

Actiestappen:

• Gebruik interactiviteit om content samen te vatten of te structureren.
• Zorg altijd voor een duidelijke fallback.
• Test interactieve elementen in verschillende e-mailprogramma’s en -apps.

Verborgen tekst

Bij verborgen tekst is een deel van de inhoud in eerste instantie niet zichtbaar. Pas na een klik op een kop of knop verschijnt de volledige tekst. Dit is handig voor extra toelichting of verdieping, terwijl de e-mail compact en scanbaar blijft.

Uitklapmenu

Een uitklapmenu toont extra links of onderwerpen na een klik. Hiermee kun je meerdere onderdelen aanbieden zonder dat de e-mail direct lang wordt, wat vooral op mobiel zorgt voor meer overzicht.

Carrousel

Een carrousel laat meerdere afbeeldingen of contentblokken zien binnen één vaste ruimte. De lezer bladert zelf door de items, bijvoorbeeld bij productoverzichten of thematische content.

In het kort

Goed e-maildesign draait om meer dan een mooie opmaak. Het bepaalt of je e-mail wordt herkend, gelezen en aangeklikt. Door te beginnen met een consistente stijl, goede typografie en mobielvriendelijke opbouw leg je een sterke basis. Met geavanceerde keuzes zoals de juiste balans tussen beeld en tekst, slimme personalisatie en het testen van designelementen vergroot je de effectiviteit. Op expertniveau zorgen minimalisme, compositie en subtiele interactiviteit voor extra focus en betrokkenheid.

Wil je jouw e-mailtemplates verder professionaliseren en consistent toepassen in al je campagnes? Ontdek hoe Spotler je helpt bij het ontwerpen, beheren en optimaliseren van e‑mailtemplates.