Header email animati: GIF veloci da caricare e belle da vedere

Un header email animato dovrebbe essere una GIF, di circa 1200×600 pixel mostrata a 600 di larghezza, con un loop breve, un peso contenuto e un primo frame che funziona da solo come design finito. È l’ultima regola quella che molti dimenticano: alcune versioni desktop di Outlook per Windows mostrano solo il primo frame di una GIF animata, e chi ha le immagini bloccate vede soltanto il tuo testo alternativo. Progetta prima per questi lettori, poi aggiungi il movimento come extra per tutti gli altri.

Perché gli header email animati sono GIF

Il supporto al video nelle email è raro e inaffidabile. La GIF animata, un formato immagine, si vede nella maggior parte dei client, da Apple Mail a Gmail. Formati più recenti come il WebP animato hanno un supporto più a macchia di leopardo. Così la GIF resta la scelta pratica, con tutti i suoi limiti: al massimo 256 colori per frame e file più grandi del video. Questi limiti plasmano il design. Il confronto completo è in GIF o MP4.

Progetta il primo frame come ripiego

Considera il primo frame come l’header dell’email e l’animazione come un extra. Se le tue parole compaiono dal nulla, chi legge in Outlook vede un blocco di colore vuoto. Se il prodotto compare al secondo due, non lo vede mai. Metti a schermo nel primo frame tutto ciò che conta, poi lascia che il movimento accada intorno.

• Parole ferme, sfondo in movimento. Un colore che scorre dietro un titolo fisso è l’header animato più affidabile che esista.
• Un solo piccolo movimento. Una parola che cambia, una riga che si sottolinea da sola, un morbido spostamento di luce. Un’idea per header.
• Finisci dove hai iniziato. Un loop che salta all’inizio sembra rotto. Fai in modo che l’ultimo frame conduca al primo, come in video in loop senza giunture.
• Niente lampeggi. Tieni lente le variazioni di luminosità. I lampi rapidi sono fastidiosi e possono essere dannosi.

Come tenere leggera la GIF

La maggior parte del peso di una GIF viene dai pixel che cambiano tra un frame e l’altro. Un header in cui si muove tutto il frame è pesante; uno in cui un gradiente lento scorre dietro parole ferme è molto più leggero, perché l’encoder può salvare solo ciò che è cambiato. Dimezzare la larghezza divide i pixel all’incirca per quattro, quindi decidi presto se questo header deve essere largo 1200 px o se bastano 600 px.

1. 1

   Progetta a 1200×600

   Imposta l’header con tutte le parole già al loro posto nel primo frame.

2. 2

   Tieni breve il loop

   Da due a cinque secondi, con ogni movimento che completa un ciclo intero.

3. 3

   Esporta in GIF a 10-15 fps

   Usa una tavolozza costruita sull’animazione stessa, non una generica.

4. 4

   Controlla il peso

   Se è pesante, prova 600 px di larghezza, meno frame o meno movimento prima di abbassare la qualità.

5. 5

   Controlla il primo frame da solo

   Apri la GIF in un visualizzatore che mostra solo il primo frame, oppure invia una prova a Outlook su Windows.

I comandi di esportazione dettagliati, la tavolozza e le impostazioni di dithering sono in GIF animate.

HTML per un header email animato

Scrivi l’header come una normale immagine dentro una cella di tabella. Imposta la larghezza mostrata sia nell’attributo sia nello stile, così ogni client la dimensiona correttamente, dai all’immagine un testo alternativo descrittivo e dai alla cella un colore di sfondo uguale al primo frame della GIF. Quando le immagini sono bloccate, chi legge vede il tuo colore e le tue parole, non un riquadro vuoto.

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

Modalità scura e immagini bloccate

La modalità scura può cambiare i colori intorno al tuo header ma di solito lascia in pace l’immagine. Un header con un proprio colore di sfondo pieno regge in entrambe le modalità; uno con un bordo trasparente o bianco può finire per essere un riquadro luminoso su uno schermo scuro. I gradienti CSS dietro l’immagine non sono affidabili tra i client, quindi incorpora il gradiente nella GIF e usa un colore pieno come ripiego. I gradienti nelle email spiegano le opzioni.

In Gradiently puoi progettare l’header nella dimensione degli header email su un Mark in movimento, tenere ferme le parole mentre il Mark scorre dietro e esportarlo come GIF con Pro. Poiché lo sfondo è un Mark unico che possiedi, l’header somiglia al tuo brand e non a un modello condiviso con altre newsletter. Per header statici e impaginazione, vedi il design degli header email.