Slide 1
Slide 1 text
DES BONNES PRATIQUES
DE L’INTÉGRATION D’E-MAILS
Slide 2
Slide 2 text
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 first,
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 ?
Slide 3
Slide 3 text
Source : http://codeguide.co
Slide 4
Slide 4 text
Source : https://stackoverflow.design/email/
Slide 5
Slide 5 text
Utiliser un doctype HTML5.
1
Slide 6
Slide 6 text
Utiliser un doctype HTML5.
1
Et pas XHTML.
Slide 7
Slide 7 text
Utiliser un doctype HTML5.
1
Ni HTML4.
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
Source : https://twitter.com/HTeuMeuLeu/status/909798027044507649
71
Slide 10
Slide 10 text
Utiliser du code sémantique.
2
Lorem ipsum
Lorem ipsumSlide 11
Slide 11 text
Toujours utiliser des balises à
à et des
. Ça rend le contenu plus accessible. Utiliser du code sémantique. 2
Slide 12
Slide 12 text
Sur chaque tableau de présentation, ajouter l’attribut
role="presentation".
Utiliser du code sémantique.
2
Slide 13
Slide 13 text
Il faut que ça marche sans .
3
Slide 14
Slide 14 text
Tous les clients mails ne supportent pas .
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
Slide 15
Slide 15 text
Il faut que ça marche sans .
3
Parfois, c’est contextuel. Par exemple, quand on
transfère un mail dans Gmail ou quand on affiche sa
version non tronquée.
Slide 16
Slide 16 text
« 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 .
3
Slide 17
Slide 17 text
On ne découpe pas une image.
4
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
On ne découpe pas une image.
4
Sous WebKit, les transformations CSS ajoutent de fines
lignes entre des visuels.
Slide 20
Slide 20 text
Parce que ce genre de choses peut arriver.
On ne découpe pas une image.
4
Slide 21
Slide 21 text
Des styles plutôt que des attributs.
5
Slide 22
Slide 22 text
Exception #1 : centrer un tableau sur Outlook
2007-2019 sur Windows.
Des styles plutôt que des attributs.
5
…
…
Slide 23
Slide 23 text
Exception #2 : définir une largeur d’image sur Outlook
2007-2019 sur Windows.
Des styles plutôt que des attributs.
5
Slide 24
Slide 24 text
Exception #3 : remettre à zéro les styles par défaut d’un
tableau.
Des styles plutôt que des attributs.
5
Lorem ipsum.
Lorem ipsum.
Slide 25
Slide 25 text
Source : https://github.com/hteumeuleu/email-guidelines
Slide 26
Slide 26 text
À vous !