Fausse image de fond, qu’est-ce que ça veut dire ça !?
En fait je ne vais pas vous mystifier, il ne s’agit pas d’une image de fond, mais cela donne l’impression que c’est une image, sauf qu’elle est faite avec des éléments HTMLs et des effets CSS. Enfin ça, c’est ce que moi j’en ai fait! Car ce concept avait été suggéré par Rémi Parmentier sur son blog dans un post intitulé « Fake background in email ». Rémi nous y faisait part que le support des images de fond dans l’email marketing est encore un peu, hm, comment dire… Fastidieux, puisque Outlook.com interprète uniquement l’attribut « background », ce qui incombe et qui lui décombe que l’image se répétera horizontalement et verticalement, tandis que l’appli Gmail pour Android avec un compte autre que Gmail (aka GANGA) n’acceptait quant à lui pas du tout la propriété background. Les webmails La Poste et Free ne supportent pas plus les images de fond. Les choses ont tout de même évolué depuis cet article de Juillet 2017, mais je souhaitais tout de même expérimenter la méthode proposée par Hteumeuleu.
Mais de quelle méthode parle-t-on?
Le postulat est le suivant: quand cela est possible, créer une fausse image de fond, sans utiliser la propriété background. Pour ce faire, il faut maîtriser le principe de positionnement absolu dans un email que Mark Robbins avait tout d’abord évoqué, et que nous avions traduit en français. Foncez consulter ces liens pour assimiler le code à mettre en place. Je me suis donc mis à l’oeuvre pour tester cette technique sur un email Netflix, dans la lignée de notre précédent post 😉
Quelles sont donc les expérimentations dans ce mail?
- La génération de fausses images de fond
- Le positionnement absolu
- Les dégradés
Pour illustrer mieux encore mon propos, voilà ce que je souhaite obtenir:
Il s’agit là d’un design de notre propre initiative. Si jamais cela n’était pas flagrant et que votre contraste est pourri, il s’agit donc d’un personnage, La Dame au Cou Tordu, positionnée devant une vitre, avec une ambiance lugubre. Hé, vous avez oublié qu’on approchait d’Halloween ou quoi? 😀 Le personnage consiste bien en une image au format png, avec fond transparent. Mon défi quant à lui réside dans la génération de la fenêtre en arrière-plan à l’aide d’éléments HTMLs et CSS. Vous commencez à saisir pourquoi j’insiste sur le terme « fausse image de fond ».
Est-ce vraiment réalisable?
Oui. Finalement, tout ou presque est concevable. Le vrai problème, c’est le support.
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Comme dans le post précédent, je n’ai pas souhaité m’ « épandre » sur l’interprétation de ce procédé de fausse image de fond et de positionnement absolu sur les logiciels de messagerie. Je ne suis pas du fumier. Mais si vous voulez recueillir plus d’informations sur le rendu des clients mail, pas de souci, y a qu’à demander! Y a toujours un test dispo sur le Builder Litmus.
Une technique de courrier électronique ne serait pas complète sans un code spécifique pour les versions de bureau d’Outlook utilisant le moteur de rendu de Word.
C’est clair que ce que j’ai généré ne passe pas partout (et en particulier sur Outlook) mais Rémi envisageait d’autres solutions sur ce point pour assurer un peu mieux sur ce foutu client qu’est Outlook. Je n’ai pas pris le temps ici d’insérer les éléments VML Rect qui, potentiellement, pourrait améliorer le rendu sur Outlook. Mais par la suite, j’espère bien m’y atteler. Cependant, une campagne Netflix qui foire sur Outlook, j’ai envie de dire balek!
Toujours est-il que je me suis amusé à reconstruire cet ouverture en HTML & CSS, en jouant sur les positionnements des multiples éléments. Je n’ai pas cherché à agrémenter l’ensemble d’animation. Je n’ai pas voulu surcharger le résultat. La volonté première est de tester, d’expérimenter, de s’amuser sur de nouvelles techniques et procédés. Je suis plutôt satisfait du résultat. Quel est votre avis? On peut (doit) intégrer ces méthodes originales dans l’emailing? Quels sont les paramètres à prendre en compte d’après vous? A mon humble avis, connaître les supports de consultation de vos destinataires peut vous aider à vous décider…
