Télécharger pour lire hors ligne
Téléchargé parSébastien Lejeune
L'e mail sous toutes ses formes
Le document présente une synthèse des meilleures pratiques pour l'e-mail marketing, en abordant des éléments techniques comme les layouts responsive, l'importance du contenu visuel et les appels à l'action. Il souligne également des aspects cruciaux tels que le testing, la délivrabilité et les attentes des lecteurs concernant les sujets des e-mails. Enfin, il fournit des recommandations spécifiques sur le design et l'intégration technique des e-mails.
L'e mail sous toutes ses formes
- 1. L'E-MAIL SOUS TOUTESSES FORMES •Sébastien Lejeune @seblejeune @ACTITOHQ • @seblejeune
- 2. MON CHALLENGE ? RÉSUMER10 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.
- 4. RAY TOMLINSON (23 AVRIL1941 – 5 MARS 2016)
- 5. L'E-MAIL EN QUELQUESCHIFFRES 50 MILLIONS http://www.jorganiseunjeuconcours.com/marketing-2/e-mailing/tendances-emails-internautes/
- 6. UN E-MAIL, POURQUOIFAIRE,...
- 7. ... QUELQUES EXEMPLESDE CAS BUSINESS...
- 8.
- 9. E-MAIL DE CONFIRMATIONDE PAIEMENT
- 10. E-MAIL POUR PROPOSERDE COMMENTER
- 11. EXEMPLE DE MAILE-COMMERCE
- 12.
- 13. LE FROM Inclure lenom 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 50caractè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.
- 16. LE PREHEADER EN BREF Max100 caractères Résume le but de l'e-mail Un lien miroir Un lien de désinscription
- 17. LE FOOTER Un liende désinscription clair et lisible Un lien vers un centre de préférences Liens sociaux
- 18.
- 19. LES BONNES PRATIQUES Htmlvs image à la place ou pas Le CTA principal se répète généralement 3X. d'un lien
- 20. UN CTA C'EST PLUSQU'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 SelonAdobe, 43% des e-mails sont lus sur son téléphone... ... mais selon litmus, 53%...
- 22.
- 23. UNE LARGEUR D'E-MAILENTRE 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.
- 27. UNE LARGEUR D'E-MAIL ENTRE280 ET 320PX Et en une seule colonne
- 28. Les calls toaction de minimum 44 x 44 px Permet de cliquer facilement avec le doigt
- 29. RÈGLES DE BONNESPRATIQUES À 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.
- 32. MOBILE FIRST VSRESPONSIVE (En web ok mais pas en mail)
- 33. COMMENT GÉRONS-NOUS LERESPONSIVE 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 BONDOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 35. DÉFINIR LE BONENCODING <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- 36. DÉFINIR LE VIEWPORTDE L'EMAIL POUR GÉRER CORRECTEMENT LE RESPONSIVE <meta title="viewport" content="width=device-width, initial-scale=1.0" />
- 37. DÉFINIR DES BLOCSFONCTIONNELS 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 JAMAISOU 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 BOUTONEN 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 DEL'E-MAIL
- 42. LES POINTS D'ATTENTION... Lerendu, 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 OUTILSDE 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 LESANALYSES 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É Onaverage, 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