Ce template est une base de travail lorsque l'on souhaite construire un modèle pour des emailings. Pour la réalisation d'un email, c'est à partir de cette base que je commence.
Essentiellement basé sur Antwort, c'est un regroupement d'astuces, de pratiques glanées à travers de nombreux articles et ressources tels que HTML Email Boilerplate, mais aussi bien sûr de mes propres expériences.
Difficile d'envoyer des emails non adaptés aux mobiles de nos jours au vu des taux d'ouverture sur ces appareils. Là aussi les bases sont posées avec un mix entre design fluide et adaptatif.
- Adapté aux mobiles sur iOS et Android
- Fonctionne sur la majorité des clients web tel que Gmail, Outlook.com, Yahoo!, LaPoste.net, Orange, SFR et Voilà
- Fonctionne sur les logiciels Outlook (2000+)
Voir le code source ! Un certain nombre d'éléments sont commentés, mais c'est en anglais car je commente toujours en anglais (commentaires qu'il est préférable d'enlever en production).
Quelques précisions tout de même :
J'ai fait le choix de ne pas utiliser de balises <p>, <h1>, <h2>, etc.
Les balises de titres sont les plus risquées à utiliser car les clients mails ont parfois déjà des styles qu'ils leur appliquent. Je privilégie donc l'utilisation de <div> pour les titres.
La balise <p> est moins problématique à utiliser, mais je fais le choix de m'en passer lorsque cela est possible depuis que Outlook.com ne supporte plus la propriété margin. A la place je mets un double retour à la ligne <br /><br /> qui a l'avantage de proposer quasiment le même rendu peu importe le client, mais aussi de n'avoir à déclarer les propriétés de font qu'une seule fois sur le <td> plutôt que chaque <p>.
- Guide du support CSS et guide du support des medias queries chez Campaign Monitor
- Les guides proposés par MailChimp
- Les blogs de Campaign Monitor, EmailOnAcid et Litmus
- Les slides de la conférence d'HTeuMeuLeu sur l'intégration d'e-mails responsive lors de la Kiwi Party 2013
- Le tutoriel Un e-mail en HTML responsive multi-clients sur Alsacreations
- Top 10 des clients mails par Litmus
- Conférence Paris Web 2014 de HTeuMeuLeu : "Comment sortir l'intégration d'e-mails de la préhistoire ?"
- Le blog dédié aux emails de HTeuMeuLeu
- L'utilisation du hack pour Yahoo! Mail des media queries n'est désormais plus nécessaire
- Nettoyage du template pour retirer le code inutile
- Changement du doctype en rapport avec celui utilisé par la majorité des clients web
- Prise en compte des spécificités liées aux clients web Français
- Hello world!
Déclinaison de versions utilisables dans MailChimp et Campaign Monitor avec utilisation des langages qui leur sont propres.