Comment designer un emailing responsive ?

22
Module 3 : Comment designer un email responsive ? #EMAILINGSUMMERCAMP

description

Lorsque l'on crée le design pour un emailing, il faut respecter de nombreuses contraintes pour s'assurer une bonne délivrabilité, un affichage correct en boîte de réception et un bon taux de conversion. Découvrez les bonnes pratiques de l'emailing dans cette suite de modules de l'Emailing Summer camp, organisé par l'agence 43 Degrés

Transcript of Comment designer un emailing responsive ?

Page 1: Comment designer un emailing responsive ?

Module 3 : Comment designer un email responsive ?

#EmailingSummErCamp

Page 2: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.2/22

1 - Le design : un double objectif à atteindre

2 - Les règles à respecter en construisant son design

3 - Quid de l’originalité ?

4 - Designer pour mieux coder

Sommaire

Page 3: Comment designer un emailing responsive ?

lE dESign : un doublE objECtif à attEindrE

Page 4: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.4/22

Le design : un double objectif à atteindre

1er objectif marketing : Convertir !

Page 5: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.5/22

2ème objectif technique : Un message qui s’affiche correctement en boîtes de réception

Pour cela vous devez :

• Construire un design permettant d’optimiser son code

• Penser responsive

• Tester, tester, tester

Page 6: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.6/22

Le design : un double objectif à atteindre

Page 7: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.7/22

Le design : un double objectif à atteindre

Page 8: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.8/22

Le design : un double objectif à atteindre

Page 9: Comment designer un emailing responsive ?

lES règlES à rESpECtEr En ConStruiSant Son dESign

Page 10: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.10/22

Les règles à respecter en construisant son design

Dès que l’on construit un design pour un emailing, il faut penser :

• Codage

• Passage des filtres anti-SPAM

• Affichage en boîte de réception

Idéalement, ce sera la même personne qui designera et codera l’emailing

Page 11: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.11/22

Les règles à respecter en construisant son design

Pour plus de facilité, raisonnez en blocs :

Header

Footer

Message principal

Call to action

Message Image

Page 12: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.12/22

Spécifications techniques :

• 600 pixels de large

• Pas de hauteur limite mais éviter trop de scroll

• Pas d’image de fond

• Pas de couleur de fond foncée avec une police claire

• Texte en 13 pixels minimum

• 2 colonnes maximum

• Pas de texte en rouge ou vert vif

Afin de passer plus facilement les filtres anti-SPAM, respectez un ratio de

50% de texte / 50% d’images

Les règles à respecter en construisant son design

Page 13: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.13/22

Attention : les clients email bloquent vos images !

Les règles à respecter en construisant son design

Page 14: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.14/22

Les règles à respecter en construisant son design

Un emailing 100% image n’est donc pas recommandé !

Page 15: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.15/22

Les règles à respecter en construisant son design

Page 16: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.16/22

Placez toujours votre message texte dans les 310 premiers pixels de haut de l’emailing

Les règles à respecter en construisant son design

Page 17: Comment designer un emailing responsive ?

Quid dE l’originalité ?

Page 18: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.18/22

Soyez original... mais pas trop !

• Webfonts : ne sont pas interprétées par tous les clients email

• Gif animés : ne sont pas interprétés par tous les clients email

• Animations flash à proscire : mise en SPAM

• Pas de vidéos se jouant dans l’email : mise en SPAM

Préférez les liens renvoyant sur votre

site internet

Quid de l’originalité ?

Page 19: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.19/22

Soyez originaux dans votre présentation / vos call to action

Exemples de call to action :

• “Je fonce”

• “Je m’inscris”

• “J’y vais”

• “Je craque”

Quid de l’originalité ?

Attention aux mots SPAM !!Mettez vos call to action type “Cliquez ici” au

format image

Page 20: Comment designer un emailing responsive ?

dESignEr pour miEux CodEr

Page 21: Comment designer un emailing responsive ?

Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.21/22

Si votre design est bien construit, il atteindra 3 objectifs :

• Permettra un codage optimisé

• Aidera à passer les filtres anti-SPAM

• Convaincra vos prospects !

Designer pour mieux coder

Page 22: Comment designer un emailing responsive ?

proChain modulE :CommEnt CodEr un Email rESponSivE ?

mardi 29 juillEt 11h

@43dEgrES #EmailingSummErCamp

Merci !