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

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/

... QUELQUES EXEMPLES DE CAS
BUSINESS...

E-MAIL DE CONFIRMATION DE PAIEMENT

E-MAIL POUR PROPOSER DE COMMENTER

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

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
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 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%...

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

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

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
}
/* iphone 6 plus */ @media only screen
}

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

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...
HR@ACTITO.COM
@ActitoBelgium - - @ActitoFrance

L'e mail sous toutes ses formes

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à L'e mail sous toutes ses formes

Similaire à L'e mail sous toutes ses formes (20)

L'e mail sous toutes ses formes