webinar:le design de vos emails est il à la hauteur de vos messages ?
DESCRIPTION
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-canalTRANSCRIPT
![Page 1: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/1.jpg)
© 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
![Page 2: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/2.jpg)
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 :
#rdvEMS
![Page 3: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/3.jpg)
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…
![Page 4: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/4.jpg)
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
![Page 5: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/5.jpg)
5 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 5
01 Notre version responsive
de la newsletter NBA
01 CASE STUDY
#rdvEMS
![Page 6: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/6.jpg)
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
![Page 7: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/7.jpg)
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 largeur Une 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
![Page 8: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/8.jpg)
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 contenu Et maintenant, la
version responsive
Le résultat #rdvEMS
![Page 9: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/9.jpg)
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
![Page 10: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/10.jpg)
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
![Page 11: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/11.jpg)
11 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 11
Le résultat
4 colonnes de contenu
regroupées en 2
![Page 12: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/12.jpg)
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
![Page 13: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/13.jpg)
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
![Page 14: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/14.jpg)
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
![Page 15: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/15.jpg)
16 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 16
L’animation et la vidéo
Attirez l’attention !
02
#rdvEMS
![Page 16: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/16.jpg)
17 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 17
01 La newsletter
“sorties de la semaine”
02 CASE STUDY
#rdvEMS
![Page 17: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/17.jpg)
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
![Page 18: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/18.jpg)
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
![Page 19: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/19.jpg)
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
![Page 20: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/20.jpg)
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
![Page 21: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/21.jpg)
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
![Page 22: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/22.jpg)
23 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 23
Le cinemagraph
#rdvEMS
![Page 23: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/23.jpg)
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
![Page 24: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/24.jpg)
25 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 25
Le Compte à rebours
Compte à rebours réduit
proportionnellement
#rdvEMS
![Page 25: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/25.jpg)
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
![Page 26: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/26.jpg)
33 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 33
Personnalisez ! Transformez vos contact
clients en discussion
03
#rdvEMS
![Page 27: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/27.jpg)
34 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 34
01 confirmation de
commande
03 CASE STUDY
#rdvEMS
![Page 28: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/28.jpg)
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
![Page 29: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/29.jpg)
36 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 36
Email push habituel
Catégorie de produits
par couleur
#rdvEMS
![Page 30: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/30.jpg)
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
![Page 31: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/31.jpg)
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
![Page 32: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/32.jpg)
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
![Page 33: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/33.jpg)
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
![Page 34: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/34.jpg)
41 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 41
#rdvEMS
![Page 35: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/35.jpg)
42 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 42
#rdvEMS
Les découpes
peuvent simuler une
image
![Page 36: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/36.jpg)
43 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 43
Best Practices Checklist
Pensez mobile ! Mobile Friendly Responsive Design
#rdvEMS
![Page 37: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/37.jpg)
44 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 44
Zone de
prévisualisation Structure
Pré-header Objet
Dialogue Personalisation
Image de marque Textes / Images
Rendu HTML Partage social
Best Practices Checklist
#rdvEMS
![Page 38: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/38.jpg)
45 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 45
Merci ! #rdvEMS
![Page 39: Webinar:le design de vos emails est il à la hauteur de vos messages ?](https://reader035.vdocument.in/reader035/viewer/2022081404/559c7eb61a28ab97288b482d/html5/thumbnails/39.jpg)
46 © 2014 Experian Information Solutions, Inc. All rights reserved.
Experian Public. 46