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