Saluuuuut mes p’tit foies de veaux ! Article nocturne, une fois n’est pas coutume (Elle veut rien dire cette expression, puisqu’on veut dire totalement l’inverse). Pour les besoins d’un client que je ne nommerai pas (Jamais, vous m’entendez, JAMAIS! Même sous la tortue!), j’ai inséré dans un email plusieurs images de fond dans une seule cellule.
Y a pas de sotte idée, il n’y a que des frigides de l’expérimentation !
Figurez-vous que les résultats d’email rendering me laissent pantois ! Car le support n’est franchement pas si mal. Et oui ! Comme quoi, tant de choses que tu ignores sont encore possibles dans l’email marketing ! Alors bien sûr, encore faut-il trouver une utilité au fait d’avoir plus d’une seule image de fond dans une seule et même cellule…
Pourquoi s’embêter à insérer de multiples background-image dans une seule cellule d’un email ?
En fait, les raisons sont finalement assez logiques: tout d’abord parce que cela vous permettra, par exemple, de placer une image en bas, et une autre en haut, et ainsi, quelle que soit la hauteur de la cellule, les images de fond en question resteront toujours « figées » à leur place respective, proposant un étirement tout à fait gracieux et esthétique…
« Mais c’est magnifaïque ma chérie! Toi, tu es un H, tu vois ? H, sont pas beaucoup de poitrine ma chérie… »
Cristina Cordula
Mais cela compte aussi sur la largeur (pas seulement la hauteur, suivez mon r’gard!). Si l’email en responsive est basé sur une largeur en pourcentage, et qu’il prend kouaziment toute la largeur du support de consultation, alors on peut aussi penser nos images de fond comme de multiples éléments, ferré à droite ou à gauche, avec ou sans marge, qui vont gracieusement « évoluer ».
Ce n’est pas clair? Je vous l’accorde. Et comme je dis souvent, un petit iframe parle mieux qu’un long monologue :
Bon, National Geographic ne nous a jamais demandé de faire cet email. « Faut pas déconner, hein » comme disait Coluche. Il s’agit là d’une initiative personnelle, pour illustrer mon propos…
Dans cet email, au niveau de la cover (avec le texte « Partez à l’aventure ! », tout en haut quoi !), l’image de fond est en réalité composée de multiples images de fond. 14 au total. Il y a d’un côté les nuages (en gif animé), la montgolfière (en gif animé), les montagnes (en png), et caetera, et caetera…
Ici, mon email a une largeur fixe de 540 pixels de large. Mais si je décide de réduire la fenêtre, on passe alors sur une version responsive de l’email en 100% (sous le point de rupture de 540 pixels de large). Alors (et c’est là tout l’avantage de ce système), je n’ai pas besoin de prévoir une image de fond pour la cover spécifique au responsive, puisque la colline en bas à gauche restera toujours ferrée en bas à gauche (ainsi que les arbres, les moutons, la voiture, la 1ère partie de la route, la mer, les immeubles), les nuages resteront pour leur part toujours ferrés en haut à gauche, la montgolfière et le soleil resteront toujours en haut à droite, et les montagnes, la seconde colline, la tente, la nappe de pique-nique, seront eux toujours ferrés en bas à droite…
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
« Pas folle la brek… »
Eric, la Tour Montparnasse Infernale
J’avoue, ça demande un peu de taf. Mais le support est franchement convenable ! Des iPads aux iPhones, de Gmail à Google Apps, en passant par Thunderbird, Office 365 ou Outlook.com, le résultat escompté est bien là! Et pour les clients mail ne supportant pas cette méthode, il suffit de renseigner une image de fond « aplatie » via l’attribut HTML background.
Passons à la technique pour comprendre mieux encore le fonctionnement…
Si je m’occupe d’abord de ma cellule avec mes multiples images de fond, je vais renseigner une propriété CSS background qui comprendra en premier lieu une seule image de fond.
<td height="540" width="540" style="height:540px; width:540px; background:url(images/montgolfieres_01.gif) no-repeat top right; vertical-align:top;" class="width100pc" align="center">Ensuite, je vais appeler mes autres images de fond, séparées par des virgules, toujours dans la même propriété CSS background. Les éléments au premier plan doivent toujours précéder, dans la déclaration des images de fond, les éléments en arrière-plan. Et je vais ajouter via l’attribut HTML background une image de fond aplatie (comme je l’expliquais plus haut) pour proposer une solution de secours aux clients mail ne supportant pas les multiples images de fond.
<td background="images/background_01.jpg" height="540" width="540" style="height:540px; width:540px; background-image:url(images/montgolfieres_01.gif), url(images/soleils_01.gif), url(images/voitures_01.gif), url(images/moutons_01.png), url(images/arbres_01.png), url(images/routes_01.png), url(images/collines_01.png), url(images/maisons_01.png), url(images/mers_01.png), url(images/arbres_02.png), url(images/routes_02.png), url(images/collines_02.png), url(images/montagnes_01.png), url(images/nuages_01.gif); background-position:top right, top right, bottom left, bottom left, bottom left, bottom left, bottom left, bottom left, bottom left, bottom right, bottom right, bottom right, bottom right, top left; background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background:url(images/montgolfieres_01.gif) no-repeat top right, url(images/soleils_01.gif) no-repeat top right, url(images/moutons_01.png) no-repeat bottom left, url(images/arbres_01.png) no-repeat bottom left, url(images/voitures_01.gif) no-repeat bottom left, url(images/routes_01.png) no-repeat bottom left, url(images/collines_01.png) no-repeat bottom left, url(images/maisons_01.png) no-repeat bottom left, url(images/mers_01.png) no-repeat bottom left, url(images/arbres_02.png) no-repeat bottom right, url(images/routes_02.png) no-repeat bottom right, url(images/collines_02.png) no-repeat bottom right, url(images/montagnes_01.png) no-repeat bottom right, url(images/nuages_01.gif) no-repeat top left; vertical-align:top;" class="width100pc" align="center">Enfin, si je veux aller au bout des choses (et c’est toujours mieux d’y aller), je vais insérer ce code dans une cellule possédant une couleur de fond et un code VML pour proposer tout de même un affichage propre sur Outlook…
<tr>
<td bgcolor="#C1EBEA" width="540" height="540" valign="top" style="width:540px; height:540px; vertical-align:top; background-color:#C1EBEA; background:#C1EBEA;"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:540px;height:540px;">
<v:fill type="frame" src="images/background_01.jpg" color="#C1EBEA" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table style="width:100%; margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="images/background_01.jpg" height="540" width="540" style="height:540px; width:540px; background-image:url(images/montgolfieres_01.gif), url(images/soleils_01.gif), url(images/voitures_01.gif), url(images/moutons_01.png), url(images/arbres_01.png), url(images/routes_01.png), url(images/collines_01.png), url(images/maisons_01.png), url(images/mers_01.png), url(images/arbres_02.png), url(images/routes_02.png), url(images/collines_02.png), url(images/montagnes_01.png), url(images/nuages_01.gif); background-position:top right, top right, bottom left, bottom left, bottom left, bottom left, bottom left, bottom left, bottom left, bottom right, bottom right, bottom right, bottom right, top left; background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background:url(images/montgolfieres_01.gif) no-repeat top right, url(images/soleils_01.gif) no-repeat top right, url(images/moutons_01.png) no-repeat bottom left, url(images/arbres_01.png) no-repeat bottom left, url(images/voitures_01.gif) no-repeat bottom left, url(images/routes_01.png) no-repeat bottom left, url(images/collines_01.png) no-repeat bottom left, url(images/maisons_01.png) no-repeat bottom left, url(images/mers_01.png) no-repeat bottom left, url(images/arbres_02.png) no-repeat bottom right, url(images/routes_02.png) no-repeat bottom right, url(images/collines_02.png) no-repeat bottom right, url(images/montagnes_01.png) no-repeat bottom right, url(images/nuages_01.gif) no-repeat top left; vertical-align:top;" class="width100pc" align="center"><table style="width:100%; margin:0px auto;" role="presentation" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:135px 30px 30px;"><h1 style="margin:0px; padding:0px; font-weight:bold; color:#617286; font-size:60px; font-family:Tahoma, Geneva, sans-serif; mso-line-height-rule:exactly; line-height:58px; text-align:center;" class="fontsize50px lineheight48px">Partez à l'aventure !</h1></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>Ainsi, quel que soit le support ou client mail consulté, le rendu est véritablement à la hauteur de mes espérances ! Si l’on peut croire qu’il ne s’agit que de gadgets, considérez des Master Templates où vous ne connaissez rien de la hauteur de la cellule concernée : cela vous permettra d’assurer un rendu terrible, quelle que soit la hauteur du contenu renseigné !
Et bien plus encore !
En dissociant les éléments de cette image de fond, je peux très bien amener une personnalisation particulière sur chacun de ces visuels : sur l’exemple en question, je pourrais très bien imaginer de ne remplacer que quelques éléments selon les dates ou les saisons. Ou de changer la couleur de la voiture selon la couleur préférée de mon destinataire, sans pour autant changer complètement l’image ! Ok l’idée est pourrie, mais à vous de trouver l’objectif marketing après tout ! 🙂
Un autre avantage que je pense deviner, et qui n’est pas négligeable : si je conçois une seule image de fond, avec les multiples animations en gif animé, le fichier final sera plus lourd. Dissocier les éléments, et ne garder en gif animés que les éléments pertinents permet d’alléger le poids des fichiers !
Le seul inconvénient que je constate : il faut être en mesure, si gif animés il y a, de les concevoir avec un fond transparent, et donc d’ajouter un tramage avec une couleur précise, pour éviter tout rendu un peu sale… Mais bon, c’est pas ça qui va nous arrêter, pas vrai ! Si t’as aimé, partage. Si tu n’as pas aimé, partage. Si tu veux commenter, partage commente. Ca me fera toujours plaisir tu sais. N’hésite pas. Vas-y. Dis-moi ce que tu en as pensé. Allez, j’attends !
