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

Restez informé.e via les newsletters de Badsender

Chaque mois, nous publions une newsletter sur l’email marketing et une infolettre sur la sobriété et le marketing. Pour avoir plus de détails sur le contenu et le rythme de nos communications, rendez-vous ici.

Votre adresse email servira uniquement à vous envoyer nos newsletters et nos invitations. JAMAIS ô grand jamais, nous ne la communiquerons à un tiers. Vous pourrez vous désabonner à tout moment en un seul clic.

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.

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).

exemple-bouton-arrondi-vml

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

Besoin d'aide ?

Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.


<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).

exemple-image-fond-outlook-vml

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 !

Partagez

L'auteur

7 réponses

  1. Merci pour le décryptage et le guide d’utilisation de cette méthode intéressante ! Malheureusement les liens vers le test de rendu ne fonctionnent pas…

  2. Bonjour Pauline,

    C’est corrigé ! On s’est fait avoir par la sortie de beta de la nouvelle version d’email on acid, du coup les liens on légèrement changés. C’est mis à jour dans l’article.

    A bientôt,

  3. Bonjour à toi.
    Hier, j’étais tout content d’avoir trouvé LA solution… grâce à toi !
    Mais aujourd’hui, je déchante. Grr.
    Cela ne fonctionne pas avec laposte.net.
    As-tu une solution complète.
    Merci d’avance pour ton suivi.

  4. Bonjour Jean-Yves,

    Pour quelle partie ? Les boutons ou les images de fond ?

    Merci d’avance,

    Jonathan

  5. pour les images de fond, en ce qui me concerne.
    Je n’ai pas testé pour les boutons !
    Par contre, je peux te dire que cela fonctionne avec tous les (récalcitrants) outlook (de office et url), tous webmails d’apple, tous les android…
    enfin tout a été testé sur la plateforme SendInBlue.
    Seul laposte.net m’affiche la couleur de fond (de secrours) mais sans l’image de fond.
    Dans l’espoir que ceci fasse avancer le « truc ».

    J’ai fait une 2e tentative avec une autre newsletter,
    même constat.

    Merci par avance pour ta réponse.
    A bientôt.

  6. Hello,
    Je confirme mon post du 09/03.
    Hélàs, cela ne fonctionne pas dans ces conditions précises !
    Dommage !

  7. Dommage que cela ne fonctionne pas sur ce seul client !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *