Animerade e-posthuvuden: GIF som laddas snabbt och ser bra ut

Ett animerat e-posthuvud bör vara en GIF, ungefär 1200×600 pixlar visad i 600 bredd, med en kort loop, måttlig filvikt och en första ruta som fungerar som en färdig design på egen hand. Den sista regeln är den folk missar: vissa skrivbordsversioner av Outlook för Windows visar bara första rutan i en animerad GIF, och den som har bilder blockerade ser inget annat än din alt-text. Designa för de läsarna först och lägg sedan till rörelse som en bonus för alla andra.

Därför är animerade e-posthuvuden GIF

Stöd för video i e-post är sällsynt och opålitligt. Animerad GIF, ett bildformat, visas i de flesta klienter, från Apple Mail till Gmail. Nyare format som animerad WebP har ojämnare stöd i inkorgar. Så GIF är fortfarande det praktiska valet, med alla sina gränser: högst 256 färger per ruta och större filer än video. De gränserna formar designen. Hela jämförelsen finns i GIF eller MP4.

Designa första rutan som reservlösning

Behandla första rutan som e-posthuvudet och animationen som ett extra. Om dina ord sveps in från ingenting ser en Outlook-läsare ett tomt färgblock. Om din produkt dyker upp vid sekund två ser de aldrig produkten. Lägg allt som spelar roll på skärmen i ruta ett och låt sedan rörelsen ske runt den.

• Orden stilla, bakgrunden rörlig. Glidande färg bakom en fast rubrik är det mest pålitliga animerade huvud som finns.
• En liten rörelse. Ett ord som byts, en rad som understryker sig själv, ett mjukt skifte i ljuset. En idé per huvud.
• Sluta där du började. En loop som hoppar tillbaka till början ser trasig ut. Låt sista rutan leda in i första, som i sömlös loopvideo.
• Inget blixtrande. Håll ljusförändringar långsamma. Snabbt blixtrande ljus är obehagligt och kan vara skadligt.

Håll GIF-filen lätt

Det mesta av en GIF-fils vikt kommer från pixlar som ändras mellan rutorna. Ett huvud där hela rutan rör sig är tungt, medan ett där en långsam gradient glider bakom stilla ord är mycket lättare, eftersom kodaren bara kan lagra det som ändrats. Att halvera bredden fyrdubblar ungefär pixlarna, så bestäm tidigt om det här huvudet behöver vara 1200 px eller om 600 px räcker.

1. 1

   Designa i 1200×600

   Lägg ut huvudet med alla ord på plats i första rutan.

2. 2

   Håll loopen kort

   Två till fem sekunder, där varje rörelse fullbordar en hel cykel.

3. 3

   Exportera som GIF i 10 till 15 bilder/s

   Använd en palett byggd av själva animationen, inte en generisk.

4. 4

   Kontrollera vikten

   Om den är tung, prova 600 px bredd, färre rutor eller mindre rörelse innan du sänker kvaliteten.

5. 5

   Kontrollera första rutan för sig

   Öppna GIF-filen i ett bildprogram som bara visar första rutan, eller skicka ett test till Outlook på Windows.

De detaljerade exportkommandona och inställningarna för palett och dithering finns i animerade GIF.

HTML för ett animerat e-posthuvud

Koda huvudet som en vanlig bild i en tabellcell. Ange visningsbredden både i attributet och i stilen så att varje klient anpassar storleken rätt, ge den en beskrivande alt-text och sätt en bakgrundsfärg på cellen som matchar GIF-filens första ruta. När bilder blockeras ser läsarna då din färg och dina ord, inte en tom ruta.

<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örkt läge och blockerade bilder

Mörkt läge kan ändra färgerna runt ditt huvud men lämnar oftast själva bilden ifred. Ett huvud med egen fullständig bakgrundsfärg håller i båda lägena, medan ett med genomskinlig eller vit kant kan bli en ljus ruta på en mörk skärm. CSS-gradienter bakom bilden är inte pålitliga mellan klienter, så baka in gradienten i GIF-filen och använd en enfärgad reserv. Gradienter i e-post tar upp alternativen.

I Gradiently kan du designa huvudet i e-posthuvudets storlek på en rörlig Mark, hålla orden stilla medan Marken glider bakom dem och exportera det som GIF i Pro. Eftersom bakgrunden är en unik Mark du äger ser huvudet ut som ditt varumärke i stället för en mall som andra nyhetsbrev delar. För stilla huvuden och layout, se design av e-posthuvuden.