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.
1. L'E-MAIL SOUS TOUTES SES FORMES
•Sébastien Lejeune @seblejeune
@ACTITOHQ • @seblejeune
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
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. 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 !
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. 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. VS
MOBILE VS DESKTOP
Selon Adobe, 43%
des e-mails sont lus sur son téléphone...
... mais selon litmus, 53%...
28. Les calls to action de minimum 44 x 44 px
Permet de cliquer facilement avec le doigt
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
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. 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. DÉFINIR LE BON ENCODING
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
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. 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. 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 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. 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
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
...
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 LES ANALYSES
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É
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. QUESTIONS / RÉPONSES
VOUS ÊTES FRONT-END DEV,
ENVIE DE NOUVEAU DÉFI EN BELGIQUE,
CONTACTEZ-NOUS...
HR@ACTITO.COM
@ActitoBelgium - - @ActitoFrance