Expert tips to overcome Outlook email rendering issues

We live in a tactile society, and while online sales are booming, people still love to have a touch-and-feel experience to make sure that what they’re buying lives up to their expectations.

Take sofas for example. A three-seater couch might initially look good on their mobile device, but if they then visit a store and find out it’s uncomfortable and wobbly, they’re never going to buy it.

The same can be true for emails. Your subject line and offer might look good enough to attract opens, but if your email is misaligned and full of broken links and images that won’t load, it can be a major turn-off (both for your recipients and their email service). This could stop people from engaging with future emails and lead to unsubscribes.

No one develops a bad email design intentionally, so who are the main culprits? Unfortunately, it comes down to email developers who haven’t tested their emails properly. Email development has evolved at such a pace that email clients sometimes fail to keep up (we’re looking at you, Outlook!), so if you fail to test and optimize emails, you might find they don’t land the way you want them to.

In this article, we explain why different email clients treat the same email differently and present you with some CSS and HMTL workarounds for Outlook you can use to ensure your emails look great.

Why different email clients treat the same email differently

You must be wondering why different email clients treat the same email differently, but first, let’s clear up what HTML and CSS actually are.

HTML stands for Hyper Text Markup Language and is the standard language used in web design. Web developers use the code to build web pages, while email developers use it to design their emails.

CSS stands for Cascading Style Sheets and is a language used to tell email clients how to present an email written in a markup language like HTML. This impacts the layout, colors and fonts written into the design.

The reason why email clients read and display emails differently is down to the rendering engine used. The rendering engine, in general, draws structured text from the HTML elements and formats it properly based on the CSS styles. If the rendering engine doesn’t support the CSS style sheets or strips away the CSS properties, the email will look different from the original design.

This is also the reason why some emails display incorrectly on mobile, even if they leveraged a responsive email design.

Email clients on certain devices employ proprietary rendering engines, then webmails such as Gmail, AOL and Yahoo Mail piggyback on the rendering engine used by the browser they’re opened in. Here are some more details:

• Apple Mail, Outlook for Mac and iOS Mail use Safari rendering WebKit engine, which supports almost every type of innovation you throw at it

• Thunderbird makes use of Mozilla’s proprietary Gecko engine to support most of the email innovation element

• Microsoft Outlook used Internet Explorer up until Outlook 2003, then moved to Microsoft Word from Outlook 2007 onwards (a bad decision)

As of March 2021, the most popular email clients according to Litmus are:

• Apple iPhone – 38.9%

• Gmail – 27.2%

• Apple Mail – 11.5%

• Outlook – 7.8%

• Yahoo! Mail – 5.4%

• Google Android – 1.5%

• Apple iPad – 1.4%

• Samsung Mail – 1.2%

• Outlook.com – 0.9%

• Outlook Mobile – 0.2%

Even though most people check their emails on the Apple iPhone, you also need to make sure that your email newsletters are rendered the same way in Gmail, Outlook, Yahoo! and Samsung Mail as they are on Apple devices. To do this efficiently, you’ll need a responsive email CSS inline tool which recognizes all CSS selectors.

This is especially true in the case of Outlook, which occupies 7.8% across all clients. There are several inline CSS issues faced in Outlook specifically, so let’s focus on what they are and how to overcome them.

The Outlook ordeal and workarounds to deal with it

As mentioned, up until Outlook 2003, the rendering engine used by Outlook was Internet Explorer, which would disable images by default and display a security message before the ALT-Text.

Aside from that, subscribers didn’t face any deal-breaking rendering troubles. Then, Outlook versions adopted Microsoft Word as a rendering engine in 2007 and today, Outlook 2007, Outlook 2010, Outlook 2013 and Outlook 2016 continue to use Microsoft Word to render HTML emails.

That means there are several Outlook-specific CSS issues for email developers. These different versions of Outlook don’t provide the HMTL and CSS support that email designers need in 2022.

Here’s a list of Outlook CSS issues that arise, and the workarounds.

No support for background images

Outlook 2007-2013 does not support Full body, Pattern, Graphic, Section-wide backgrounds or animations by default. The ideal solution for rendering is to use VML (Vector Markup Language) in the <body> tag of your HTML email. Use this code:

Link colors automatically change color

While most emails will have a bold call-to-action (CTA) button, it’s common to include links to landing pages within your email body text too. Annoyingly, Outlook will change the text color of your email links to blue (or purple if the recipient has clicked on it) by default, regardless of the color you chose when designing your email.

The simplest way to overcome this Outlook CSS issue is to manually hyperlink the text you want to link.

Outlook scales images for High DPI displays

In displays greater than 1920×1080 resolution, Outlook tends to blow up images and text in email templates. The issue arises as Outlook considers widths and heights specified in HTML as attributes and VML code as pixel values. Any other pixel values (px) are converted to point (pt) values instead.

A text of 10pt at 150% desktop scaling would be equivalent in size to the same text in 15pt at 100% desktop scaling. Email developers need to test their emails at 125% or higher DPI scaling in order to make necessary corrections.

Unnecessary page breaks

Sometimes, Outlook tends to consider long emails as Word Documents and automatically adds a page break at every 1800px.

To get around this, you need to control where the page breaks will be. It’s as simple as holding your cursor over where you want to break up text, clicking insert and choosing “page break”.

Outlook (and Hotmail) remove paragraph and margin spacing from the email code

When paragraphs and margin spacing disappear, neatly spaced content will bunch together. To avoid this, email developers have to stick to a traditional (yet outdated) table-based layout using embedded CSS in the header and body.

Gaps between two sliced images

Sometimes, email developers slice images in order to speed up the loading time. The email client will download multiple slices of the image simultaneously, which is much faster than downloading a single big image.

However, Outlook tends to add padding between the two sliced images. You can avoid it by adding div{display:block !important} to the <head> tag.

Bulleted List

Outlook doesn’t support the unordered list HTML tags (<ul> ) and ordered list HTML tags (<li>) so you need to include the following workaround.

Final thoughts

Microsoft Outlook certainly poses different rendering challenges to email marketers, but as it’s still used by 7.8% of all email users, it remains crucial that you ensure your emails display correctly within the client. This also means testing your email content on different screen sizes for both mobile email and desktop email.

Email rendering can be tricky and that’s why you should always test your emails across all email clients before blasting out your email campaigns.

If you continue to have email rendering issues in your campaigns, you could consider using a responsive email CSS inline tool which recognizes all CSS selectors and meets the requirements of all email service providers.