Concevoir des e-mails réactifs : Étude de cas - Twitter
Par Campaign Monitor
Dans un passé pas si lointain, les notifications par e-mail de Twitter s’affichaient de manière sous-optimale sur les périphériques mobiles. Le texte de petite taille combiné à une mise en page large qui obligeait l’appareil à dézoomer rendait l’e-mail presque illisible sur les petits écrans.
Nous avons décidé de faire quelque chose pour remédier à cela. En 5 minutes, nous avons appliqué un correctif simple qui fait toute la différence dans la facilité d’utilisation et la lisibilité des notifications... Et qui peut aussi potentiellement aider à améliorer de manière significative la façon dont vos propres campagnes e-mail s’affichent sur les périphériques mobiles.
Dans cette étude de cas, nous allons vous montrer comment nous avons transformé une notification e-mail basique en quelque chose de remarquable sur l’application e-mail iPhone ou Android, ou tout autre client de messagerie mobile gérant les requêtes de média.
Contrôler la taille du texte
Nous avons commencé par chercher comment régler le problème le plus évident de ces notifications : le texte minuscule. La raison pour laquelle le texte paraît si petit est que la mise en page de 710px de large force le client de messagerie mobile à dézoomer considérablement pour afficher le message dans toute sa largeur. Corrigeons cela avec une requête de média ciblant les petits écrans :
@media only screen and (max-width: 480px) { ... }Si vous vous y connaissez en design réactif pour e-mail, vous devez savoir que ces déclarations s’ajoutent dans les balises <style>, les styles définis à l’intérieur ne sont appliqués que par les clients de messagerie HTML qui correspondent aux critères : un écran (@media only screen) et de largeur maximum 480px (max-width : 480px). Nous voici donc à même d’adapter la mise en page pour mobile. Prenons tout d’abord les deux tableaux qui entourent le corps du message :
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">Nous allons réduire leur taille en ajoutant les classe tableauglobal, celluleglobale et structure :
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="tableauglobal">
<tbody>
<tr>
<td style="background-color:#e9eff2;padding:30px 15px 0" class="celluleglobale"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">Maintenant que nous avons des éléments à cibler, travaillons sur ces classes dans notre requête de média :
@media only screen and (max-device-width: 480px) {
body {
width: 320px !important;
}
table[class="tableauglobal"] {
width: 320px !important;
}
table[class="structure"] {
width: 300px !important;
}Les largeurs utilisées ci-dessus ne sont pas arbitraires car sur l’iPhone notamment, la largeur d’affichage est de 320px en mode portrait. Réduire les dimensions de l’e-mail à 320px font qu’il s’affichera avec un zoom de 100% par défaut, rendant le design directement visible en entier, et le texte et les images parfaitement nets.
Contrôler l’image d’en-tête
La technique ci-dessus serait parfaite s’il n’y avait pas cette large image « Twitter » dans l’en-tête. Nous allons donc ruser un peu et diviser cette image en 3. Les sections qui n’ont pas besoin d’être affichées dans notre gabarit plus étroit seront tout simplement masquées. Voici le code original :
<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/e-mail/e-mail_entete_710.png" style="border: 0; display: block;" width="710" />Et le voici avec l’image d’en-tête en 3 morceaux :
<img alt="" height="52" src="logo-gauche.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="" height="52" src="logo-droite.png" style="border:0;" width="336" class="logo">Vous avez peut-être remarqué que nous avons ajouté la classe logo sur logo-gauche.png et logo-droite.png. Il est assez facile de cacher ces éléments, en ajoutant le code suivant dans votre requête de média :
img[class="logo"] { display: none !important; }Nous voilà donc avec une image d’en-tête et un gabarit adaptés à la taille d’écran des mobiles.
Pour compléter les ajustements ci-dessus, nous avons ajouté de la marge intérieure autour des éléments et ajusté la taille du texte à notre convenance. Mais en fin de compte, la plupart des changements majeurs ont été obtenus avec quelques lignes de code et en quelques minutes seulement. Le résultat parle de lui-même (voir image).
Des centaines de personnes ont manifesté leur soutien à ces changements et se sont joints à nous pour inciter Twitter à améliorer ses notifications. La bonne nouvelle, c’est que Twitter nous a entendus et a effectué une refonte majeure de ses notifications e-mail dans la semaine qui a suivi.
Vous aussi vous pouvez faire plaisir à une communauté, bien sûr plus réduite, en appliquant ces améliorations à vos propres e-mails. Voici le code, que vous pouvez librement tester et adapter à vos propres campagnes :
Maintenant que vous êtes lancés...
Ce guide a été conçu comme un point de départ pour vos propres aventures d’optimisation de l’e-mail pour mobile. Le monde mobile est en constante évolution, tout comme le sont les techniques visant à un meilleur rendu des e-mails dans un contexte de grande diversité des clients mails. Donc si vous avez une suggestion quant à la façon dont nous pouvons améliorer ce guide, ou des questions à propos des designs réactifs pour e-mail, n’hésitez pas à entrer en contact avec notre équipe. Bonne conception !
« Concevoir des e-mails réactifs » est une série de huit articles :
http://www.campaignmonitor.com/guides/mobile/casestudy/