Signature e-mail : bannières 600×200 qui restent légères

Une bonne signature e-mail tient surtout à la retenue : votre nom, votre poste et un ou deux moyens de vous joindre en vrai texte, puis une petite bannière image de 600×200 pixels qui porte votre marque. Gardez la bannière légère, liez-la à une seule page, et ne mettez jamais votre téléphone ou votre adresse e-mail seulement dans l’image, car beaucoup de messageries masquent les images tant que le lecteur ne dit pas le contraire.

Ce qu’une signature e-mail doit contenir

Une signature a deux rôles : dire qui vous êtes et comment vous joindre, et rappeler ce que vous faites. Le premier est du texte. Le second peut être une bannière. Tout le reste est du fouillis que les gens apprennent à ignorer.

Taille et poids d’une bannière de signature e-mail

Créez la bannière en 600×200 pixels, une bande 3:1. Six cents pixels est la largeur autour de laquelle les modèles d’e-mail classiques sont construits : une bannière de cette taille tient dans l’app mail d’un téléphone comme dans le volet de lecture d’un ordinateur sans redimensionnement. Pour les écrans haute densité, exportez le même design en double taille, 1200×400, et demandez à l’e-mail de l’afficher à 600 pixels de large.

Le poids compte plus qu’on ne le croit, car l’image voyage avec chaque réponse d’un long fil. Visez un fichier bien sous 100 Ko. Une bannière en dégradé s’exporte très bien en JPEG haute qualité ; réservez le PNG à la transparence ou aux lettrages très fins. Si vous faites aussi une newsletter, le guide du design d’en-tête d’e-mail couvre le format plus grand.

Concevoir la bannière

Une bannière vue cent fois par semaine doit dire une seule chose, et la dire calmement. Elle marche le mieux en promotion discrète : votre prochain événement, un nouveau service, un lien de réservation, ou simplement l’univers de votre marque avec une courte ligne. Changez les mots au fil des saisons ; gardez le fond.

Le mode sombre est un vrai piège. Certaines apps de messagerie inversent ou teintent les couleurs claires : un logo sur fond transparent peut disparaître sur une boîte de réception sombre. Une bannière qui porte son propre fond plein, comme un riche dégradé, a le même aspect dans les deux modes. Le design en mode sombre et les dégradés dans les e-mails détaillent la façon dont les clients traitent la couleur.

Le HTML d’une signature e-mail qui tient bon

Les clients de messagerie sont vieux jeu côté mise en page : les signatures se construisent donc avec de simples tableaux et des styles en ligne. Celle-ci fonctionne dans les clients courants : collez-la dans un fichier HTML, ouvrez-le dans un navigateur, sélectionnez tout et copiez-le dans les réglages de signature de votre app mail.

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; color: #1f2937;">
  <tr>
    <td style="padding-bottom: 8px;">
      <strong style="font-size: 15px;">Maya Okafor</strong><br>
      <span style="font-size: 13px;">Founder, Studio Alder</span><br>
      <a href="https://example.com/book" style="font-size: 13px; color: #1f2937;">Book a call</a>
      &middot;
      <a href="https://example.com" style="font-size: 13px; color: #1f2937;">example.com</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="https://example.com/weddings">
        <img src="https://example.com/email/banner-1200x400.jpg"
             width="600" height="200" alt="Studio Alder: now booking spring weddings"
             style="display: block; border: 0; max-width: 100%; height: auto;">
      </a>
    </td>
  </tr>
</table>

Mettre en place votre signature, pas à pas

1. 1

   Écrivez le bloc de texte

   Nom, poste et entreprise, un lien d’action, votre site web. Lisez-le à voix haute ; supprimez tout ce que vous ne diriez pas.

2. 2

   Créez la bannière en 600×200

   Utilisez le fond de votre marque et une courte ligne. Gardez les mots au milieu, avec de l’espace aux deux bouts.

3. 3

   Exportez en 1200×400

   Un JPEG haute qualité pour les dégradés et les photos, un PNG pour la transparence. Vérifiez que le fichier pèse moins de 100 Ko.

4. 4

   Importez-la sur votre site

   Rangez-la dans un dossier stable comme /email/, pour que l’adresse ne change jamais et que les anciens e-mails gardent leur bannière.

5. 5

   Construisez et collez le HTML

   Adaptez le code ci-dessus, réglez la largeur à 600, écrivez un vrai texte alternatif et collez le tout dans votre app mail.

6. 6

   Testez sérieusement

   Envoyez-la à une adresse Gmail et à une adresse Outlook, ouvrez-la sur un téléphone, activez puis désactivez le mode sombre, et répondez deux fois au fil.

Garder les signatures d’une équipe cohérentes

Les signatures dérivent : l’un ajoute une citation, l’autre utilise le logo de l’an dernier. Donnez à l’équipe un modèle HTML et une bannière, et changez la bannière de façon centralisée quand le message change. La discipline décrite dans la cohérence de marque s’applique ici, en plus petit.

Gradiently propose dans le Studio une taille Signature e-mail de 600×200, et une taille personnalisée 1200×400 couvre l’export haute densité. Les exports gratuits portent un petit filigrane : une bannière nette demande donc Pro, qui apporte aussi le kit de marque : logo, couleurs et polices au même endroit. Le Mark derrière la bannière est le même que sur vos posts sociaux et vos cartes de visite : une réponse dans la boîte de quelqu’un ressemble sans erreur au reste de votre marque.