Coder de manière à ce qu’un email s’affiche de manière optimisée pour les écrans des terminaux mobiles est, à notre époque, non pas un “nice to have” mais un “must have”. Un nombre important d’utilisateurs regarde désormais leurs emails directement sur mobile, il est donc important qu’ils aient un rendu correct. À ce titre, nous allons détailler les deux grandes méthodes pour coder en étant compatible pour mobile.
Les media queries
Prenons quelques lignes pour expliquer ce que sont les media queries ; il s’agit de code CSS conditionnel qui modifie le rendu de l’email. Les conditions étant en général quelque chose comme “si mon écran est plus petit que xxx pixels, alors utilise ce code”. Il est important de noter ce “si —> alors”, cela permet d’adapter, voir de modifier complètement le rendu pour la ou les versions mobiles, car il est en effet possible de mettre plusieurs conditions (pour tablette et pour téléphone par exemple).
Pour construire un email en terme de code HTML, la technique la plus largement reconnue comme étant efficace est de le construire à base de tableaux, et donc de balises <tr> et <td>. Il est alors possible, via les media queries, de faire adopter à certaines cellules du tableau des comportements précis, comme de faire en sorte que des cellules placées côte à côte se placent, sur des écrans plus petits, l’une en dessous de l’autre. Nous empilons alors les <td>. C’est une technique qui marchait relativement bien.
Relativement car, comme souvent dans le monde de l’email, la technique ne fonctionne pas partout ; notamment sur les clients emails utilisant le moteur de rendu de Gmail. Ce dernier ne tient en effet pas compte des media queries, il n’est donc pas possible, avec cette méthode, d’obtenir un rendu mobile compatible avec Gmail. Le lecteur attentif aura remarqué qu’il est précisé que la technique marchait relativement bien, et l’imparfait est utilisé car depuis Android 5, l’app email native des mobiles Android est basée sur Gmail, et ne tient pas compte des media queries. L’app native offre également un rendu qui est généralement un mauvais hybride entre la version mobile et la version desktop. Il est nécessaire d’utiliser un petit “hack” qui force alors le rendu desktop, en ajoutant une balise <div> vide qui force la largeur de l’email pour les clients emails ne tenant pas compte des media queries. Sur Android 4.4, la technique ne fonctionne pas non plus pour des raisons obscures qui ont poussé les développeurs à bloquer l’empilement de cellules <td>. Il existe cependant un “work around” pratique qui consiste à utiliser des cellules <th> à la place.
Voici un exemple d’utilisation des media queries pour afficher un contenu spécifique suivant le terminal sur lequel sera lu l’email ou, plus précisément, suivant la taille de l’écran sur lequel sera lu l’email:
<style type="text/css">
th {
padding: 0px;
margin: 0px;
border: 0px;
font-weight: normal;
}
.show-for-mobile {
display: none;
mso-hide: all;
visibility: hidden;
max-height: 0;
font-size: 0;
line-height: 0;
padding: 0;
}
@media only screen and (max-width: 599px) {
table[class="body"] .show-for-desktop {
display: none !important;
height: 0px !important;
width: 0px !important;
max-height: 0px !important;
overflow: hidden !important;
}
table[class="body"] .show-for-mobile {
max-height: none !important;
font-size: 13px !important;
display: block !important;
overflow: visible !important;
visibility: visible !important;
line-height: 15px !important;
float: none !important;
}
}
</style>
<body>
<div style="display: none; white-space: nowrap; font: 15px courier; color: #ffffff; line-height: 0; width: 600px !important; min-width: 600px !important; max-width: 600px !important;"> </div>
<table style="padding: 0px; margin: 0px; border: 0px none; width: 100%;" class="body" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>
Mon contenu dans toutes les versions
</th>
</tr>
<tr>
<th class="show-for-desktop">
Contenu caché dans la version mobile
</th>
</tr>
<tr>
<th style="float:left;display: none; mso-hide: all; max-height: 0px; overflow: hidden; line-height: 0px;" class="show-for-mobile">
Contenu caché dans la version desktop
</th>
</tr>
</table>
</body>Cet exemple montre qu’il est possible de personnaliser le contenu en fonction de la taille de l’écran. Les possibilités offertes par ce type de code sont très larges, et il est tout à fait possible de créer un email totalement différent pour mobile et pour desktop, tout en gardant à l’esprit que, plus les différences entre les versions sont grandes, plus la complexité sera grande à tous les niveaux (design, développement, reporting, …)
Responsive
La deuxième technique répandue consiste à coder son email de manière fluide, avec des tailles en pourcentage avec des valeurs maximum (max-width). Ceci permet de ne pas avoir de code supplémentaire tel que les media queries. Tout dans l’email est codé pour s’adapter en fonction de la taille de l’écran. Et puisque le code conditionnel n’est pas nécessaire, cette technique fonctionne sous les clients emails utilisant le moteur de rendu de Gmail! Outlook pose quelques problèmes, ce dernier ne comprenant pas le code de type “max-width”. Mais il est possible d’insérer du code spécifique pour Outlook pour forcer un rendu correct (pour les anglophones, il existe un bon guide sur le sujet).
Voici un exemple de code responsive sur deux colonnes:
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
<style type="text/css">
body {
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #ffffff;
}
table {
border-spacing: 0;
font-family: sans-serif;
}
td {
padding: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
</style>
<body>
<center class="wrapper">
<div style="max-width: 640px;">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" width="640" align="center">
<tr>
<td>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px auto;max-width: 640px;width: 100%" align="center" class="body">
<!-- ARTICLE 2 COLMNS -->
<tr>
<td align="center" style="text-align: center; font-size: 0px;">
<!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" width="630" align="center" style="margin:0px auto;">
<tr>
<td width="300" valign="top">
<![endif]-->
<div style="display: inline-block;max-width: 320px;vertical-align: top;width: 100%;" >
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" style="font-size: 14px; font-family: arial, helvetica, sans-serif;">
Mon contenu colonne 1
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="30"></td>
<td width="300" valign="top">
<![endif]-->
<div style="display: inline-block;max-width: 320px;vertical-align: top;width: 100%;" >
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" style="font-size: 14px; font-family: arial, helvetica, sans-serif;">
Mon contenu colonne 2
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</center>
</body>Notez les bouts de code conditionnels pour Outlook qui, ne tenant pas compte des attributs max-width, doit être encadré dans un tableau à dimension fixe pour générer le rendu de manière correcte.
Donc si cette technique permet d’agir un rendu mobile optimisé dans tous les cas, pourquoi n’est-elle pas préférée à celle des media queries me direz-vous ? Et bien parce que cette méthode a plusieurs limitations. Tout d’abord, puisque c’est le rendu de l’email qui est fluide et qu’il n’y a pas de conditionnement, il n’est pas possible de cacher ou d’afficher certaines parties de l’email en fonction du terminal, mobile ou non, ni d’avoir des images spécifiques pour mobiles, etc. En bref, tout ce qui rentre dans le mode de pensée “si je suis sur mobile alors …”.
Une autre limitation se place en terme de design ; tout doit être pensé pour pouvoir être codé de manière fluide et avoir un rendu correct dans un maximum de client email. Certains designs ne seront donc pas compatibles avec cette technique. Pour retourner le problème, il est nécessaire de faire appel à un designer au courant des possibilités et des limitations de ce type de méthode afin d’éviter une déconvenue entre le graphisme validé par le client et le développeur qui annonce que ce ne sera pas faisable.
À l’inverse, la technique des media queries permet beaucoup de souplesse, en ceci qu’elle permet de coder de manière conditionnelle, et donc d’avoir des design et du contenu différent pour la version mobile. Mais, sous les clients emails utilisant le moteur de rendu de Gmail, le rendu sera forcé à la version desktop.
Responsive or not responsive, that is the question
Il n’existe pas de bonne ou de mauvaise technique. Tout dépendra des priorités. Souhaitez-vous un rendu s’adaptant au mobile à tout prix? Alors choisissez la solution d’un code fluide, en acceptant les limitations qui vont avec.
Vous souhaitez avoir la main sur le design de la version mobile et de la version desktop, ou avoir un contenu adapté en fonction des terminaux? Alors la technique des media queries est la réponse, en acceptant que sous des clients emails dérivés de Gmail, le rendu soit celui de la version desktop.
Gmail acceptera probablement un jour ou l’autre les media queries, leur communication va dans ce sans, mais en attendant qu’ils fassent le pas, il faudra choisir entre l’une ou l’autre méthode.
Découvrez les produits et services de Badsender sur le sujet
5 réponses
Bonjour Grégory,
Merci pour cette analyse.
Je suis étonné sur un point. Étant sur Android 5.0 et utilisant l’app native e_mail, je peux vous affirmer que la méthode des tableaux responsive fonctionne ( cellule l’une en dessous de l’autre)
Bonjour,
Pour le mailing, j’avais cru comprendre qu’il était vivement conseillé de préférer le css « inline », donc directement dans les attributs style des balises html, plutôt que séparé ? Ca ne pose pas (plus) de souci de rendu, donc ?
Merci pour cet article. Effectivement Christophe l’application native d’android supporte les media queries :
https://litmus.com/help/email-clients/media-query-support/
La seconde technique est plus communément appelé méthode « flex hybride », elle est très bien détaillée ici :
http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919 et une autre mise en pratique : http://www.pole-emailing.fr/projets/pole-emailing/news-pole-emailing-resp/index.html
En attendant que Google daigne prend en compte les media queries sur son application gmail ( celui la même qui pénalise les sites web ne présentant pas de version responsive… ), cette seconde technique peut être utilisée dans les cas simples.
Bonjour Christophe,
Pour l’app native d’Android 5, dans nos tests, tout ce qui concerne les media queries ne passe pas sur Android 5. Si vous avez un code qui permet de faire passer des cellules
Par contre, la deuxième technique mentionnée dans l’article, la méthode responsive, permet elle de faire passer des tables l’une en dessous de l’autre grâce à des tailles fluides, et ce sur Android 5 et Gmail (ce qui représente tout l’intérêt de cette technique).
Bonjour Johan,
Pour le mailing, il est en effet vivement conseillé d’utiliser du style inline, le CSS n’étant pas compris par tous les clients email. Pour les media queries, les clients emails mobiles tiennent compte par contre des CSS, d’où la possibilité de les utiliser pour obtenir un rendu mobile (sauf Gmail) avec les media queries.
Le style inline restera, a priori pour quelques années encore, une nécessité!
Merci pour cet article. Effectivement Christophe l’application native d’android supporte les media queries :
https://litmus.com/help/email-clients/media-query-support/
La seconde technique est plus communément appelé méthode “flex hybride”, elle est très bien détaillée ici :
http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919 et une autre mise en pratique : http://www.pole-emailing.fr/projets/pole-emailing/news-pole-emailing-resp/index.html
En attendant que Google daigne prend en compte les media queries sur son application gmail ( celui la même qui pénalise les sites web ne présentant pas de version responsive… ), cette seconde technique peut être utilisée dans les cas simples.