16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive
-
Upload
clic-et-site -
Category
Marketing
-
view
251 -
download
5
description
Transcript of 16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive
Cas client :Mise en place d’une créad’Email Responsive
RESPONSIVEEMAIL DESIGN
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 ;)
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 étudesd’usage de la cible
Par l’analyse desstatistiques du client
(Statistique détaillée de campagne dans HAPPY Mails)
En étudiant les ouvreurs
&
EMDAY
rLe responsive design impose des contraintes
de forme, d’architecture et de hiérarchie des contenus
FormeSi 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 laissentmoins de liberté au designer
ContenuQui 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
EMDAY
Il faut ensuite, et avant de lancer les maquettes, définir les ciblages matériels
EMDAY
L’étude du mail initial, fait apparaitre queplusieurs points sont problématiques :- Lisibilité des textes mis à l’échelle- Présence d’éléments image incompatibles- Structuration du tableau- Construction du footer
EMDAY
Nous devons donc proposer au clientdes 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 !
EMDAY
Il faut maintenant construire notre template responsive...Mais pour qui ?
Le ciblage des plateformes et des clients mails à une incidence sur la méthodede 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
EMDAY
Désolé... mais si vous souhaitez vraiment avoir des emails responsive et universel (ou presque)Vous ne devez pas seulement utiliserles Media Queries !
Trop de templates appuient leur design responsive sur eux,et brident le responsive à certaines plateformes au détrimentd'autres susceptibles d'être utilisées par votre cible...
Dans le cadre de mise en place de gabarits avec une duréed’exploitation longue, un ciblage large ou des contraintes derendu multiplateforme, il ne faut pas se reposer uniquementsur 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
EMDAY
Exemple de code
//Exemple de style pour iphone et tous lesdevices 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-rightmso-table-lspace: 0; mso-table-rspace: 0;
EMDAY
La mise en place d’un design responsive à permis une augmentation moyennede 6% en ouverture
Fort de ce constat, le client à souhaité passer en responsive, son gabarit de notificationde 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 terrainet majoritairement sur smartphone, cette seconde mise en place à générée un bond moyen
d’ouverture de +8%et de transformation de +14%
EMDAY