Outlook : Boutons arrondis et images de fond, c’est possible avec l’ancêtre VML

Vous avez toujours rêvé de pouvoir mettre des images de fonds dans vos emails ? Ou de beaux boutons qui ne soient pas des images ? Vous avez toujours détesté certains clients emails Outlook pour les difficultés qu’il peut vous poser ? Et bien cette époque est désormais révolue (enfin presque). Non pas que les différentes versions d’Outlook soient mises à jour (haha… ), mais il existe maintenant une solution facile à mettre en place pour accéder à votre rêve.

Le VML, ce langage d’hier et d’aujourd’hui

Le problème jusqu’ici, c’est qu’avec des techniques en HTML/CSS, on peut avoir un rendu de bouton identique dans la plupart des clients emails, mais les différents Outlook ont leur façon bien à eux, d’afficher votre code, ou de ne simplement pas afficher vos images de fond. Et Outlook étant un client email répandu, on peut difficilement le laisser de côté.

La solution s’appelle le VML (Vector Markup Language). Il s’agit d’un language propriétaire basé sur du XML qui permet de faire du dessin vectoriel dans Outlook. C’est également par l’intermédiaire de ce language qu’on peut insérer des images de fond dans Outlook. On dessine une forme vectorielle qui contient une image (qui peut se répéter), et le tour est joué.

La mauvaise nouvelle, c’est que ce language est considéré obsolète (le svg ayant pris la relève). La bonne nouvelle, c’est qu’il ne vous faudra pas l’apprendre. Nos amis de chez CampaignMonitor ont crée un générateur qui permet d’avoir le code du bouton ou de l’image de fond désiré sans avoir à potasser un tutoriel sur le VML.

• Pour les images de fond : https://backgrounds.cm/
• Pour les boutons : https://buttons.cm/

Exemple de bouton VML

Voici un exemple de bouton créé pour un de nos clients avec de l’HTML/CSS et du VML. Vous pouvez constater qu’ils s’affichent correctement dans tous les clients email testés (le test de rendu dans Email On Acid).

Et le bout de code ayant servi à générer le bouton:

<table><tbody><tr><td>
<div><!-- [if mso]>
					<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.sushishop.fr/livraison-signature-rolls/?utm_medium=email&utm_campaign=new_menu_2015_gen" style="height:30px;v-text-anchor:middle;width:120px;" arcsize="5%" strokecolor="#bbad95" fillcolor="#bbad95">
						<w:anchorlock/>
						<center style="color:#000000;font-family:Helvetica, Arial,sans-serif;font-size:12px;">
							EN SAVOIR PLUS
						</center>
					</v:roundrect>
				<![endif]--> <a style="background-color: #bbad95; border: 1px solid #bbad95; border-radius: 3px; color: #000000; display: inline-block; font-family: sans-serif; font-size: 12px; line-height: 30px; text-align: center; text-decoration: none; width: 120px; -webkit-text-size-adjust: none; mso-hide: all;" href="https://www.sushishop.fr/livraison-signature-rolls/?utm_medium=email&amp;utm_campaign=new_menu_2015_gen"> EN SAVOIR PLUS </a></div>
</td></tr></tbody></table>

Exemple d’image de fond avec du VML

Et voici un exemple d’email qui utilise également une combinaison d’HTML/CSS et de VML pour afficher l’image du header comme image de fond ( le test de rendu dans Email On Acid).

Et le bout de code qui va avec:

<table><tbody><tr><td>
<div><!-- [if mso]>
					<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.sushishop.fr/livraison-signature-rolls/?utm_medium=email&utm_campaign=new_menu_2015_gen" style="height:30px;v-text-anchor:middle;width:120px;" arcsize="5%" strokecolor="#bbad95" fillcolor="#bbad95">
						<w:anchorlock/>
						<center style="color:#000000;font-family:Helvetica, Arial,sans-serif;font-size:12px;">
							EN SAVOIR PLUS
						</center>
					</v:roundrect>
				<![endif]--> <a style="background-color: #bbad95; border: 1px solid #bbad95; border-radius: 3px; color: #000000; display: inline-block; font-family: sans-serif; font-size: 12px; line-height: 30px; text-align: center; text-decoration: none; width: 120px; -webkit-text-size-adjust: none; mso-hide: all;" href="https://www.sushishop.fr/livraison-signature-rolls/?utm_medium=email&amp;utm_campaign=new_menu_2015_gen"> EN SAVOIR PLUS </a></div>
</td></tr></tbody></table>

Les pour et les contre

Concernant les images de fond, il ne faut pas se faire d’illusions. Il s’agit bien d’un workaround qui n’est pas une solution idéale (le lecteur attentif aura par exemple remarqué un problème d’alignement dans certaines versions d’Outlook). Le code généré est lourd et peu réutilisable.

Pour les boutons, le plus gros avantage est qu’ils passeront correctement dans la plupart des clients emails. Le code généré rend également le bouton cliquable sur son l’ensemble, et pas uniquement sur le texte contenu dans le bouton (ce qui peut éviter de la frustration à vos clients, et donc à vous). Par contre, encore une fois, le code généré est assez lourd et peu réutilisable. De plus, le bouton est codé deux fois (une fois en HTML et une fois en VML), ce qui veut dire qu’en cas de modification du bouton, vous devrez penser à faire les modifications dans les deux bouts de code. Mais dans l’ensemble, la solution reste relativement robuste.

Et donc, VML, j’vais l’aimer?

En conclusion, si vous tenez absolument à mettre des images de fond, même dans Outlook, vous en avez maintenant la possibilité. Gardez cependant à l’esprit qu’un nombre non négligeable d’utilisateurs voient leurs emails sans images, que ce soit à cause de leur client email ou par choix. Cela montre l’importance d’avoir des appels à l’action qui ne sont pas dépendants de l’affichage des images, ce qu’il vous est désormais possible de faire !

Vous désirez implémenter cette solution dans vos emails ? N’hésitez pas à nous demander plus d’information !