Post on 20-Jan-2017
DIGI
TAL M
ARKE
TING
Emailing & Responsive DesignBest practices
Amélie DauvinResponsable Projets Clients
Sarah PasturelAccount Manager
2
AGENDA
Usages et emailingUn peu de techniqueOptimisez votre contenuCas pratiquesPour conclure
3
Usages et emailing
4
TOUS MOBILES ?
La France compte désormais plus de 43,8 millions d’internautes qui se connectent à internet à partir de
SNCD, 2015
99 %54% 35%
5
Médiamétrie, 2015
SITUATION PROPICES A LA CONSULTATION
Etude Email Marketing Attitude BtoC - 2015, SNCD
6
MOMENTS DE CONSULTATION
Etude Email Marketing Attitude BtoC - 2015, SNCD
7
TERMINAL DE CONSULTATION
Terminal privilégié quel que soit le moment de la journée
Davantage utilisé en journée ou le week-end.
Plus utilisée le soir et le week-end
Etude Email Marketing Attitude BtoC - 2015, SNCD
81% utilisent l’ordinateur pour consulter leurs emails à la maison, le soir.
80% l’utilisent pour consulter leurs emails le week-end.
25% l’utilisent le matin au réveil pour consulter leurs emails.
34% l’utilisent en journée pour consulter leurs emails.
14% l’utilisent à la maison le soir pour consulter leurs emails.
18% l’utilisent pour consulter leurs emails le week-end.
8
SUPPORT PREFERE
Etude Email Marketing Attitude BtoC - 2015, SNCD
9
REACTIVITE SUR MOBILE
Le baromètre de l’e-mail sur mobiles et tablettes en France, Mobile Marketing association, 2015
10
RESPONSIVE DESIGN
Capacité d’un email à s’adapter aux différents supports de lecture
11
RESPONSIVE DESIGN : 3 METHODES
L’email optimiséUn contenu unique
12
EMAIL OPTMISE
• Adapté pour tout type de mobile• Facile à mettre en œuvre / Peu
coûteux
• Faible liberté créative• Rendu pauvre sur grand écran
13
L’email fluideLe contenu prend la dimension de l’écran
RESPONSIVE DESIGN : 3 METHODES
14
EMAIL FLUIDE
• Adapté à la grande majorité des mobiles
• Faible qualité des images redimensionnées
15
L’email adaptatifLe contenu est différent sur ordinateur et mobile
RESPONSIVE DESIGN : 3 METHODES
16
EMAIL ADAPTATIF
• Présenter des versions à la fois optimisées grand écran et mobile• Très large champ créatif
• Pas reconnu par toutes les messageries
• Nécessite du temps et de la technique
17
Un peu de technique
18
LA MAQUETTE
19
LA MAQUETTE
20
L’INTEGRATION HTML
21
L’INTEGRATION HTML
22
LES TECHNIQUES : REDIMENSIONNER
CSS :
HTML :
23
LES TECHNIQUES : REDIMENSIONNER
24
LES TECHNIQUES : UN BLOC SOUS L’AUTRE
CSS :
HTML :
25
LES TECHNIQUES : UN BLOC SOUS L’AUTRE
26
LES TECHNIQUES : AFFICHER / MASQUERCSS :
HTML :
27
LES TECHNIQUES : AFFICHER / MASQUER
28
LES TECHNIQUES : REMPLACERCSS :
HTML :
29
LES TECHNIQUES : REMPLACER
30
Optimisez votre contenu
31
OPTIMISER LES EMAILS SUR MOBILE
32
ENTÊTEPre-header
Mettre en avant une information supplémentaireObjet
30 caractères maxPersonnalisation
33
PRESENTATION GENERALE1 seule colonneLargeur : 320pxL’essentiels en 600px de haut
34
CONTENU14px min pour le corps du texte
22px min pour les titresColonnes largesPetits blocs de texteContenu simplifié
35
ET LES IMAGES ?
Webinar jeudi 12 mars 10h30 - Les clés de l’emailing Responsive Design en 2015
Moins de 20koAlt En quantité raisonnable
36
CALL TO ACTION
Visibilité, contrastes Texte des liensCohérence avec le parcours de navigation
L'entreprenariat, un sport de l'extrême
37
CALL TO ACTIONLiens reconnaissables44*44px15px vide autour Magical ice festival
38
CALL TO ACTION
39
Cas pratiques
40
ZALANDO
41
NATIXIS
42
QUELLE ENERGIE
43
IKKS
44
EKORNES
45
SNCF
46
DARJEELING
47
TELECHARGEZ NOTRE LIVRE BLANC
Retrouvez tous les conseils Responsive Design dans notre livre blanc
www.np6.fr/livre-blanc
48
Pour conclure
49
POUR CONCLURE
ContraintesInvestissementTester, tester et tester ! Stratégie globaleCohérenceUsages
50
?VOUS SOUHAITEZ EN SAVOIR PLUS
http://www.np6.fr/demande-de-contact/
Workshop #3Data Marketing
Démo : simulateur enligne pour améliorerla satisfaction client
Workshop #3Digital Marketing
Délivrabilité :l’art du brand management
en email marketing
Auditorium New York / Hambourg
Workshop #3Développeur
MailPerformance :personnalisation
avancée (Javascript) de contenus
Montréal
52