{"id":20396,"date":"2019-07-16T00:00:00","date_gmt":"2019-07-16T00:00:00","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/modeles-emails-responsifs-laisser-libre-cours-creativite\/"},"modified":"2026-09-14T23:35:39","modified_gmt":"2026-09-14T23:35:39","slug":"modeles-emails-responsifs-laisser-libre-cours-creativite","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/fr\/blog\/email\/modeles-emails-responsifs-laisser-libre-cours-creativite\/","title":{"rendered":"Des mod\u00e8les d’emails responsifs pour laisser libre cours \u00e0 votre cr\u00e9ativit\u00e9"},"content":{"rendered":"\n

Le concours est d\u00e9sormais clos. Merci \u00e0 toutes les personnes qui ont particip\u00e9\u00a0!<\/strong><\/p>\n\n\n\n

Nous avons d\u00e9ploy\u00e9 une multitude de nouvelles fonctionnalit\u00e9s ces derni\u00e8res semaines, et nous continuons sur cette lanc\u00e9e avec nos nouveaux mod\u00e8les d’emails\u00a0! Cette derni\u00e8re nouveaut\u00e9 vous permet d’ajouter, de modifier et de stocker vos mod\u00e8les d’emails dans Mailgun afin de ne plus avoir \u00e0 fouiller dans le code la prochaine fois que vous devrez effectuer une modification mineure. Et elle est d’ores et d\u00e9j\u00e0 disponible dans notre\u00a0nouvelle UI<\/a>.<\/p>\n\n\n\n

Pouvoir revenir \u00e0 une version ant\u00e9rieure d’un mod\u00e8le apr\u00e8s l’avoir modifi\u00e9, faciliter la collaboration entre les diff\u00e9rentes \u00e9quipes d’une entreprise, simplifier les appels d’API et b\u00e9n\u00e9ficier d’un rendu en direct ne sont que quelques-uns des avantages de cette nouvelle fonctionnalit\u00e9 de mod\u00e8les d’emails qui vous simplifiera la vie. Et nous n’aurions pas pu concevoir cette fonctionnalit\u00e9 sans nous poser d’abord la question suivante :<\/p>\n\n\n\n

Pourquoi travailler sur les mod\u00e8les d’emails ?<\/h2>\n\n\n\n

Dans la plupart des cas, votre entreprise cr\u00e9e des mod\u00e8les d’emails \u00e0 utiliser pour diff\u00e9rents types d’emails. Vous continuez ensuite de les utiliser pendant un certain temps, en mettant ponctuellement \u00e0 jour votre logo, l’adresse dans le pied de page ou de petits \u00e9l\u00e9ments de design.<\/p>\n\n\n\n

Cela pose deux d\u00e9fis majeurs. La cr\u00e9ation initiale de mod\u00e8les d’emails est un v\u00e9ritable parcours du combattant. Vous devez coder comme en 1999 et jongler avec les tableaux, le CSS en ligne, le CSS non pris en charge, ou encore solliciter l’\u00e9quipe de d\u00e9veloppement d’applications, et la liste est longue. M\u00eame ainsi, les particularit\u00e9s de certains clients de messagerie (Outlook, c’est \u00e0 vous que nous pensons !) peuvent tout faire planter.<\/p>\n\n\n\n

Revenons un instant en 2014, date de notre derni\u00e8re annonce majeure concernant les mod\u00e8les. Nous avions publi\u00e9 un\u00a0ensemble de trois mod\u00e8les d’emails responsifs<\/a>\u00a0que nous avons mis en open source via un d\u00e9p\u00f4t Github dans l’espoir de rendre la cr\u00e9ation d’un mod\u00e8le d’email \u00e0 partir de z\u00e9ro un peu moins fastidieuse.<\/p>\n\n\n\n

Aujourd’hui, nous n’avons quasiment pas touch\u00e9 \u00e0 ces mod\u00e8les d’emails car ils remplissent leur r\u00f4le, le public les appr\u00e9cie et les utilise, et ils ne sont pas si mal. Mais ils \u00e9taient difficiles \u00e0 trouver, sauf si vous en connaissiez d\u00e9j\u00e0 l’existence, et ils ne r\u00e9solvaient en rien le second grand d\u00e9fi inh\u00e9rent aux mod\u00e8les d’emails, \u00e0 savoir :<\/p>\n\n\n\n

Comment maintenir et mettre \u00e0 jour vos mod\u00e8les d’emails au fil du temps et collaborer avec d’autres services si n\u00e9cessaire, sans avoir \u00e0 passer au crible votre code source pour trouver exactement ce que vous cherchez ?<\/p>\n\n\n\n

Lorsque nous avons commenc\u00e9 \u00e0 d\u00e9velopper la nouvelle UI, nous savions que c’\u00e9tait le moment id\u00e9al pour r\u00e9soudre le probl\u00e8me des mod\u00e8les. Il nous a suffi de cr\u00e9er un d\u00e9p\u00f4t dans Mailgun pour que vous puissiez facilement faire appel \u00e0 un mod\u00e8le \u00e0 chaque fois que vous souhaitez envoyer un email avec l’un d’eux. Premier probl\u00e8me : r\u00e9solu.<\/p>\n\n\n\n

Maintenant, pouvions-nous faciliter un peu plus la modification des mod\u00e8les existants et en ajouter quelques-uns au passage ?<\/p>\n\n\n\n

Enrichir nos mod\u00e8les d’emails<\/h2>\n\n\n\n

Mailgun proposait d\u00e9j\u00e0 des mod\u00e8les pour certains emails transactionnels g\u00e9n\u00e9raux<\/a>, notamment des emails li\u00e9s \u00e0 des actions, des alertes par email et des emails de facturation. Bien qu’ils couvrent l’essentiel des emails utilis\u00e9s par la majeure partie des exp\u00e9diteurs, nous voulions aller plus loin. Le probl\u00e8me, c’est que nous ne sommes pas vraiment des sp\u00e9cialistes du design d’emails. Ce n’est pas trop notre domaine et, pour \u00eatre tout \u00e0 fait honn\u00eate, il vaut mieux confier cette t\u00e2che \u00e0 des personnes passionn\u00e9es par le design.<\/p>\n\n\n\n

Nous avons donc d\u00e9cid\u00e9 de nous associer \u00e0\u00a0Email Uplers\u00a0pour pr\u00e9parer de nouveaux designs au moment du lancement de notre UI. Ils ont d\u00e9j\u00e0 \u00e9crit sur\u00a0accessibilit\u00e9 des emails<\/a>\u00a0avec nous auparavant, et nous \u00e9tions ravis de les voir accepter de concevoir ces derniers mod\u00e8les.<\/p>\n\n\n\n

Avec le soutien d’Email Uplers, nous avons lanc\u00e9 la cr\u00e9ation de trois nouveaux mod\u00e8les : r\u00e9cup\u00e9ration de mot de passe, confirmation de commande et newsletter.<\/p>\n\n\n\n

Par ailleurs, Mailgun voulait y int\u00e9grer des chats d’une mani\u00e8re ou d’une autre pour s’amuser. C’est ainsi que nos tout derniers mod\u00e8les ont vu le jour.<\/p>\n\n\n\n

Les nouveaux mod\u00e8les<\/em><\/h3>\n\n\n\n
\"Forgot<\/figure>\n\n\n\n

L’email de r\u00e9cup\u00e9ration de mot de passe, bien qu’il s’agisse techniquement d’un email d’action, est utilis\u00e9 par presque toutes les applications et entreprises. Gr\u00e2ce au mod\u00e8le con\u00e7u sp\u00e9cifiquement \u00e0 cet effet par Email Uplers, vous pouvez facilement personnaliser quelques couleurs, ajouter votre logo, et le tour est jou\u00e9 : vous pouvez d\u00e9sormais cr\u00e9er un email de r\u00e9initialisation de mot de passe en apportant quelques modifications simples au mod\u00e8le.<\/p>\n\n\n\n

\"Cat<\/figure>\n\n\n\n

La cr\u00e9ation de l’email de confirmation de commande s’est d\u00e9roul\u00e9e de la m\u00eame mani\u00e8re que pour le mod\u00e8le de r\u00e9cup\u00e9ration de mot de passe. Un mod\u00e8le de confirmation de commande peut \u00eatre consid\u00e9r\u00e9 comme un d\u00e9riv\u00e9 d’un email de facturation, mais il faut en modifier l\u00e9g\u00e8rement le texte et la mise en page pour qu’il ressemble davantage \u00e0 un re\u00e7u et \u00e0 une confirmation de commande qu’\u00e0 une facture.<\/p>\n\n\n\n

\"Newsletter<\/figure>\n\n\n\n

Enfin, nous avons demand\u00e9 \u00e0 Email Uplers de concevoir un mod\u00e8le de newsletter. Mailgun ne proposait pas de mod\u00e8les ax\u00e9s sur le marketing auparavant, mais de nombreux clients ont exprim\u00e9 leur int\u00e9r\u00eat.<\/p>\n\n\n\n

Ce mod\u00e8le vous offre plut\u00f4t une mise en page sous forme de cartes pour pr\u00e9senter des articles de blog ou d’autres contenus, de sorte que vous puissiez cr\u00e9er une newsletter compl\u00e8te et commencer facilement \u00e0 envoyer des emails promotionnels.<\/p>\n\n\n\n

Utiliser les API de mod\u00e8les d’emails<\/h2>\n\n\n\n

Il y a de fortes chances que vous deviez un jour mettre \u00e0 jour les mod\u00e8les que vous cr\u00e9ez. La bonne nouvelle, c’est que vous pouvez mettre \u00e0 jour ces mod\u00e8les dans le d\u00e9p\u00f4t, modifier la version active ou cr\u00e9er plusieurs versions pour effectuer des tests A\/B.<\/p>\n\n\n\n

De plus, Mailgun propose diff\u00e9rents appels d’API pour les mod\u00e8les que vous pouvez utiliser :<\/p>\n\n\n\n