Design av e-postsignatur: lette bannere på 600×200

Godt design av e-postsignatur handler først og fremst om måtehold: navn, stilling og én eller to kontaktmuligheter som ekte tekst, fulgt av ett lite banner på 600×200 piksler som viser merkevaren din. Hold banneret lett, lenk det til én side, og legg aldri telefonnummeret eller e-postadressen bare i bildet. Mange innbokser skjuler bilder til mottakeren velger å vise dem.

Hva en e-postsignatur bør inneholde

Signaturen har to oppgaver: fortelle hvem du er og hvordan folk når deg, og minne dem på hva du gjør. Den første løses med tekst. Den andre kan løses med et banner. Alt utover dette er støy som folk lærer å hoppe over.

Størrelse og filvekt for signaturbannere

Lag banneret på 600×200 piksler, en stripe i 3:1. Klassiske e-postmaler bygger på en bredde på seks hundre piksler, så banneret passer i e-postappen på telefonen og lesefeltet på datamaskinen uten skalering. For skjermer med høy pikseltetthet eksporterer du samme design i dobbel størrelse, 1200×400, og angir at e-posten skal vise det 600 piksler bredt.

Filvekten betyr mer enn du tror, fordi bildet følger med hvert svar i en lang tråd. Sikt mot godt under 100 KB. Et gradientbanner blir flott som JPEG i høy kvalitet. Bruk PNG bare når du trenger gjennomsiktighet eller svært fin tekst. Lager du også et nyhetsbrev, dekker guiden til design av e-posttopp det større formatet.

Utforme banneret

Et banner som ses hundre ganger i uken bør si én ting, rolig og tydelig. Det fungerer best som en diskret påminnelse om neste arrangement, en ny tjeneste, en bestillingslenke eller bare merkevarens uttrykk med en kort tekst. Bytt ordene med sesongen, og behold bakgrunnen.

Mørk modus er en reell fallgruve. Enkelte e-postapper inverterer eller farger lyse farger, så en logo på gjennomsiktig bakgrunn kan forsvinne i en mørk innboks. Et banner med egen heldekkende bakgrunn, for eksempel en fyldig gradient, ser likt ut i begge moduser. Design for mørk modus og gradienter i e-post forklarer nærmere hvordan e-postprogrammer behandler farger.

HTML for en e-postsignatur som holder sammen

E-postprogrammer er gammeldagse når det gjelder oppsett, så signaturer bygges med enkle tabeller og stilregler direkte på elementene. Denne fungerer i vanlige programmer: lim den inn i en HTML-fil, åpne den i en nettleser, marker alt og kopier det til signaturinnstillingene i e-postappen.

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

Sett opp signaturen trinn for trinn

1. 1

   Skriv tekstblokken

   Navn, stilling og firma, én handlingslenke og nettstedet ditt. Les høyt og fjern det du ikke ville sagt.

2. 2

   Lag banneret på 600×200

   Bruk merkevarens bakgrunn og én kort setning. Hold ordene i midten med luft i begge ender.

3. 3

   Eksporter på 1200×400

   JPEG i høy kvalitet til gradienter og bilder, PNG til gjennomsiktighet. Kontroller at filen er under 100 KB.

4. 4

   Last det opp til nettstedet ditt

   Legg det i en fast mappe, for eksempel /email/, så adressen ikke endres og gamle e-poster beholder banneret.

5. 5

   Bygg og lim inn HTML-en

   Tilpass koden over, sett bredden til 600, skriv meningsfull alternativ tekst og lim den inn i e-postappen.

6. 6

   Test grundig

   Send til en Gmail- og en Outlook-adresse, åpne på telefonen, slå mørk modus av og på, og svar to ganger i tråden.

Holde teamets signaturer enhetlige

Signaturer sklir ut: én legger til et sitat, en annen bruker fjorårets logo. Gi teamet én HTML-mal og ett banner, og bytt banneret sentralt når budskapet endres. Den samme disiplinen som beskrives i enhetlig merkevare gjelder her, bare i mindre format.

Gradiently har størrelsen E-postsignatur på 600×200 klar i Studio, og en egendefinert størrelse på 1200×400 dekker eksport for høy pikseltetthet. Gratis eksport har et lite vannmerke, så et rent banner krever Pro. Pro gir deg også merkevaresettet med logo, farger og skrifttyper samlet. Marken bak banneret er den samme som på innleggene dine og visittkortene, så et svar i innboksen ser tydelig ut som resten av merkevaren.