Comment augmenter l’impact visuel et l’efficacité de vos campagnes email ? Avoir une idée créative n’est qu’un début ! Tout est dans l’exécution ! Dans ce webinar, nous illustrerons les savoir-faire en matière de design email par une revue de cas avant/après. Préparez-vous à découvrir des exemples uniques qui vous aideront à stimuler vos futures campagnes ! Nous vous présenterons les best practices en matière de design email, à travers notamment : le responsive la mobilité la vidéo et l’animation le cross-canal

1. ©2014 Experian Information Solutions, Inc. All rights reserved. Experian and the marks used herein are service marks or registered trademarks of
Experian Information Solutions, Inc. Other product and company names mentioned herein are the trademarks of their respective owners.
No part of this copyrighted work may be reproduced, modified, or distributed in any form or manner without the prior written permission of Experian.
Experian Public.
@Experian_France
#rdvEMS

2. 2©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 2
Intervenant
Antoine Charlet a rejoint Experian en 2007 en tant
que directeur artistique en charge du pôle design. Il
est garant du respect des bonnes pratiques,
marketing, creative et technique pour l’ensembles
des comptes clients d’Experian Marketing Services
qui font appel à ces services.
Contactez Antoine directement :
antoine.charlet@experian.com
#rdvEMS

3. 3©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 3
01
Think mobile, many
of your customers
are now “on-the-go”
Un temps où nos téléphones
n’étaient pas si smart…

4. 4©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 4
Pensez mobile, parce
qu’une grande partie de
vos lecteurs le sont !
01
#rdvEMS

5. 5©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 5
01
Notre version responsive
de la newsletter NBA
01CASE STUDY
#rdvEMS

6. 6©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 6
• Newsletter quotidienne assez
classique envoyée par la NBA
• Présence de nombreux
contenus de qualité
Nous pouvons sûrement faire
mieux, non ?
• Essayons de mieux retranscrire
l’ambiance sportive
• Et si on en profitait pour la
passer en responsive ?
La création originale
#rdvEMS

7. 7©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 7
Visuel conçu pour
s’adapter à chaque
tailles d’écrans
Un pré-header en lien
avec le contenu
Une barre de
navigation
Un fil info
Une image de qualité
en pleine largeurUne zone de
prévisualisation lisible
et claire
Présence des liens
sociaux pour initier la
discussion
Un grand appel au clic
Le résultat
#rdvEMS

8. 8©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 8
Focus sociaux
extrait du site
Les titres et les articles
sont combinés dans la
même zone Davantage de liens
Ajout de la section
NBA TV
Pied de page séparé
de la zone de contenuEt maintenant, la
version responsive
Le résultat
#rdvEMS

9. 9©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 9
Le résultat
Logo et onglets optimisés
Image principale adaptée
en pourcentage
Bouton adapté pour
navigation digitale
Simplification du
partage
Voyons la partie
contenu

10. 10©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 10
Les colonnes de contenu
passent l’une sous l’autre
Le résultat

11. 11©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 11
Le résultat
4 colonnes de contenu
regroupées en 2

12. 12©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 12
Le responsive, mobile mais pas seulement
#rdvEMS
Largeur de
prévisualisation de
1200px
Largeur de
prévisualisation de
800px
Largeur de
prévisualisation de
320px

13. 13©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 13
Pour une gestion
responsive au top !
• Gardez en tête les possibilités techniques
• Mobile friendly ou responsive
• Testez régulièrement vos templates
• Pensez fond autant qu’a la forme
• Gérez la « dégradation élégante »
• Contextualisez la lecture sur mobile
#rdvEMS

14. 14©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 14
01
Think mobile, many
of your customers
are now “on-the-go”
Un temps où le gif etait le seul moyen
de dynamiser vos messages

15. 16©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 16
L’animation et la vidéo
Attirez l’attention !
02
#rdvEMS

16. 17©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 17
01
La newsletter
“sorties de la semaine”
02CASE STUDY
#rdvEMS

