Vous aimeriez créer votre toute nouvelle signature HTML ? Celle qui fera dire « MA-GNI-FIQUE » à tous vos destinataires pendant qu'ils se roulent la moustache du bout des doigts en lisant vos mails ? Alors, vous êtes au bon endroit ! Grâce à notre guide complet, découvrez comment réaliser votre propre signature HTML, en la codant tel un hacker, ou à l'aide d'outils de signature mail créés justement pour vous simplifier la tâche.
Que vous utilisiez Outlook, Gmail ou Apple Mail, apprenez à créer, puis à insérer votre signature HTML en quelques clics !
Une signature HTML, c'est quoi ?
La signature HTML, c'est un morceau de code HTML inséré dans l'espace signature de votre application de messagerie et qui s'affiche en format visuel une fois votre mail envoyé à votre destinataire. Comme elle est créée en code, vous pouvez y intégrer un peu ce que vous voulez, en ayant bien sûr une petite base de connaissances en code. Votre nom, nom de l'entreprise, logo, photo de profil, image additionnelle ; vous avez la possibilité d'y intégrer une foule d'éléments, de façon à créer une signature encore plus engageante et professionnelle.
Voici par exemple à quoi pourrait ressembler le code d'une signature HTML basique :
<div><p>Nom de l'entreprise</p><p>Nom de l'employé | Titre du poste</p><p>Numéro de téléphone</p><ahref="lien du site internet">Site internet</a></div>
Le HTML, ça vous dit quelque chose ?
Le HTML, ça vous parle, mais vous ne savez pas VRAIMENT ce que c'est ? Alors, repartons de la base :
Le HTML (HyperText Markup Language) est un langage de balisage utilisé pour structurer le contenu sur le web. Dans le contexte des signatures mail, le HTML permet de formater le texte, d'ajouter des images ou des logos, et de créer des liens vers des pages web ou des profils de réseaux sociaux. C'est tout simple, non ?
Pour éditer ou créer une signature HTML, on vous suggère d'utiliser un éditeur de texte, comme Notepad++ sur Windows, TextEdit sur iOS ou Gedit sur Linux. Et si vous avez envie de faire comme les pros, vous pouvez aussi bien passer par Visual Studio Code ou Sublime Text.
Les avantages d'une signature HTML personnalisée
Mais, d'abord, vous pouvez légitimement vous demander à quoi cela peut bien servir, une signature HTML personnalisée ? Et bien celle-ci vous offre de nombreux avantages, notamment de :
Valoriser votre identité professionnelle : avec une signature HTML, vous pouvez présenter de manière précise et super élégante vos informations de contact. Votre nom, votre fonction, les coordonnées de votre entreprise et son logo peuvent ainsi briller de mille feux.
Faciliter la navigation : grâce à l'ajout de liens hypertextes dans votre signature, vous pouvez diriger vos interlocuteurs vers les liens qui vous intéressent. C'est l'occasion de leur faire découvrir votre génialissime site web, votre énorme communauté sur les réseaux sociaux ou tout autre contenu que vous jugez pertinent.
Rendre vos mails plus attrayants : en intégrant des éléments graphiques et en jouant avec les polices et les couleurs, vous pouvez donner une dimension plus esthétique aux mails que vous envoyez.
Créer un canal de communication supplémentaire : saviez-vous que votre signature peut servir à transmettre des informations supplémentaires ? Devenir un outil marketing à part entière ? Par exemple, en ajoutant une bannière mail comme une actualité de votre entreprise ou une offre promotionnelle, vous pouvez créer un tout nouveau point de contact marketing avec vos destinataires.
Créer sa propre signature HTML
Alors, vous avez choisi de mettre les mains dans le cambouis et de créer votre propre signature mail par vous-même ? Voici donc les étapes que vous devriez suivre.
Choisissez les informations que vous souhaitez y inclure
Que souhaitez-vous inclure parmi les informations suivantes :
Votre nom et prénom
Votre titre ou poste
Le nom de votre entreprise
Vos coordonnées (numéro de téléphone, poste, adresse email)
Le logo de votre entreprise
Liens vers vos réseaux sociaux professionnels (LinkedIn, Twitter, etc.)
Un lien vers le site web votre entreprise
Une bannière promotionnelle ou un slogan
Créez votre code HTML
Puis, vous n'avez qu'à intégrer dans votre éditeur de code HTML les éléments qui vous intéressent. Ici, l'idéal est d'avoir quelques bases HTML. Sinon, vous pouvez copier cet exemple de code et le modifier à votre guise :
Ou, option encore plus facile : vous avez la possibilité de passer par un générateur de signature mail.
Voici quelques options des options populaires :
Hubspot : gratuit, simple d'utilisation, compatible avec diverses plateformes.
Signature Maker : offre une grande facilité d'utilisation.
Si.gnatu.re : gratuit, offre un niveau de personnalisation élevé.
Gimm.io : propose une large gamme de modèles gratuits.
Chaque générateur a ses propres avantages. Prenez le temps d'explorer différentes options pour trouver celle qui répond le mieux à vos besoins.
Comment utiliser un générateur de signature mail
Alors, ce n'est pas très compliqué. Chaque générateur de signature à ses propres procédés, mais ils sont pour la plupart conçus de façon à être très visuels et simples à utiliser. Il suffit d'utiliser le designer proposé par les outils, de remplir les différents champs, et de copier le code HTML généré dans votre l'espace dédié de votre messagerie !
Création d'une signature HTML pour Outlook
Comment insérer votre signature HTML sur Outlook (application de bureau) ?
Vous avez créé votre toute nouvelle signature Outlook ? Pour insérer votre signature HTML sur Outlook, assurez-vous d'abord que votre signature est prête sous format HTML. Ensuite, lancez votre application Outlook et suivez les étapes suivantes :
Ouvrez le fichier HTML de la signature que vous avez créé ;
Sélectionnez et copiez l'ensemble du contenu affiché (Ctrl+C ou Cmd+C) ;
Cliquez sur l'onglet « Fichier » situé en haut à gauche, puis sélectionnez « Options » dans le menu déroulant ;
Une fois la fenêtre des options ouverte, cliquez sur « courrier » dans le volet de gauche, puis descendez pour atteindre la section « Signatures », et cliquez sur le bouton « Signature » ;
Cliquez sur « Nouvelle » (pour « nouvelle signature ») ;
Donnez-lui un joli nom ;
Puis collez (Ctrl+V ou Cmd+V) votre signature précédemment copiée dans l'éditeur ;
Enregistrez les modifications ;
Et enfin, sélectionnez cette signature comme signature par défaut.
Une autre façon d'intégrer une signature HTML plus complexe est d'importer directement le fichier HTML dans le dossier des signatures Outlook. Pour ce faire, accédez à :
et copiez-y votre fichier HTML. Lorsque vous vous rendrez dans la section dédiée à la création de la signature, votre oeuvre apparaîtra parmi les options disponibles.
Comment insérer votre signature HTML sur Outlook (version web) ?
Vous êtes plus du type de personne à envoyer vos mails depuis l'interface web d'Outlook ou Outlook 365 ? Aucun problème ! Voici les étapes à suivre pour mettre votre nouvelle signature HTML en place :
Ouvrez le fichier HTML de la signature que vous avez créée ;
Sélectionnez et copiez l'ensemble du contenu affiché (Ctrl+C ou Cmd+C) ;
Rendez-vous sur Outlook.com ou Office 365 et connectez-vous avec vos identifiants ;
Cliquez sur l'icône d'engrenage en haut à droite pour ouvrir le menu Paramètres ;
Dans la section « Courrier », vous trouverez l'option « Composer et répondre » ;
Dans celle-ci, vous tomberez sur l'éditeur de signature mail (au besoin, vous pouvez aussi rechercher « signature électronique » dans le champ de recherche) ;
Collez (Ctrl+V ou Cmd+V) votre signature précédemment copiée dans l'éditeur ;
Puis, cochez les cases sous l'éditeur pour ajouter automatiquement votre signature aux emails envoyés ;
Cliquez sur « Enregistrer » (tout en bas).
Comment intégrer votre signature HTML sur votre compte Gmail ?
Pour intégrer votre signature HTML sur Gmail, vous devez d'abord avoir votre code HTML prêt.
Connectez-vous à votre compte Gmail et cliquez sur l'icône des paramètres (l'engrenage), située en haut à droite.
Choisissez « Voir tous les paramètres ».
Dans l'onglet général, faites défiler l'écran jusqu'à arriver à la section « Signature ».
Cliquez sur « + Créer », définissez un nom pour votre signature et cliquez sur « Créer ».
Dans la zone de texte à droite, collez (Ctrl+V ou Cmd+V) votre signature précédemment copiée dans l'éditeur ;
Une fois cela, fait, regardez sous l'éditeur dans la section « Valeurs par défaut de la signature », et sélectionnez votre signature pour les nouveaux mails et pour les réponses/transferts ;
Puis, faites défiler l'écran jusqu'en en bas, et cliquez sur « Enregistrer les modifications ».
N.B. Gmail ne prend pas en charge le contenu HTML directement dans la signature, alors assurez-vous d'avoir copié votre signature HTML sous sa forme visuelle avant de la coller dans l'éditeur.
Comment personnaliser votre signature sur Apple Mail ?
Pour personnaliser votre signature sur Apple Mail, la première étape consiste à lancer sauvegarder votre signature HTML sur votre appareil.
Ensuite, ouvrez Apple Mail et cliquez sur « Mail », puis « Préférences » ;
Rendez-vous ensuite à l'onglet « Signatures », situé à droite ;
Sélectionnez le compte de messagerie pour lequel vous souhaitez intégrer votre signature ;
Cliquez sur le petit « + » (en bas) pour créer une nouvelle signature et donnez-lui un nom ;
Collez ensuite la signature que vous avez créée dans l'éditeur sur la droite ;
Puis fermez la fenêtre en cliquant sur le « x » ;
Pour vous assurer que la signature soit bien prise en compte, il est recommandé de fermer l'application (en choisissant « Mail > Quitter Mail » ou en appuyant sur « CMD + Q ») et de la relancer.
Comment créer une signature HTML dans Thunderbird ?
Encore une fois, pour intégrer une signature dans Thunderbird, commencez par sauvegarder votre signature HTML sur votre ordinateur ou par copier le visuel de votre signature dans votre presse-papiers (Ctrl+C ou Cmd+C).
Puis, lancez l'application Thunderbird ;
Cliquez sur l'icône du menu (trois lignes horizontales) en haut à droite et choisissez « Paramètres de compte » ;
Dans le panneau de gauche, choisissez le compte auquel vous souhaitez rattacher votre toute nouvelle signature ;
Ici vous avez deux options. 1 - Vous pouvez copier directement votre code HTML dans l'éditeur « Texte de signature » en cochant la case « Utilisez HTML » ou 2 - Vous pouvez sélectionner le fichier HTML de votre image en cochant « Apposer la signature à partir d'un fichier » et en choisissant votre fichier.
Modifier et personnaliser votre signature HTML
Comment modifier votre signature HTML ?
Une fois votre signature créée, vous aurez tout le loisir de la modifier lorsque vous le souhaitez. Et pour ce faire, ce n'est pas bien complexe. Vous n'aurez qu'à revenir au même éditeur que vous avez utilisé pour créer la signature initialement, à la modifier, puis à enregistrer le tout.
Personnaliser le style de votre signature HTML
Si vous avez l'esprit créatif, vous pouvez totalement créer une signature HTML à votre image grâce aux codes HTML et CSS. Là est toute la beauté d'avoir quelques connaissances de base en code ! C'est le moment de donner une touche unique à vos communications.
Cela dit, n'oubliez pas que la simplicité et la clarté sont essentielles. Un style trop chargé peut distraire vos destinataires de l'essentiel de votre mail et nuire à la lisibilité de votre signature. Veillez à choisir des couleurs relativement harmonieuses entre elles, avec une police facile à lire et des images qui ne sont pas trop grandes (ni trop lourdes en termes de poids).
Voici comment procéder :
Couleurs : Choisissez vos couleurs via leur code hexadécimal. Définissez une couleur pour votre texte, votre arrière-plan et pour vos liens, et assurez-vous que l'ensemble est bien lisible. Un petit conseil : demandez à un ami/collègue/conjoint son opinion. Et si ses yeux se mettent à se dessécher et à rougir en voyant votre signature, peut-être faudra-t-il repenser à choisir d'autres couleurs.
Police de caractères : Ici le choix de police est clé. Choisissez une police que vous aimez (bien sûr), mais qui sera aussi facilement lisible. C'est un cliché maintenant même d'en parler, mais on ne répétera jamais assez : la police Comic Sans MS, c'est non ! Définissez ensuite la taille de la police des différents éléments. Si vous souhaitez faire ressortir certains éléments, vous pouvez également certaines informations en gras ou en italiques.
Images : Ajoutez une image ou un logo et définissez sa taille et son alignement. Assurez-vous d'utiliser le bon format d'image pour assurer une bonne qualité.
Votre signature sera intégrée à des mails professionnels ?
Votre signature servira à envoyer des mails professionnels ? Alors, voici quelques conseils pour s'assurer qu'elle soit adaptée aux communications pro :
Les informations à intégrer dans votre signature
Déjà pour être efficace, votre signature mail professionnelle doit contenir les informations suivantes :
Votre # de téléphone professionnel ;
Votre adresse mail ;
Votre adresse physique ;
Le lien vers le site web de votre entreprise et/ou les liens vers vos réseaux sociaux.
Ensuite, vous pouvez y ajouter :
Une photo de vous ou qui correspond au branding de la marque ;
Le logo de l'entreprise ;
Et pourquoi pas, une bannière de communication.
Le style de votre signature
Pour avoir un vrai look professionnel, votre signature devrait idéalement respecter les 5 critères suivants :
Être lisible : via le choix de police, de couleurs. C'est essentiel si vous souhaitez transmettre correctement ces informations à vos destinataires ;
Être à la fois colorée ET sobre. Ici, c'est un réel jeu d'équilibriste. Ce n'est pas forcément facile de vouloir faire une signature qui est à la fois punchy, tout en conservant un look professionnel. Le maître mot pour arriver à trouver le bon dosage est : « expérimentation » ;
Être bien agencée : pour que la suite d'information soit fluide, logique et que l'ensemble ne soit pas trop tassé. Pour être agréable à lire, votre signature doit pouvoir « respirer » ;
Être visuelle : en ajoutant des icônes, des images. On sait que les couleurs et les images ont tendance à plus attirer l'oeil, alors servez-vous de cela à votre avantage. C'est aussi une façon d'éviter d'utiliser trop de texte pour épurer un peu plus l'ensemble de votre design ;
Être au bon format : le format de votre signature mail devrait être autour de 400 pixels x 150 pixels. L'avantage de cette taille est qu'elle est bien visible et s'adapte à la plupart des appareils.
Et une fois que votre signature est prête, n'hésitez pas à demander un avis aux gens autour de vous. Nous ne sommes pas tous des Mondrian en devenir et peu importe le degré de confiance que vous avez en votre capacité de designer, demander un deuxième avis n'est jamais de trop.
Pour en savoir plus sur ce sujet et voir quelques exemples, n'hésitez pas à vous rendre sur notre article dédié à la signature mail professionnelle.
Finalement, créer votre propre signature HTML ne vous intéresse pas ?
Alors, peut-être que votre entreprise sera intéressée par la solution de gestion de signatures mail de Letsignit. Cet outil permet de générer les signatures mail de tous vos collaborateurs en format HTML et de les intégrer directement à vos mails !
Ce type de solution existe justement pour les personnes qui sont en manque de temps et qui ont besoin de simplifier le processus de création des signatures pour l'ensemble de leurs collaborateurs. On sait très bien (c'est notre métier après tout) à quel point la gestion des signatures mail peut devenir problématique, surtout pour les entreprises en expansion ou avec un nombre toujours plus important de collaborateurs.
Avec notre outil, vous n'avez qu'à créer votre signature à partir de l'un des modèles proposés ou d'utiliser le designer intégré pour réaliser une signature à l'image de votre entreprise, et le reste est automatisé ! Plus besoin d'intégrer vous-même votre signature via l'éditeur Outlook et d'y revenir chaque fois que vous souhaitez y faire une modification. Vous n'avez plus qu'à faire les modifications visuelles, et l'intégration technique est réalisée par l'outil.
On ne force personne, mais notre solution existe et est là pour rendre service. À bon entendeur ! :)
Il ne nous reste plus qu'à vous souhaiter une bonne rédaction de vos mails professionnels !
Ressources complémentaires pour la création de signatures HTML
Pour vous aider à créer des signatures mail HTML, voici quelques ressources complémentaires utiles :
Guides et Tutoriels
Mozilla Developer Network (MDN) Web Docs
HTML Basics : un guide complet sur les bases de HTML.
CSS Basics : apprenez les bases du CSS pour styliser votre signature HTML.
W3Schools
HTML Tutorial : un tutoriel interactif pour apprendre HTML.
CSS Tutorial : un tutoriel interactif pour apprendre CSS.
Email on Acid : testez l'affichage de vos signatures mail sur différents clients de messagerie.
Litmus : un autre service pour tester vos emails et signatures sur divers clients et appareils.
Icônes et Images
Flaticon : téléchargez des icônes gratuites pour les réseaux sociaux et autres éléments visuels.
Icons8 : une autre ressource pour trouver des icônes gratuites et premium.
Unsplash : téléchargez des images de haute qualité pour vos signatures.
Bonnes Pratiques
Email Design Guide (Campaign Monitor) : un guide complet sur la conception d'emails, y compris les signatures.
Email Design Best Practices (Litmus) : un guide pour les meilleures pratiques en matière de conception d'emails.
À propos de l'auteur
Guillaume est Content Factory Manager chez Letsignit ! Grâce aux mots, il crée divers contenus (textuels, vidéos, et dans les cas les plus extrêmes, télépathiques) pour augmenter la visibilité de Letsignit sur le web. La légende veut qu'à l'âge de 3 ans, Guillaume ait construit sa première stratégie marketing web multicanale à l'aide d'un dictionnaire, d'un biberon et d'un peu d'encre de Chine. On ne sait pas si cela est véridique, mais du moins, c'est ce qu'on raconte...
À propos de Letsignit
Letsignit est une solution de gestion de signatures mail qui permet aux organisations de transformer les signatures mail de leurs collaborateurs en un média d'engagement 1-1 puissant pour leurs marques et leurs campagnes.
Vos collaborateurs représentent déjà votre marque. Chaque jour, à chaque interaction.
.svg){kind=small}
