Animerede e-mailheadere: GIF’er, der indlæses hurtigt og ser godt ud

En animeret e-mailheader bør være en GIF, omkring 1200×600 pixels vist i 600 bredde, med et kort loop, moderat filvægt og et første billede, der virker som et færdigt design alene. Den sidste regel er den, folk overser: nogle desktopversioner af Outlook til Windows viser kun første billede i en animeret GIF, og alle med blokerede billeder ser intet andet end din alt-tekst. Design først til de læsere, og tilføj så bevægelse som en bonus til alle andre.

Hvorfor animerede e-mailheadere er GIF’er

Understøttelse af video i e-mail er sjælden og upålidelig. Animeret GIF, et billedformat, vises i de fleste programmer, fra Apple Mail til Gmail. Nyere formater som animeret WebP har mere pletvis understøttelse i indbakker. Så GIF er stadig det praktiske valg, med alle dens begrænsninger: højst 256 farver pr. billede og større filer end video. De begrænsninger former designet. Den fulde sammenligning står i GIF eller MP4.

Design det første billede som reserveløsning

Behandl det første billede som e-mailheaderen og animationen som et ekstra. Hvis dine ord tones ind fra ingenting, ser en Outlook-læser en tom farveblok. Hvis dit produkt dukker op efter to sekunder, ser de aldrig produktet. Læg alt, der tæller, på skærmen i første billede, og lad så bevægelsen ske omkring det.

• Ord stille, baggrund i bevægelse. Drivende farve bag en fast overskrift er den mest pålidelige animerede header, der findes.
• Én lille bevægelse. Et ord, der skifter, en linje, der understreger sig selv, et blødt skift i lys. Én idé pr. header.
• Slut, hvor du begyndte. Et loop, der hopper tilbage til start, ser ødelagt ud. Lad det sidste billede føre ind i det første, som i sømløs loopvideo.
• Intet blink. Hold ændringer i lysstyrke langsomme. Hurtige blink er ubehagelige og kan være skadelige.

Hold GIF’en let

Det meste af en GIF’s vægt kommer fra pixels, der ændrer sig mellem billederne. En header, hvor hele billedet bevæger sig, er tung. En, hvor en langsom gradient driver bag stillestående ord, er meget lettere, fordi kodningen kun kan gemme det, der ændrede sig. At halvere bredden fjerner cirka tre fjerdedele af pixelsene, så afgør tidligt, om denne header skal være 1200 px, eller om 600 px er nok.

1. 1

   Design i 1200×600

   Læg headeren ud med alle ord på plads i første billede.

2. 2

   Hold loopet kort

   To til fem sekunder, hvor hver bevægelse gennemfører en hel cyklus.

3. 3

   Eksportér som GIF i 10 til 15 fps

   Brug en palet bygget ud fra selve animationen, ikke en generisk.

4. 4

   Tjek vægten

   Hvis den er tung, så prøv 600 px bredde, færre billeder eller mindre bevægelse, før du sænker kvaliteten.

5. 5

   Tjek første billede alene

   Åbn GIF’en i en billedfremviser, der kun viser det første billede, eller send en test til Outlook på Windows.

De detaljerede eksportkommandoer og indstillinger for palet og dithering står i animerede GIF’er.

HTML til en animeret e-mailheader

Kod headeren som et almindeligt billede i en tabelcelle. Sæt visningsbredden både i attributten og i stilen, så alle programmer størrelsesangiver den rigtigt, giv den beskrivende alt-tekst, og sæt en baggrundsfarve på cellen, der matcher GIF’ens første billede. Når billeder er blokeret, ser læserne så din farve og dine ord i stedet for 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 tilstand og blokering af billeder

Mørk tilstand kan ændre farverne omkring din header, men lader som regel selve billedet være. En header med sin egen fulde baggrundsfarve holder i begge tilstande. En med en gennemsigtig eller hvid kant kan ende som en lys boks på en mørk skærm. CSS-gradienter bag billedet er ikke pålidelige på tværs af programmer, så bag gradienten ind i GIF’en, og brug en ensfarvet farve som reserve. Gradienter i e-mail dækker mulighederne.

I Gradiently kan du designe headeren i e-mailheaderens størrelse på en bevægelig Mark, holde ordene stille, mens Marken driver bag dem, og eksportere den som GIF på Pro. Fordi baggrunden er en unik Mark, du ejer, ligner headeren dit brand frem for en skabelon, andre nyhedsbreve deler. Til stillestående headere og layout, se design af e-mailheadere.