Embed Size (px)
Citation preview
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 MILLIONShttp://www.jorganiseunjeuconcours.com/marketing-2/e-mailing/tendances-emails-internautes/
UN E-MAIL, POURQUOI FAIRE,...
... QUELQUES EXEMPLES DE CASBUSINESS...
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
ċ V S Ĉ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 CERTAINSCLIENTS MAILS
ċLE LAYOUT MOBILE
UNE LARGEUR D'E-MAILENTRE 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 unemeilleure 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 dela 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ÉRERCORRECTEMENT LE RESPONSIVE
<meta title="viewport" content="width=device-width, initial-scale=1.0" />
DÉFINIR DES BLOCS FONCTIONNELS DANS DESTABLE 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...
� @ActitoBelgium - - � @ActitoFrance
