Cas client :
Mise en place d’une créa
d’Email Responsive
RESPONSIVE
EMAIL DESIGN
EMDAY
La demande :
Un de nos clients nous interroge pour faire évoluer ses emails de recrutement prestataires, vers du res...
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)
...
EMDAY
r
Le responsive design impose des contraintes
de forme, d’architecture et de hiérarchie des contenus
Forme
Si c’est ...
EMDAY
Il faut ensuite, et avant de lancer les maquettes, définir les ciblages matériels
EMDAY
L’étude du mail initial, fait apparaitre que
plusieurs points sont problématiques :
- Lisibilité des textes mis à l’...
EMDAY
Nous devons donc proposer au client
des maquettes modifiées :
- Avec des contenus hiérarchisés
- Une construction en ...
EMDAY
Il faut maintenant construire notre template responsive...
Mais pour qui ?
Le ciblage des plateformes et des clients...
EMDAY
Désolé... mais si vous souhaitez vraiment avoir
des emails responsive et universel (ou presque)
Vous ne devez pas se...
EMDAY
Exemple de code
//Exemple de style pour iphone et tous les
devices qui utilisent les médias queries
<style type="tex...
EMDAY
La mise en place d’un design responsive à permis une augmentation moyenne
de 6% en ouverture
Fort de ce constat, le ...
EMDAY
Prochain SlideShare
Chargement dans…5
×

16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive

585 vues

Publié le

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

Publié dans : Marketing
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
585
Sur SlideShare
0
Issues des intégrations
0
Intégrations
186
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive

  1. 1. Cas client : Mise en place d’une créa d’Email Responsive RESPONSIVE EMAIL DESIGN
  2. 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. 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. 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. 5. EMDAY Il faut ensuite, et avant de lancer les maquettes, définir les ciblages matériels
  6. 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. 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. 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. 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. 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. 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. 12. EMDAY

×