La superposition d’éléments dans un email

Cela fait longtemps maintenant que la superposition des éléments dans un site web n’est plus un problème, mais il se trouve que notre domaine de jeu, ce sont les emails, et dans l’email, cela reste très problématique.

Or récemment, Thomas m’a envoyé un article parlant de cela, et il se trouve que trois stars de l’email – car oui, l’email a ses stars, même si elles ne gagnent pas autant qu’une star du cinéma ou du foot – ont mis au point une technique alternative permettant d’avoir un rendu similaire.

Steven Sayo, Mark Robbins et Rémi Parmentier, ont fait un peu de R&D pour nous sortir une technique permettant de faire passer un bloc devant un autre bloc, en superposition, dans un email.

Si les images de fond permettent d’avoir n’importe quel élément devant une image, ici la beauté de cette technique est qu’elle permet de faire passer un élément devant n’importe quel autre élément.
Vous trouverez sur les liens suivants l’article et le Codepen de Steven Sayo proposant une démo.

Regardons un peu comment cela fonctionne, cette superposition dans un email…

Nous avons :

<div class="over-mob" style="max-height:340px; margin: 0 auto; text-align: center;">

Qui contient l’image du haut.
On peut voir dans le code que l’image fait 400px de haut, mais que la div est bien renseignée en max-height à 340px. La class over-mob n’est là que pour modifier cette hauteur pour la version mobile.

L’élément suivant, qui va passer au dessus de l’image, est la table suivante:

<table role="presentation" class="faux-absolute reset" align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="position:relative; opacity:0.999;">

Pour que cette table passe bien au dessus de l’image, il est nécessaire d’activer la propriété z-index, or il se trouve que cette propriété est mal supportée quand on tente de lui passer des valeurs.

Oui mais voilà, il suffit juste de l’activer, pas de lui passer des valeurs. Et pour faire ça, la propriété opacity fait l’affaire. C’est pourquoi on met une opacité pratiquement égale à 1 (je vous défie de voir la différence à l’oeil nu entre 1 et 0.999… ). Pourquoi la propriété opacity fait ça? Parce que.
Si la logique d’interprétation du code dans les moteurs de rendu email avait un sens, ça se saurait…

Et il faut la combiner avec la propriété position:relative pour certains clients email. Encore une fois, parce que.
La classe faux-absolute est, je pense, héritée de la technique de Mark Robbins qui est légèrement différente. Pour cette méthode-ci, le max-height:0 ne s’est pas révélé indispensable dans mes tests.
Et voilà, le tour est joué…

…sauf sur Outlook, évidemment. Pour Outlook, on va devoir intervenir avec du VML et créé un bloc v:rect avec les largeurs et hauteurs renseignées, ainsi qu’un bloc v:text pour positionner correctement le tout.

Une version alternative

Concernant la méthode de Mark Robbins, elle est légèrement différente. Elle consiste à écrire, dans le code HTML, l’élément qui va passer par dessus d’abord et l’élément de fond ensuite. Ici, nous sommes plus dans une utilisation qui ressemble aux images de fond. Et c’est ici que le max-height:0 prend son sens, puisque c’est cela qui permet à l’élément de “flotter” au dessus. Mais cela ne fonctionne que pour un élément qui est complètement par dessus un autre, et pas simplement à cheval. Car dans le cas d’un élément à cheval, il faut que la suite du contenu s’affiche dans la continuité, et ne passe pas derrière l’élément à cheval qui est “flottant”, or c’est ce qu’il se passera avec cette méthode.

Personnellement, j’ai une préférence pour l’approche de Steven Sayo. Je la trouve sémantiquement plus correcte en ordre de lecture et qui, pour moi, est plus simple à appréhender.

Alors, la superosition d’éléments dans un email : révolution ou pétard mouillé?

Je trouve qu’il s’agit d’une très belle technique pour superposer les éléments mais, il faut bien l’avouer, cela ne va pas révolutionner le monde. Cette technique est plus puissante, puisqu’elle permet de faire se chevaucher des éléments qui ne sont pas forcément des images, mais cela demande alors de fixer la hauteur desdits éléments. Et quand on sait que l’interprétation des clients emails peut amener des tailles parfois légèrement différentes, parfois même amenant une ligne de texte en plus, je pense que cela sera risqué, sans parler du rendu mobile (adieu le fluide dans ce cas).

Et surtout, surtout, Outlook ; encore et toujours. Si cette technique avait permis de s’affranchir du VML, on aurait eu quelque chose de vraiment puissant. Mais ici, il faut encore passer par ce fichu VML, ce qui nous empêche toujours d’utiliser plusieurs images de fond (pour le body et pour un bloc par exemple). Cela nous demande également de fixer en dur la hauteur du bloc VML, ce qui enlève le côté réutilisable du code.
Bref, selon moi, il s’agit simplement d’une autre approche pour un design avec des images de fond.

Et en même temps, je suis certain qu’il y a moyen d’être créatif, avec ici un exemple de pastille promotionnelle fait encore une fois par Steven Sayo. Matthieu Solente, codeur email prometteur, a aussi publié une sujet sur Github sur la superposition d’éléments dans un email et en particulier sur Outlook.

Et vous ? Qu’en pensez-vous ? Trouvez-vous que cette technique pourrait modifier votre manière de coder ? Vous savez d’ailleurs qu’on propose des formations sur l’intégration HTML dans un email ?