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

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

table ou div ? spacer.gif ou padding ? Doctype HTML5 ou XHTML ?

Rémi va vous aider à bien comprendre le fonctionnement des clients mails. Objectif, établir avec vous une liste de bonnes pratiques d'intégration d'e-mails pour 2019 et les années à venir.

https://app.swapcard.com/widget/event/emday-2019/planning/UGxhbm5pbmdfNTQ0ODE%3D

A6201a057eac39e2b97a5a58d5f8601e?s=128

HTeuMeuLeu

May 16, 2019
Tweet

Transcript

  1. 2.

    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 ?
  2. 6.

    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.
  3. 7.

    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.
  4. 8.

    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
  5. 10.

    Utiliser du code sémantique. 2 <!-- Bien ! --> <h1

    style="margin:0; color:#0f0; font:24px Arial, sans-serif;">Lorem ipsum</h1> <!-- Pas bien :( --> <font face="Arial" size="5" color="#00ff00">Lorem ipsum</font>
  6. 11.

    Toujours utiliser des balises <h1> à <h6> et des <p>.

    Ça rend le contenu plus accessible. Utiliser du code sémantique. 2
  7. 14.

    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
  8. 15.

    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 affiche sa version non tronquée.
  9. 16.

    « 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
  10. 18.

    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
  11. 19.

    On ne découpe pas une image. 4 Sous WebKit, les

    transformations CSS ajoutent de fines lignes entre des visuels.
  12. 20.
  13. 21.

    Des styles plutôt que des attributs. 5 <!-- Pas bien

    :( --> <td valign="middle" align="center" bgcolor="#ffffff"></td> <!-- Bien ! --> <td style="vertical-align:middle; text- align:center; background-color:#fff;"></td>
  14. 22.

    Exception #1 : centrer un tableau sur Outlook 2007-2019 sur

    Windows. Des styles plutôt que des attributs. 5 <!-- Mauvais exemple --> <table align="center" width="600" role="presentation">…</table> <!-- Bon exemple --> <table align="center" style="margin:0 auto; width:600px;" role="presentation">…</table>
  15. 23.

    Exception #2 : définir une largeur d’image sur Outlook 2007-2019

    sur Windows. Des styles plutôt que des attributs. 5 <!-- Mauvais exemple --> <img src="exemple.jpg" alt="" width="100%" /> <!-- Bon exemple --> <img src="exemple.jpg" alt="" width="600" style="width:100%;" />
  16. 24.

    Exception #3 : remettre à zéro les styles par défaut

    d’un tableau. Des styles plutôt que des attributs. 5 <!-- Plutôt mauvais exemple --> <table style="border:0; border-spacing:0;"> <tr> <td style="padding:0; border:none;">Lorem ipsum.</td> </tr> </table> <!-- Plutôt bon exemple --> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td>Lorem ipsum.</td> </tr> </table>
  17. 26.