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

[Canonical HTML page](https://gradiently.design/nb/guide/email-signature-design)

Signaturen følger med hver e-post du sender, og er derfor kanskje designet flest ser. Slik lager du en gjennomført signatur som lastes raskt og aldri blir et bindersikon.

## The short version

- Godt design av e-postsignatur beholder navn, stilling og kontaktopplysninger som tekst og legger til høyst ett lite bildebanner.
- Et signaturbanner fungerer godt på 600×200 piksler, en stripe i 3:1 som passer i smale e-postoppsett.
- Eksporterer du banneret i dobbel størrelse, 1200×400, og viser det med 600 pikslers bredde, blir det skarpt på skjermer med høy pikseltetthet.
- Mange e-postprogrammer blokkerer bilder til mottakeren tillater dem, så viktig informasjon bør aldri finnes bare i banneret.
- Et bilde på en nettserver med full https-adresse holder hver e-post lett, mens et innlimt bilde ofte sendes som vedlegg i hver melding.

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.

| Element | Format | Merknader |
| --- | --- | --- |
| Navn | Tekst, fet | Det ene elementet som bør være større |
| Stilling og firma | Tekst | Én linje, adskilt med komma |
| Telefon eller bestillingslenke | Tekstlenke | Én tydelig vei videre, ikke fire |
| Nettsted | Tekstlenke | Kort og lesbart, uten `https://` |
| Banner | Bilde, 600×200 | Valgfritt, lenker til én side |
| Ikoner for sosiale medier | Små bilder | Høyst to eller tre, eller sløyf dem |

Tekst først, bilde etterpå. Signaturen skal fortsatt fungere selv om ingen bilder lastes inn.

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

- Signaturbanner 600×200: 600 × 200
- E-posttopp 1200×600: 1200 × 600
- Visittkort 1050×600: 1050 × 600

Et signaturbanner ved siden av toppen på et nyhetsbrev og et visittkort, i samme målestokk. Banneret er en smal stripe, ikke en plakat.

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](https://gradiently.design/nb/guide/email-header-design) 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.

Et smalt signaturbanner for et fotostudio med teksten Vi tar imot bestillinger til vårbryllup over en myk gradient

En fotografs banner med én aktuell setning og navnet på studioet.

Et signaturbanner som annonserer et gratis webinar 12. november

Et konsulentfirma fremhever ett arrangement. Bytt teksten når det er over.

### Unngå

- Kontaktopplysninger bare i bildet
- Et banner på flere hundre kilobyte
- Animerte GIF-er som går i løkke for alltid
- Sitater, forbehold og fem sosiale ikoner
- Liten grå tekst som forsvinner i mørk modus

### Gjør dette

- Navn og lenker som ekte tekst
- Et lett banner på 600×200, under 100 KB
- Et stillbilde, eller høyst én rolig løkke
- Én oppfordring til handling
- Et banner med egen bakgrunn, så det er lesbart i lys og mørk modus

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](https://gradiently.design/nb/guide/dark-mode-design) og [gradienter i e-post](https://gradiently.design/nb/guide/gradients-in-email) 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.

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

Opplysninger som ekte tekst, ett bilde på en nettserver vist i 600×200 fra en fil på 1200×400, og alternativ tekst som gir mening når bilder blokkeres.

> **Legg bildet på nettet, ikke lim det inn** Når du limer inn eller laster opp et bilde direkte i signaturen, sender enkelte e-postapper det som vedlegg i hver melding. Da vises et bindersikon, og innboksene fylles. En lenke til et bilde på ditt eget nettsted med full https-adresse unngår dette.

## Sett opp signaturen trinn for trinn

1. **Skriv tekstblokken** Navn, stilling og firma, én handlingslenke og nettstedet ditt. Les høyt og fjern det du ikke ville sagt.
2. **Lag banneret på 600×200** Bruk merkevarens bakgrunn og én kort setning. Hold ordene i midten med luft i begge ender.
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. **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. **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. **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](https://gradiently.design/nb/guide/brand-consistency) 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](https://gradiently.design/nb/guide/business-card-design), så et svar i innboksen ser tydelig ut som resten av merkevaren.

## FAQ

### Hvor stort bør et banner i e-postsignaturen være?

Lag det på 600×200 piksler. Eksporter på 1200×400 og sett bildebredden til 600, så det blir skarpt på skjermer med høy pikseltetthet.

### Hvor stor bør bildefilen i en e-postsignatur være?

Hold den godt under 100 KB. Bildet sendes eller lastes med hver e-post og hvert svar, så en tung fil gir raskt mye ekstra data.

### Hvorfor vises bildet i signaturen som et vedlegg?

Enkelte e-postapper legger ved innlimte eller opplastede bilder i hver melding. Legg bildet på nettstedet ditt og lenk til det med full https-adresse i stedet.

### Bør telefonnummeret stå i signaturbildet?

Nei. Mange e-postprogrammer blokkerer bilder som standard, og tekst i et bilde kan verken trykkes på eller kopieres. Behold kontaktopplysningene som ekte tekst.

### Kan jeg bruke en animert GIF i e-postsignaturen?

Ja, men hold den liten og diskret. En gjentatt animasjon i hver e-post i en lang tråd blir fort distraherende, og enkelte programmer viser bare første bilde.