17. 18©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 18
La création originale
•Sony envoie cette “Newsletter
sorties” de façon hebdomadaire
•Elle est très visuelle – l’attractivité
tient dans la qualité des affiches
•Les appels au clic sont très
visibles.
•La structure est fixe et facile à
mettre à jour
•Il manque principalement de
contenu éditorial et de conseils.
#rdvEMS

18. 19©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 19
Pré-header avec le
lien vers la page miroir
Lien de connexion vers
“mon compte”
Onglets de navigation
Personnalisation
Bloc d’edito pour introduire
le type de contenus
Liens sociaux placés au
centre de la news
Les titres en texte
dynamique
Ajout des
notations
Le résultat
Module de sondage en
fin de message
#rdvEMS

19. 20©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 20
Ajout de vidéo
Insertion d’une vidéo
en HTML5
Gestion des terminaux
incompatibles
#rdvEMS

20. 21©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 21
Personnalisation de la phrase
de pré-header
Modification du logo
selon la thématique
Ajout d’éléments
graphiques
Bouton cassé pour
rester dans l’ambiance
Evolution
#rdvEMS

21. 22©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 22
Le cinemagraph
Visuel extrait
d’une vidéo
Isolation d’une partie
de la vidéo
#rdvEMS

22. 23©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 23
Le cinemagraph
#rdvEMS

23. 24©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 24
Le Compte à rebours
Compte à rebours
mis à jour
dynamiquement
Animation en
continue
Personnalisation
du prénom
#rdvEMS

24. 25©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 25
Le Compte à rebours
Compte à rebours réduit
proportionnellement
#rdvEMS

25. 32©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 32
01
Think mobile, many
of your customers
are now “on-the-go”
Voilà à quoi ressemblait
votre boite aux lettres
Désormais elle ressemble
davantage à ça

26. 33©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 33
Personnalisez !
Transformez vos contact
clients en discussion
03
#rdvEMS

27. 34©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 34
01
confirmation de
commande
03CASE STUDY
#rdvEMS

28. 35©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 35
La création originale
•Charming Charlie a lancé son
site ecommerce fin 2013
•Voici l’email de confirmation
de commande :
pas de produit, pas d’image
•Décalage fort avec l’image
fun de la marque
•Voyons comment “habiller” le
message
#rdvEMS

29. 36©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 36
Email push habituel
Catégorie de produits
par couleur
#rdvEMS

30. 37©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 37
Le résultat
Phrase de pré-header
différente
Entête et navigation
adaptés “mobile friendly” Aller au delà du simple
remerciement
Rebonds éditoriaux sur
l’excitation du produit
commandé
Zone “confirmation de
commande claire et
ordonnée
Images des produits
Infos importantes
affichées clairement
#rdvEMS

31. 38©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 38
Le résultat
Recomandation de
produits
complémentaires
Indication du point
de vente le plus
proche
On anticipe les écrans
larges en affichant un
fond adaptable
#rdvEMS

32. 39©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 39
Équilibre
textes / images
Certes la tentation est grande de pousser
un design fort basé sur les images pour
refléter au mieux le style de la marque,
sachez que la plupart des clients de
messagerie désactivent les images par
défaut. Pensez y toujours au moment de
créer votre message et au moment de
l’intégration HTML.
#rdvEMS

33. 40©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 40
#rdvEMS
Présence de texte
alternatif
Habillage de ce texte
alternatif
Fond de couleur sur
les cellules

34. 41©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 41
#rdvEMS

35. 42©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 42
#rdvEMS
Les découpes
peuvent simuler une
image

36. 43©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 43
Best Practices Checklist
Pensez mobile !Mobile FriendlyResponsive Design
#rdvEMS

37. 44©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 44
Zone de
prévisualisation
Structure
Pré-headerObjet
DialoguePersonalisation
Best Practices Checklist
#rdvEMS

38. 45©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 45
Merci ! #rdvEMS

39. 46©2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 46