Comment faire une signature html pour Mac Mail

Tutoriel "Comment faire une signature html sous Mail (Mac) ?" Et pourquoi ?

Peut-être utilisez-vous déjà une signature dans vos mails, mais vous pourriez certainement promouvoir davantage votre entreprise/organisme en utilisant une superbe signature améliorée: la signature HTML ! Quels éléments doit-elle contenir ? Pourquoi ? Comment créer une signature html sur Mac Mail ? 

Pourquoi utiliser une signature html pour ses mails ?

Une bonne signature internet doit être jolie visuellement, unique, et personnaliser vos mails tout en appelant à l'action. Selon Wisestamp, une bonne signature mail augmente :

• de 32% les réponses à vos mails, si la signature mail contient votre photo et un bon design
• de 10% la portée de vos réseaux sociaux, si la signature contient des icônes / liens vers ceux-ci
• de 22% les clics sur la signature si elle est personnelle et unique.

Une signature html, ça en jette bien plus que les signatures simples en mode texte standard : c'est comme notre carte de visite à la fin de nos mails ! Bien réalisée, la signature rend le mail plus professionnel. Certains diront: "Eh mais, on pourrait mettre juste une image de notre carte de visite, ce serait beaucoup plus simple !". Les petits malins. Plus simple à faire oui, mais ce serait effectivement « juste » une image, et des personnes essaieront à coup sûr de cliquer sur www.votresiteinternet.com avant de comprendre que ce n'est qu'une image. Pas de liens vers vos réseaux sociaux non plus…

Et les liens dans une signature sont importants : ce sont des appels à agir ("call to action", pourquoi ça sonne toujours mieux en anglais ?) qui renvoient le lecteur vers vos réseaux sociaux ou votre site internet.

Comment faire une bonne signature html ?

Selon Yesware, une bonne signature html doit :

• être courte = 3 ou 4 lignes : Less is more. Essayez juste avec :
  Prénom Nom
  titre/fonction chez Compagnie (lien vers le website)
  téléphone
• contenir l'image de votre profil ou du logo de votre entreprise.
  Avoir une/des image(s) est attractif (les personnes se rappellent davantage les images que les textes), professionnel et représentatif (on se souviendra davantage de votre portrait couleur que d'un paysage quelconque, d'un logo abstrait ou de votre portrait noir et blanc).
  Pour résumé : faites votre portrait carré coupé aux épaules ou à la taille (pas de plein pied) couleur, sur fond clair, sans lunettes de soleil, tout sourire (avec les dents), en regardant l'objectif et en portant des habits assez classes et plutôt foncés ou colorés…
  L'image peut être carrée (plus stricte) ou ronde (plus créatif et sympa) sur fond blanc (ou transparent).
