L'E-MAIL SOUS TOUTES SES FORMES
•Sébastien Lejeune @seblejeune
@ACTITOHQ • @seblejeune
MON CHALLENGE ?
RÉSUMER 10 ANS D'EXPÉRIENCE EN 20 MINUTES !
ET PAS EN 10 !
Senior Intégrator
Responsable d'une équipe d'in...
UN PEU D'HISTOIRE ;-)
RAY TOMLINSON
(23 AVRIL 1941 – 5 MARS 2016)
L'E-MAIL EN QUELQUES CHIFFRES
50 MILLIONS
http://www.jorganiseunjeuconcours.com/marketing-2/e-mailing/tendances-emails-int...
UN E-MAIL, POURQUOI FAIRE,...
... QUELQUES EXEMPLES DE CAS
BUSINESS...
E-MAIL DE CONFIRMATION
E-MAIL DE CONFIRMATION DE PAIEMENT
E-MAIL POUR PROPOSER DE COMMENTER
EXEMPLE DE MAIL E-COMMERCE
EXEMPLE DE NEWSLETTER
LE FROM
Inclure le nom de la marque
Utiliser une adresse e-mail identi able
Utiliser un alias pertinent
Il faut créer une ...
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égi...
LE PREHEADER
LE PREHEADER
EN BREF
Max 100 caractères
Résume le but de l'e-mail
Un lien miroir
Un lien de désinscription
LE FOOTER
Un lien de désinscription clair et lisible
Un lien vers un centre de préférences
Liens sociaux
LES CTA'S
LES BONNES PRATIQUES
Html vs image
à la place ou pas
Le CTA principal se répète généralement 3X.
d'un lien
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'applica...
VS
MOBILE VS DESKTOP
Selon Adobe, 43%
des e-mails sont lus sur son téléphone...
... mais selon litmus, 53%...
LE LAYOUT DESKTOP
UNE LARGEUR D'E-MAIL ENTRE 500 ET 640PX
HEADER IMAGE
Height 100 - 200 px
Gif - jpg - png
Image spéci que à la version desktop
Visuel
Simple
En rapport avec l’email
BACKGROUND IMAGE SUPPORTÉ SUR CERTAINS
CLIENTS MAILS
LE LAYOUT MOBILE
UNE LARGEUR D'E-MAIL
ENTRE 280 ET 320PX
Et en une seule colonne
Les calls to action de minimum 44 x 44 px
Permet de cliquer facilement avec le doigt
RÈGLES DE BONNES PRATIQUES À RESPECTER
Augmenter la taille de police de caractères (font-size:
16px)
Augmenter la hauteur ...
HEADER IMAGE
Height 100 – 200 px
Gif - jpg - png
Différent de la version desktop
L'INTÉGRATION
MOBILE FIRST VS RESPONSIVE
(En web ok mais pas en mail)
COMMENT GÉRONS-NOUS LE RESPONSIVE
Utilisation de break point responsive en fonction de
la cible
/* iphone 4 + 5 + 5 s */ @...
DÉFINIR LE BON DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xh...
DÉFINIR LE BON ENCODING
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
DÉFINIR LE VIEWPORT DE L'EMAIL POUR GÉRER
CORRECTEMENT LE RESPONSIVE
<meta title="viewport" content="width=device-width, i...
DÉFINIR DES BLOCS FONCTIONNELS DANS DES
TABLE DE 100 %
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgco...
QUELQUES AUTRES TRUCS ...
Dé nir les styles directement sur les TD
Dé nir tous les liens avec target="_blank"
Fixer la lar...
A NE JAMAIS OU PAS UTILISER
L'utilisation de javascript
L'utilisation de feuilles de styles externes
L'utilisation de form...
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 bo...
LE TESTING DE L'E-MAIL
LES POINTS D'ATTENTION...
Le rendu, c'est l'image de marque de l'entreprise
L'orthographe
Le phrasé
Les visuels utilisés
L...
UTILISER DES OUTILS DE RENDERING
TRUCS EN PLUS ...
Faites des tests réels sur les différentes provider
Tester sur de vraies machines,...
Relire ces e-mails...
L'ENVOI ET LES ANALYSES
Utilisation d'un outil professionnel
Dans la mesure du possible ACTITO
Analyser vos résultats
Pose...
PETITS POINTS DÉLIVERABILITÉ
On average, 8 out of 10 people will read your headline
copy, but only 2 out 10 will read the ...
QUESTIONS / RÉPONSES
VOUS ÊTES FRONT-END DEV,
ENVIE DE NOUVEAU DÉFI EN BELGIQUE,
CONTACTEZ-NOUS...
HR@ACTITO.COM
@ActitoBe...
Prochain SlideShare
Chargement dans…5
×

