1. SlideCare #1
EMAILING
RESPONSIVE
Augmentez les performances de vos emailings
en les adaptant à la consultation sur mobile !
2. If you don’t have a mobile strategy,
you don’t have a future strategy.
Eric Schmidt, Google, Executive Chairman
2
3. Pourquoi optimiser vos emailings
sur mobile ?
Comme 50% de la population, vous
lisez vos emails depuis votre mobile.
Vous avez donc dû vous rendre compte à
quel point cette tâche peut s’avérer
désagréable
4. En 2013, 42%
des emails sont
90%
ouverts et lus sur
un mobile
des mobinautes 90% des emailings ne sont
pas adaptés à la taille de
lisent leurs emails
l’écran et seulement 14%
sur leurs devices
des annonceurs adaptent leurs
mobiles emailings à tous les écrans.
Sources : Litmus –”Email Analytics” (March 2013), eConsultancy “Conversion Rate Optimization Report”, Adobe “2013 Digital Publishing Report: Retail Apps & Buying Habits”
5. S’adapter aux supports de lecture des cibles permet
d’optimiser le ROI et de
donc
favoriser une action lors de la lecture
de l’emailing
6. Stratégie multi-screen
La famille s’agrandit …
- 7,6% + 98% + 49%
Evolution des ventes en France en 2012
Source : comscore 2013
7. Objectifs
Offrir (enfin) une expérience adaptée au
support de votre cible
Augmenter le ROI de vos campagnes
d’emailings
Proposer une nouvelle expérience à vos
utilisateurs
9. Comment améliorer l’ergonomie de son email ?
Rapidité
74% des utilisateurs mobiles
quitteraient un site si celui-ci n’est pas
totalement chargé en 5 secondes.
Même avec une connexion en Edge, votre email doit se
charger vite. Pensez donc à mettre des liens de textes
cliquables, en remplacement d’images non-chargées.
10. Simplicité
Soignez l’ergonomie de votre email
afin de rendre la navigation accessible
et l’expérience utilisateur optimale.
Placez un visuel attractif et engageant. Utilisez du texte de
14 px minimum placé dans une seule colonne comprise
entre 500 à 600 px.
11. Comment améliorer l’ergonomie de son email ?
Conversion
Intégrez des call-to-action visibles et
cohérents pour optimiser le ROI de
vos emails.
Les éléments cliquables doivent être visuellement
identifiables. Un bouton doit faire minimum 50 x 50 px
pour être cliquable.
12. Twitter : un cas d’école
Quel email
préférez-vous lire ?
À gauche, une version non adaptée
mobile. A droite, le même emailing en
responsive.
14. Un emailing existe en deux formats
Texte brut : Ce format est HTML : Permet de réaliser
parfaitement lu par tous les des emails graphiques mais
clients mail, mais aucune c’est la source du problème
mise en page possible (pas car chaque client mail
d’images, pas de CSS, pas interprète le code HTML à
de design) sa façon
Par conséquent, maitriser la technique
des Media Queries en CSS rendre
compatible votre email sur mobile
15. Les Media-Queries, permettent
d'adapter la restitution de sa page
html à différentes caractéristiques
des terminaux. Il gèrent :
93%
Le type de média des mobiles vendus
La taille de l'écran gèrent les media
La taille de la fenêtre queries via les clients
La résolution mail natifs
Le nombre de couleurs
L'orientation
16. La media queries « only screen » est une condition CSS qui est utilisée pour
spécifier une visualisation écran. En d’autres termes, cette condition ne
concerne pas une imprimante, mais uniquement un écran. A cela s’ajoute une
propriété de « taille » maximum qui implique qu’elle ne concerne que les
écrans qui ont une taille inférieure à celle spécifiée.
Code CSS3
@media only screen and (max-width: 480px) /*condition @media : concerne un écran qui ne doit pas dépasser 480px de large*/
{
table[class=1], td[class=1], img[class=1] { /*on applique aux table, td et images de la class 1 une largeur de 135px*/
width:135px !important;
}
img{ /*on applique à toutes les images une hauteur automatique en fonction de la largeur*/
height:auto;
}
} /*on ferme la media queries*/
17. Le mot de la fin
Gardez à l’esprit que l’emailing responsive
est une façon de faire évoluer le code
HTML et peut s’intégrer facilement dans
votre outil de CRM.
Disposer d’une stratégie d’emailing
responsive, c’est activer un levier de
croissance pour votre marque.
Pour être optimale, cette innovation doit
s’inscrire dans la stratégie mobile de votre
marque.
19. Care
8 rue Saint Augustin 75002 Paris
Tél. : 01 40 40 60 60
www.agencecare.com
Vos contacts :
Raphaël Journé, rjourne@agencecare.com
Nicolas Petremann, npetremann@agencecare.com
19