Design av e-postsignatur: bannrar på 600×200 som förblir små

Bra design av e-postsignatur handlar mest om återhållsamhet: ditt namn, din roll och ett eller två sätt att nå dig som riktig text, och sedan en liten bannerbild på 600×200 pixlar som bär ditt varumärke. Håll bannern lätt, länka den till en sida och lägg aldrig ditt telefonnummer eller din e-postadress bara inne i bilden, eftersom många inkorgar döljer bilder tills läsaren säger annat.

Vad som hör hemma i en e-postsignatur

En signatur har två jobb: tala om vem du är och hur man når dig, och påminna om vad du gör. Det första jobbet är text. Det andra kan vara en banner. Allt utöver det är skräp som folk lär sig att hoppa över.

Storlek och vikt på e-postsignaturbanner

Designa bannern i 600×200 pixlar, en remsa på 3:1. Sexhundra pixlar är den bredd som klassiska e-postmallar är byggda kring, så en banner i den storleken ryms i en mobils e-postapp och i en dators läsfönster utan skalning. För skärmar med hög täthet, exportera samma design i dubbel storlek, 1200×400, och låt e-postmeddelandet visa den 600 pixlar bred.

Vikten spelar större roll än du tror, eftersom bilden följer med varje svar i en lång tråd. Sikta på att hålla filen långt under 100 KB. En gradientbanner exporteras vackert som en JPEG av hög kvalitet. Använd PNG bara när du behöver genomskinlighet eller mycket fin text. Om du också gör ett nyhetsbrev tar guiden design av e-posthuvud upp det större formatet.

Att designa bannern

En banner som ses hundra gånger i veckan bör säga en sak och säga den lugnt. Den fungerar bäst som en stilla marknadsföring: ditt nästa event, en ny tjänst, en bokningslänk eller helt enkelt ditt varumärkes look med en kort rad. Byt orden med säsongen och behåll bakgrunden.

Mörkt läge är en verklig fälla. Vissa e-postappar inverterar eller tonar ljusa färger, så en logotyp på genomskinlig bakgrund kan försvinna mot en mörk inkorg. En banner som bär sin egen fulla bakgrund, som en rik gradient, ser likadan ut i båda lägena. Design för mörkt läge och gradienter i e-post går djupare in på hur klienter behandlar färg.

HTML för en e-postsignatur som håller ihop

E-postklienter är gammalmodiga när det gäller layout, så signaturer byggs med enkla tabeller och inline-stilar. Den här fungerar i de vanliga klienterna: klistra in den i en HTML-fil, öppna den i en webbläsare, markera allt och kopiera in det i e-postappens signaturinställningar.

<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>

Så ställer du in din signatur, steg för steg

1. 1

   Skriv textblocket

   Namn, roll och företag, en länk att agera på, din webbplats. Läs det högt och stryk allt du inte skulle säga.

2. 2

   Designa bannern i 600×200

   Använd din varumärkesbakgrund och en kort rad. Håll orden i mitten med utrymme i båda ändar.

3. 3

   Exportera i 1200×400

   En JPEG av hög kvalitet för gradienter och foton, PNG för genomskinlighet. Kontrollera att filen är under 100 KB.

4. 4

   Ladda upp den till din webbplats

   Lägg den i en stabil mapp som /email/, så att adressen aldrig ändras och gamla e-postmeddelanden behåller sin banner.

5. 5

   Bygg och klistra in HTML

   Anpassa koden ovan, sätt bredden till 600, skriv en riktig alt-text och klistra in den i din e-postapp.

6. 6

   Testa ordentligt

   Skicka den till en Gmail- och en Outlook-adress, öppna den på en mobil, slå mörkt läge på och av och svara på tråden två gånger.

Att hålla ett teams signaturer enhetliga

Signaturer glider isär: en person lägger till ett citat, en annan använder förra årets logotyp. Ge teamet en HTML-mall och en banner, och byt bannern centralt när budskapet ändras. Samma disciplin som beskrivs i varumärkesenhetlighet gäller här, i mindre skala.

Gradiently har en storlek för e-postsignatur på 600×200 färdig i Studio, och en egen storlek på 1200×400 täcker exporten för hög täthet. Gratis exporter har en liten vattenstämpel, så en ren banner kräver Pro, som också ger varumärkeskitet: logotyp, färger och typsnitt på ett ställe. Marken bakom bannern är densamma som på dina inlägg i sociala medier och dina visitkort, så ett svar i någons inkorg ser obestridligen ut som resten av ditt varumärke.