L'e mail sous toutes ses formes

521 vues

Publié le

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.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
521
Sur SlideShare
0
Issues des intégrations
0
Intégrations
110
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

L'e mail sous toutes ses formes

  1. 1. L'E-MAIL SOUS TOUTES SES FORMES •Sébastien Lejeune @seblejeune @ACTITOHQ • @seblejeune
  2. 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. 3. UN PEU D'HISTOIRE ;-)
  4. 4. RAY TOMLINSON (23 AVRIL 1941 – 5 MARS 2016)
  5. 5. L'E-MAIL EN QUELQUES CHIFFRES 50 MILLIONS http://www.jorganiseunjeuconcours.com/marketing-2/e-mailing/tendances-emails-internautes/
  6. 6. UN E-MAIL, POURQUOI FAIRE,...
  7. 7. ... QUELQUES EXEMPLES DE CAS BUSINESS...
  8. 8. E-MAIL DE CONFIRMATION
  9. 9. E-MAIL DE CONFIRMATION DE PAIEMENT
  10. 10. E-MAIL POUR PROPOSER DE COMMENTER
  11. 11. EXEMPLE DE MAIL E-COMMERCE
  12. 12. EXEMPLE DE NEWSLETTER
  13. 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. 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. 15. LE PREHEADER
  16. 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. 17. LE FOOTER Un lien de désinscription clair et lisible Un lien vers un centre de préférences Liens sociaux
  18. 18. LES CTA'S
  19. 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. 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. 21. VS MOBILE VS DESKTOP Selon Adobe, 43% des e-mails sont lus sur son téléphone... ... mais selon litmus, 53%...
  22. 22. LE LAYOUT DESKTOP
  23. 23. UNE LARGEUR D'E-MAIL ENTRE 500 ET 640PX
  24. 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. 25. BACKGROUND IMAGE SUPPORTÉ SUR CERTAINS CLIENTS MAILS
  26. 26. LE LAYOUT MOBILE
  27. 27. UNE LARGEUR D'E-MAIL ENTRE 280 ET 320PX Et en une seule colonne
  28. 28. Les calls to action de minimum 44 x 44 px Permet de cliquer facilement avec le doigt
  29. 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. 30. HEADER IMAGE Height 100 – 200 px Gif - jpg - png Différent de la version desktop
  31. 31. L'INTÉGRATION
  32. 32. MOBILE FIRST VS RESPONSIVE (En web ok mais pas en mail)
  33. 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. 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. 35. DÉFINIR LE BON ENCODING <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  36. 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. 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. 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. 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. 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. 41. LE TESTING DE L'E-MAIL
  42. 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. 43. UTILISER DES OUTILS DE RENDERING
  44. 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. 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. 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. 47. QUESTIONS / RÉPONSES VOUS ÊTES FRONT-END DEV, ENVIE DE NOUVEAU DÉFI EN BELGIQUE, CONTACTEZ-NOUS... HR@ACTITO.COM @ActitoBelgium  -   -  @ActitoFrance

×