DIGI

TAL M

ARKE

TING

Emailing & Responsive DesignBest practices

Amélie DauvinResponsable Projets Clients

Sarah PasturelAccount Manager

2

AGENDA

Usages et emailingUn peu de techniqueOptimisez votre contenuCas pratiquesPour conclure

3

Usages et emailing

4

TOUS MOBILES ?

La France compte désormais plus de 43,8 millions d’internautes qui se connectent à internet à partir de

SNCD, 2015

99 %54% 35%

5

Médiamétrie, 2015

SITUATION PROPICES A LA CONSULTATION

Etude Email Marketing Attitude BtoC - 2015, SNCD

6

MOMENTS DE CONSULTATION

Etude Email Marketing Attitude BtoC - 2015, SNCD

7

TERMINAL DE CONSULTATION

Terminal privilégié quel que soit le moment de la journée

Davantage utilisé en journée ou le week-end.

Plus utilisée le soir et le week-end

Etude Email Marketing Attitude BtoC - 2015, SNCD

81% utilisent l’ordinateur pour consulter leurs emails à la maison, le soir.

80% l’utilisent pour consulter leurs emails le week-end.

25% l’utilisent le matin au réveil pour consulter leurs emails.

34% l’utilisent en journée pour consulter leurs emails.

14% l’utilisent à la maison le soir pour consulter leurs emails.

18% l’utilisent pour consulter leurs emails le week-end.

8

SUPPORT PREFERE

Etude Email Marketing Attitude BtoC - 2015, SNCD

9

REACTIVITE SUR MOBILE

Le baromètre de l’e-mail sur mobiles et tablettes en France, Mobile Marketing association, 2015

10

RESPONSIVE DESIGN

Capacité d’un email à s’adapter aux différents supports de lecture

11

RESPONSIVE DESIGN : 3 METHODES

L’email optimiséUn contenu unique

12

EMAIL OPTMISE

• Adapté pour tout type de mobile• Facile à mettre en œuvre / Peu

coûteux

• Faible liberté créative• Rendu pauvre sur grand écran

13

L’email fluideLe contenu prend la dimension de l’écran

RESPONSIVE DESIGN : 3 METHODES

14

EMAIL FLUIDE

• Adapté à la grande majorité des mobiles

• Faible qualité des images redimensionnées

15

L’email adaptatifLe contenu est différent sur ordinateur et mobile

RESPONSIVE DESIGN : 3 METHODES

16

EMAIL ADAPTATIF

• Présenter des versions à la fois optimisées grand écran et mobile• Très large champ créatif

• Pas reconnu par toutes les messageries

• Nécessite du temps et de la technique

17

Un peu de technique

18

LA MAQUETTE

19

LA MAQUETTE

20

L’INTEGRATION HTML

21

L’INTEGRATION HTML

22

LES TECHNIQUES : REDIMENSIONNER

CSS :

HTML :

23

LES TECHNIQUES : REDIMENSIONNER

24

LES TECHNIQUES : UN BLOC SOUS L’AUTRE

CSS :

HTML :

25

LES TECHNIQUES : UN BLOC SOUS L’AUTRE

26

LES TECHNIQUES : AFFICHER / MASQUERCSS :

HTML :

27

LES TECHNIQUES : AFFICHER / MASQUER

28

LES TECHNIQUES : REMPLACERCSS :

HTML :

29

LES TECHNIQUES : REMPLACER

30

Optimisez votre contenu

31

OPTIMISER LES EMAILS SUR MOBILE

32

ENTÊTEPre-header

Mettre en avant une information supplémentaireObjet

30 caractères maxPersonnalisation

33

PRESENTATION GENERALE1 seule colonneLargeur : 320pxL’essentiels en 600px de haut

34

CONTENU14px min pour le corps du texte

22px min pour les titresColonnes largesPetits blocs de texteContenu simplifié

35

ET LES IMAGES ?

Webinar jeudi 12 mars 10h30 - Les clés de l’emailing Responsive Design en 2015

Moins de 20koAlt En quantité raisonnable

36

CALL TO ACTION

Visibilité, contrastes Texte des liensCohérence avec le parcours de navigation

L'entreprenariat, un sport de l'extrême

37

CALL TO ACTIONLiens reconnaissables44*44px15px vide autour Magical ice festival

38

CALL TO ACTION

39

Cas pratiques

40

ZALANDO

41

NATIXIS

42

QUELLE ENERGIE

43

IKKS

44

EKORNES

45

SNCF

46

DARJEELING

47

TELECHARGEZ NOTRE LIVRE BLANC

Retrouvez tous les conseils Responsive Design dans notre livre blanc

www.np6.fr/livre-blanc

48

Pour conclure

49

POUR CONCLURE

ContraintesInvestissementTester, tester et tester ! Stratégie globaleCohérenceUsages

50

?VOUS SOUHAITEZ EN SAVOIR PLUS

http://www.np6.fr/demande-de-contact/

Workshop #3Data Marketing

Démo : simulateur enligne pour améliorerla satisfaction client

Workshop #3Digital Marketing

Délivrabilité :l’art du brand management

en email marketing

Auditorium New York / Hambourg

Workshop #3Développeur

MailPerformance :personnalisation

avancée (Javascript) de contenus

Montréal

52