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 ﬁ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 ?

Slide 3

Slide 3 text

Source : http://codeguide.co

Slide 4

Slide 4 text

Source : https://stackoverﬂow.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

Slide 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 aﬃche 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 ﬁnes 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éﬁnir 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 !

Slide 27

Slide 27 text

Merci ! @HTeuMeuLeu remi@hteumeuleu.fr https://emails.hteumeuleu.fr