Des bonnes pratiques de l'intégration d'e-mails

DES BONNES PRATIQUES DE L’INTÉGRATION D’E-MAILS

Au niveau personnel ou d’une équipe Outils utilisés, espace vs.
tabulation, … Au niveau d’un projet ou d’un client Approche responsive vs. hybride vs. mobile ﬁrst, façon de coder un bouton, … Au niveau de l’intégration d’e-mails Pratique incontestable et argumentée. C’est quoi une bonne pratique ?

Source : http://codeguide.co

Source : https://stackoverﬂow.design/email/

Utiliser un doctype HTML5. 1 <!DOCTYPE html>

Utiliser un doctype HTML5. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> Et pas XHTML.

Utiliser un doctype HTML5. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4/ loose.dtd"> Ni HTML4.

Quand notre e-mail est affiché dans un webmail, notre doctype
est généralement supprimé et on hérite du doctype du webmail. La plupart des webmails utilisent HTML5. Ça ne signifie pas pour autant qu’on doive utiliser la sémantique HTML5 ou qu’on ne peut plus utiliser les attributs dépréciés. Et Outlook se fiche du doctype de toutes façons. Utiliser un doctype HTML5. 1

Source : https://twitter.com/HTeuMeuLeu/status/909798027044507649 71

Utiliser du code sémantique. 2  <h1
style="margin:0; color:#0f0; font:24px Arial, sans-serif;">Lorem ipsum</h1>  <font face="Arial" size="5" color="#00ff00">Lorem ipsum</font>

Toujours utiliser des balises <h1> à <h6> et des <p>.
Ça rend le contenu plus accessible. Utiliser du code sémantique. 2

Sur chaque tableau de présentation, ajouter l’attribut role="presentation". Utiliser du
code sémantique. 2

Il faut que ça marche sans <style>. 3

Tous les clients mails ne supportent pas <style>. Exemples :
Gmail (GANGA), SFR (iOS et Android), Yandex, Mail.ru, Libero, T-online.de, Nate, Naver, … Parfois c’est temporaire. Exemples : Gmail le 23 avril 2019 et le 13 juillet 2018. Il faut que ça marche sans <style>. 3

Il faut que ça marche sans <style>. 3 Parfois, c’est
contextuel. Par exemple, quand on transfère un mail dans Gmail ou quand on aﬃche sa version non tronquée.

« Que ça marche », ça signifie : Un e-mail
qui s’adapte à sa zone d’affichage sans barre de défilement horizontal. Un e-mail qui reflète votre image. (Couleurs, polices, …) Il faut que ça marche sans <style>. 3

On ne découpe pas une image. 4

C’est plus facile à maintenir. C’est plus accessible. Un seul
élément, un seul alt. Télécharger une image de 100 Ko c’est (en théorie) plus rapide que télécharger 5 images de 20 Ko. On ne découpe pas une image. 4

On ne découpe pas une image. 4 Sous WebKit, les
transformations CSS ajoutent de ﬁnes lignes entre des visuels.

Parce que ce genre de choses peut arriver. On ne
découpe pas une image. 4

Des styles plutôt que des attributs. 5  <td valign="middle" align="center" bgcolor="#ffffff"></td>  <td style="vertical-align:middle; text- align:center; background-color:#fff;"></td>

Exception #1 : centrer un tableau sur Outlook 2007-2019 sur
Windows. Des styles plutôt que des attributs. 5  <table align="center" width="600" role="presentation">…</table>  <table align="center" style="margin:0 auto; width:600px;" role="presentation">…</table>

Exception #2 : déﬁnir une largeur d’image sur Outlook 2007-2019
sur Windows. Des styles plutôt que des attributs. 5  <img src="exemple.jpg" alt="" width="100%" />  <img src="exemple.jpg" alt="" width="600" style="width:100%;" />

Exception #3 : remettre à zéro les styles par défaut
d’un tableau. Des styles plutôt que des attributs. 5  <table style="border:0; border-spacing:0;"> <tr> <td style="padding:0; border:none;">Lorem ipsum.</td> </tr> </table>  <table border="0" cellspacing="0" cellpadding="0"> <tr> <td>Lorem ipsum.</td> </tr> </table>

Source : https://github.com/hteumeuleu/email-guidelines

À vous !

Merci ! @HTeuMeuLeu [email protected] https://emails.hteumeuleu.fr

Des bonnes pratiques de l'intégration d'e-mails

Des bonnes pratiques de l'intégration d'e-mails

HTeuMeuLeu

More Decks by HTeuMeuLeu

Other Decks in Programming

Featured

Transcript