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

L'e-mail sous toutes ses formes

L'e-mail sous toutes ses formes

L’e-mail responsive n’est plus un « nice to have » mais un « must do ». Quel est le cheminement… de l’objectif business à la conception graphique à la gestion des retours en passant par la partie code et bien sûr au testing du rendu.
Une approche pragmatique par partage d’expérience pour vous guider dans mon day-to-day.

3855d24200808dd3277273794bc5ac16?s=128

Sébastien Lejeune

June 03, 2016
Tweet

Transcript

  1. L'E-MAIL SOUS TOUTES SES FORMES • Sébastien Lejeune @seblejeune ×

    • @ACTITOHQ • @seblejeune
  2. MON CHALLENGE ? RÉSUMER 10 ANS D'EXPÉRIENCE EN 20 MINUTES

    ! ET PAS EN 10 ! Ý Senior Intégrator Ý Responsable d'une équipe d'intégrateur / graphiste • @ActitoBelgium - - • @ActitoFrance
  3. UN PEU D'HISTOIRE ;-)

  4. RAY TOMLINSON (23 AVRIL 1941 – 5 MARS 2016)

  5. L'E-MAIL EN QUELQUES CHIFFRES 50 MILLIONS http://www.jorganiseunjeuconcours.com/marketing-2/e-mailing/tendances-emails-internautes/

  6. UN E-MAIL, POURQUOI FAIRE,...

  7. ... QUELQUES EXEMPLES DE CAS BUSINESS...

  8. E-MAIL DE CONFIRMATION

  9. E-MAIL DE CONFIRMATION DE PAIEMENT

  10. E-MAIL POUR PROPOSER DE COMMENTER

  11. EXEMPLE DE MAIL E-COMMERCE

  12. EXEMPLE DE NEWSLETTER

  13. LE FROM Ý Inclure le nom de la marque Ý

    Utiliser une adresse e-mail identi able Ý Utiliser un alias pertinent Il faut créer une vraie relation 1 to 1 info@linkedin.com -> jobs-listings@linkedin.com
  14. LE SUJET Ý Max 50 caractères Ý En rapport avec

    l'e-mail Ý Faire de l'A/B testing Ý Utilisation de picto visuel En bref : Privilégiez un sujet court et précis !
  15. LE PREHEADER

  16. LE PREHEADER EN BREF Ý Max 100 caractères Ý Résume

    le but de l'e-mail Ý Un lien miroir Ý Un lien de désinscription
  17. LE FOOTER Ý Un lien de désinscription clair et lisible

    Ý Un lien vers un centre de préférences Ý Liens sociaux
  18. LES CTA'S

  19. LES BONNES PRATIQUES Ý ğ Html vs image Ý à

    la place ou pas Ý Le CTA principal se répète généralement 3X. d'un lien
  20. UN CTA C'EST PLUS QU'UN SIMPLE CLIQUEZ ICI, IL FAUT

    JOUER SUR L'ÉMOTIONNEL,... Ý Lire plus sur le blog Ý Télécharger l'application Ý Acheter maintenant Ý Réservez maintenant Ý Comparer
  21. ċ VS Ĉ MOBILE VS DESKTOP Selon Adobe, 43% des

    e-mails sont lus sur son téléphone... ... mais selon litmus, 53%...
  22. Ĉ LE LAYOUT DESKTOP

  23. UNE LARGEUR D'E-MAIL ENTRE 500 ET 640PX

  24. HEADER IMAGE Ý Height 100 - 200 px Ý Gif

    - jpg - png Ý Image spéci que à la version desktop Ý Visuel Ý Simple Ý En rapport avec l’email
  25. BACKGROUND IMAGE SUPPORTÉ SUR CERTAINS CLIENTS MAILS

  26. ċ LE LAYOUT MOBILE

  27. UNE LARGEUR D'E-MAIL ENTRE 280 ET 320PX Et en une

    seule colonne
  28. ¸ Les calls to action de minimum 44 x 44

    px Permet de cliquer facilement avec le doigt
  29. RÈGLES DE BONNES PRATIQUES À RESPECTER Ý Augmenter la taille

    de police de caractères (font-size: 16px) Ý Augmenter la hauteur de ligne va permettre une meilleure lisibilité Ý N'ayez pas peur du scroll
  30. HEADER IMAGE Ý Height 100 – 200 px Ý Gif

    - jpg - png Ý Différent de la version desktop
  31. L'INTÉGRATION

  32. MOBILE FIRST VS RESPONSIVE (En web ok mais pas en

    mail)
  33. COMMENT GÉRONS-NOUS LE RESPONSIVE Utilisation de break point responsive en

    fonction de la cible /* iphone 4 + 5 + 5 s */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { contenu de la media queries } /* iphone 6 */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { contenu de la media queries } /* iphone 6 plus */ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) { contenu de la media queries }
  34. DÉFINIR LE BON DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

    Transitional// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  35. DÉFINIR LE BON ENCODING <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  36. DÉFINIR LE VIEWPORT DE L'EMAIL POUR GÉRER CORRECTEMENT LE RESPONSIVE

    <meta title="viewport" content="width=device-width, initial-scale=1.0" />
  37. DÉFINIR DES BLOCS FONCTIONNELS DANS DES TABLE DE 100 %

    <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor= <tr> <td valign="top" align="center"> <table cellpadding="0" cellspacing="0" border="0" width="600" <tr> <td width="600" align="left" valign="top"> Contenu de la ligne </td> </tr> </table> </td> </tr> </table>
  38. QUELQUES AUTRES TRUCS ... Ý Dé nir les styles directement

    sur les TD Ý Dé nir tous les liens avec target="_blank" Ý Fixer la largeur des images Ý Dé nir un texte alternatif sur les images Ý Utiliser des images 2x plus grandes ou en 96dpi.
  39. A NE JAMAIS OU PAS UTILISER Ý L'utilisation de javascript

    Ý L'utilisation de feuilles de styles externes Ý L'utilisation de formulaire Ý L'utilisation de Flash Ý L'utilisation de sons
  40. DÉFINIR LE BOUTON EN HTML En fonction du type d'e-mail,

    si l'e-mail est un template ou pas, nous utilisons des types de boutons différents
  41. LE TESTING DE L'E-MAIL

  42. LES POINTS D'ATTENTION... Ý Le rendu, c'est l'image de marque

    de l'entreprise Ý L'orthographe Ý Le phrasé Ý Les visuels utilisés Ý L'importance du ratio contenu vs images Ý ...
  43. UTILISER DES OUTILS DE RENDERING

  44. TRUCS EN PLUS ... Ý Faites des tests réels sur

    les différentes provider Ý Tester sur de vraies machines,... Ý Relire ces e-mails de tests, les parcourir plusieurs fois
  45. L'ENVOI ET LES ANALYSES Ý Utilisation d'un outil professionnel Ý

    Dans la mesure du possible ACTITO Ý Analyser vos résultats Ý Posez-vous les bonnes questions
  46. PETITS POINTS DÉLIVERABILITÉ On average, 8 out of 10 people

    will read your headline copy, but only 2 out 10 will read the rest. Brian Clark, Copyblogger Content is King but engagement is Queen, and the lady rules the house! Mari Smith, Mari Smith " " " " http://www.mannixmarketing.com/blog/internet-marketing-quotes/
  47. QUESTIONS / RÉPONSES VOUS ÊTES FRONT-END DEV, ENVIE DE NOUVEAU

    DÉFI EN BELGIQUE, CONTACTEZ-NOUS... HR@ACTITO.COM • @ActitoBelgium - - • @ActitoFrance