Marketing
Smart Cloud
Emailings Design & Impactants
Best Practices !
Amélie Dauvin
Responsable Projets Clients
ad@np6.com
2
Carte d’identité
3
i
SPECIALISTE LEADER SECTEURS EFFECTIFS
DIGITAL CA
15 M€
INNOVANTDATA
EUROPEEN
QUALITE
SaaS Marketing :...
Expertise cross-secteurs
E-Commerce / Distribution Service Publique Loisirs / Tourisme
Banque / Assurance
Medias / Culture...
Salon e-commerce 2015
MAR
22
SEPT
1- Arrive en boîte de réception
2- Est ouvert
3- Transforme (clic, téléchargement, achat)
Un e-mailing impactant …
6
Seulement 80% des e-mails légitimes
atteignent la boîte de réception des
internautes.
Baromètre de la délivrabilité 2014 -...
 EXPEDITEUR / OBJET
 CONTENU
 CODE HTML
 BASE DE DONNEES
 ESP (routeur)
Les éléments clés
8
DELIVRABILITÉ
Eléments visibles constitutifs d’un e-mail
9
COUPLE EXPEDITEUR/OBJET
SUSCITER L’INTERET
Rassurer / Teaser
CONTENU PRINCIPA...
3 grandes typologies d'e-mail
10
PUBLICITE NEWSLETTER
DIALOGUE
SPECIFIQUE
Population étrangère
(Fichiers loués)
Population...
Couple Expéditeur / Objet
Les Call to Action
Le contenu
Le design
La mobilité
11
Du teasing à la personnalisation
12
PUBLICITE NEWSLETTER
DIALOGUE
SPECIFIQUE
Nom de la marque sous
sa forme la plus connue...
Du teasing à la personnalisation
13
PUBLICITE NEWSLETTER
DIALOGUE
SPECIFIQUE
Galeries Lafayette
NEWSLETTER
CANALSAT.FR
Gag...
Expéditeur : le format à respecter
14
1er contact
 Rassurez le lecteur avec votre
