Contenu connexe Similaire à Webinar:le design de vos emails est il à la hauteur de vos messages ? (20) Webinar:le design de vos emails est il à la hauteur de vos messages ? 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
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
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
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
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