Je e-mailontwerp wint aandacht of verliest deze binnen enkele seconden. Consumenten besteden gemiddeld slechts 10 seconden aan het lezen van merkmail, en dat venster wordt nog kleiner wanneer het ontwerp moeilijk leesbaar is, slecht opgemaakt, of niet werkt op mobiel. Het volgen van de juiste best practices voor e-mailontwerp is niet luxe. Dit is een directe driver van opens, clicks en omzet.
Deze gids behandelt de kernprincipes van ontwerp die deliverability, leesbaarheid, click-through rates en conversie beïnvloeden, met data ter ondersteuning van elk punt.
Belangrijkste inzichten
- Meer dan 50% van de gebruikers verwijdert een e-mail als deze niet correct op hun telefoon wordt weergegeven.
- Op knop gebaseerde CTAs verhogen click-through rates met 127% vergeleken met tekstlinks, volgens onderzoek van Campaign Monitor.
- Gemiddeld 35% van de e-mailopens gevolgd door Litmus gebruikte in 2022 dark mode, wat steady adoptie laat zien van jaar op jaar.
- Streef naar een 60/40 tekst-naar-afbeeldingsverhouding en houd je afbeeldingen onder 200KB om deliverability te beschermen.
- E-mails met een enkele CTA genereren 371% meer clicks dan multi-CTA e-mails.
Waarom e-mailontwerp rechtstreeks prestatie beïnvloedt
Ontwerp is niet decoratie. Elke structurele en visuele keuze die je in een e-mail maakt, verandert hoe mensen ermee omgaan, of spamfilters het vertrouwen en of je bericht überhaupt aankomt.
Tekstgerichte of licht ontworpen e-mails nemen toe, gedreven door gebruikersmoeheid, inboxveiligheid en de wens naar authenticiteit. De doelgroepen van vandaag zijn wary tegenover e-mails die zich erg geproduceerd voelen. Eenvoudiger ontwerpen voelen menselijker, vertrouwenswerdiger en meer als een direct bericht van een echte persoon dan een massamarketingcampagne.
Dit betekent niet dat je visuele identiteit opgeeft. Het betekent dat je elke ontwerpbeslissing doelbewust, gericht en getest maakt.
Mobile-First Design Is Ononderhandelbaar
Mobiele apparaten zijn goed voor 55% van alle e-mailopens wereldwijd, met enkele bronnen die meer dan 80% voor specifieke doelgroepen rapporteren. Als je template niet voor kleine schermen is gebouwd, ontwerp je voor een minderheid.
Responsive e-mailontwerp past zich aan verschillende apparaten en schermformaten. Onderzoek van Mailchimp toont aan dat responsive e-mailtemplates hogere clickrates op alle apparaten krijgen. Ze zijn bijzonder effectief voor mobiele gebruikers, waarbij de stijging van unieke clicks van 2,7% naar 3,1% een toename van 15% in daadwerkelijke clicks vertegenwoordigt.
De gevolgen van het negeren van mobiel gaan verder dan lagere betrokkenheid. Ongeveer 69% van ontvangers verwijdert e-mails die niet voor mobiel zijn geoptimaliseerd.
Checklist voor mobiel ontwerp
- Gebruik een lay-out met één kolom voor schoon verticaal scrollen
- Houd onderwerpregel onder 30 tekens, gebruik minimaal 44x44 pixels aanraakvlakken en pas responsief ontwerp toe
- Stel tekengrootte in op minimaal 14px voor desktop en 16px voor mobiele apparaten. Schalen naar 16px voor desktop en 18px voor mobiel rekening houdend met variatie in tekenweergave in e-mailclients.
- Test in Gmail, Apple Mail en Outlook voor elke verzending
Typografie die lezers betrokken houdt
Tekenkeuzens beïnvloeden meer dan esthetiek. Ze beïnvloeden hoe lang iemand leest en of ze klikken.
Gebruik minimaal een tekengrootte van 14px. Er is geen echte bovengrens, maar alles onder 14px wordt moeilijk leesbaar voor veel mensen, en de automatische tekstgrootteveranderingsfunctie van iOS Apple Mail zal ingrijpen en je tekst vergroten.
Voor body copy, houd je aan web-safe, goed leesbare lettertypen. Gmail, Outlook, Apple Mail en anderen gaan anders om met lettertypen. Geef prioriteit aan web-safe lettertypen zoals Arial, Helvetica, Georgia, Verdana en Tahoma, en specificeer altijd fallback-opties in je CSS-stack.
Regelafstand is net zo belangrijk. Gebruik een regelhoogte die 1,5x of 2x je tekengrootte is. Spatiëring tussen regels voorkomt dat copy eruitziet als een massief blok woorden, maar te veel spatie tussen elke regel kan het lezen en scannen moeilijk maken.
Beperk je e-mail tot maximaal twee lettertypen: één voor koppen, één voor body text. Meer dan dat creëert visuele ruis zonder voordeel.
CTA-ontwerp: Het element dat omzet bepaalt
Je call-to-action-knop is het hoogste hefboomontwerpelement in elke e-mail. Het goed doen heeft een meetbaar effect op de bottom line.
Volgens onderzoek van Campaign Monitor hebben op knop gebaseerde CTAs click-through rates met 127% verbeterd. De reden is eenvoudig: knoppen presteren over het algemeen beter dan inline links. Lezers scannen e-mailcopy, dus je moet hun aandacht snel trekken. Terwijl ze een hyperlinked tekstgedeelte kunnen missen, zijn knoppen opvallender en verbeteren ze de clickrates.
Eén CTA per e-mail is een vaste best practice ondersteund door data. E-mails met een enkele CTA genereren 371% meer clicks en 1.617% meer verkopen dan multi-CTA e-mails.
CTA-ontwerpregels
- Bereik aanraakvlakken van 44px of groter op mobiel
- Gebruik voldoende witruimte rond je CTA-knop zodat deze opvalt en een klik uitnodigt
- Bouw knoppen in HTML/CSS, nooit als afbeeldingen. Codeer eerst voor Outlook met VML.
- Gebruik beschrijvende knoptekst. "Download het Rapport" presteer beter dan "Klik hier" omdat het lezers vertelt precies wat ze krijgen
Voor meer over het schrijven van aantrekkelijke campagnes die actie aandrijven, zie onze gids naar best practices voor e-mailmarketing die resultaten oplevert.
Afbeeldingsgebruik en tekst-naar-afbeeldingsbalans
Visuals maken e-mails aantrekkelijker, maar een afbeeldingsintensief ontwerp vormt een echt deliverability-risico.
ESPs zoals Gmail en Yahoo hebben expliciete filters voor e-mails die te veel afbeeldingen bevatten. Je e-mail kan rechtstreeks in spam terechtkomen.
Streef naar een 60/40 tekst-naar-afbeeldingsverhouding en houd je afbeeldingen onder 200KB. De praktische test: verwijder alle afbeeldingen uit je e-mail en lees wat er overblijft. Als het niets communiceert, heb je meer tekst nodig.
Al je tekst in een afbeelding stoppen is een van de grootste en meest kostbare fouten. Schermleesprogramma's kunnen geen tekst in een afbeelding lezen tenzij je perfect alt-text voor elk tekstgedeelte gebruikt, wat onpraktisch is.
Aanvullende best practices voor afbeeldingen:
- Breedteheaders van volledige breedte zijn meestal het beste op ongeveer 600 pixels breed. In de e-mailbody zien afbeeldingen schoon uit op 300 tot 400 pixels breed.
- Schrijf altijd beschrijvend alt-text op elke afbeelding, zowel voor toegankelijkheid als voor abonnees die standaard afbeeldingen blokkeren
Compatibiliteit met Dark Mode
Dark mode is niet langer niche. Meer dan 40% van de gebruikers bekijkt hun e-mails in dark mode. Dit negeren betekent dat een aanzienlijk deel van je doelgroep mogelijk gebroken layouts, onzichtbare logo's en onleesbare tekst ziet.
E-mailclients gaan op drie manieren met dark mode om. Yahoo Mail en Apple Mail brengen geen wijzigingen aan. Outlook past een gedeeltelijke kleuropmerkeling toe, waarbij lichtgekleurde secties worden gedetecteerd en donker worden gemaakt. Gmail-apps voeren een volledige inversie uit, waar alles van kleur verandert. Deze inconsistentie betekent dat je voorzichtig moet ontwerpen en testen.
Om voor beide omgevingen te ontwerpen:
- Gebruik waar mogelijk tekst in plaats van afbeeldingen die tekst bevatten. Dit maakt volledige kleuropmerkeling mogelijk en is beter voor toegankelijkheid.
- Volg WCAG-richtlijnen, die een minimale contrastverhouding van 4,5:1 voor normale tekst aanbevelen.
- Blijf bij tekengrootten tussen 14 en 16px voor body content en 20 tot 24px voor koppen.
- Test je logo specifiek. Een donker logo op een witte achtergrond wordt onzichtbaar in volledig omgekeerde dark mode.
Gebruik tools zoals Litmus of Email on Acid om voor elke verzending in alle clients in het voorbeeld te bekijken.
E-maillayout en visuele hiërarchie
Zelfs sterke copy mislukt wanneer de layout rommelig of moeilijk te scannen is. De visuele hiërarchie moet de lezer natuurlijk van de kop naar de body naar de CTA leiden.
Onderzoek toont aan dat lay-outs met één kolom, korte paragrafen en achtergronden met hoog contrast leescompetentie en gebruikersbetrokkenheid optimaliseren. Consistente, eenvoudige lay-outs verminderen cognitieve belasting en verbeteren begrip.
Gebruik deze structuurprincipes:
- Kop bepaalt de context. Houd deze onder 60 tekens.
- Body copy brengt het ene kernbericht over. Eén e-mail, één idee.
- CTA sluit de lus. Maak het visueel dominant.
- Voettekst bevat juridische vereisten, de afmeldingslink en je fysieke adres
In 2025 besteden afzenders meer aandacht aan best practices op het gebied van toegankelijkheid, inclusief het gebruik van alt-text op afbeeldingen, meer focus op kleurcontrast en toename van semantische HTML in e-mailontwerp. Ervoor zorgen dat e-mails in dark mode leesbaar zijn, wordt ook een prioriteit.
Een schone layout beschermt ook deliverability. HTML-bestandsgrootte beïnvloedt rechtstreeks e-mail deliverability. Bij het testen van HTML-e-mails met een grootte van 15KB tot 650KB, landen bestanden onder 100KB zonder problemen in het postvak. Deliverability werd een probleem naarmate de bestandsgrootte boven 100KB steeg.
Test voordat je verzendt
Ontwerpbeslissingen zijn alleen belangrijk als ze real inbox rendering overleven. Slechts 47% van de teams gebruikt renderingcontroles om e-mails op mobiel en ander platforms te testen. Dit betekent dat meer dan de helft van e-mailafzenders e-mails verzendt zonder te weten hoe ze op apparaten van abonnees worden weergegeven.
Tests vóór verzending moeten beslaan:
- Rendering in minstens Gmail, Apple Mail en Outlook
- Dark mode preview op mobiel en desktop
- Afbeeldingen geblokkeerd weergave om te verifiëren dat de e-mail nog steeds zijn bericht communiceert
- CTA aanraakvlakken op mobiel (minimaal 44x44px)
- Platte-tekstversie voor e-mailclients die HTML niet renderen
Een goed ontworpen e-mail die rendering in de meest gebruikte e-mailclients mislukt, is verspilde moeite. Bouw testen in in je workflow, niet als nagedachte.
Voor een volledig pre-send proces, onze e-mailmarketingcampagnecontrolelijst behandelt alle 12 stappen voordat je verzendt.
Personalisatie en dynamische inhoud in ontwerp
Ontwerp en personalisatie werken samen. Merken die promotie-e-mails personaliseren, zien 27% hogere unieke clickrates en 11% hogere openingspercentages. Gepersonaliseerde e-mails leveren zes keer hogere transactionele tarieven op.
Dynamische inhoudsblokken laten je afbeeldingen, koppen of CTA-kopie wisselen op basis van abonneedata zonder afzonderlijke campagnes te bouwen. 65% van e-mailmarketeerders zegt dat dynamische inhoud hun meest effectieve personalisatietactiek is.
Op ontwerppeil betekent dit:
- Het ontwerpen van modulaire templates met wisselbare inhoudsblokken
- Ruimte laten voor gepersonaliseerde hero-afbeeldingen of productaanbevelingen
- Layout consistent houden zodat dynamische inhoud de structuur niet verstoort
Paar sterk ontwerp met doordachte segmentatie voor de grootste impact. Zie onze gids over e-maillijstsegmentatiestrategie die ROI met 760% verhoogt voor de volledige segmentatieplaybook.
Veelgestelde vragen
Wat is de beste e-mailbreedte voor marketingmail?
De meeste e-mailtemplates zijn gebouwd op 600 pixels breed. Deze breedte wordt correct weergegeven in de meerderheid van de e-mailclients, inclusief Outlook en Gmail. Op mobiel wordt een lay-out met één responsieve kolom inhoud verticaal gestapeld. Full-width headers zijn meestal het beste op ongeveer 600 pixels breed.
Hoeveel afbeeldingen moet een marketingmail bevatten?
Er is geen vaste maximum, maar balans telt. Elke e-mail moet ongeveer 60% tekst en 40% afbeeldingen bevatten. Deze verhouding houdt berichten leesbaar terwijl het spamrisico wordt verlaagd. Lezers krijgen context van tekst, terwijl afbeeldingen aandacht trekken en het bericht versterken. Neem altijd alt-text op en vermijd het insluiten van je kernbericht of CTA in een afbeelding.
Beïnvloedt e-mailontwerp deliverability?
Ja, op verschillende manieren. Afbeeldingsintensieve e-mails met minimale tekst kunnen spamfilters activeren. Een van de rode vlaggen voor spamfilters is een e-mail die afbeeldingsintensief is met zeer weinig tekst. Als je e-mail slechts één grote afbeelding is, is het zeer waarschijnlijk dat deze als spam wordt gemarkeerd of rechtstreeks naar de map Promoties of Junk wordt verzonden. HTML-bestandsgrootte, linkenaantal en betrokkenheidssignalen voeden ook inbox placement.
Hoe vaak moet ik mijn e-mailontwerp testen?
Vóór elke verzending. Renderingomgevingen veranderen naarmate e-mailclients hun code bijwerken. E-mailtestplatforms zoals Litmus en Email on Acid raden aan minstens 15 verschillende e-mailclients en apparaten te testen. Bouw een pre-send checklist met renderingtests, dark mode preview en een mobiel aanraakvlak-check als standaardstappen.
