badsender logo

Outlook : Rounded buttons and background images, it's possible with the VML ancestor

16/02/2015

Have you always wanted to put background images in your emails? Or beautiful buttons that are not images? Have you always hated some email clients Outlook for the difficulties it can pose to you? Well, those days are now over (well, almost). Not that the different versions of Outlook are updated (haha... ), but there is now an easy solution to access your dream.

The VML, this language of yesterday and today

The problem so far is that with HTML/CSS techniques, you can have the same button rendering in most email clients, but the different Outlooks have their own way of displaying your code, or simply not displaying your background images. And Outlook being a popular email client, it can hardly be left out.

The solution is called VML (Vector Markup Language). It is a proprietary language based on XML that allows you to make vector drawings in Outlook. It is also through this language that you can insert background images in Outlook. You draw a vector shape that contains an image (which can be repeated), and that's it.

The bad news is that this language is considered obsolete (svg has taken over). The good news is that you don't have to learn it. Our friends at CampaignMonitor have created a generator that allows you to have the code of the desired button or background image without having to go through a VML tutorial.

Example of a VML button

Here is an example of a button created for one of our clients with HTML/CSS and VML. You can see that they display correctly in all tested email clients (the rendering test in Email On Acid).

example-button-arrondi-vml

And the piece of code used to generate the button:

<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"> LEARN MORE </a></div>
</td></tr></tbody></table>

Example of a background image with VML

And here is an example of an email that also uses a combination of HTML/CSS and VML to display the header image as a background image ( the rendering test in Email On Acid).

example-image-fond-outlook-vml

And the piece of code that goes with it:

<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"> LEARN MORE </a></div>
</td></tr></tbody></table>

Pros and Cons

Concerning the background images, don't be fooled. It is a workaround that is not an ideal solution (the attentive reader will have noticed an alignment problem in some versions of Outlook). The generated code is heavy and not very reusable.

For buttons, the biggest advantage is that they will play correctly in most email clients. The generated code also makes the button clickable as a whole, and not just on the text contained in the button (which can save your customers, and therefore you, some frustration). On the other hand, once again, the generated code is quite heavy and not very reusable. Moreover, the button is coded twice (once in HTML and once in VML), which means that if you modify the button, you'll have to remember to make the modifications in both pieces of code. But all in all, the solution remains relatively robust.

And so, VML, I'm going to like it?

In conclusion, if you really want to put background images, even in Outlook, you now have the possibility to do so. However, keep in mind that a significant number of users see their emails without images, either because of their email client or by choice. This shows the importance of having calls to action that are not dependent on image display, which you can now do!

You want to implement this solution in your emails? Don't hesitate to ask us for more information!

Need a design system email ? Or an email design at all? Or an HTML integration for email ? Or an email builder ? We can also offer you :

Badsender also animates a training on the subject of HTML development of an email !

Need a strategic coaching for emailing ? We can also offer you :

Badsender also conducts training on the subject of the emailing strategy and on the choice of a routing tool !

7 Responses

  1. Thanks for the deciphering and the guide to use this interesting method! Unfortunately the links to the rendering test are not working...

  2. Hello Pauline,

    It is corrected! We got caught by the release of beta of the new version of email on acid, so the links have slightly changed. It is updated in the article.

    See you soon,

  3. Hello to you.
    Yesterday, I was very happy to have found THE solution... thanks to you!
    But today, I'm disappointed. Grr.
    This does not work with laposte.net.
    Do you have a complete solution.
    Thank you in advance for your follow-up.

  4. Hello Jean-Yves,

    For which part? The buttons or the background images?

    Thank you in advance,

    Jonathan

  5. for the background images, as far as I am concerned.
    I did not test for pimples!
    However, I can tell you that it works with all (recalcitrant) outlook (from office and url), all apple webmails, all android...
    finally everything was tested on the SendInBlue platform.
    Only laposte.net shows me the background color (of secrets) but without the background image.
    In the hope that this will advance the "thing".

    I made a 2nd attempt with another newsletter,
    same observation.

    Thank you in advance for your answer.
    See you soon.

  6. Hello,
    I confirm my post of 09/03.
    Alas, it does not work under these precise conditions!
    Too bad!

Leave a Reply

Your email address will not be published.