De korte versie
- Een standaard headerafbeelding voor e-mail is 1200 bij 600 pixels, weergegeven op 600 pixels breed zodat hij scherp blijft op schermen met een hoge pixeldichtheid.
- Niet elke e-mailclient ondersteunt CSS-kleurverlopen even goed, dus een header met kleurverloop is meestal een afbeelding, met een effen achtergrondkleur als terugval.
- Sommige e-mailclients blokkeren standaard afbeeldingen, dus elke header heeft beschrijvende alt-tekst en een achtergrondkleur erachter nodig.
- Donkere modus kan de kleuren rond een header veranderen, maar meestal niet in de afbeelding zelf, dus geef headers een eigen achtergrond en test in beide modi.
- Zet belangrijke woorden zoals aanbiedingen, datums en oproepen tot actie als echte HTML-tekst onder de header, niet alleen in de afbeelding.
Op deze pagina
Goed een e-mailheader ontwerpen begint bij de beperkingen van de inbox. Maak de headerafbeelding 1200 bij 600 pixels en toon hem op 600 pixels breed, zodat hij scherp is op schermen met een hoge pixeldichtheid. Omdat e-mailclients CSS-kleurverlopen wisselend verwerken, zet je het kleurverloop in de afbeelding en stel je er een passende effen achtergrondkleur achter in. Voeg beschrijvende alt-tekst toe voor lezers die afbeeldingen uit hebben staan, controleer hem in donkere modus en houd belangrijke woorden als echte tekst onder de afbeelding.
Deze gids behandelt formaten, afbeelding tegenover CSS, donkere modus, bestandsgrootte en alt-tekst, met HTML die je kunt aanpassen. Voor de technische kant van kleurverlopen in HTML-mail, zie kleurverlopen in e-mail.
Formaat van een e-mailheader
De meeste e-maillay-outs zijn ongeveer 600 pixels breed, een breedte die prettig past in het leesvenster op desktop en op telefoons meeschaalt. Exporteer headers op het dubbele, 1200 bij 600, en stel de weergavebreedte van de afbeelding in de HTML in op 600. De verhouding van 2:1 laat ruimte voor een korte kop of een logo zonder de inhoud op telefoons onder de vouw te duwen.
E-mailheader 1200×600
1200 × 600
E-mailhandtekening 600×200
600 × 200
Blogbanner 1200×600
1200 × 600
Afbeelding of CSS: zo bouw je een e-mailheader met kleurverloop
Op het web is een kleurverloop één regel CSS. In e-mail is dat minder betrouwbaar: sommige clients tonen background-image: linear-gradient(...), andere negeren het. Hieronder de praktische opties.
| Aanpak | Hoe het werkt | Afweging |
|---|---|---|
| Afbeeldingsheader | Het kleurverloop en eventueel beeldwerk ingebakken in een afbeelding van 1200×600 | Ziet er overal hetzelfde uit waar afbeeldingen laden; woorden erin verdwijnen als afbeeldingen uit staan |
| CSS-kleurverloop en echte tekst | Een tabelcel met een kleurverloop als achtergrond en HTML-tekst erbovenop | Licht en toegankelijk; valt terug op een effen kleur waar kleurverlopen niet worden ondersteund |
| Hybride | Een afbeelding met kleurverloop voor de sfeer, echte tekst voor de boodschap eronder of op een effen terugvalkleur | Het robuustst: altijd leesbaar, meestal mooi |
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#2a1b6b"
style="background-color:#2a1b6b; background-image:linear-gradient(135deg,#2a1b6b,#7c3aed);">
<img src="https://example.com/header-1200x600.jpg"
width="600" height="300"
alt="Autumn edit: new colours for the season"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
</td>
</tr>
<tr>
<td style="padding:24px; font-family:Arial, sans-serif; font-size:18px; line-height:1.5; color:#1c1733;">
Our autumn colours are here. See the new range this weekend.
</td>
</tr>
</table>E-mailheaders ontwerpen voor donkere modus
In donkere modus passen veel e-mailapps de kleuren van de e-mail rond je header aan: witte achtergronden kunnen donker worden en donkere tekst licht. Afbeeldingen blijven meestal zoals ze zijn. Dat geeft twee klassieke problemen: een header met een witte achtergrond die in een donkere inbox oplicht als een lichtbak, en een transparant logo in donkere inkt dat verdwijnt tegen een ineens donkere achtergrond.
Vermijd
- Headers met een puur witte achtergrond
- Transparante PNG-logo’s in donkere inkt
- Belangrijke woorden alleen in de afbeelding
- Dunne lichte tekst op een bleek kleurverloop
Doe
- Een header met een eigen middeldonkere of diepe achtergrond
- Logo’s op een effen vorm, of een lichte en een donkere versie
- De boodschap herhaald als echte tekst
- Sterk contrast binnen de afbeelding zelf
Middeldonkere tot diepe kleurverlopen zoals deze zijn de veiligste keuze. Ze verblinden niet in een donkere inbox, en witte tekst erin blijft in beide modi leesbaar. Ontwerpen voor donkere modus behandelt de bredere principes.
Bestandsgrootte, alt-tekst en de woorden die ertoe doen
Houd headerafbeeldingen licht: exporteer JPEG voor fotografische of korrelige kleurverlopen en PNG voor vlakke graphics met tekst, en comprimeer ze. Grote gladde kleurverlopen kunnen banding vertonen bij zware compressie, en een beetje korrel in het ontwerp helpt ze dat te overleven; zie banding in kleurverlopen.
Schrijf alt-tekst die zegt wat de header zegt, niet hoe hij eruitziet: Herfsteditie: nieuwe kleuren voor het seizoen, niet paarse banner. Stel de lettereigenschappen van de afbeelding in, zodat de alt-tekst in een leesbare grootte en kleur op de terugvalachtergrond verschijnt als afbeeldingen uit staan.
Een nieuwsbriefheader op 1200 bij 600: titel, nummer en één regel.
Een aankondigingsheader: de boodschap is kort genoeg om eronder als echte tekst te herhalen.
Checklist voor je e-mailheader
- 1
Ontwerp op 1200 bij 600
Toon hem op 600 breed. Houd woorden groot genoeg om ze op dat formaat op een telefoon te lezen.
- 2
Geef hem een eigen achtergrond
Geen puur wit en geen transparantie aan de randen, zodat donkere modus er geen lichtbak van kan maken.
- 3
Stel een terugvalkleur in
Een
bgcolorop de cel in een kleur uit het kleurverloop, zodat geblokkeerde afbeeldingen er nog steeds uitzien als je merk. - 4
Schrijf echte alt-tekst
De boodschap, geen beschrijving van het plaatje.
- 5
Herhaal de boodschap als tekst
Datums, aanbiedingen en oproepen tot actie als HTML-tekst onder de header.
- 6
Test in beide modi
Stuur testmails naar de apps die je lezers gebruiken, in lichte en donkere modus, met afbeeldingen aan en uit.
In Gradiently zijn de formaten E-mailheader (1200 bij 600) en handtekening (600 bij 200) ingebouwd, en kopiëren naar formaten maakt van een afgeronde social post een bijpassende header voor je e-mail op lanceringsdag.
Vragen die mensen stellen
Welk formaat moet een e-mailheader hebben?
1200 bij 600 pixels, weergegeven op 600 pixels breed in de HTML van de e-mail. De dubbele resolutie houdt hem scherp op schermen met een hoge pixeldichtheid.
Werken CSS-kleurverlopen in e-mail?
In sommige e-mailclients wel, niet in alle. Zet het kleurverloop in een afbeelding of gebruik CSS met een effen bgcolor als terugval, en test in de apps die je lezers gebruiken.
Hoe laat ik een e-mailheader werken in donkere modus?
Geef de header een eigen middeldonkere of diepe achtergrond in plaats van wit of transparant, houd sterk contrast in de afbeelding en herhaal belangrijke woorden als echte tekst.
Wat moet de alt-tekst van een e-mailheader zeggen?
Wat de header zegt, zoals de kop of de aanbieding, zodat lezers met geblokkeerde afbeeldingen de boodschap toch krijgen.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
