Template HTML mail personnalisé sous macOS Sierra

Pour avoir un template qui répond aux exigences des clients mail, vous pouvez vous inspirer d'un template disponible ici. C'est ce que je vais faire pour ce tutoriel et je vais choisir le template Hybrid.

Créer un template HTML

Étape 1 - Création d'un fichier HTML sur votre mac.

  • Ouvrir un éditeur de texte et créer un nouveau document. Pour l'éditeur de texte je recommande Sublime Text 2 sinon TextEdit fera l'affaire.
  • Enregistrer le document avec le nom que vous voulez, mais avec l'extension .html, pour l'exemple je vais utiliser template.html

Étape 2 - Télécharger un template

Comme indiqué au début de l'article, vous pouvez télécharger un template opérationnel sur ce site, mais vous pouvez aussi créer votre template vous même. Dans un soucis de gain de temps je préfère télécharger un template.

  • Vous verrez sur cette page plusieurs templates, choisissez en un, et cliquez sur le bouton </>View Raw.
  • Copier le code qui s'affiche sur la page (cmd+a puis cmd+c)
  • Coller le code dans votre fichier template.html (cmd+v)

Étape 3 - Modification du template

Vous pouvez modifier ce template à volonté. Cependant quelques règles sont à respecter.

  • Préférez les <table> aux <div> pour construire votre page
  • Pour ajouter une image, je vous conseille de la mettre sur internet. Vous pouvez utiliser une image qui est sur votre site web, si vous n'avez pas de site web, vous pouvez opter pour une solution gratuite de stockage en ligne comme Dropbox ou Hubic . Cela allègera votre mail.

Pour tester le rendu de votre code HTML, double-cliquez simplement sur le fichier afin de l'ouvrir dans Safari après avoir enregistré (cmd+s).

Lorsque les modifications sont terminées, enregistrez votre travail et laissez le code à portée de main, vous en aurez rapidement besoin.

Ajouter le template sur Mail

Étape 1 - Créer un modèle

Dans l'application Mail : 

  • Créez un nouveau message
  • Laissez le message vide, et enregistrez le comme modèle en le nommant à votre guise, pour moi ça sera Mon Joli Template

Étape 3 - Modifier le modèle

Pour modifier le modèle ouvrez le dossier Bibliothèque. Pour cela, ouvrez le menu Aller du Finder, lorsque celui ci est ouvert, maintenez la touche alt ⌥ (Option Key) et cliquez sur le dossier Bibliothèque qui vient d'apparaître.

Ensuite commence le marathon du double-clic. Rendez vous dans le dossier : 
Containers > com.apple.mail > Data > Library > Application Support > Mail > Stationery > Apple > Contents > Resources > Custom > Contents > Resources

Ici vous devriez voir le fichier Mon Joli Template.mailstationery. Clic droit et Afficher le contenu du paquet.

Ouvrez les dossier Contents > Resources. Clic droit sur content.html et Ouvrir avec > Sublime Text 2  (ou TextEdit).

Copiez/collez le code HTML de template.html dans ce fichier. Enregistrez et quittez l'éditeur de texte.

Voila, votre template est prêt à être utilisé.

Utiliser le template dans Mail

Créez un nouveau message et cliquez sur le bouton des modèles.

Faites défiler le menu des catégories pour trouver Personnalisé et cliquez sur votre template.

Enjoy !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.