Email responsive et display:block

C’est avec l’aide de Jean-Charles Fauchet, intégrateur chez Badsender, que nous avons récemment constaté un problème majeur dans la conception d’emails responsive : Lors de nos tests d’email preview sur la plateforme EmailonAcid, il apparaît qu’Android 4.4 (KitKat) ne prend tout simplement plus en compte certaines propriétés. En particulier le style="display:block", sur laquelle nous nous concentrerons dans cet article.

Une des méthodes pour concevoir un emailing en responsive consiste à passer les cellules de nos tableaux en display:block selon les résolutions des supports de consultation. Cela permet ainsi de basculer des blocs ou éléments les uns en-dessous des autres pour une consultation verticale (et donc plus adaptée) sur mobiles. Pourtant cette méthode, jusqu’à présent considérée comme une des plus stables par Mailchimp, n’est maintenant plus supportée sur Android 4.4 (et ce depuis Android 4.3). Ce problème avait d’ailleurs été évoqué il y a plus d’un an sur les forums de Google, Litmus, ou encore Alsacreations.

Comment concevoir alors un email responsive adapté à Android 4.4?

La méthode (plus répandue aujourd’hui) de <table> côte à côte, en align= »left » ou right ? Cette solution est moins fiable et comprend de nombreuses contraintes : il faut, pour un affichage correct sur Outlook 2007, 2010 et 2013, supprimer par exemple les « gaps » indésirables à travers de nombreux ajouts CSS.

Un peu laborieux… C’est à travers les conseils de Jean-Charles et en parcourant les forums de Litmus et CampaignMonitor qu’une méthode moins complexe est apparue :

Prenons le problème à la source ; Le display:block ne fonctionne plus sur Android 4.4. Il faut donc bien utiliser la méthode des tableaux les uns à la suite des autres. Mais cette solution ne fonctionne pas correctement sur Outlook. Il faut donc, sur Outlook, pouvoir garder la solution de cellules les unes à la suite des autres. Et pour cela, il existe… Les commentaires conditionnels !

Spécifions donc après chaque fermeture de tableaux que sous Outlook (et seulement Outlook), nous viendrons ajouter une fermeture de td, puis une ouverture d’une nouvelle td ! Ainsi, trois tableaux les uns à la suite des autres deviendront donc trois tableaux inclus dans trois cellules les unes à la suite des autres sur Outlook ! L’idée est simple et fonctionne bien selon nos tests !

Un peu de code pour mieux saisir cela et tester par vous-même ?

<table class="largeur_100" border="0" width="200" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff;" align="left" bgcolor="#f5a316">Cellule 01</td>
  </tr>
</table>
<!-- [if (gte mso 9)|(IE)]></td><td><![endif]-->
<table class="largeur_100" border="0" width="200" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000000;" align="left" bgcolor="#FFFFFF">Cellule 02</td>
  </tr>
</table>
<!-- [if (gte mso 9)|(IE)]></td><td><![endif]-->
<table class="largeur_100" border="0" width="200" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff;" align="left" bgcolor="#f5a316">Cellule 03</td>
  </tr>
</table>

« Super, mais cela ne répond pas à notre problématique du display:block sur Android 4.4 !» Et bien, dorénavant, le display:block ne sera plus nécessaire ! Les tableaux vont simplement s’aligner les uns en-dessous des autres, puisque la largeur du conteneur passera à 100%. Pour cela, ajoutez simplement à vos media queries le code suivant :

@media only screen and (max-width:600px) {
*[class="largeur_100"] {width:100% !important; height:auto !important;} 
}

A noter : Depuis Android 5.0 (Lollipop), les utilisateurs de l’application E-mail sont invités à utiliser Gmail. Beaucoup de bruit évidemment dans le monde de l’e-mailing, puisque les media queries sont à l’heure actuelle très mal supportées par Gmail (même si ce dernier affirme qu’ils sont intéressés par le support des media queries)

A noter, bis : La méthode de tableaux les uns à la suite des autres ne permet pas un affichage correct sur Lotus Notes 6 et Lotus Notes 7.