Emailings design impactants : best practices
•
2 gefällt mir•1,789 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Emailings design impactants : best practices
Ähnlich wie Emailings design impactants : best practices (20)
Mehr von NP6
Mehr von NP6 (20)
Emailings design impactants : best practices
- 1. Marketing Smart Cloud Emailings Design & Impactants Best Practices !
- 2. Amélie Dauvin Responsable Projets Clients ad@np6.com 2
- 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. Expertise cross-secteurs E-Commerce / Distribution Service Publique Loisirs / Tourisme Banque / Assurance Medias / Culture Agences MarketingIndustrie / Service BtoB 3
- 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. 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. EXPEDITEUR / OBJET CONTENU CODE HTML BASE DE DONNEES ESP (routeur) Les éléments clés 8 DELIVRABILITÉ
- 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. 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. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 11
- 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. 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. Expéditeur : le format à respecter 14 1er contact Rassurez le lecteur avec votre marque : - libellé de l’expéditeur - adresse expéditrice
- 15. • 3 secondes pour convaincre ! • Environ 50 signes • Jouez avec les mots pour créer l’attente Objet : déclencher l’ouverture 15
- 16. Utilisez raisonnablement la ponctuation (surtout en BtoB) Bonnes pratiques : objet 16
- 17. Maîtrisez votre personnalisation : Bonnes pratiques : objet 17
- 18. Attention aux spam words : – argent, sex, sexy, médicaments… Bonnes pratiques : objet 18
- 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. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 20
- 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. 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. 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
- 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. 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.
- 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
- 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)
- 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
- 37. 37 Best practices + Test sur votre base résultats cohérents avec votre activité =
- 38. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 38
- 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. • 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. 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. Maîtrisez la personnalisation de vos e-mails 42 Maîtrisez le contenu de votre base et testez
- 43. Une personnalisation réussie ne se voit pas 43
- 44. www.np6.fr/livre-blanc Retrouvez les bonnes pratiques dans notre livre blanc 44
- 45. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 45
- 46. 46
- 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. • 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
- 50. Tendances 50
- 51. • Retrouvez d’autres exemples commentés dans nos livres blancs & infographies • http://www.np6.fr/actualites/infographie Infographie 51
- 52. Couple Expéditeur / Objet Les Call to Action Le contenu Le design La mobilité 52
- 53. Responsive Design Capacité d’un e-mail à s’adapter aux différents supports de lecture
- 54. L’e-mail optimisé Un contenu unique 3 techniques 54 i
- 55. L’e-mail fluide Le contenu prend la dimension de l’écran 3 techniques 55
- 56. L’e-mail adaptatif Le contenu est différent sur ordinateur et sur mobile 3 techniques 56
- 57. Blocs qui passent les uns sous les autres Les principes du responsive design 57
- 58. Afficher / Masquer des éléments Les principes du responsive design 58
- 59. Redimensionner des images Les principes du responsive design 59
- 60. Remplacer des éléments Les principes du responsive design 60
- 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. 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. • 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. • 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. Exemple d’adaptation responsive design 65
- 66. www.np6.fr/livre-blanc Retrouvez tous les conseils Responsive Design dans notre livre blanc 66
- 67. Recette pour un e-mailing impactant 67
- 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