Webinar:le design de vos emails est il à la hauteur de vos messages ?

© 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 © 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 :

[email protected]

#rdvEMS


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…


Experian Public. 4

Pensez mobile, parce

qu’une grande partie de

vos lecteurs le sont !

01

#rdvEMS


Experian Public. 5

01 Notre version responsive

de la newsletter NBA

01 CASE STUDY

#rdvEMS


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


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


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


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


Experian Public. 10

Les colonnes de contenu

passent l’une sous l’autre

Le résultat


Experian Public. 11

Le résultat

4 colonnes de contenu

regroupées en 2


Experian Public. 12

Le responsive, mobile mais pas seulement #rdvEMS

Largeur de

prévisualisation de

1200px

Largeur de


800px

Largeur de


320px


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


Experian Public. 14

01


Un temps où le gif etait le seul moyen

de dynamiser vos messages


Experian Public. 16

L’animation et la vidéo

Attirez l’attention !

02

#rdvEMS


Experian Public. 17

01 La newsletter

“sorties de la semaine”

02 CASE STUDY

#rdvEMS


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


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


Experian Public. 20

Ajout de vidéo

Insertion d’une vidéo

en HTML5

Gestion des terminaux

incompatibles

#rdvEMS


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


Experian Public. 22

Le cinemagraph

Visuel extrait

d’une vidéo

Isolation d’une partie

de la vidéo

#rdvEMS


Experian Public. 23

Le cinemagraph

#rdvEMS


Experian Public. 24

Le Compte à rebours

Compte à rebours

mis à jour

dynamiquement

Animation en

continue

Personnalisation

du prénom

#rdvEMS


Experian Public. 25

Le Compte à rebours

Compte à rebours réduit

proportionnellement

#rdvEMS


Experian Public. 32

01


Voilà à quoi ressemblait

votre boite aux lettres

Désormais elle ressemble

davantage à ça


Experian Public. 33

Personnalisez ! Transformez vos contact

clients en discussion

03

#rdvEMS


Experian Public. 34

01 confirmation de

commande

03 CASE STUDY

#rdvEMS


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


Experian Public. 36

Email push habituel

Catégorie de produits

par couleur

#rdvEMS


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


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


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


Experian Public. 40

#rdvEMS

Présence de texte

alternatif

Habillage de ce texte

alternatif

Fond de couleur sur

les cellules


Experian Public. 41

#rdvEMS


Experian Public. 42

#rdvEMS

Les découpes

peuvent simuler une

image


Experian Public. 43

Best Practices Checklist

Pensez mobile ! Mobile Friendly Responsive Design

#rdvEMS


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


Experian Public. 45

Merci ! #rdvEMS


Experian Public. 46

Date post:	08-Jul-2015
Category:	Marketing
Upload:	experian-marketing-services
View:	591 times
Download:	2 times