Cas client concret de mise en place d'une créa responsive. Présenté par Jérôme Blanchon - Fondateur Happymails

1. Cas client :
Mise en place d’une créa
d’Email Responsive
RESPONSIVE
EMAIL DESIGN

2. EMDAY
La demande :
Un de nos clients nous interroge pour faire évoluer ses emails de recrutement prestataires, vers du responsive.
Comme souvent... la demande est claire :
Je veux la même chose, mais responsive, parce que maintenant tout le monde lit ses emails sur
son smartphone ou sa tablette.
Le contexte :
Les emails en question, sont créées dynamiquement à partir d’un gabarit unique et relativement simple, par une
mécanique de contextualisation géographique, en liaison à leur système de gestion des demandes de devis...
La demande est claire... le contexte maitrisé... alors, regardons si nous pouvons simple-
ment faire la même chose... et comment ;)

3. EMDAY
Le coût de mise en place d’un design responsive est plus élevé
que celui d’un design non responsive (en moyenne x2)
Il faut valider la nécessité de l’action (ROI, gain d’image, ...)
Par des études
d’usage de la cible
Par l’analyse des
statistiques du client
(Statistique détaillée de campagne dans HAPPY Mails)
En étudiant les ouvreurs
&

4. EMDAY
r
Le responsive design impose des contraintes
de forme, d’architecture et de hiérarchie des contenus
Forme
Si c’est responsive, c’est au carré !
Qu’il soit basé sur une grille ou non,
les redimensionnements de bloc ou les
glissements de blocs laissent
moins de liberté au designer
Contenu
Qui passe devant ?
Notre email change de forme, les blocs
adaptent leur largeur, glissent les uns en
dessous des autres... il faut définir ce qui est
prioritaire dans notre message

5. EMDAY
Il faut ensuite, et avant de lancer les maquettes, définir les ciblages matériels

6. EMDAY
L’étude du mail initial, fait apparaitre que
plusieurs points sont problématiques :
- Lisibilité des textes mis à l’échelle
- Présence d’éléments image incompatibles
- Structuration du tableau
- Construction du footer

7. EMDAY
Nous devons donc proposer au client
des maquettes modifiées :
- Avec des contenus hiérarchisés
- Une construction en grille
- Des textes plus lisibles
- Des images sans raccord
- Un tableau plus adapté à l’écran
... finalement c’est plus vraiment pareil !

8. EMDAY
Il faut maintenant construire notre template responsive...
Mais pour qui ?
Le ciblage des plateformes et des clients mails à une incidence sur la méthode
de développement, le temps de travail et donc le budget.
Notre emailing du fait de sa construction responsive, doit maintenant embarquer des déclarations pour le rendre compatible
avec des appareils mobiles, des stations, à chaque fois sous des systèmes,
des versions, des moteurs de rendus et autres, différents...
De quoi rendre fou le développeur et faire exploser le budget, si le ciblage n’est pas clairement défini.
Il faut faire des choix !
ou alors... penser autrement

9. EMDAY
Désolé... mais si vous souhaitez vraiment avoir
des emails responsive et universel (ou presque)
Vous ne devez pas seulement utiliser
les Media Queries !
Trop de templates appuient leur design responsive sur eux,
et brident le responsive à certaines plateformes au détriment
d'autres susceptibles d'être utilisées par votre cible...
Dans le cadre de mise en place de gabarits avec une durée
d’exploitation longue, un ciblage large ou des contraintes de
rendu multiplateforme, il ne faut pas se reposer uniquement
sur les médias Queries.
C’est long...
On est souvent en mode test and learn...
Mais quand c’est calé, c’est calé quasiment partout !
Prise en charge du responsive selon les clients mail (en utilisant des médias, queries)
Il n’y a pas que les Medias Queries dans la vie... d’un email

10. EMDAY
Exemple de code
//Exemple de style pour iphone et tous les
devices qui utilisent les médias queries
<style type="text/css">
@media screen and (max-width: 480px)
{
td.emailcolsplit{ width:100%!important;
float:left!important;
}
table.emailwrapto100pc,
img.emailwrapto100pc
{
width:100% !important;
height:auto !important;}
}
</style>
//tableaux en gauche droite sur PC,
au dessus, en dessous sur smartphone
<table align='left' width='317'
class='table_block_resp emailwrapto100pc'
cellpadding='0' cellspacing='0' valign='top'
style='display:inline-block;'>
<tr>
<td>Lorem Ipsum</td>
</tr>
</table>
<table align='left' width='317'
class='table_block_resp emailwrapto100pc'
cellpadding='0' cellspacing='0' valign='top'
style='display:inline-block;'>
<tr>
<td>Lorem Ipsum</td>
</tr>
</table>
// la largeur max est celle du device, l'échelle est forcée à 1,
la taille des éléments
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
//responsive td table
<table align="left">
<tr>
<td style="background:#ccc">
<p style="display:inline-block;">Demande du 02/11/2013</p>
<p style="display:inline-block;">30984</p>
<p style="display:inline-block;">Femme de ménage</p>
<p style="display:inline-block;">Vesancy</p>
<p style="display:inline-block;">Pris en charge</p>
</td></tr>
<tr><td>
<p style="display:inline-block;">Demande du 02/11/2013</p>
<p style="display:inline-block;">30984</p>
<p style="display:inline-block;">Femme de ménage</p>
<p style="display:inline-block;">Vesancy</p>
<p style="display:inline-block;">Pris en charge</p>
</td>
</tr>
<tr>
<td style="background:#ccc">
<p style="display:inline-block;">Demande du 02/11/2013</p>
<p style="display:inline-block;">30984</p>
<p style="display:inline-block;">Femme de ménage</p>
<p style="display:inline-block;">Vesancy</p>
<p style="display:inline-block;">Pris en charge</p>
</td></tr>
</table>
//style pour Outlook
<!--[if gte mso 9]>
<style>...
#wrapper_email{width:650px;}";
table.menu_3links{display:none !important;}";
...
</style>
<![endif]-->
//style spécifique à outlook, sorte de margin left ou margin-right
mso-table-lspace: 0;
mso-table-rspace: 0;

11. EMDAY
La mise en place d’un design responsive à permis une augmentation moyenne
de 6% en ouverture
Fort de ce constat, le client à souhaité passer en responsive, son gabarit de notification
de demande de devis à pourvoir, impliquant une transformation (achat de la demande)
Plus adaptée à un passage en responsive, du fait de la fréquence et des heures d’envoi, qui implique une lecture sur le terrain
et majoritairement sur smartphone, cette seconde mise en place à générée un bond moyen
d’ouverture de +8%
et de transformation de +14%

12. EMDAY