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

1. Module 3 :
Comment designer un email responsive ?
#EmailingSummerCamp

2. 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

3. Le design : un double objectif à atteindre

4. Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.4/22
Le design : un double objectif à atteindre
1er
objectif marketing :
Convertir !

5. 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

6. Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.6/22
Le design : un double objectif à atteindre

7. Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.7/22
Le design : un double objectif à atteindre

8. Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.8/22
Le design : un double objectif à atteindre

9. Les règles à respecter en construisant son design

10. 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

11. 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

12. 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

13. 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

14. 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é !

15. Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.15/22
Les règles à respecter en construisant son design

16. 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

17. Quid de l’originalité ?

18. 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é ?

19. 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

20. Designer pour mieux coder

21. 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

22. Prochain module :
Comment coder un email responsive ?
mardi 29 juillet 11h
@43degres #EmailingSummerCamp
Merci !