E-mailhandtekening ontwerpen: banners van 600×200 die klein blijven

Goed e-mailhandtekening ontwerp is vooral terughoudendheid: je naam, functie en een of twee manieren om je te bereiken als echte tekst, en dan één kleine bannerafbeelding van 600×200 pixels die je merk draagt. Houd de banner licht, laat hem naar één pagina linken en zet je telefoonnummer of e-mailadres nooit alleen in het plaatje, want veel inboxen verbergen afbeeldingen tot de lezer anders zegt.

Wat in een e-mailhandtekening hoort

Een handtekening heeft twee taken: mensen vertellen wie je bent en hoe ze je bereiken, en hen eraan herinneren wat je doet. De eerste taak is tekst. De tweede kan een banner zijn. Alles daarbuiten is rommel die mensen leren te negeren.

Formaat en gewicht van de handtekeningbanner

Ontwerp de banner op 600×200 pixels, een strook van 3:1. Zeshonderd pixels is de breedte waar klassieke e-mailsjablonen omheen gebouwd zijn, dus een banner van die grootte past in de mailapp van een telefoon en in een leesvenster op de desktop zonder te schalen. Exporteer voor schermen met hoge dichtheid hetzelfde ontwerp op dubbel formaat, 1200×400, en laat de e-mail het op 600 pixels breed tonen.

Gewicht doet meer ertoe dan je denkt, want de afbeelding reist mee met elk antwoord in een lange draad. Houd het bestand ruim onder 100 KB. Een verloopbanner exporteert prachtig als jpeg van hoge kwaliteit; gebruik png alleen als je transparantie of heel fijne letters nodig hebt. Maak je ook een nieuwsbrief, dan behandelt de gids e-mailheader ontwerpen het grotere formaat.

De banner ontwerpen

Een banner die honderd keer per week wordt gezien, moet één ding zeggen en dat rustig doen. Hij werkt het best als stille promotie: je volgende evenement, een nieuwe dienst, een boekingslink, of gewoon de look van je merk met een korte regel. Verander de woorden met het seizoen; houd de achtergrond.

Donkere modus is een echte valkuil. Sommige mailapps keren lichte kleuren om of kleuren ze bij, dus een logo op een transparante achtergrond kan verdwijnen tegen een donkere inbox. Een banner met een eigen volledige achtergrond, zoals een rijk verloop, ziet er in beide modi hetzelfde uit. Ontwerpen voor donkere modus en verlopen in e-mail gaan dieper in op hoe programma’s met kleur omgaan.

HTML voor een e-mailhandtekening die bij elkaar blijft

E-mailprogramma’s zijn ouderwets over lay-out, dus handtekeningen worden gebouwd met simpele tabellen en inline stijlen. Deze werkt in de gangbare programma’s: plak hem in een HTML-bestand, open dat in een browser, selecteer alles en kopieer het naar de handtekeninginstellingen van je mailapp.

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; color: #1f2937;">
  <tr>
    <td style="padding-bottom: 8px;">
      <strong style="font-size: 15px;">Maya Okafor</strong><br>
      <span style="font-size: 13px;">Founder, Studio Alder</span><br>
      <a href="https://example.com/book" style="font-size: 13px; color: #1f2937;">Book a call</a>
      &middot;
      <a href="https://example.com" style="font-size: 13px; color: #1f2937;">example.com</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="https://example.com/weddings">
        <img src="https://example.com/email/banner-1200x400.jpg"
             width="600" height="200" alt="Studio Alder: now booking spring weddings"
             style="display: block; border: 0; max-width: 100%; height: auto;">
      </a>
    </td>
  </tr>
</table>

Je handtekening instellen, stap voor stap

1. 1

   Schrijf het tekstblok

   Naam, functie en bedrijf, één link om op te handelen, je website. Lees het hardop; schrap alles wat je niet zou zeggen.

2. 2

   Ontwerp de banner op 600×200

   Gebruik je merkachtergrond en één korte regel. Houd de woorden in het midden met ruimte aan beide uiteinden.

3. 3

   Exporteer op 1200×400

   Een jpeg van hoge kwaliteit voor verlopen en foto’s, png voor transparantie. Controleer of het bestand onder 100 KB blijft.

4. 4

   Upload hem naar je website

   Zet hem in een vaste map zoals /email/, zodat het adres nooit verandert en oude e-mails hun banner houden.

5. 5

   Bouw en plak de HTML

   Pas de code hierboven aan, zet de breedte op 600, schrijf echte alt-tekst en plak het in je mailapp.

6. 6

   Test het goed

   Stuur het naar een Gmail- en een Outlook-adres, open het op een telefoon, zet donkere modus aan en uit en reageer twee keer op de draad.

De handtekeningen van een team consistent houden

Handtekeningen driften: de een voegt een citaat toe, de ander gebruikt het logo van vorig jaar. Geef het team één HTML-sjabloon en één banner, en verander de banner centraal als de boodschap verandert. Dezelfde discipline als beschreven in merkconsistentie geldt hier, op kleinere schaal.

Gradiently heeft een formaat E-mailhandtekening van 600×200 klaar staan in de Studio, en een eigen formaat van 1200×400 dekt de export voor hoge dichtheid. Gratis exports dragen een klein watermerk, dus voor een schone banner heb je Pro nodig, dat ook de merkkit brengt: logo, kleuren en lettertypen op één plek. De Mark achter de banner is dezelfde als op je socialposts en visitekaartjes, dus een antwoord in iemands inbox ziet er onmiskenbaar uit als de rest van je merk.