marque :
- libellé de l’expéditeur
- ad...
• 3 secondes pour convaincre !
• Environ 50 signes
• Jouez avec les mots pour créer l’attente
Objet : déclencher l’ouvertu...
Utilisez raisonnablement la ponctuation (surtout en BtoB)
Bonnes pratiques : objet
16
Maîtrisez votre personnalisation :
Bonnes pratiques : objet
17
Attention aux spam words :
– argent, sex, sexy, médicaments…
Bonnes pratiques : objet
18
Etonnez vos lecteurs en utilisant des ALT codes
♣ ♥ ♦ ☚ ☻ ☺ ☾☼ ☁ ☂ ✌♚
Bonnes pratiques : objet
19
Retrouvez la liste des c...
Couple Expéditeur / Objet
Les Call to Action
Le contenu
Le design
La mobilité
20
• Inciter au clic, attirer le lecteur
• Pourquoi ?
– Acheter
– Contacter
– Télécharger
– S’inscrire
– Découvrir
– Transfor...
Du teasing à la personnalisation
22
PUBLICITE NEWSLETTER
DIALOGUE
SPECIFIQUE
1 action demandant
souscription pour un
bénéf...
Visuel
J’attire l’attention
Texte
Je motive le clic
Position
J’optimise la visibilité
3 éléments essentiels d’un cta
23
1
...
Visuel
Optimisation CTA
Texte ou image ?
Visuel d’un CTA
25
Texte >>
Moins attractif pour le lecteur mais
toujours visible
Plus sexy, mais blocage...
Un bouton qui doit se voir :
• Caractères gras
• Grande taille de police
• Contrastes
• Effets (3D, ombré…)
• Harmonie ave...
Quelques exemples
27
Visuel d’un CTA
28
Texte
Optimisation CTA
Motiver l'action
• Etre clair et précis
• Utiliser des verbes d’action
• Créer l'urgence
• Tenir ses promesses
Texte d’un ...
Texte d’un CTA
31
?
Position
Optimisation CTA
3 modes de visualisation des e-mails
33
A droite de l’écran
En bas de l’écran
Inactif
(seul l’objet et
l’expéditeur sont
a...
3 zones visibles
34
Comment bien se faire voir ?
• No scroll !
• Laisser respirer le bouton
• Multiplier les possibilités : CTA
principal et C...
Position d’un CTA
36
37
Best practices +
Test sur votre base
résultats cohérents
avec votre activité
=
Couple Expéditeur / Objet
Les Call to Action
Le contenu
Le design
La mobilité
38
• Code simplifié et propre (W3C)
• 600px de large
• Tableaux
• Couleurs de fond (body + tableaux)
• Styles inline
• Pas de...
• N’utilisez pas que des images
• Balises “ALT” sur chacune de vos images
• Couleur du texte sous vos images = mise en ava...
Dans un e-mail que puis-je personnaliser ?
– Objet
– Nom expéditeur
– Adresse de reply-to
– Contenu
• Images
• Textes
• Li...
Maîtrisez la personnalisation de vos e-mails
42
Maîtrisez le contenu de votre base
et testez
Une personnalisation réussie ne se voit pas
43
www.np6.fr/livre-blanc
Retrouvez les bonnes pratiques dans
notre livre blanc
44
Couple Expéditeur / Objet
Les Call to Action
Le contenu
Le design
La mobilité
45
46
• Charte graphique de l’entreprise
• Interactions des éléments
graphiques sur l’humain (Gestalt)
– Equilibre
– Continuité
...
• Une image douée de sens n’est jamais
seule
– Texte / Contexte
• 3 fonctions
– Ancrage : descriptif produit
– Relai : sen...
Exemples
49
Ancrage
Relai
Tendances
50
• Retrouvez d’autres exemples
commentés dans nos livres blancs &
infographies
• http://www.np6.fr/actualites/infographie
I...
Couple Expéditeur / Objet
Les Call to Action
Le contenu
Le design
La mobilité
52
Responsive Design
Capacité d’un e-mail à s’adapter aux
différents supports de lecture
L’e-mail optimisé
Un contenu unique
3 techniques
54
i
L’e-mail fluide
Le contenu prend la dimension de l’écran
3 techniques
55
L’e-mail adaptatif
Le contenu est différent sur ordinateur et sur mobile
3 techniques
56
Blocs qui passent les uns sous les autres
Les principes du responsive design
57
Afficher / Masquer des éléments
Les principes du responsive design
58
Redimensionner des images
Les principes du responsive design
59
Remplacer des éléments
Les principes du responsive design
60
Profitez du pré-header pour mettre en avant une information
importante et attirer l’attention
Objet : environ 30 caractère...
Privilégiez la lisibilité !
• Peu d’espace sur les écrans des mobiles > Exploiter au maximum
• Plusieurs types de mobiles ...
• 1 seule colonne
• Largeur de 320px
• Informations principales dans les 600 premiers px
• Eviter les images trop grandes ...
• Liens reconnaissables visuellement
• Taille minimum de 44 px * 44 px
• Espace vide de 15 px environ autour du bouton
• C...
Exemple d’adaptation responsive design
65
www.np6.fr/livre-blanc
Retrouvez tous les conseils Responsive
Design dans notre livre blanc
66
Recette pour un e-mailing impactant
67
Des questions ?
68
Bordeaux
104 Bis Quai des Chartrons
33300 Bordeaux
T. 05 57 92 41 21
Paris
7, rue du Pasteur Wagner
75011 PARIS
T. 01 75 4...
Prochain SlideShare
Chargement dans…5
×

Emailings design impactants : best practices

1 311 vues

Publié le

Design, personnalisation, choix de l’objet, formatage du contenu, optimisation des call to action et du code HTML, responsive design... Découvrez les meilleures pratiques à adopter pour créer des emailings impactants !
Présentation issue de la conférence animée par Amélie Dauvin, Responsable Projets Clients chez NP6, au salon E-commerce Paris 2015.

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

Aucun téléchargement
Vues
Nombre de vues
1 311
Sur SlideShare
0
Issues des intégrations
0
Intégrations
50
Actions
Partages
0
Téléchargements
60
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Emailings design impactants : best practices

  1. 1. Marketing Smart Cloud Emailings Design & Impactants Best Practices !
  2. 2. Amélie Dauvin Responsable Projets Clients ad@np6.com 2
  3. 3. Carte d’identité 3 i SPECIALISTE LEADER SECTEURS EFFECTIFS DIGITAL CA 15 M€ INNOVANTDATA EUROPEEN QUALITE SaaS Marketing : 50% Data intelligence : 50% 110 Paris, Bordeaux, Londres ISO 9001 depuis 2001 30 experts digitaux CIR35 statisticiens 15 sociétés du CAC 40 Tous secteurs d’activité
  4. 4. Expertise cross-secteurs E-Commerce / Distribution Service Publique Loisirs / Tourisme Banque / Assurance Medias / Culture Agences MarketingIndustrie / Service BtoB 3
  5. 5. Salon e-commerce 2015 MAR 22 SEPT
  6. 6. 1- Arrive en boîte de réception 2- Est ouvert 3- Transforme (clic, téléchargement, achat) Un e-mailing impactant … 6
  7. 7. Seulement 80% des e-mails légitimes atteignent la boîte de réception des internautes. Baromètre de la délivrabilité 2014 - Return Path 7
  8. 8.  EXPEDITEUR / OBJET  CONTENU  CODE HTML  BASE DE DONNEES  ESP (routeur) Les éléments clés 8 DELIVRABILITÉ
  9. 9. Eléments visibles constitutifs d’un e-mail 9 COUPLE EXPEDITEUR/OBJET SUSCITER L’INTERET Rassurer / Teaser CONTENU PRINCIPAL DELIVRER UN MESSAGE Informer / Séduire / Convaincre CALL TO ACTION GENERER UNE REACTION Etre explicite / Percutant
  10. 10. 3 grandes typologies d'e-mail 10 PUBLICITE NEWSLETTER DIALOGUE SPECIFIQUE Population étrangère (Fichiers loués) Population partisane (Ayant souscrit) CIBLE Générer du business additionnel sur l’instant Acquisition de prospects pour un programme de communication (jeux concours) Générer du business additionnel selon le cycle de vie client Ou de la marque Assurer le suivi des actions menées par le consommateur envers la marque Informer sur son actualité Alimenter un lien régulier OBJECTIFS ONESHOT REGULIER PONCTUEL Population partisane (En démarche active)
  11. 11. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 11
  12. 12. Du teasing à la personnalisation 12 PUBLICITE NEWSLETTER DIALOGUE SPECIFIQUE Nom de la marque sous sa forme la plus connue Nom de la Newsletter Proposer une offre séduisante (jeux, promos, privilèges) Personnaliser Installer des codes (une nomenclature) : Date, Numéro, Sujet principal… Une personne physique (responsable clientèle, CRM, etc.) EXPOBJET
  13. 13. Du teasing à la personnalisation 13 PUBLICITE NEWSLETTER DIALOGUE SPECIFIQUE Galeries Lafayette NEWSLETTER CANALSAT.FR Gagnez une VESPA S ! M. François Dupont, une offre privilégiée vous attend Newsletter CanalSat Mois Année Laurent votre distributeur Opel EXPOBJET
  14. 14. Expéditeur : le format à respecter 14 1er contact  Rassurez le lecteur avec votre marque : - libellé de l’expéditeur - adresse expéditrice
  15. 15. • 3 secondes pour convaincre ! • Environ 50 signes • Jouez avec les mots pour créer l’attente Objet : déclencher l’ouverture 15
  16. 16. Utilisez raisonnablement la ponctuation (surtout en BtoB) Bonnes pratiques : objet 16
  17. 17. Maîtrisez votre personnalisation : Bonnes pratiques : objet 17
  18. 18. Attention aux spam words : – argent, sex, sexy, médicaments… Bonnes pratiques : objet 18
  19. 19. Etonnez vos lecteurs en utilisant des ALT codes ♣ ♥ ♦ ☚ ☻ ☺ ☾☼ ☁ ☂ ✌♚ Bonnes pratiques : objet 19 Retrouvez la liste des codes http://www.alt-codes.net/, http://www.alt-codes.net/how_to_use_alt_codes/
  20. 20. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 20
  21. 21. • Inciter au clic, attirer le lecteur • Pourquoi ? – Acheter – Contacter – Télécharger – S’inscrire – Découvrir – Transformer Call to action : la clé du succès 21
  22. 22. Du teasing à la personnalisation 22 PUBLICITE NEWSLETTER DIALOGUE SPECIFIQUE 1 action demandant souscription pour un bénéfice non impliquant > Je participe 1 action amenant à voir le contenu en détail > Lire la suite 1 action engageante vis-à-vis de la marque > Prendre rendez-vous
  23. 23. Visuel J’attire l’attention Texte Je motive le clic Position J’optimise la visibilité 3 éléments essentiels d’un cta 23 1 2 3 1 2 3
  24. 24. Visuel Optimisation CTA
  25. 25. Texte ou image ? Visuel d’un CTA 25 Texte >> Moins attractif pour le lecteur mais toujours visible Plus sexy, mais blocage des images par les messageries
  26. 26. Un bouton qui doit se voir : • Caractères gras • Grande taille de police • Contrastes • Effets (3D, ombré…) • Harmonie avec les autres éléments (landing page, site...) Visuel d’un CTA 26 Eléments graphiques pour guider le regard vers le CTA.
  27. 27. Quelques exemples 27
  28. 28. Visuel d’un CTA 28
  29. 29. Texte Optimisation CTA
  30. 30. Motiver l'action • Etre clair et précis • Utiliser des verbes d’action • Créer l'urgence • Tenir ses promesses Texte d’un CTA 30
  31. 31. Texte d’un CTA 31 ?
  32. 32. Position Optimisation CTA
  33. 33. 3 modes de visualisation des e-mails 33 A droite de l’écran En bas de l’écran Inactif (seul l’objet et l’expéditeur sont alors lisibles)
  34. 34. 3 zones visibles 34
  35. 35. Comment bien se faire voir ? • No scroll ! • Laisser respirer le bouton • Multiplier les possibilités : CTA principal et CTA secondaires Position d’un CTA 35
  36. 36. Position d’un CTA 36
  37. 37. 37 Best practices + Test sur votre base résultats cohérents avec votre activité =
  38. 38. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 38
  39. 39. • Code simplifié et propre (W3C) • 600px de large • Tableaux • Couleurs de fond (body + tableaux) • Styles inline • Pas de Javascripts ni de commentaires • Typo pour le web • Balises mal interprétées : « float », « margin », ou « padding » • style="display:block;" sur les images • Pas de nom de domaine « en dur » • … Bonnes pratiques : code HTML 39
  40. 40. • N’utilisez pas que des images • Balises “ALT” sur chacune de vos images • Couleur du texte sous vos images = mise en avant des zones de clics • Lien page miroir Anticipez le blocage des images 40
  41. 41. Dans un e-mail que puis-je personnaliser ? – Objet – Nom expéditeur – Adresse de reply-to – Contenu • Images • Textes • Liens Personnalisez pour plus d’impact ! 41
  42. 42. Maîtrisez la personnalisation de vos e-mails 42 Maîtrisez le contenu de votre base et testez
  43. 43. Une personnalisation réussie ne se voit pas 43
  44. 44. www.np6.fr/livre-blanc Retrouvez les bonnes pratiques dans notre livre blanc 44
  45. 45. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 45
  46. 46. 46
  47. 47. • Charte graphique de l’entreprise • Interactions des éléments graphiques sur l’humain (Gestalt) – Equilibre – Continuité – Proximité et alignement – Similarité – Fermeture • Charge informationnelle • Impacts visuels dynamiques (contraste) Les principes du web design 47
  48. 48. • Une image douée de sens n’est jamais seule – Texte / Contexte • 3 fonctions – Ancrage : descriptif produit – Relai : sens supplémentaire – Contradiction : décalée • Un objectif pour chaque image • Le nombre d’images et leur fonction doit se faire selon le type de message envoyé Choix des images 48
  49. 49. Exemples 49 Ancrage Relai
  50. 50. Tendances 50
  51. 51. • Retrouvez d’autres exemples commentés dans nos livres blancs & infographies • http://www.np6.fr/actualites/infographie Infographie 51
  52. 52. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 52
  53. 53. Responsive Design Capacité d’un e-mail à s’adapter aux différents supports de lecture
  54. 54. L’e-mail optimisé Un contenu unique 3 techniques 54 i
  55. 55. L’e-mail fluide Le contenu prend la dimension de l’écran 3 techniques 55
  56. 56. L’e-mail adaptatif Le contenu est différent sur ordinateur et sur mobile 3 techniques 56
  57. 57. Blocs qui passent les uns sous les autres Les principes du responsive design 57
  58. 58. Afficher / Masquer des éléments Les principes du responsive design 58
  59. 59. Redimensionner des images Les principes du responsive design 59
  60. 60. Remplacer des éléments Les principes du responsive design 60
  61. 61. Profitez du pré-header pour mettre en avant une information importante et attirer l’attention Objet : environ 30 caractères En-tête 61
  62. 62. Privilégiez la lisibilité ! • Peu d’espace sur les écrans des mobiles > Exploiter au maximum • Plusieurs types de mobiles > Dimensions les plus fréquentes • Moins d’implication client > Etre efficace Optimiser les e-mails sur mobile 62
  63. 63. • 1 seule colonne • Largeur de 320px • Informations principales dans les 600 premiers px • Eviter les images trop grandes (<20ko) ou trop lourdes • Simplifier le contenu Présentation générale 63
  64. 64. • Liens reconnaissables visuellement • Taille minimum de 44 px * 44 px • Espace vide de 15 px environ autour du bouton • Chacun tient son mobile à sa manière Call to action 64
  65. 65. Exemple d’adaptation responsive design 65
  66. 66. www.np6.fr/livre-blanc Retrouvez tous les conseils Responsive Design dans notre livre blanc 66
  67. 67. Recette pour un e-mailing impactant 67
  68. 68. Des questions ? 68
  69. 69. Bordeaux 104 Bis Quai des Chartrons 33300 Bordeaux T. 05 57 92 41 21 Paris 7, rue du Pasteur Wagner 75011 PARIS T. 01 75 43 76 10 London 23 Hanover Square London W1S 1JB T. +44 203 714 8915 69

×