Comment designer un emailing responsive ?
description
Transcript of Comment designer un emailing responsive ?
Module 3 : Comment designer un email responsive ?
#EmailingSummErCamp
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
lE dESign : un doublE objECtif à attEindrE
Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.4/22
Le design : un double objectif à atteindre
1er objectif marketing : Convertir !
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
Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.6/22
Le design : un double objectif à atteindre
Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.7/22
Le design : un double objectif à atteindre
Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.8/22
Le design : un double objectif à atteindre
lES règlES à rESpECtEr En ConStruiSant Son dESign
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
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
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
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
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é !
Emailing Summer Camp 2014 - Comment designer un email responsive ? - p.15/22
Les règles à respecter en construisant son design
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
Quid dE l’originalité ?
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é ?
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
dESignEr pour miEux CodEr
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
proChain modulE :CommEnt CodEr un Email rESponSivE ?
mardi 29 juillEt 11h
@43dEgrES #EmailingSummErCamp
Merci !