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.

Sébastien Lejeune

June 03, 2016
Tweet

Other Decks in Programming

Transcript

  1. 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
  2. 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 [email protected] -> [email protected]
  3. 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 !
  4. LE PREHEADER EN BREF Ý Max 100 caractères Ý Résume

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

    Ý Un lien vers un centre de préférences Ý Liens sociaux
  6. LES BONNES PRATIQUES Ý ğ Html vs image Ý à

    la place ou pas Ý Le CTA principal se répète généralement 3X. d'un lien
  7. 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
  8. ċ VS Ĉ MOBILE VS DESKTOP Selon Adobe, 43% des

    e-mails sont lus sur son téléphone... ... mais selon litmus, 53%...
  9. HEADER IMAGE Ý Height 100 - 200 px Ý Gif

    - jpg - png Ý Image spéci que à la version desktop Ý Visuel Ý Simple Ý En rapport avec l’email
  10. ¸ Les calls to action de minimum 44 x 44

    px Permet de cliquer facilement avec le doigt
  11. 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
  12. HEADER IMAGE Ý Height 100 – 200 px Ý Gif

    - jpg - png Ý Différent de la version desktop
  13. 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 }
  14. 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">
  15. DÉFINIR LE VIEWPORT DE L'EMAIL POUR GÉRER CORRECTEMENT LE RESPONSIVE

    <meta title="viewport" content="width=device-width, initial-scale=1.0" />
  16. 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>
  17. 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.
  18. 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
  19. 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
  20. 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 Ý ...
  21. 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
  22. 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
  23. 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/
  24. QUESTIONS / RÉPONSES VOUS ÊTES FRONT-END DEV, ENVIE DE NOUVEAU

    DÉFI EN BELGIQUE, CONTACTEZ-NOUS... [email protected] • @ActitoBelgium - - • @ActitoFrance