• contenir les icônes de vos réseaux sociaux (ceux que vous utilisez vraiment) spécifiques à votre entreprise, sans abuser (6 ou 7 max : plus il y a d'icônes, moins on clique…)
• ne pas inclure votre e-mail : inutile de se répéter, votre signature mail a été reçue à la suite d'un mail, donc l'interlocuteur a forcément votre mail… sauf si votre signature est citée dans un autre mail. Ce point fait débat et peut être réglé en mettant un lien "mailto:" sur votre nom ou un logo en forme d'enveloppe qui ferait office de bouton
• ne pas inclure une citation : n'avez-vous (ou votre organisme) pas suffisamment de personnalité propre qu'il faille vous référer à autrui ? Ça augmente la taille de la signature inutilement (enfin c'est subjectif). Votre slogan serait mieux. Et plus personnel. C'est votre signature… pas celle de Gandhi, Baudelaire ou du Dalaï Lama !
• peut contenir un appel à agir = un lien/phrase sous votre signature qui met en avant une actualité (événement, vente, produit, déménagement, congés…).

Comment créer sa signature mail html (pour Mac Windows Linux) ?

Que vous soyez débutant.e ou pro en HTML / CSS3, il est possible de créer entièrement votre signature mail html avec ce tutoriel.
Mais si cela vous convient de payer ±5€/mois et de créer un compte, vous pouvez automatiser ce service (et le stockage de vos images) en ligne avec htmlsig.com | wisestamp |  newoldstamp…

Pour une création facilitée, voici les étapes :

• fermez tous vos logiciels ouverts et installer Onyx qui nous servira plus loin. Cela évite qu'Onyx ferme des fenêtres  qu'il ne fallait pas…
• créer un dossier nommé "signature_html" sur votre bureau (ou autre)
• y mettre l'image de votre profil : .jpg ou .png carrée de taille minimale 100px * 100px (mais idéalement 200px)
• y mettre les icônes de vos réseaux sociaux :
  • SOIT (simple, rapide, personnalisé) en allant sur htmlsig.com : défilez jusqu'au bas de page pour l'essai gratuit, cliquer sur l'onglet "social" et remplissez rapidement les champs des réseaux sociaux voulus (une seule lettre suffit), juste pour voir les icônes apparaître dans l'aperçu de votre signature. Ensuite glisser/déposer (ou clic droit "enregistrer l'image sous") les icônes  dans le dossier que vous avez créé sur votre bureau.
    A cette étape, vous pouvez très bien finaliser votre signature chez htmlsig, et l'utiliser, du moment que vous la téléchargez (car après 30 jours il vous faut un compte)
  • SOIT (+long mais plus personnel si vous voulez des icônes carrés etc) en les cherchant dans duckduckgo, onglet images
  • SOIT (+ long et risque de déparaillage) en les cherchant un par un en image vectorielle sur worldvectorlogo.com, mais les icônes seront peut-être hétérogènes (par exemple pas tous ronds)
• téléchargez les images en ligne sur une page de votre site internet que vous ne publierez pas, sur facebook ou d'autres plateformes d'hébergement d'images gratuit… Ainsi, quand vous voudrez changer le profil de votre signature, changer simplement l'image en gardant exactement le même nom.extension.
• ouvrir un éditeur html en ligne comme htmleditor, bestonlinehtmleditor, ou Ckeditor (mais sur ce dernier il manque la touche "source", peut-être dispo à l'heure où vous lisez ces lignes sur le ckeditor online). Il doit être possible de faire cela dans Mailchimp pour celles et ceux qui ont déjà un compte.
  • SOIT (rapide - débutant) vous utilisez directement ma signature html (fichier en bas de cet article : clic droit "télécharger le fichier lié sous") : dans ce cas ouvrir le ficher remedact_signature.html dans un éditeur de texte (sublime text | TextMate), copier le texte html, aller dans l'éditeur en ligne, cliquez sur "source", effacer le contenu et coller le code html. Cliquez sur "source" à nouveau pour voir l'aperçu.
    Vous n'avez plus qu'à adapter cette signature à votre cas:
    • changer le texte (couleur, taille police…), informations…
    • changer l'emplacement des images par l'emplacement de vos images (que vous avez téléchargées sur votre site à l'étape précédente). Pour copier l'emplacement d'une image : clic droit sur l'image et "copier l'adresse de l'image". Si vous sautez cette étape, peut-être qu'un jour mes images ne seront plus disponibles et n'apparaîtront plus dans votre signature…
    • changer les liens des images et texte : double-clic sur le texte ou clic droit sur l'image, puis "propriétés de l'image" et/ou double clic sur l'image. Attention, toutes les images de ma signature ont un lien, même le profil et le nom de ma boite en rouge Remedact
    • au final cliquer à nouveau sur "source" et copier le texte html (Cmd+A pour tout sélectionner puis Cmd+C) et coller (Cmd+V) dans l'éditeur de texte choisi (sublime text | TextMate)  puis sauvegarder sur votre bureau sous VOTRE_NOM_signature.html
  • SOIT vous construisez de A à Z votre propre signature. Il faut parfois utiliser l'alignement gauche pour les images et icones. Si vous faîtes directement le html, le CSS doit être compacté sans saut de ligne, avec les éléments les uns à la suite des autres. Utiliser des logiciels compliqués comme Dreamwaver est à éviter car ils cassent souvent le design final.
  • dans les deux cas, ne fermez pas la fenêtre de l'éditeur html en ligne tant que votre signature n'est pas finalisée / vérifiée dans Mac Mail lors de la création d'un nouveau message.

Comment ajouter ma signature html à Mac Mail ?

Il y a plusieurs solutions:

1. Lire How to Make an HTML Signature in Apple Mail for Sierra OS X 10.12
2. OU visionnez la vidéo ci-dessous.
3. OU bien suivez ma méthode :
   • afficher les fichiers cachés sous Mac : installer / ouvrir Onyx (utile pour d'autres fonctions) et aller dans Paramètres › Finder : "options diverses" cochez "afficher les fichiers et les dossiers cachés"
   • Fermer Onyx
   • Ouvrez Mail › aller dans Préférences › Signatures : créer une signature nommée VOTRE_COMPTE_MAIL_html, décochez la case "toujours utiliser ma police de message par défaut", effacer le contenu et glisser/déposer la signature dans le compte correspondant à gauche. Vous pouvez à ce stade en faire votre signature par défaut en cliquant sur le compte choisi et en choisissant la signature dans la liste déroulante
   • fermer les Préférences
   • Quitter Mail
   • aller dans le Finder › VOTRE_PARTITION_SYSTEME / Utilisateurs / VOTRE_NOM_UTILISATEUR / Bibliothèque / Mail / VX (X étant un chiffre variable suivant votre version de Mac) / MailData / Signatures /
   • dans le finder, afficher le contenu du dossier par date de création : la signature VOTRE_COMPTE_MAIL_html que l'on vient de créer est la plus récente (et a un nom bizarre type E38D780R…
   • clic droit sur la signature et "lire les informations" : garder cette fenêtre dans un coin de l'écran : la case Verrrouillé est décochée
   • ouvrir la signature la plus récente avec Sublimetext ou Textmate (clic droit "ouvrir avec" ou glisser déposer sur l'icone de l'application dans le dock) et effacer tout le paragraphe <body>blabla…</body>. Si à ce stade il y a plein d'écriture bizarre (± cryptée après la balise </body>, vous avez peut-être oublié de fermer Mac Mail : fermer Mail, fermer la signature et la réouvrir
   • ouvrir votre signature créée au paragraphe précédent dans sublimetext ou textmate, copier le contenu html et le coller dans la signature au nom bizarre type E38D780R à la place du <body>blabla…</body> qu'on a effacé
   • enregistrer
   • dans la fenêtre informations, cocher la case "verrouillé" (sinon Mail peut remettre à zéro la signature)
   • ouvrir Mail et créer un message pour tester la signature
   • Voilà ! C'est fini ! Il ne vous reste plus qu'à tester les liens du texte, de l'image de profil et des icônes sociaux pour être sûr.e qu'il n'y a pas de bugs.
   • S'il y a des bugs :
     • faire la liste des bugs ou une copie d'écran,
     • fermer le message créé sans l'enregistrer
     • fermer Mail
     • déverrouiller le fichier signature au nom bizarre
     • corriger le html ou pour les non geek revenir à l'étape de l'éditeur html en ligne, corriger puis recopier/coller le html (c'est pour cela qu'il ne fallait pas fermer cette fenêtre et installer Onyx en prélude)
     • reverrouiller la signature
     • tester à nouveau dans Mail en créant un nouveau message
     • si bug encore, reprendre cette liste en début

Ça ne fonctionne pas ? Dépannage

• Je ne trouve pas le dossier "Bibliothèque" : installer Onyx et cocher "montrer les dossiers et fichiers cachés" (voir ci-dessus)
• dans les préférences de Mac Mail, lorsque je colle le html dans la case de ma signature, je ne vois rien : il faut décocher la case "toujours utiliser ma police de message par défaut", puisque cela applique un fichier de style sur votre signature et casse tout; mais lire néanmoins ce qui suit :
• ma signature ne s'affiche pas correctement dans les préférences de Mail : c'est normal, car elle n'est pas active. Créez un nouveau message et vérifier son fonctionnement en sélectionnant votre nouvelle signature
• ma signature ne s'affiche pas correctement dans le nouveau mail créé : ne pas oublier de verrouiller le fichier de la signature avant de ré-ouvrir Mail. Recommencer le cas échéant.

Pour aller plus loin

Vous pouvez même ajouter dans votre signature html le feed RSS de votre blog présentant vos 5 dernières créations, ou vos prochains événements par exemple, mais je trouve que ça commence à faire un peu trop. Enfin tout dépend à qui on s'adresse et à quelle fréquence sans doute. Il en va de même pour les mini-bannières événementielles ou pas.

Représenter votre activité : utiliser une image de profil ou une bannière qui soit spécifique à votre activité (comme votre profil dessiné par exemple) traduit directement en image votre activité et peut être intéressant pour des personnes qui ne vous connaissent pas. A contrario, celles qui vous connaissent peuvent ne pas vous reconnaitre…

Homogénéiser vos profils : utiliser la même image de profil dans votre signature que sur toutes vos pages de réseaux sociaux.

---

Il manque des étapes ? Des liens ne fonctionnent pas ? Vous avez testé des signatures en lignes ou vous avez trouvé un outil beaucoup plus simple ? Merci de me laisser un message ci-dessous ! (publicités non autorisées)

Si ce tutoriel vous a été utile, faîtes-en profiter votre entourage !