badsender logo

Email responsive et display:block.

14/06/2015

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:...", 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.

Article mis à jour le 19/05/2021.

Profitez de notre expertise en intégration HTML d’email !

Besoin d’un design system email ? Ou d’un design email tout court ? Ou d’une intégration HTML pour email ? Ou d’un email builder ? On peut aussi vous proposer :

Badsender anime aussi une formation sur le sujet du développement HTML d’un email !

Envie de recevoir la newsletter et les actus de Badsender par email ?

4 réponses

  1. WordPress a supprimé mes balises, je recommence : il suffit de remplacer TD par TH et display block refonctionne.

  2. Article intéressant, ça ressemble à un casse tête chinois cette histoire de tableaux les uns à la suite des autres, mais bon en attendant une meilleure solution…..

    En passant, c’est pas si grave que cette méthode ne marche pas sur Lotus notes! Je ne connais plus personnes qui utilise cette plateforme 🙂

  3. 6 ans après, je réponds aux commentaires… Il m’en aura fallu du temps ! @Mathieu : tu as tout à fait raison, la technique des th au lieu des td fonctionne à merveille, je l’utilise encore aujourd’hui ! @Emailing.fr Pas faux ! Lotus, on pourrait s’en passer 😀

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.