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 !