Adaptez vos campagnes emailing aux supports mobiles. Quelles sont les bonnes pratiques pour réaliser des campagnes emailing efficaces sur supports mobiles ? Comment gérer le Responsive Design via le Content Designer MailPerformance ? (Exemple de code HTML), Exemples concrets : quels sont les Do's & Don'ts à respecter ? Nous vous livrerons les clés pour adapter efficacement vos emailings aux supports mobiles.

1. Emailing & Responsive Design
Best practices

2. Amélie Dauvin
Responsable Projets Clients
Sarah Pasturel
Account Manager
2

3. AGENDA
Usages et emailing
Un peu de technique
Optimisez votre contenu
Cas pratiques
Pour conclure
3

4. Usages et emailing
4

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

6. SITUATION PROPICES A LA CONSULTATION
Etude Email Marketing Attitude BtoC - 2015, SNCD
6

7. MOMENTS DE CONSULTATION
Etude Email Marketing Attitude BtoC - 2015, SNCD
7

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

9. SUPPORT PREFERE
Etude Email Marketing Attitude BtoC - 2015, SNCD
9

10. REACTIVITE SUR MOBILE
Le baromètre de l’e-mail sur mobiles et tablettes en France, Mobile Marketing association, 2015
10

11. RESPONSIVE DESIGN
Capacité d’un email à s’adapter
aux différents supports de lecture
11

12. RESPONSIVE DESIGN : 3 METHODES
L’email optimisé
Un contenu unique
12

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

14. L’email fluide
Le contenu prend la dimension de l’écran
RESPONSIVE DESIGN : 3 METHODES
14

15. EMAIL FLUIDE
• Adapté à la grande majorité des
mobiles
• Faible qualité des images
redimensionnées
15

16. L’email adaptatif
Le contenu est différent sur ordinateur et mobile
RESPONSIVE DESIGN : 3 METHODES
16

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

18. Un peu de technique
18

19. LA MAQUETTE
19

20. LA MAQUETTE
20

21. L’INTEGRATION HTML
21

22. L’INTEGRATION HTML
22

23. LES TECHNIQUES : REDIMENSIONNER
CSS :
HTML :
23

24. LES TECHNIQUES : REDIMENSIONNER
24

25. LES TECHNIQUES : UN BLOC SOUS L’AUTRE
CSS :
HTML :
25

26. LES TECHNIQUES : UN BLOC SOUS L’AUTRE
26

27. LES TECHNIQUES : AFFICHER / MASQUER
CSS :
HTML :
27

28. LES TECHNIQUES : AFFICHER / MASQUER
28

29. LES TECHNIQUES : REMPLACER
CSS :
HTML :
29

30. LES TECHNIQUES : REMPLACER
30

31. Optimisez votre contenu
31

32. OPTIMISER LES EMAILS SUR MOBILE
32

33. ENTÊTE
Pre-header
Mettre en avant une information supplémentaire
Objet
30 caractères max
Personnalisation
33

34. PRESENTATION GENERALE
1 seule colonne
Largeur : 320px
L’essentiels en 600px de haut
34

35. CONTENU
14px min pour le corps du texte
22px min pour les titres
Colonnes larges
Petits blocs de texte
Contenu simplifié
35

36. ET LES IMAGES ?
Webinar jeudi 12 mars 10h30 - Les clés de
l’emailing Responsive Design en 2015
Moins de 20ko
Alt
En quantité raisonnable
36

37. CALL TO ACTION
Visibilité, contrastes
Texte des liens
Cohérence avec le
parcours de navigation
L'entreprenariat, un
sport de l'extrême
37

38. CALL TO ACTION
Liens reconnaissables
44*44px
15px vide autour Magical ice festival
38

39. CALL TO ACTION
39

40. Cas pratiques
40

41. ZALANDO
41

42. NATIXIS
42

43. QUELLE ENERGIE
43

44. IKKS
44

45. EKORNES
45

46. SNCF
46

47. DARJEELING
47

48. TELECHARGEZ NOTRE LIVRE BLANC
Retrouvez tous les conseils
Responsive Design
dans notre livre blanc
www.np6.fr/livre-blanc
48

49. Pour conclure
49

50. POUR CONCLURE
Contraintes
Investissement
Tester, tester et tester !
Stratégie globale
Cohérence
Usages
50

51. ?
VOUS SOUHAITEZ EN SAVOIR PLUS
http://www.np6.fr/demande-de-contact/

52. Workshop #3
Data Marketing
Démo : simulateur en
ligne pour améliorer
la satisfaction client
Workshop #3
Digital Marketing
Délivrabilité :
l’art du brand
management
en email marketing
Auditorium New York / Hambourg
Workshop #3
Développeur
MailPerformance :
personnalisation avancée
(Javascript) de contenus
Montréal
52