Des solutions allant du plus simple à la plus complexe pour créer vos templates d’emails responsives

Le 15/12/2016

Dans Webdesign

Vous avez besoin de créer un template mail, mais ne connaissez pas les subtilités inhérentes au médium ? Le BlogDuWebdesign vous propose de découvrir trois techniques différentes pour créer des templates pour personnaliser les templates de base inclus dans les différents logiciels d’e-mailing.

Utiliser un template existant

Évidemment, je ne vous apprends rien sur ce point, la solution la plus simple pour votre mailing est souvent l’utilisation d’une template tout faite, que vous pourrez trouver gratuitement sur des sites comme Litmus, ou de manière bien plus diversifiée mais payante sur des sites comme Themeforest.

Litmus template email

Le problème avec ces solutions est que le résultat n’est pas forcément évident à éditer et à adapter aux besoins de votre client.

Utiliser un framework

De l’autre côté du spectre, il existe des outils comme Foundation for email, ou MJML, qui vous propose de créer votre template d’email selon vos besoins. Si ces outils font un énorme travail pour nous rendre la tâche agréable, il faut reconnaître qu’ils ne sont pas forcément à la portée d’un intégrateur.

MJML demande d’avoir des dépendances installées sur son poste (Node.js pour ne pas le citer) ainsi que l’apprentissage de tout un nouveau langage dérivé du HTML.

Mjml template email

Foundation for email, bien que plus simple, vous demandera lui aussi quelques manipulations supplémentaires (l’inlining par exemple, c’est-à-dire mettre tout votre CSS dans votre HTML).

Foundation template email

Solution hybride : utiliser un template « nu » comme base

Cette solution est sans aucun doute le plus adapté pour les intégrateurs, qui ont de solides bases en HTML et CSS (c’est leur métier après tout) mais qui ne connaissent pas les spécificités des emails.

Ce que j’appelle des templates « nus » sont des templates ne contenant que des placeholders, et qu’il vous sera possible d’adapter très simplement à vos besoins. Associez les différents blocs comme vous le feriez avec des legos, ajoutez-y du style pour les polices, backgrounds et couleurs, puis insérez-y votre contenu !

L’avantage évident de passer par un template « nu » est que ces templates fonctionnent déjà sur Gmail, et Outlook, que ce soit sur desktop ou mobile. Vous pouvez donc créer votre template vous-même sans réellement avoir à vous occuper des règles complexes et parfois illogiques nécessaires pour être compatible avec ces différentes plateformes.

Je vous propose de découvrir Cerberus, une collection de 3 « templates », qu’il vous sera possible de réorganiser à loisir.

Cerberus template email