Emailing & Responsive Design
Best practices
Amélie Dauvin
Responsable Projets Clients
Sarah Pasturel
Account Manager
2
AGENDA
Usages et emailing
Un peu de technique
Optimisez votre contenu
Cas pratiques
Pour 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
SNC...
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...
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...
L’email fluide
Le 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 adaptatif
Le 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 recon...
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 / MASQUER
CSS :
HTML :
27
LES TECHNIQUES : AFFICHER / MASQUER
28
LES TECHNIQUES : REMPLACER
CSS :
HTML :
29
LES TECHNIQUES : REMPLACER
30
Optimisez votre contenu
31
OPTIMISER LES EMAILS SUR MOBILE
32
ENTÊTE
Pre-header
Mettre en avant une information supplémentaire
Objet
30 caractères max
Personnalisation
33
PRESENTATION GENERALE
1 seule colonne
Largeur : 320px
L’essentiels en 600px de haut
34
CONTENU
14px min pour le corps du texte
22px min pour les titres
Colonnes larges
Petits blocs de texte
Contenu simplifié
35
ET LES IMAGES ?
Webinar jeudi 12 mars 10h30 - Les clés de
l’emailing Responsive Design en 2015
Moins de 20ko
Alt
En quanti...
CALL TO ACTION
Visibilité, contrastes
Texte des liens
Cohérence avec le
parcours de navigation
L'entreprenariat, un
sport ...
CALL TO ACTION
Liens reconnaissables
44*44px
15px 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
...
Pour conclure
49
POUR CONCLURE
Contraintes
Investissement
Tester, tester et tester !
Stratégie globale
Cohérence
Usages
50
?
VOUS SOUHAITEZ EN SAVOIR PLUS
http://www.np6.fr/demande-de-contact/
Workshop #3
Data Marketing
Démo : simulateur en
ligne pour améliorer
la satisfaction client
Workshop #3
Digital Marketing
...
Prochain SlideShare
Chargement dans…5
×

Best practices : comment optimiser ses Emailings en Responsive Design ?

460 vues

Publié le

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.

Publié dans : Marketing
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
460
Sur SlideShare
0
Issues des intégrations
0
Intégrations
40
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Best practices : comment optimiser ses Emailings en Responsive Design ?

  1. 1. Emailing & Responsive Design Best practices
  2. 2. Amélie Dauvin Responsable Projets Clients Sarah Pasturel Account Manager 2
  3. 3. AGENDA Usages et emailing Un peu de technique Optimisez votre contenu Cas pratiques Pour conclure 3
  4. 4. Usages et emailing 4
  5. 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. 6. SITUATION PROPICES A LA CONSULTATION Etude Email Marketing Attitude BtoC - 2015, SNCD 6
  7. 7. MOMENTS DE CONSULTATION Etude Email Marketing Attitude BtoC - 2015, SNCD 7
  8. 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. 9. SUPPORT PREFERE Etude Email Marketing Attitude BtoC - 2015, SNCD 9
  10. 10. REACTIVITE SUR MOBILE Le baromètre de l’e-mail sur mobiles et tablettes en France, Mobile Marketing association, 2015 10
  11. 11. RESPONSIVE DESIGN Capacité d’un email à s’adapter aux différents supports de lecture 11
  12. 12. RESPONSIVE DESIGN : 3 METHODES L’email optimisé Un contenu unique 12
  13. 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. 14. L’email fluide Le contenu prend la dimension de l’écran RESPONSIVE DESIGN : 3 METHODES 14
  15. 15. EMAIL FLUIDE • Adapté à la grande majorité des mobiles • Faible qualité des images redimensionnées 15
  16. 16. L’email adaptatif Le contenu est différent sur ordinateur et mobile RESPONSIVE DESIGN : 3 METHODES 16
  17. 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. 18. Un peu de technique 18
  19. 19. LA MAQUETTE 19
  20. 20. LA MAQUETTE 20
  21. 21. L’INTEGRATION HTML 21
  22. 22. L’INTEGRATION HTML 22
  23. 23. LES TECHNIQUES : REDIMENSIONNER CSS : HTML : 23
  24. 24. LES TECHNIQUES : REDIMENSIONNER 24
  25. 25. LES TECHNIQUES : UN BLOC SOUS L’AUTRE CSS : HTML : 25
  26. 26. LES TECHNIQUES : UN BLOC SOUS L’AUTRE 26
  27. 27. LES TECHNIQUES : AFFICHER / MASQUER CSS : HTML : 27
  28. 28. LES TECHNIQUES : AFFICHER / MASQUER 28
  29. 29. LES TECHNIQUES : REMPLACER CSS : HTML : 29
  30. 30. LES TECHNIQUES : REMPLACER 30
  31. 31. Optimisez votre contenu 31
  32. 32. OPTIMISER LES EMAILS SUR MOBILE 32
  33. 33. ENTÊTE Pre-header Mettre en avant une information supplémentaire Objet 30 caractères max Personnalisation 33
  34. 34. PRESENTATION GENERALE 1 seule colonne Largeur : 320px L’essentiels en 600px de haut 34
  35. 35. CONTENU 14px min pour le corps du texte 22px min pour les titres Colonnes larges Petits blocs de texte Contenu simplifié 35
  36. 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. 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. 38. CALL TO ACTION Liens reconnaissables 44*44px 15px vide autour Magical ice festival 38
  39. 39. CALL TO ACTION 39
  40. 40. Cas pratiques 40
  41. 41. ZALANDO 41
  42. 42. NATIXIS 42
  43. 43. QUELLE ENERGIE 43
  44. 44. IKKS 44
  45. 45. EKORNES 45
  46. 46. SNCF 46
  47. 47. DARJEELING 47
  48. 48. TELECHARGEZ NOTRE LIVRE BLANC Retrouvez tous les conseils Responsive Design dans notre livre blanc www.np6.fr/livre-blanc 48
  49. 49. Pour conclure 49
  50. 50. POUR CONCLURE Contraintes Investissement Tester, tester et tester ! Stratégie globale Cohérence Usages 50
  51. 51. ? VOUS SOUHAITEZ EN SAVOIR PLUS http://www.np6.fr/demande-de-contact/
  52. 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

×