Geanimeerde e-mailheaders: gifs die snel laden en mooi ogen

Een geanimeerde e-mailheader is het best een gif van ongeveer 1200×600 pixels, getoond op 600 breed, met een korte loop, een bescheiden bestandsgewicht en een eerste beeld dat als af ontwerp op zichzelf werkt. Die laatste regel vergeten mensen: sommige desktopversies van Outlook voor Windows tonen alleen het eerste beeld van een geanimeerde gif, en wie afbeeldingen geblokkeerd heeft, ziet niets dan je alt-tekst. Ontwerp eerst voor die lezers en voeg beweging toe als bonus voor alle anderen.

Waarom geanimeerde e-mailheaders gifs zijn

Ondersteuning voor video in e-mail is zeldzaam en onbetrouwbaar. Een geanimeerde gif, een afbeeldingsformaat, wordt in de meeste programma’s getoond, van Apple Mail tot Gmail. Nieuwere formaten zoals geanimeerde WebP worden in inboxen wisselvalliger ondersteund. Gif blijft dus de praktische keuze, met alle beperkingen: maximaal 256 kleuren per beeld en grotere bestanden dan video. Die beperkingen bepalen het ontwerp. De volledige vergelijking staat in gif versus mp4.

Ontwerp het eerste beeld als terugvaloptie

Behandel het eerste beeld als de e-mailheader en de animatie als extra. Als je woorden vanuit het niets binnenvegen, ziet een Outlook-lezer een leeg kleurblok. Als je product op seconde twee verschijnt, ziet die lezer het product nooit. Zet alles wat telt in het eerste beeld in beeld en laat de beweging eromheen gebeuren.

• Woorden stil, achtergrond in beweging. Driftende kleur achter een vaste kop is de betrouwbaarste geanimeerde header die er is.
• Eén kleine beweging. Een woord dat verandert, een regel die zichzelf onderstreept, een zachte lichtverschuiving. Eén idee per header.
• Eindig waar je begon. Een loop die terugspringt naar het begin ziet er kapot uit. Laat het laatste beeld overlopen in het eerste, zoals in naadloze loopvideo.
• Geen geflits. Houd helderheidsveranderingen traag. Snel geflits is onprettig en kan schadelijk zijn.

De gif licht houden

Het grootste deel van het gewicht van een gif komt van pixels die tussen beelden veranderen. Een header waarvan het hele beeld beweegt is zwaar; een header waarbij een traag kleurverloop achter stilstaande woorden drijft is veel lichter, omdat de encoder alleen kan opslaan wat veranderde. De breedte halveren maakt van het aantal pixels ongeveer een kwart, dus bepaal vroeg of deze header 1200 px moet zijn of dat 600 px volstaat.

1. 1

   Ontwerp op 1200×600

   Zet de header op met alle woorden op hun plek in het eerste beeld.

2. 2

   Houd de loop kort

   Twee tot vijf seconden, waarbij elke beweging een hele cyclus voltooit.

3. 3

   Exporteer als gif op 10 tot 15 fps

   Gebruik een palet dat uit de animatie zelf is opgebouwd, geen algemeen palet.

4. 4

   Controleer het gewicht

   Is hij zwaar, probeer dan 600 px breed, minder beelden of minder beweging voordat je de kwaliteit verlaagt.

5. 5

   Controleer beeld één afzonderlijk

   Open de gif in een beeldviewer die alleen het eerste beeld toont, of stuur een test naar Outlook op Windows.

De gedetailleerde exportopdrachten, palet- en ditherinstellingen staan in geanimeerde gifs.

Html voor een geanimeerde e-mailheader

Codeer de header als gewone afbeelding in een tabelcel. Stel de weergavebreedte in zowel in het attribuut als in de stijl in, zodat elk e-mailprogramma hem juist schaalt, geef hem beschrijvende alt-tekst en zet op de cel een achtergrondkleur die past bij het eerste beeld van de gif. Als afbeeldingen geblokkeerd zijn, zien lezers dan je kleur en je woorden, geen lege doos.

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

Donkere modus en geblokkeerde afbeeldingen

De donkere modus kan de kleuren rond je header veranderen maar laat de afbeelding zelf meestal met rust. Een header met een eigen volledige achtergrondkleur houdt het in beide modi vol; eentje met een transparante of witte rand kan op een donker scherm een felle doos worden. Css-kleurverlopen achter de afbeelding zijn niet betrouwbaar in alle e-mailprogramma’s, dus bak het kleurverloop in de gif en gebruik een effen kleur als terugval. Kleurverlopen in e-mail behandelt de opties.

In Gradiently ontwerp je de header op het formaat van een e-mailheader op een bewegende Mark, houd je de woorden stil terwijl de Mark erachter drijft en exporteer je hem met Pro als gif. Omdat de achtergrond een unieke Mark is die jij bezit, lijkt de header op jouw merk en niet op een sjabloon dat andere nieuwsbrieven delen. Voor stilstaande headers en opmaak, zie e-mailheaders ontwerpen.