The top challenges with email marketing in Outlook
It’s no secret that Microsoft Outlook can present a variety of obstacles for email marketers, which is why some choose to avoid it completely. However, with a reported 400 million active users choosing Outlook, ignoring it creates a large missed opportunity.
Taking time to understand the challenges with email marketing in Outlook and how to overcome these ensures you aren’t isolating any of your customers. And it’ll mean all of the hard work you’ve put into designing beautifully presented emails isn’t going to waste when someone’s viewing them through Outlook.
So let’s explore the challenges you may face and the quickest hacks that’ll help you overcome them.
Why are there so many challenges with email marketing in Outlook?
Unfortunately, rendering issues in Outlook are incredibly common, which makes the job of coding emails even more difficult than it needs it to be.
Add this to the fact that there are multiple versions of Outlook, from Outlook 2000 and Outlook 2013 to Outlook.com and Outlook for Office 365, and that these all use different rendering engines, and it’s not hard to see why email marketing through this provider is an absolute minefield. Plus, many aren’t very responsive in the realm of design.
The result? Emails with missing pictures, broken links, distorted text, and misaligned bullet points—see the example from Iteams below. This, in turn, creates disappointed subscribers and casts a tainted light over your brand.
The top challenges with email marketing in Outlook
1. Code removed from email formats
Any web developer will tell you that using tables to create websites is a huge no-no. But this rule doesn’t apply to email design, especially when it comes to Outlook.
Modern email and web development allow you to use divs and other containers to create a structure for your content. Within your HTML code, you’ll have divs that use certain attributes like position and float.
However, these attributes are not supported by Windows 10 Mail or Outlook.
And that’s where tables come into play. You can easily use these tables, table cells, and table rows to build your emails. You just need to remember to use align=”left” at all times as this will help ensure a fluid and responsive design.
For example, if you have two 300px-wide tables that are align=”left”, they’ll appear next to each other on devices that have at least a 600px-wide screen (e.g. your desktop). But on smaller screens, e.g. one that’s 400px wide, the two tables would move so one’s on top of the other.
2. Animated GIFs don’t work
A lot of the newer versions of Outlook (except Windows Mail 10) will only display the first frame of your GIF, making it a static image. While highly frustrating, it’s imperative you get the message across in this first frame so Outlook users aren’t seeing a random image that makes no sense.
This includes adding any calls to action, offers or headlines in the first image, or perhaps including descriptive alt text that’ll clarify your message.
3. Images are incorrectly displayed or not displayed at all
A number of factors may lead to your email images being incorrectly displayed on Outlook.
For example, email clients have the ability to block images, and this includes Outlook. So you need to make sure it’s clear what your image is by including alt text that describes it in detail. Then, if your image doesn’t display, recipients still get an idea of the message you’re trying to convey, as well as feel safer downloading the images if they’re able to.
Alternatively, if you slice images to improve how quickly they load, Outlook has a tendency to introduce padding between the images you’ve sliced. To the <head> tag, add div to avoid this.
4. Custom fonts often replaced with Times New Roman
You may have a custom font for your brand or one that you like to use in your emails, but not all email clients will have the capability to display every type of font. That’s why it’s recommended to use a fallback font, such as Arial, Helvetica, Lucida, Tahoma, Times, Trebuchet, or Veranda.
In the case of Outlook, however, even fallback fonts are ignored and the font displayed is Times New Roman. Obviously, this can completely ruin the overall look of your email. Therefore, you need to force Outlook to use this fallback font.
5. Issues with DPI scaling
Outlook has a tendency to blow up text and images when the display is larger than 1920 x 1080 resolution. This occurs because Outlook looks at the HTML and VML attributes and considers any widths and heights to be in pixel values (px). Any other pixel values are instead converted to point (pt) values.
This problem is usually an issue in Windows 10 because the resolution is set at a default of 125% rather than 100%. That’s why you’ll benefit from testing your emails at a higher DPI before you send them.
You can add Vector Markup Language (VML) code into the <head> to create the right scale, but if you don’t want to get too bogged down with this, sticking to 600 px maximum widths will help. The latter ensures your email works on the smallest screens.
6. Additional page break added
As all of Outlook’s versions from 2007 onward use MS Word as their renderer, emails are often broken down as though they are long text documents. This means one or two-page breaks may appear within the content of your email. Typically, these page breaks occur at every 1800 px.
These blank white spaces may appear above images or text, and they may misalign text in adjoining tables. This can dramatically change the overall look of your email.
Therefore, try to keep your emails within the 1800 px limit. You can do this by getting rid of any unnecessary tables, reorganizing your content, and eliminating any tables that have any additional length.
7. No support for CSS
Sadly, while many email clients now support embedded CSS—you’ve guessed it—most Outlook versions don’t.
Therefore, because CSS positioning, CSS floats, Flash, and various other plugins aren’t supported by certain Outlook versions, you’ll need to revert to XHTML. You’ll also need to make sure you’re using inlined CSS within your HTML elements so it’s not stripped away.
By combining inlined CSS and HTML tables, this should create a solid template while getting rid of any of these rendering issues.
However, there isn’t a way to work around border-radius property—a highly common CSS property. This isn’t supported by Windows 10 Mail or Outlook which means instead of those perfectly-rounded buttons you’ve created, your Outlook clients will have to make do with square ones.
8. Background images aren’t supported
You can use a number of different types of backgrounds in your emails, including graphic backgrounds, patterned backgrounds, full body backgrounds, and section-wide backgrounds.
Versions 2007-2013 of Outlook won’t support any of these.
Again, you can use VML in the <body> tag. And for added safety, be sure to include a fallback color to keep your email looking as professional as possible at all times.
9. Links changed to purple or blue colors, or not working at all
When Outlook’s HTML template is used to send emails, all of the links will either turn purple or blue and will come with that old-fashioned underlining. The color will change regardless of what color text you use.
To avoid this, you’ll need to wrap the text with a style attribute and <span> tag and use the <font> tag.
Or are your links not working at all?
This may be because when you have a link that’s in the same text block as an image (and they’re in line with one another), the 2007 and 2013 versions of Outlook will make these links unclickable.
To avoid this, place the image in a separate image block and your link in its own text block.
10. Bulleted lists aren’t displayed properly
The HTML tags <li> and <ul> are not supported by Outlook, which will mean your bulleted lists don’t display properly.
Wrap up
It can be a challenge for email marketers to wade through all these rendering issues in Outlook. However, hopefully, this primer has not only made you aware of the challenges with email marketing in Outlook but has also given you clear direction on how to prevent these potential complications. Let us know how it goes!
