Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

HTeuMeuLeu

May 16, 2019
Tweet

More Decks by HTeuMeuLeu

Other Decks in Programming

Transcript

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

    View full-size slide

  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 ?

    View full-size slide

  3. Source : http://codeguide.co

    View full-size slide

  4. Source : https://stackoverflow.design/email/

    View full-size slide

  5. Utiliser un doctype HTML5.
    1

    View full-size slide

  6. Utiliser un doctype HTML5.
    1

    Et pas XHTML.

    View full-size slide

  7. Utiliser un doctype HTML5.
    1

    Ni HTML4.

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  10. Utiliser du code sémantique.
    2

    Lorem ipsum

    color="#00ff00">Lorem ipsum

    View full-size slide

  11. Toujours utiliser des balises à et des . Ça
    rend le contenu plus accessible.
    Utiliser du code sémantique.
    2

    View full-size slide

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

    View full-size slide

  13. Il faut que ça marche sans .<br/>3<br/>

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. On ne découpe pas une image.
    4

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Des styles plutôt que des attributs.
    5

    bgcolor="#ffffff">


    View full-size slide

  22. Exception #1 : centrer un tableau sur Outlook
    2007-2019 sur Windows.
    Des styles plutôt que des attributs.
    5

    role="presentation">…


    View full-size slide

  23. Exception #2 : définir une largeur d’image sur Outlook
    2007-2019 sur Windows.
    Des styles plutôt que des attributs.
    5



    style="width:100%;" />

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide