Animerte e-postheadere: GIF-er som laster raskt og ser bra ut

En animert e-postheader bør være en GIF på rundt 1200×600 piksler vist med 600 i bredde, med en kort loop, beskjeden filvekt og en første ramme som fungerer som et ferdig design alene. Den siste regelen er den folk overser: noen skrivebordsversjoner av Outlook for Windows viser bare den første rammen i en animert GIF, og alle som har blokkert bilder ser bare alt-teksten din. Design for disse leserne først, og legg så til bevegelse som en bonus for alle andre.

Hvorfor animerte e-postheadere er GIF-er

Videostøtte i e-post er sjelden og upålitelig. Animert GIF, et bildeformat, vises i de fleste programmer, fra Apple Mail til Gmail. Nyere formater som animert WebP har mer ujevn støtte i innbokser. Derfor er GIF fortsatt det praktiske valget, med alle sine begrensninger: høyst 256 farger per ramme og større filer enn video. De begrensningene former designet. Hele sammenligningen finner du i GIF eller MP4.

Design den første rammen som reserveløsning

Behandle den første rammen som e-postheaderen og animasjonen som et tillegg. Toner ordene dine inn fra ingenting, ser en Outlook-leser en tom fargeblokk. Dukker produktet opp etter to sekunder, ser de aldri produktet. Sett alt som betyr noe på skjermen i ramme én, og la så bevegelsen skje rundt det.

• Ordene i ro, bakgrunnen i bevegelse. Drivende farge bak en fast overskrift er den mest pålitelige animerte headeren som finnes.
• Én liten bevegelse. Et ord som skifter, en linje som understreker seg selv, et mykt skifte i lyset. Én idé per header.
• Slutt der du begynte. En loop som hopper tilbake til starten, ser ødelagt ut. La den siste rammen lede inn i den første, som i sømløs loopvideo.
• Ingen blinking. Hold endringer i lysstyrke langsomme. Rask blinking er ubehagelig og kan være skadelig.

Slik holder du GIF-en lett

Mesteparten av vekten i en GIF kommer fra piksler som endres mellom rammene. En header der hele rammen beveger seg, er tung; en der en langsom gradient driver bak stillestående ord, er mye lettere, fordi koderen bare trenger å lagre det som endret seg. Å halvere bredden gir omtrent en firedel så mange piksler, så avgjør tidlig om headeren trenger 1200 px eller om 600 px er nok.

1. 1

   Design i 1200×600

   Sett opp headeren med alle ord på plass i den første rammen.

2. 2

   Hold loopen kort

   To til fem sekunder, der hver bevegelse fullfører en hel syklus.

3. 3

   Eksporter som GIF i 10 til 15 fps

   Bruk en palett bygget fra selve animasjonen, ikke en generisk en.

4. 4

   Sjekk vekten

   Er den tung, prøv 600 px bredde, færre rammer eller mindre bevegelse før du senker kvaliteten.

5. 5

   Sjekk ramme én alene

   Åpne GIF-en i et bildeprogram som bare viser den første rammen, eller send en test til Outlook på Windows.

De detaljerte eksportkommandoene og innstillingene for palett og dithering finner du i animerte GIF-er.

HTML for en animert e-postheader

Kod headeren som et vanlig bilde i en tabellcelle. Sett visningsbredden både i attributtet og i stilen så alle programmer får riktig størrelse, gi den beskrivende alt-tekst, og sett en bakgrunnsfarge på cellen som matcher den første rammen i GIF-en. Når bilder er blokkert, ser leserne da fargen og ordene dine, ikke en tom boks.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td bgcolor="#2e1065" style="background-color:#2e1065;">
      <img src="https://example.com/header-october.gif"
           width="600" height="300"
           alt="The October issue: new work, three reads and a studio update"
           style="display:block; width:100%; max-width:600px; height:auto; border:0;
                  color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
    </td>
  </tr>
</table>

Mørk modus og blokkerte bilder

Mørk modus kan endre fargene rundt headeren, men lar som regel selve bildet være i fred. En header med sin egen fulle bakgrunnsfarge holder i begge moduser; en med gjennomsiktig eller hvit kant kan ende som en lys boks på en mørk skjerm. CSS-gradienter bak bildet er ikke pålitelige på tvers av programmer, så bak gradienten inn i GIF-en og bruk en ensfarget reserve. Gradienter i e-post dekker alternativene.

I Gradiently kan du designe headeren i størrelsen for e-postheadere på en Mark i bevegelse, holde ordene i ro mens Marken driver bak dem, og eksportere den som GIF med Pro. Fordi bakgrunnen er en unik Mark du eier, ser headeren ut som merkevaren din og ikke som en mal andre nyhetsbrev deler. For stillestående headere og oppsett, se design av e-postheader.