# Signature e-mail : bannières 600×200 qui restent légères [Canonical HTML page](https://gradiently.design/fr/guide/email-signature-design) Votre signature part avec chaque e-mail que vous envoyez : c’est le design que l’on voit le plus. Voici comment la faire soignée, rapide à charger, sans qu’elle devienne un trombone. ## The short version - Une bonne signature e-mail garde votre nom, votre poste et vos coordonnées en texte, et ajoute au plus une petite bannière image. - Une bannière de signature fonctionne bien à 600×200 pixels, une bande 3:1 qui tient dans les mises en page d’e-mail les plus étroites. - Exporter la bannière en double taille, 1200×400, et l’afficher à 600 pixels de large la garde nette sur les écrans haute densité. - De nombreux clients de messagerie bloquent les images tant que le lecteur ne les autorise pas : rien d’essentiel ne doit exister seulement dans la bannière. - Une image hébergée avec une adresse https complète allège chaque e-mail, alors qu’une image collée part souvent en pièce jointe à chaque message. 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. | Élément | Format | Notes | | --- | --- | --- | | Nom | Texte, en gras | La seule chose qui doit être plus grande | | Poste et entreprise | Texte | Une ligne, séparée par une virgule | | Téléphone ou lien de réservation | Lien texte | Une action principale, pas quatre | | Site web | Lien texte | Court et lisible, sans `https://` | | Bannière | Image, 600×200 | Facultative ; renvoie vers une seule page | | Icônes de réseaux sociaux | Petites images | Deux ou trois au plus, ou aucune | Le texte d’abord, l’image ensuite. Si aucune image ne se chargeait, la signature devrait quand même fonctionner. ## 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. - Bannière de signature 600×200: 600 × 200 - En-tête d’e-mail 1200×600: 1200 × 600 - Carte de visite 1050×600: 1050 × 600 Une bannière de signature à côté d’un en-tête de newsletter et d’une carte de visite, à l’échelle. La bannière est une bande fine, pas une affiche. 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](https://gradiently.design/fr/guide/email-header-design) 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. Une bannière de signature e-mail fine pour un studio photo, avec la phrase Réservations ouvertes pour les mariages du printemps sur un dégradé doux La bannière d’un photographe : une ligne d’actualité et le nom du studio. Une bannière de signature e-mail annonçant un webinaire gratuit le 12 novembre Un cabinet de conseil qui promeut un événement. Quand il est passé, on change la ligne. ### À éviter - Des coordonnées seulement dans l’image - Une bannière de plusieurs centaines de kilooctets - Des GIF animés qui tournent sans fin - Des citations, des mentions légales et cinq icônes sociales - Un petit texte gris qui disparaît en mode sombre ### À faire - Nom et liens en vrai texte - Une bannière légère 600×200, sous 100 Ko - Une image fixe, ou une seule boucle douce au plus - Un seul appel à l’action - Une bannière avec son propre fond, lisible en mode clair et sombre 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](https://gradiently.design/fr/guide/dark-mode-design) et [les dégradés dans les e-mails](https://gradiently.design/fr/guide/gradients-in-email) 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. ```html
Maya Okafor
Founder, Studio Alder
Book a call · example.com
Studio Alder: now booking spring weddings
``` Coordonnées en texte, une bannière hébergée affichée en 600×200 à partir d’un fichier 1200×400, avec un texte alternatif qui garde son sens si les images sont bloquées. > **Hébergez l’image, ne la collez pas** Quand vous collez ou importez une image directement dans une signature, certaines apps mail l’envoient en pièce jointe à chaque message : un trombone apparaît et les boîtes se remplissent. Faire un lien vers une image de votre propre site avec une adresse https complète l’évite. ## Mettre en place votre signature, pas à pas 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. **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. **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. **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. **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. **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](https://gradiently.design/fr/guide/brand-consistency) 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](https://gradiently.design/fr/guide/business-card-design) : une réponse dans la boîte de quelqu’un ressemble sans erreur au reste de votre marque. ## FAQ ### Quelle taille pour une bannière de signature e-mail ? Créez-la en 600×200 pixels. Exportez en 1200×400 et réglez la largeur de l’image à 600 pour qu’elle reste nette sur les écrans haute densité. ### Quel poids pour le fichier image d’une signature e-mail ? Restez bien sous 100 Ko. L’image est envoyée ou chargée avec chaque e-mail et chaque réponse : un fichier lourd s’additionne vite. ### Pourquoi l’image de ma signature e-mail apparaît-elle en pièce jointe ? Certaines apps mail joignent à chaque message les images collées ou importées. Hébergez plutôt l’image sur votre site et faites un lien vers elle avec une adresse https complète. ### Dois-je mettre mon numéro de téléphone dans l’image de la signature ? Non. Beaucoup de clients de messagerie bloquent les images par défaut, et le texte dans une image ne peut être ni touché ni copié. Gardez les coordonnées en vrai texte. ### Puis-je utiliser un GIF animé dans ma signature e-mail ? Oui, mais gardez-le petit et discret. Une animation en boucle sur chaque e-mail d’un long fil devient vite pénible, et certains clients n’affichent que la première image.