{"id":24,"date":"2026-05-10T13:52:02","date_gmt":"2026-05-10T13:52:02","guid":{"rendered":"https:\/\/www.vinamrmishra.com\/?p=24"},"modified":"2026-05-10T13:52:02","modified_gmt":"2026-05-10T13:52:02","slug":"vml-and-the-lost-art-of-building-html-emails-that-actually-work","status":"publish","type":"post","link":"https:\/\/www.vinamrmishra.com\/?p=24","title":{"rendered":"VML and the Lost Art of Building HTML Emails That Actually Work"},"content":{"rendered":"\n

I have built over 200 HTML emails at Cvent. I have stared at the same newsletter render broken in Outlook at 11pm while it looked perfect everywhere else. I have written <!--[if mso]><\/code> so many times it appears in my dreams. I have done things to a <table><\/code> tag that would make a web developer weep.<\/p>\n\n\n\n

And I’m here to tell you that email development \u2014 real, cross-client, works-in-Outlook-2016-and-Apple-Mail-and-Gmail-and-Yahoo-email-development \u2014 is one of the most underrated technical skills in design. It is also, quietly, becoming a lost art.<\/p>\n\n\n\n

Most people don’t know it exists. The ones who do usually don’t understand why it has to be so complicated. So let’s fix that. This is the full story of VML, HTML email, and why building compliant emails for every client is genuinely hard \u2014 and genuinely worth understanding.<\/p>\n\n\n\n

\n\n\n\n

First: Why Is Email HTML So Different?<\/h2>\n\n\n\n

Before we get to VML, you need to understand the core problem. Email clients are not browsers. They look like browsers. They display HTML. But they do not behave like browsers, and they never agreed to follow the same rules.<\/p>\n\n\n\n

Here’s the brutal reality of the email client landscape in 2025:<\/p>\n\n\n\n

Apple Mail<\/strong> \u2014 58% market share. Uses WebKit, the same engine as Safari. Broadly standards-compliant. Supports CSS Grid, Flexbox, animations, web fonts, background images, border-radius. If it works in a modern browser, it almost certainly works in Apple Mail. It is a joy to build for.<\/p>\n\n\n\n

Gmail<\/strong> \u2014 29% market share. Uses its own sandboxed renderer. Strips <head><\/code> styles. Ignores <link><\/code> stylesheets. Has improved over the years but still aggressively sanitises your CSS. Building for Gmail means inline styles for almost everything, and accepting that some things simply won’t work.<\/p>\n\n\n\n

Outlook desktop (Windows)<\/strong> \u2014 around 4% global market share, but often 40\u201360%+ of your audience if you’re in B2B enterprise. And here is the thing about Outlook: it does not use a browser engine at all. It uses the Microsoft Word rendering engine<\/strong>. The same engine that formats your quarterly reports. Applied to HTML email.<\/p>\n\n\n\n

That last point is why everything about Outlook email development feels like fighting the wrong battle. You are not writing HTML for a browser. You are writing HTML for Word. And Word has a completely different mental model for what HTML means.<\/p>\n\n\n\n

No CSS background images. No border-radius. No CSS positioning. No max-width. No Flexbox. No Grid. No SVG. No padding<\/code> on most elements unless you use mso-specific properties. No margin: auto<\/code> for centering. Tables, nested tables, more tables, and conditional comments everywhere.<\/p>\n\n\n\n

This is the world VML was born into.<\/p>\n\n\n\n

\n\n\n\n

What Is VML?<\/h2>\n\n\n\n

VML stands for Vector Markup Language. It was developed by Microsoft in the late 1990s as an XML-based standard for rendering vector graphics \u2014 shapes, fills, backgrounds, and drawing elements \u2014 inside Internet Explorer and Microsoft Office applications. It predates SVG. It was submitted to the W3C as a web standard and promptly rejected in favour of SVG, which became the actual standard the rest of the web moved to.<\/p>\n\n\n\n

The rest of the web moved on. Microsoft Office did not.<\/p>\n\n\n\n

Because Outlook uses the Word\/Office rendering engine, and because Office never dropped VML support, VML became the only way to do certain things in Outlook that CSS handles trivially everywhere else. Background images. Rounded buttons. Filled shapes. Layered content. Things that take one line of CSS in any browser take 15 lines of VML in Outlook.<\/p>\n\n\n\n

Microsoft has made no official announcement about deprecating VML support in Outlook desktop. It is still supported in every Windows version of Outlook that uses the Word engine. Which, as of today, is still most of them.<\/p>\n\n\n\n

To use VML in an email, you first have to declare the namespace at the top of your HTML document:<\/p>\n\n\n\n

<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"\n      xmlns:v=\"urn:schemas-microsoft-com:vml\"\n      xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n      lang=\"en\"><\/code><\/pre>\n\n\n\n
Without that xmlns:v<\/code> declaration, Outlook won’t recognise a single VML tag. Everything that follows depends on it.<\/p>\n\n\n\n
\n\n\n\n
The Conditional Comment System<\/h2>\n\n\n\n
VML never lives alone. It lives inside conditional comments<\/strong> \u2014 a special syntax that targets specific versions of Microsoft software and is completely invisible to every other email client.<\/p>\n\n\n\n
The basic structure looks like this:<\/p>\n\n\n\n
<!--[if mso]>\n  This content is ONLY shown in Outlook (all versions)\n<![endif]-->\n\n<!--[if !mso]><!-->\n  This content is HIDDEN from Outlook, shown everywhere else\n<!--<![endif]--><\/code><\/pre>\n\n\n\n
You can also target specific versions:<\/p>\n\n\n\n
<!--[if mso 16]>  Outlook 2007 only  <![endif]-->\n<!--[if mso 17]>  Outlook 2010 only  <![endif]-->\n<!--[if mso 18]>  Outlook 2013 only  <![endif]-->\n<!--[if mso 19]>  Outlook 2016 only  <![endif]-->\n<!--[if gte mso 9]>  Outlook 2007 and above  <![endif]--><\/code><\/pre>\n\n\n\n
This system is what allows you to write parallel code \u2014 one version for Outlook using VML, one version for everyone else using normal CSS \u2014 and have each client see only its own version. It’s ugly. It doubles your code. It is also genuinely clever, and it works.<\/p>\n\n\n\n
\n\n\n\n
VML in Practice: The Four Things You Actually Use It For<\/h2>\n\n\n\n
1. Background Images<\/h3>\n\n\n\n
Outlook does not support CSS background images on table cells. Full stop. If you want a background image behind content in Outlook, VML is the only way.<\/p>\n\n\n\n
Here’s a real-world example \u2014 a hero section with a background image that works everywhere:<\/p>\n\n\n\n
<!--[if mso]>\n<v:rect xmlns:v=\"urn:schemas-microsoft-com:vml\"\n        fill=\"true\" stroke=\"false\"\n        style=\"width:600pt; height:300pt;\">\n  <v:fill type=\"tile\"\n          src=\"https:\/\/yourdomain.com\/hero-bg.jpg\"\n          color=\"#1a1a2e\" \/>\n  <v:textbox inset=\"0,0,0,0\">\n<![endif]-->\n\n<!-- Your actual HTML content goes here, visible to all clients -->\n<table width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n  <tr>\n    <td align=\"center\" style=\"padding:60px 40px; background-image: url('https:\/\/yourdomain.com\/hero-bg.jpg'); background-color:#1a1a2e; background-size:cover;\">\n      <h1 style=\"color:#ffffff; font-family:Arial,sans-serif;\">Hero Headline<\/h1>\n    <\/td>\n  <\/tr>\n<\/table>\n\n<!--[if mso]>\n  <\/v:textbox>\n<\/v:rect>\n<![endif]--><\/code><\/pre>\n\n\n\n
What’s happening here: Outlook reads the VML block, ignores the CSS background-image on the <td><\/code>, and renders the VML rectangle with the image fill instead. Every other client reads the CSS background-image, ignores the VML entirely, and renders correctly. Same visual output. Two completely different code paths.<\/p>\n\n\n\n
2. Rounded Buttons<\/h3>\n\n\n\n
CSS border-radius<\/code> does not work in Outlook. If you want a button that looks like a button \u2014 not a rectangle \u2014 in Outlook, you need VML. This is the most common VML use case and the one you’ll encounter in almost every professional email template.<\/p>\n\n\n\n
<!--[if mso]>\n<v:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\"\n             xmlns:w=\"urn:schemas-microsoft-com:office:word\"\n             href=\"https:\/\/yourdomain.com\/cta\"\n             style=\"height:44pt; width:200pt; v-text-anchor:middle;\"\n             arcsize=\"10%\"\n             fillcolor=\"#E8431A\"\n             stroke=\"f\">\n  <w:anchorlock\/>\n  <center style=\"color:#ffffff; font-family:Arial,sans-serif; font-size:16px; font-weight:bold;\">\n    Get Started\n  <\/center>\n<\/v:roundrect>\n<![endif]-->\n\n<!--[if !mso]><!-->\n<a href=\"https:\/\/yourdomain.com\/cta\"\n   style=\"background-color:#E8431A; border-radius:6px; color:#ffffff; display:inline-block; font-family:Arial,sans-serif; font-size:16px; font-weight:bold; line-height:44px; text-align:center; text-decoration:none; width:200px; -webkit-text-size-adjust:none;\">\n  Get Started\n<\/a>\n<!--<![endif]--><\/code><\/pre>\n\n\n\n
Outlook gets the <v:roundrect><\/code>. Everyone else gets the styled <a><\/code> tag with border-radius<\/code>. The arcsize=\"10%\"<\/code> controls how rounded the corners are in VML \u2014 it’s a percentage of the shortest dimension, not a pixel value like CSS.<\/p>\n\n\n\n
3. Solid Background Colors on the Body<\/h3>\n\n\n\n
Even something as basic as a full-width background color on the email body can fail in Outlook without VML. The <v:background><\/code> element solves this:<\/p>\n\n\n\n
<!--[if gte mso 9]>\n<v:background xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"t\">\n  <v:fill type=\"tile\" color=\"#f5f0e8\"\/>\n<\/v:background>\n<![endif]--><\/code><\/pre>\n\n\n\n
Pair this with bgcolor=\"#f5f0e8\"<\/code> on your <body><\/code> tag and you have belt-and-suspenders coverage across every client.<\/p>\n\n\n\n
4. Layered Content (Advanced)<\/h3>\n\n\n\n
Stacking multiple VML layers \u2014 a background image layer, a color overlay layer, and a content layer \u2014 lets you build hero sections with overlay effects that are fully Outlook-compatible. This is the hardest VML technique and the one most email developers never attempt. It involves multiple nested <v:rect><\/code> elements with careful mso-position-horizontal<\/code> and mso-position-vertical<\/code> styling to control stacking order.<\/p>\n\n\n\n
When it works, it feels like actual magic. When it breaks, it breaks in ways that are genuinely mysterious.<\/p>\n\n\n\n
\n\n\n\n
The Full Stack of Email Compliance<\/h2>\n\n\n\n
VML is just one piece of the puzzle. Building a genuinely compliant HTML email means navigating all of this simultaneously:<\/p>\n\n\n\n
Table-based layouts<\/strong> \u2014 Forget CSS Grid. Forget Flexbox. Your layout is tables. Nested tables. Tables inside tables inside tables. This is 2003-era HTML structure, deliberately, because it’s the only layout system that works consistently across all clients including Outlook.<\/p>\n\n\n\n
Inline styles for Gmail<\/strong> \u2014 Gmail strips your <style><\/code> block in certain contexts. Every style that matters needs to be inline. This means your clean, readable CSS becomes style=\"font-family:Arial,sans-serif; font-size:16px; line-height:1.5; color:#333333;\"<\/code> repeated on every single element.<\/p>\n\n\n\n
The mso-<\/code> property family<\/strong> \u2014 Microsoft’s proprietary CSS extensions for controlling Outlook-specific behavior. mso-padding-alt<\/code>, mso-line-height-rule<\/code>, mso-element<\/code>, mso-font-alt<\/code>. None of these exist in the CSS spec. All of them exist in Outlook.<\/p>\n\n\n\n
Dark mode<\/strong> \u2014 Outlook 365 and iOS Mail both invert colors in dark mode, but not always in predictable ways. Black text becomes white. But background colors may or may not follow. Logos on transparent backgrounds can vanish entirely. You need explicit @media (prefers-color-scheme: dark)<\/code> overrides, and you need to test them.<\/p>\n\n\n\n
Image blocking<\/strong> \u2014 Outlook blocks images by default until the user clicks “Download pictures.” Your email needs to communicate even with all images hidden. Alt text on every image. Background colors on image containers. A layout that doesn’t collapse when images disappear.<\/p>\n\n\n\n
Web fonts<\/strong> \u2014 Supported in Apple Mail and some versions of Outlook.com. Not supported in Outlook desktop, Gmail app, or most email clients. Every font stack needs a robust system font fallback.<\/p>\n\n\n\n
Fluid vs fixed width<\/strong> \u2014 Desktop emails are typically fixed at 600px wide. Mobile needs to be fluid or responsive. Getting that transition right across clients requires media queries for the clients that support them, and max-width tricks for the ones that don’t.<\/p>\n\n\n\n
\n\n\n\n
Why This Knowledge Is Disappearing<\/h2>\n\n\n\n
Here’s the part that concerns me as someone who has lived in this space for years.<\/p>\n\n\n\n
Drag-and-drop email builders \u2014 Mailchimp, HubSpot, Klaviyo, Beefree, Stripo \u2014 have made it possible to produce serviceable HTML emails without knowing any of this. You pick a template, drag in your content, hit send. For many use cases, that’s entirely sufficient.<\/p>\n\n\n\n
But “serviceable” and “compliant” are not the same thing. The templates these builders generate are often bloated, poorly optimised for specific clients, and built to the lowest common denominator. They handle the basics. They rarely handle the edge cases \u2014 the enterprise Outlook 2016 user, the aggressive Gmail CSS stripping, the dark mode inversion, the image-blocked inbox.<\/p>\n\n\n\n
When you need a custom email \u2014 a one-off campaign, a branded experience, something that actually looks like your design and not like a template \u2014 the knowledge gap shows up fast. And increasingly, there are fewer developers who know how to bridge it.<\/p>\n\n\n\n
I built 200+ Marketo newsletters at Cvent, many of them heavily customised, built from scratch or heavily modified from base templates. The 84% CTR lift we saw on those newsletters wasn’t just from the content \u2014 it was from emails that rendered correctly across every inbox, that loaded fast, that worked with images blocked, that looked intentional rather than assembled. That kind of result requires understanding the technical layer most email tooling is trying to abstract away.<\/p>\n\n\n\n
\n\n\n\n
The New Outlook \u2014 And What It Changes<\/h2>\n\n\n\n
There is one significant development worth noting. Microsoft has been rolling out a new Outlook for Windows that, unlike its predecessors, uses a Chromium-based rendering engine instead of the Word engine. Once this version becomes the default across enterprise environments, VML will no longer be necessary for the new Outlook.<\/p>\n\n\n\n
That transition is already underway \u2014 but it is slow. Enterprise environments lag years behind on software updates. Outlook 2016, 2019, and 2021 (all Word-engine based) are still widely deployed. For B2B email \u2014 which is most of what people with Marketo and Pardot and HubSpot are sending \u2014 the Word engine is still very much your audience’s reality. Conditional comments and VML are not going away soon.<\/p>\n\n\n\n
And even when they do, the broader principle doesn’t change: email clients render HTML differently from each other, and building email that works everywhere requires understanding how each client thinks, not just how browsers think.<\/p>\n\n\n\n
\n\n\n\n
A Starting Point<\/h2>\n\n\n\n
If you want to understand this space properly, here’s where I’d start:<\/p>\n\n\n\n
Caniemail.com<\/strong> \u2014 The email equivalent of caniuse.com. Tells you which CSS properties and HTML features are supported in which email clients. Essential reference.<\/p>\n\n\n\n
Litmus<\/strong> \u2014 The industry standard for email testing across real clients. Sends your email to actual instances of 90+ email clients and shows you screenshots. Non-negotiable for serious email work.<\/p>\n\n\n\n
Email on Acid<\/strong> \u2014 Similar to Litmus. Good for testing across clients and catching accessibility issues.<\/p>\n\n\n\n
Really Good Emails (reallygoodemails.com)<\/strong> \u2014 A curated gallery of well-designed HTML emails. Study the ones that look good and ask what they must have done to achieve that in Outlook.<\/p>\n\n\n\n
The Cerberus templates<\/strong> \u2014 Open source responsive email templates built with the correct techniques. Good foundation to build from rather than starting from scratch.<\/p>\n\n\n\n
\n\n\n\n
Email development is not glamorous. It is table tags and pixel pushing and testing across 15 clients for a layout that took 20 minutes to design and 3 hours to build correctly. It is writing VML fallbacks for things that should take one line of CSS. It is arguing with Outlook about why it thinks a 20px padding should be 14px.<\/p>\n\n\n\n
But it is also the kind of knowledge that makes you genuinely valuable in a world of people who assume email just works. It doesn’t. And the people who know how to make it work \u2014 really work, everywhere, for everyone \u2014 are rarer than they should be.<\/p>\n\n\n\n
That’s worth something.<\/p>\n\n\n\n
\n\n\n\n
Built emails professionally and have a war story? I’d love to hear it. Find me on LinkedIn<\/a> \u2014 the VML community is small but the trauma is shared.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
I have built over 200 HTML emails at Cvent. I have stared at the same newsletter render broken in Outlook\u2026<\/p>\n","protected":false},"author":1,"featured_media":25,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"_links":{"self":[{"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":1,"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=\/wp\/v2\/posts\/24\/revisions\/26"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=\/wp\/v2\/media\/25"}],"wp:attachment":[{"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vinamrmishra.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}