L'e-mail sous toutes ses formes

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'intégrateur / graphiste @ActitoBelgium - - @ActitoFrance

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-internautes/

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 vraie relation 1 to 1 [email protected] -> [email protected]

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 !

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'application Ý Acheter maintenant Ý Réservez maintenant Ý Comparer

ċ 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 de ligne va permettre une meilleure lisibilité Ý N'ayez pas peur du scroll

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 */ @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 }

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">

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, initial-scale=1.0" />

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>

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.

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

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

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'importance du ratio contenu vs images Ý ...

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 de tests, les parcourir plusieurs fois

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

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/

QUESTIONS / RÉPONSES VOUS ÊTES FRONT-END DEV, ENVIE DE NOUVEAU
DÉFI EN BELGIQUE, CONTACTEZ-NOUS... [email protected] @ActitoBelgium - - @ActitoFrance

L'e-mail sous toutes ses formes

L'e-mail sous toutes ses formes

Other Decks in Programming

Featured

Transcript