Home » Featured Content » The top challenges with email marketing in Outlook (and how to solve them)

The top challenges with email marketing in Outlook (and how to solve them)

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.

Source: Medium

What can you do about it?

You could be extreme and only send plain-text emails to these clients–or you could send a simple HTML email that follows basic formatting rules (i.e. doesn’t use CSS).

Or you could just hold your hands up to the fact that your Outlook recipients will have trouble, therefore providing them with a link to view your email as a web page. However, this relies on customers performing another action to view your email, which may reduce click-through rates.

But if you want to crack the rendering issues you’re having with Outlook, why not take a look at our top tips on how to overcome the challenges with email marketing in Outlook? Using these and a reputed email marketing software that caters for different email clients, like Emma, will soon see your open rates and email engagement skyrocketing.

The top 10 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.

Source: Pinterest

2. 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.

3. 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.

4. 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.

5. 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. You do this using the conditional code:

6. 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.

7. 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.

8. 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.

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.

Using the following code will easily overcome this issue:
/*This is for Outlook 2007-10-13-16*/
<!– [if gte mso 9]>
<style>
li
</style>
<![endif]–>
/*End for Outlook 2007-10-13-16*/
/*This is for Other all email clients*/
li
/*End for Other all email clients*/

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!

About the Author

Lane Harbin is a senior content marketing manager at Emma. When she’s not geeking out over email marketing, she enjoys binge-listening to podcasts, catching up on the latest tech news, and constantly rearranging her living room.