What Developers Need to Know

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

An HTML email that renders perfectly in every client is a developer’s frustratingly elusive white whale. While many email clients have improved support for certain features over the years, there are still a lot of differences that make it impossible to create an email that looks exactly the same across every device and client.

But do you really need your emails to look exactly the same from client to client? It’s better to have emails that look attractive and are readable, even if they vary a bit, than to spend hours trying to get your emails to look absolutely identical across every environment. This is where conditional code swoops in to save the day. 

Outlook and the need for conditional code

Microsoft Outlook (MSO) is perhaps the most notorious for its inconsistencies in rendering emails. While Outlook for Mac and Outlook online both use Webkit to render emails, Outlook for Windows uses Microsoft Word.

If a campaign needs to be displayed correctly by Outlook, developers have to work with the specific idiosyncrasies of the Word rendering engine. You can code your emails with Vector Markup Language (VML), but it only works in older versions of Outlook (2007-2013), so that won’t really solve your rendering consistency problems. 

What is conditional code?

Conditional code uses “if” statements to determine whether instructions within your code should be executed. When a piece of code says, “If A is true, then execute B,” condition “A” must be met in order for “B” to execute.

While complex conditional code is limited to programming languages (e.g. JavaScript, PHP, Python, C#, et al), markup languages like HTML and CSS do have the ability to handle a limited set of conditional statements. You can use these conditional statements in your HTML emails to display platform-specific content across different devices and clients. You can target different versions of Outlook with Microsoft Office (MSO) conditional comments and different devices using conditional CSS. 

MSO conditional comments

MSO conditional comments use the same tags that allow developers to add ignored content to their HTML documents. You might use comments in your email templates to explain why you added a certain piece of code or styled an element in a particular way. For example:

While HTML comments are usually ignored by browsers and email clients, MSO tags were developed by Microsoft to be recognized and their content is displayed only by Outlook. Although in most situations any content within a comment using MSO tags will display only in Outlook, there is one email client that will render all comments — T-online. So if your emails are being sent to t-online.de domains, you can use the workaround from Rémi Parmentier’s GitHub to hide these comments from that client..

MSO conditional comments can include plain text, HTML, or CSS. This can be useful if you need to implement unique styles, content, or behavior for different versions of Outlook.

Here’s an example of an MSO conditional comment that renders an HTML table that will only be displayed in Outlook:

In this example, the table and its contents will only be recognized and applied by Outlook. Other email clients will ignore the comment and the styles will not be applied.

You can also use MSO conditional comments to include CSS styles in the that target Outlook. For instance, if you wanted to make the body style 16px Arial in a dark gray, you would use the following code:

You can even use mso- prefixed CSS to style elements specific to Outlook and insert these styles within your MSO conditional comments. The following example creates the equivalent of a text shadow in Outlook.

With a slight change in syntax and some additional comment closing symbols, you can use MSO conditional comments to target all clients besides Outlook:

This is a secret message for everyone who doesn’t use Outlook!

“if !mso” is declaring, “if the client is not Microsoft Outlook”. You’ll also need to append your initial and preface your closing tag with

This information will display only if the client is not Microsoft Outlook.

Conditional CSS

In addition to using CSS within MSO conditional comments, you can use conditional CSS via media queries (@media) or assign fallback classes within your

3. Use display:none in a media query: You can use a media query to hide an element on certain devices by setting the display property to none.

@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none;
}
}

4. Use an MSO conditional comment. You can use an MSO conditional comment to hide an element based on a certain condition. For example, you might want to hide an element if the version of Outlook is older than 2010.

In the above code, the image will only display in Outlook versions later than 2010 and will be hidden from all other email clients.

5. Include a HTML5 hidden attribute. Although support for the HTML5 “hidden” attribute is limited. In the email clients that do support it, however, your element will be hidden for screen readers, will not be selectable, and will stay hidden even if CSS doesn’t load. Here’s an example of hiding a table row within a table:

visible table cell content

6. Set opacity to zero. You can hide elements by making them entirely transparent using the “opacity” property in HTML. Opacity ranges between 1 (opaque) and 0 (transparent). If you use opacity to hide an element, the element still exists and takes up the same amount of space as if it were being displayed. It can also be selected by the user and is readable by a screen reader. This is useful if you want that extra spacing and don’t necessarily need that element to be entirely unavailable, but it can look clunky if the object is very large and confusing to those using screen readers.

7. Set visibility to hidden. The visibility:hidden; declaration works exactly like opacity, except that it has the unique feature of being able to be overridden in child elements by setting the child element to visibility:visible;.

8. Use conditional CSS to hide elements based on the recipient’s email client. There are several ways you can use CSS classes to hide elements based on the email client being used. Jay Oram over at ActionRocket has some tricks worth checking out.

It’s important to note that these are just a handful of methods you can use to hide elements in your emails. Also, not all email clients will support all of these methods, so you may need to use a combination to achieve the desired result.

3. Page break problems

The Word rendering engine in Outlook 2010 and prior versions wreaks havoc on email design due to its document length limit of around 1800 pixels. When your email becomes longer than this limit, Outlook will unhelpfully add a page break. 

This can absolutely wreck your email design and make it difficult to read, especially when the break happens in the middle of an image tag or some other vital piece of HTML. MSO conditional statements allow you to create layouts that will work specifically with these versions of Outlook. 

For example, you could create a table with a forced page break only for Outlook 2010 and older, while displaying a normally-styled table for newer versions of Outlook that don’t have this issue.

4. Ghost tables

Creating “ghost tables” in emails is useful particularly when you are using fluid design in emails and you don’t want Outlook to break things just because it doesn’t acknowledge the min-width, max-width, and inline-block properties. There are a couple of different ways to create a ghost table. One option is to build a fixed-width table wrapped in MSO conditional comments and insert the fluid table styles in div tags that Outlook will ignore. 

Another option is to use

You can also use ghost tables to conditionally display background images in emails while providing fallback code for Outlook. 

5. Bulletproof buttons and backgrounds

Bulletproof design elements in email may have slight design variations from client to client, but they retain their functionality across all platforms and devices. A button may be coded to display with rounded corners and appear perfectly in Apple Mail, but appear without a border radius in Outlook. The appearance might differ slightly, but it doesn’t affect the functionality.  

Below is an example of a bulletproof button with an image background as well as a fallback color for clients that don’t support background images. It also includes VML markup for Outlook 2003 and earlier (which does support background images, unlike later versions of Outlook).

Don’t need to use VML in your code? Mark Robbins over at Good Email Code has a good example of how to code a bulletproof button for email.

6. Replacing GIFs with static images

Support for animated GIFs in email is almost universal at this point… almost. Of course, our buddy Outlook for Windows still does not support GIFs. Outlook doesn’t even have a standard treatment of GIFs across versions. Outlook 2007-2013 will simply display the first frame of the GIF, which would be fine if you wanted to design all your GIFs so that the first frame communicated the message you wanted. Unfortunately, Outlook 2016-2019 will play the animated GIF once and then display a play button over the image. 

To keep our Outlook subscribers from feeling design-neglected and to convey our visual message more effectively, we can use conditional comments to display a specific static image.

First you’ll want to add your image class and any styles you want to the