Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30

315 views

Published on

Nous pensons toujours que l’intégration d’un e-mail n’est pas chose facile, mais… ce n’est pas spécialement le cas…

Je vais essayer de vous redonner gout à l’intégration d’e-mail en vous montrant quelques cas pratiques qui montrent le contraire.

Nous allons voir que beaucoup d’éléments graphiques peuvent être issu de ‘snippet’ de code qu’il suffit de styliser en fonction de la charte graphique de vos clients mais également qu’en respectant certaines règles de bonnes pratiques, votre code sera fonctionnel sur la majorité des clients/browsers e-mails.

L’intégration d’e-mail est un art, un art ou rigueur et précision sont de la partie…

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30

  1. 1. https://www.actito.com
  2. 2. Sébastien Lejeune • Product designer • Team Leader Design and User experience • Senior – Expert E-mail / Web integrator Contact • Twitter: @seblejeune • LinkedIn : https://www.linkedin.com/in/seblejeune/ • Github : https://github.com/seblejeune https://www.actito.com
  3. 3. L’e-mail, un art avec des règles à respecter
  4. 4. • De la rigueur • De la précision • … Beaucoup de copier / coller Mais…. • Pas de javascript • Pas de feuilles de styles • Pas de son • Bref aucun ‘artifice’ web
  5. 5. Du code en détails…
  6. 6. Un doctype valide <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. 7. Un <head> bien définis <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  8. 8. Un <head> bien définis <style type="text/css"> #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */ .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line- height: 100%;} /* Force Hotmail to display normal line spacing */ body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */ table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */ img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */ .gapfixer div, .gapfixer button { margin:0 !important; padding:0 !important; display:block !important; } /* remove the gap below image added in outlook.com (2017) */ *[x-apple-data-detectors] { color: #333333; text-decoration: none; } </style>
  9. 9. Une structure bien définie <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000" style="width: 100%;"> <tr> <td valign="top" align="center"> <table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff" style="width:600px;"> <tr> <td align="left" valign="top"> ... </td> </tr> </table> </td> </tr> </table>
  10. 10. • Utilisation des styles en ligne sur chaque <td> contenant du texte • Définir le width en attribut et en style sur les <table> de structure • Convertir les caractères spéciaux en entité HTML En plus…
  11. 11. Une gestion du mobile avec un framework…
  12. 12. • Des media queries génériques • Plusieurs ‘break-point’ • De la gestion multi-colonnes Attention…. • Toujours !important • Adapter : • Font-size • Line-height • …
  13. 13. A vous de jouer
  14. 14. Création d’un e-mail : exercice • Base : structure_1.html • Ajout d’un titre • Ajout d’un texte • Utiliser les media-queries présentes dans le fichier pour la gestion du mobile https://gitlab.com/seblejeune/email-paris-web-2017/repository/master/archive.zip
  15. 15. Création d’un e-mail : Résultat
  16. 16. Des boutons oui, mais en <html>
  17. 17. • Utilisation de bouton <html> • Augmenter la zone de clic en mobile • La zone complète est cliquable <table cellpadding="0" cellspacing="0" align="center" class="act-gen-button-table"> <tr> <td class="act-gen-button-td" valign="top" bgcolor="#348eda" align="center"> <a href=“#” class="act-gen-button-link"> {{copy}} </a> </td> </tr> </table>
  18. 18. Visuels
  19. 19. Support des browsers • Les boutons HTML sont supportés par la plus part des clients et browsers mails de marché… • Cependant, si vous faites un bouton sur deux lignes, vous pouvez avoir certains problèmes d’affichage sous Outlook.
  20. 20. Création d’un e-mail : Exercice 2 ajout d’un bouton <html> • Base : structure_2.html • Ajout d’un bouton <html> • Penser aux best practices mobiles • Utiliser les media-queries présentes dans le fichier pour la gestion du mobile
  21. 21. Création d’un e-mail : Bouton - résultat
  22. 22. Création d’un e-mail : exercice 3 • Base : structure_3.html • Ajout d’un header en full largeur • Ajout d’un lien sur le header
  23. 23. Création d’un e-mail : Header- résultat
  24. 24. Création d’un e-mail : exercice 4 • Base : structure_4.html • Ajout d’un article contenant : • Titre • Image • Texte • Bouton
  25. 25. Création d’un e-mail : Article résultat
  26. 26. Une colonne c’est bien… Deux c’est mieux…
  27. 27. • Principe : • 2 <table> ‘flottante’ • 20px d’écart entre les deux 2 colonnes dans un e-mail
  28. 28. 2 colonnes… Code <table cellpadding="0" cellspacing="0" width="600" style="width: 600px; margin:0 auto; border:0;" class="mobileWidthContent"> <tr> <td valign="top" align="center" width="600" style="width: 600px;" class="mobileWidthFull"> <table cellpadding="0" cellspacing="0" align="left" width="290" style="width: 290px; margin:0 auto; border:0;" class="mobileWidthHalf"> <tr> <td valign="top" align="left" width="290" style="width: 290px;" class="mobileWidthFull"> Content </td> </tr> </table> <table cellpadding="0" cellspacing="0" align="right" width="290" style="width: 290px; margin:0 auto; border:0;" class="mobileWidthHalf"> <tr> <td valign="top" align="left" width="290" style="width: 290px;" class="mobileWidthFull"> Content </td> </tr> </table> </td> </tr> </table>
  29. 29. Création d’un e-mail : exercice 5 • Base : structure_5.html • Création d’un article deux colonnes : • Image à gauche • Titre, texte et bouton à droite.
  30. 30. Création d’un e-mail : Article deux colonnes résultat
  31. 31. Les web font c’est bien… Google font c’est mieux…
  32. 32. • Import de la font google ‘free’ dans le <head> Intégration des google font <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  33. 33. • Déclaration de la font dans les styles Intégration des google font [style*="Lato"] { font-family: ’Roboto', Verdana, sans-serif !important }
  34. 34. • Utilisation de la font dans l’e-mail Intégration des google font <td valign="top" align="center" width="…" style="font-family: Arial, sans-serif, 'Roboto'; …"> Content </td>
  35. 35. • Attention, cette manipulation n’est pas supportée dans tous les clients e-mails • Liste des clients e-mails qui supporte cette feature • Listes des browsers supportant les google fonts : • AOL MailNative • Android mail app (not Gmail app) • Apple Mail • iOS Mail • Outlook 2000 • Outlook.com app Intégration des google font
  36. 36. • DEMO Intégration des google font
  37. 37. Se simpifier la vie…
  38. 38. • Utiliser des ‘snippet’ de code que vous adaptez à chaque fois… • Un bouton • Un titre • Un texte • Créer votre framework css de mediaqueries Comment simplifier le développement d’e-mail
  39. 39. • Créer votre e-mail avec une feuille de style… • Utiliser juice… • Le tour est joué… Utiliser du javascript
  40. 40. • DEMO Utiliser du javascript
  41. 41. Le secret d’un bon e-mail…
  42. 42. • Utilisation de plateforme professionnelle d’envoi… ACTITO • Litmus et emailOnAcid pour les tests sur les clients e-mails du marché… • Mailtester, vous mesurer le risque de ‘spam’ Le test…
  43. 43. Thank you ! https://www.actito.com

×