Miaousletter
Voici l'intégration d'un e-mail responsive pour mon atelier à Sud Web le 18 mai 2013. Cet e-mail a été testé via EmailOnAcid et avec CampaignMonitor. L'affichage des deux encarts d'articles n'est pas correct sur Lotus Notes 6.5 et 7.
Bonnes pratiques
L'intégration de cet e-mail respecte les règles suivantes :
- Utilisation du Doctype HTML5 (mais testé aussi avec Doctype XHTML, et sans Doctype) (cf Which doctype should I use in HTML email?)
- Ajout d'une ligne de 1000 espaces dans le
<head>pour forcer le chargement complet sur iOS (cf Two Ways to Ensure that Your Entire Email Is Rendered by Default in the iPhone & iPad) - Image de fond avec un span (cf Background Colors in HTML Emails)
- Centrage des tableaux avec un
align="center" style="margin:0 auto;"sur les balises<table>(pour surcharger les styles du webmail d'Orange) - Centrage vertical dans une cellule
style="vertical-align:middle;"sur les balises<td>(pour surcharger les styles du webmail d'Orange) - Écriture des codes couleurs en hexa sur six caractères (cf The Best Way to Code Background Colors for HTML Email)
- Style des textes alternatifs (cf The Ultimate Guide to Styled ALT Text in Email)
- Utilisation de tableaux flottants pour adapter les blocs en responsive (cf How does Mailbox app render responsive HTML emails?)
- Affichage d'un lien uniquement sur la version mobile (cf How to display email content in mobile clients only)
- Privilégie l'utilisation de plusieurs tableaux à la queue leu-leu pour éviter un bon gros bug de #@&%$ sur Outlook sur des e-mails de plus de 1700px de haut (cf Spacing Issues in Outlook 2007 and 2010)
- Utilisation de bidouilles dégoutantes pour éviter un autre bon gros bug de sur Outlook à cause des tableaux flottants (cf 3 Ways to Remove Unwanted Gaps Between Tables in Outlook 2007 and 2010 et L’intégration d’e-mails responsive)
- Utilisation d'un préfixe propre à l'e-mail pour les noms de classe CSS (ex:
miaouMobile) pour éviter tout conflit avec des classes héritées de webmails (coucou Orange) - Ajout de styles (
.ReadMsgBodyet.ExternalClass) pour centrer l'e-mail sous Hotmail (cf Astuce : Afficher correctement un e-mailing sur Hotmail)
Ressources
Voici quelques ressources intéressantes sur l'intégration d'e-mail :
- Le blog d'EmailOnAcid
- Le blog de CampaignMonitor
- Le blog de Litmus
- Les parts de marché des principaux clients mail, par Litmus
- Guide du support CSS chez CampaignMonitor
- Guide du support des media queries chez CampaignMonitor
- Des guides divers chez MailChimp (Email Marketing Field Guide est plutôt cool)
- HTML email, un ebook plutôt sympa vendu 2£
Quelques templates d'e-mails :
- Email Boilerplate par EmailOnAcid
- HTML Email Boilerplate
- Email Blueprints par MailChimp
- Des templates gratuits par Sarbacane Software
Merci et #bisoudintegrateur