MSO Conditional Comments
A quick post about why they are needed and how to use them.
In 2023, designing an HTML email that looks the same in all email clients is still a developer's pipe dream. While most clients improved throughout the years, fragmentation and legacy software still makes it impossible to create email messages that look and behave the same across platforms, devices and clients.
But is it really worth spending countless hours optimizing it? We think it is better to have email campaigns that look attractive and perform well, even if they vary slightly from client to client, than to spend hours trying to make your emails look the same everywhere. This is where conditional code comes into play. Although there are several ways of optimizing content using conditional code, in this post we will focus on MSO (Microsoft Outlook) conditional comments.
Outlook, you filthy animal...
Microsoft Outlook is by far the most inconsistent when rendering emails. This is because Outlook for Mac and Web both use WebKit, while Outlook for Windows, still uses Microsoft Word as its rendering engine.
And because of that, MSO conditional comments are probably the best way to make sure your email actually renders correctly between versions. In some cases, you will even need to use VML (Vector Markup Language) to make some elements look the same in older versions of Outlook.
If you are familiar with a markup language like HTML, you know that applying a comment to a certain part of your markup can be done as follows:
<!-- comment here -->This is a great way of providing some information about your markup that will not be rendered by email clients.
While this is the case for almost all email clients, MSO can use these to display markup only in Outlook. MSO conditional comments can include plain text, HTML, or CSS. This can be useful if you need to make some styles or content work for different versions of Outlook.
For example, the following table, would only be displayed in Outlook:
<!--[if mso]>
<table>
<tr>
<td>
<p>Hi! I'm only visible in Outlook</p>
</td>
</tr>
</table>
<![endif]-->You can even target specific versions of Outlook using the following conditionals:
| Version | Conditional |
|---|---|
| All versions | [if mso] |
| Outlook 2000 | [if mso 9] |
| Outlook 2002 | [if mso 10] |
| Outlook 2003 | [if mso 11] |
| Outlook 2007 | [if mso 12] |
| Outlook 2010 | [if mso 14] |
| Outlook 2013 | [if mso 15] |
| Outlook 2016 and 2019 | [if mso 16] |
Additionally, MSO also supports conditional operators, making it possible to target multiple versions at once:
| Operator | Conditional |
|---|---|
| Not equal to | [if !mso 9] |
| OR | [if mso 10 | mso 11] |
| Greater than | [if gt mso 12] |
| Less than | [if lt mso 14] |
| Greater than or equal to | [if gte mso 15] |
| Less than or equal to | [if lte mso 16] |
Some use cases
Most email campaigns you send will be read by users using different email clients. And, you'll want to at least optimize the elements you include in the content. In some cases, MSO comments will save the day.
Ghost tables
Here's a great example of how optimizations in Outlook can easily add extra work to your email campaigns.
Ghost tables are useful when you're creating fluid content, and you don't want Outlook to break things just because it doesn't recognize certain properties like min-width or max-width.
In the example below, you will see that we add a fixed-width table wrapping our <div>, that will only be visible in Outlook:
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="320">
<![endif]-->
<div style="display:inline-block; width:100%; min-width:200px; max-width:320px;">
<p>Your fluid content would go here. </p>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->These ghost tables make sure that even when we provide an element with a minimum width, it will still work in Outlook.
Buttons & Backgrounds
Although it may sound trivial, buttons with rounded corners and background images will not be supported in some versions of Outlook. With MSO conditional comments, you can optimize how things will look like and provide sensible fallbacks for Outlook.
In the example below, we have a button with round corners that will use VML for Outlook 2003, a sensible fallback without round corners and background image for more recent versions, and an element with both round corners and background images that is hidden in Outlook (note the mso-hide: all;):
<div>
<!--[if mso 11]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://domain.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="25%" stroke="f" fill="t">
<v:fill type="tile" src="https://domain.com/bg.png" color="#fa0031" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Click Here</center>
</v:roundrect>
<![endif]-->
<!--[if gte mso 12]>
<a href="https://domain.com" style="background-color:#ffaaaa;color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;height:40px;text-align:center;text-decoration:none;width:200px;">
Click Here
</a>
<![endif]-->
<a href="https://domain.com" style="background-color:#ffaaaa;background-image:url(https://domain.com/bg.png);border-radius:10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">
Click Here
</a>
</div>GIF Fallbacks
Once again, Outlook does a pretty bad job when it comes to GIFs. What is supported in almost all email clients at this point, is still not in Outlook. To make it even worse, Outlook doesn't even treat GIFs the same way across versions.
Outlook 2007 to 2013 will simply display the first frame of the GIF, which would be great if the first frame is a sensible fallback. Unfortunately, Outlook 2016 to 2019 will play the animated GIF once and then display a play button over the image. Every other version, doesn't support them.
To tackle this, most email developers will simply provide a static version of the GIF for Outlook and display the animated GIF for every other email client:
<!--[if !mso]><!-->
<img src="https://domain.com/my-gif.gif" alt="My GIF">
<!--<![endif]-->
<!--[if mso]>
<img src="https://domain.com/my-jpeg.jpeg" alt="My Static Version">
<![endif]-->Conditional CSS
You can also use MSO conditional comments to include styles only for Outlook users.
For instance, you could include the following conditional in the <head> of your message to change a specific element only for Outlook:
<!--[if mso]>
<style>
.my-class {
font-family: Arial, sans serif;
font-size: 16px;
color: #434345;
}
</style>
<![endif]-->Although there are more use cases for MSO conditional comments, we think these already give you a pretty clear view of what you can do.
Always be testing!
Email clients have widely varying support for HTML and CSS, and there are many techniques that you can use to try to achieve consistent rendering of your content across different clients. Using our drag & drop editor is one way of delegating this job to a solution that generates responsive email messages that looks good in most email clients.
Furthermore, addressing these inconsistencies is the main reason why email teams need to test their campaigns. With Notificare, you can streamline how you test your email messages in more than 90 different email clients and devices. Tests are performed on real devices running the most used operating systems and email software. Performing a test takes a few minutes and can help you visualize how your messages look like, if they contain broken links or images, if there are any potential deliverability issues, and can even help you optimize your markup.
If you have any questions about how to get started with Email Proofing Reports, feel free to reach out or create a demo app and test it yourself today.