En-têtes d’e-mail animés : des GIF légers et réussis

Un en-tête d’e-mail animé doit être un GIF d’environ 1200×600 pixels affiché sur 600 de large, avec une boucle courte, un poids modeste et une première image qui fonctionne seule comme une création finie. C’est cette dernière règle que l’on oublie : certaines versions bureau d’Outlook pour Windows n’affichent que la première image d’un GIF animé, et quiconque bloque les images ne voit que votre texte alternatif. Concevez d’abord pour ces lecteurs, puis ajoutez le mouvement en bonus pour tous les autres.

Pourquoi les en-têtes d’e-mail animés sont des GIF

La vidéo dans l’e-mail est rare et peu fiable. Le GIF animé, un format d’image, s’affiche dans la plupart des clients, d’Apple Mail à Gmail. Des formats plus récents comme le WebP animé sont pris en charge de façon plus inégale dans les boîtes de réception. Le GIF reste donc le choix pratique, avec toutes ses limites : 256 couleurs au plus par image et des fichiers plus lourds que la vidéo. Ces limites façonnent la création. La comparaison complète est dans GIF ou MP4.

Concevoir la première image comme solution de repli

Traitez la première image comme l’en-tête de l’e-mail et l’animation comme un supplément. Si vos mots apparaissent en balayage à partir de rien, un lecteur Outlook voit un aplat de couleur vide. Si votre produit apparaît à la deuxième seconde, il ne le voit jamais. Mettez tout ce qui compte à l’écran dès la première image, puis laissez le mouvement se faire autour.

• Mots immobiles, fond en mouvement. Une couleur qui dérive derrière un titre fixe est l’en-tête animé le plus fiable qui soit.
• Un seul petit mouvement. Un mot qui change, une ligne qui se souligne, un léger glissement de lumière. Une idée par en-tête.
• Finissez là où vous avez commencé. Une boucle qui saute au début paraît cassée. Faites mener la dernière image à la première, comme dans vidéo en boucle parfaite.
• Aucun flash. Gardez des changements de luminosité lents. Les flashs rapides sont désagréables et peuvent être dangereux.

Garder le GIF léger

L’essentiel du poids d’un GIF vient des pixels qui changent d’une image à l’autre. Un en-tête dont tout le cadre bouge est lourd ; un en-tête où un dégradé lent dérive derrière des mots fixes est bien plus léger, car l’encodeur ne stocke que ce qui change. Diviser la largeur par deux divise environ les pixels par quatre : décidez tôt si cet en-tête a besoin de 1200 px ou si 600 px suffisent.

1. 1

   Concevez en 1200×600

   Mettez l’en-tête en page avec tous les mots en place dès la première image.

2. 2

   Gardez une boucle courte

   Deux à cinq secondes, chaque mouvement accomplissant un cycle complet.

3. 3

   Exportez en GIF à 10 à 15 i/s

   Utilisez une palette construite à partir de l’animation elle-même, pas une palette générique.

4. 4

   Vérifiez le poids

   S’il est lourd, essayez 600 px de large, moins d’images ou moins de mouvement avant de réduire la qualité.

5. 5

   Vérifiez la première image seule

   Ouvrez le GIF dans une visionneuse qui n’affiche que la première image, ou envoyez un test vers Outlook sous Windows.

Les commandes d’export détaillées, la palette et les réglages de tramage sont dans GIF animés.

Le HTML d’un en-tête d’e-mail animé

Codez l’en-tête comme une image ordinaire dans une cellule de tableau. Indiquez la largeur d’affichage à la fois dans l’attribut et dans le style pour que chaque client la dimensionne correctement, donnez-lui un texte alternatif descriptif, et appliquez à la cellule une couleur de fond identique à la première image du GIF. Quand les images sont bloquées, les lecteurs voient alors votre couleur et vos mots, pas une case vide.

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

Mode sombre et blocage des images

Le mode sombre peut changer les couleurs autour de votre en-tête mais laisse généralement l’image elle-même intacte. Un en-tête doté de sa propre couleur de fond pleine tient dans les deux modes ; un en-tête aux bords transparents ou blancs peut finir en rectangle éclatant sur un écran sombre. Les dégradés CSS derrière l’image ne sont pas fiables d’un client à l’autre : intégrez le dégradé dans le GIF et utilisez une couleur unie en repli. Les dégradés dans l’e-mail détaillent les options.

Dans Gradiently, vous pouvez concevoir l’en-tête au format d’en-tête d’e-mail sur un Mark animé, garder les mots immobiles pendant que le Mark dérive derrière eux, et l’exporter en GIF avec Pro. Comme le fond est un Mark unique qui vous appartient, l’en-tête ressemble à votre marque plutôt qu’à un modèle partagé par d’autres newsletters. Pour les en-têtes fixes et la mise en page, voyez le design d’en-tête d’e-mail.