Outlook Rendering Issues and How to Solve Them in Wired Plus
For a long time, Outlook has been known as one of the most popular email clients, especially in the B2B landscape. However, it’s also well-known for something else: its unique rendering rules.
If you’re an email marketer, you’ve probably noticed that your campaigns look pretty different in Microsoft Outlook compared to other email clients, such as Gmail and Apple Mail. With poor support for CSS and HTML, our clients have come across lots of annoying issues.
Whether it’s GIFs not working, padding issues, or white lines that you never added, getting your design to look as it should in Outlook can be a real headache.
So why does my email look different in Outlook?
Every email client has its own rules and each one renders HTML and CSS differently. As a result, your email is likely to end up looking a little different in certain providers. It all comes down to what rendering engine the email client uses – regardless of how much effort you’ve put into designing it.
And that’s not all… Different versions of Outlook use different rendering engines, too
Yep. There are multiple versions of Outlook that are available, each with their own way of rendering HTML, thus affecting the display of emails.
Outlook 2000, 2002, 2003, 2007, 2010, 2013, 2016, 2019, Outlook.com, Outlook for Office 365, Outlook for Mac, Outlook for iOS, Outlook for Android, and there’ll be more to come. It’s not hard to see why email marketing for Outlook is an absolute minefield.
Specifically, Outlook 2007, 2010, 2013, and 2016 can be extra tricky to work with. Why? Because these versions use Microsoft Word to render HTML emails, which results in limited support for HTML and CSS.
So how do you make sure your emails render properly in Outlook without pulling your hair out? Here’s a list of the most common Outlook rendering issues our clients have faced and some tips on how you can overcome them.
10 of the most common Outlook rendering issues – and how to solve them
1. Link colours automatically change to blue or purple
By default, Outlook turns the text colour of all email links to blue (or purple if they’ve been clicked on), regardless of what colour you used when designing.
How to fix it: To try and eliminate this issue, you should manually hyperlink any text that you want to link, this includes telephone numbers and mobile numbers too.
You can do this in Wired Plus by highlighting the text that you want to link and selecting the option to ‘Insert/edit link’. Enter the URL of the page you want the text to link to.
2. Animated GIFs don’t work
The newer versions of Outlook (2003+ except for Windows Mail 10) don’t support animated GIFs. If you have a GIF in your email, it will only display the first frame of the GIF (so it looks like a static image).
How to fix it: Make that you get the first frame of your GIF contains enough valuable information to get your message across. You can also include ALT-text that will convey the necessary information.
You can also insert a ‘View in browser’ link to prompt your reader to view the email in full to see the GIF in all its glory.
To add a ‘View in browser link’ to your email in the Wired Plus editor, highlight the text you want to use and select ‘Special links’ in the toolbar. From the dropdown menu, click on ‘View in browser’. This will add the link to your text, so when the reader clicks, they will be able to view your email as a webpage (fully working GIFs and all!).
3. Image padding disappears
Outlook might ignore set padding around images. As a result, any surrounding text will be flush up against the edge of the image.
How to fix it: In Wired Plus, you can manually add a border around your image that’s the same colour as the background of your email campaign. Since you have added a border rather than padding, it should always render properly in your email.
To add a border to your image in the Wired Plus drag-and-drop builder, click on the relevant row in your email. Then, on the righthand side of the page under ‘Content Properties’, scroll down to the bottom section where it says ‘Border’. Choose your colour, and apply a number of pixels to each side.
4. Images are clipped, re-scaled, or not loading
Outlook has certain limitations on image sizes. If an image’s height is more than 1728px, Outlook will cut off the top of the image that exceeds the 1728px height.
How to fix it: Resize or crop the image so its height is smaller than 1728px. You can do this by using photo-editing software or using the inbuilt image editor in Wired Plus. If you can’t resize your image, you can split the image into smaller parts, and then add multiple image blocks to your email and upload each part of your image separately.
To resize an image in the Wired Plus drag-and-drop editor, click on the relevant image. Under the ‘Content Properties’ tab, click on ‘Apply effects and more’. This will open the inbuilt image editor. Click on the ‘Resize’ option when you can set your measurements.
5. The email breaks when forwarding it
Forwarding emails can cause all sorts of rendering issues. These can be caused by the sending email client and the receiving client. Some of the issues with a forwarded email include extra white spaces, resized images, or missing sections.
How to fix it: Unfortunately there isn’t a quick fix for this however, including a ‘Forward to a friend’ link in your email campaigns is a great idea if you want the forwarded email to render well, regardless of the email client. You can do this by inserting the ‘Forward to a friend’ link inside your email builder.
To do this in Wired Plus, highlight the text you want to add the link to and select ‘Special links’ from the toolbar. From the option, select ‘Forward to a friend’. This will apply the hyperlink to the text.
6. Extra white space or page breaks
Since some versions of Outlook use Microsoft Word to render HTML, long emails are often broken down as if they’re long text documents. This means that one or more page breaks might appear in your email which will show up as extra white space. Page breaks will typically occur at every 1800px.
How to fix it: Try to keep your emails within the 1800px limit. To check if white spaces appear in your email before sending, make sure you send test emails to different email clients. As an easier and quicker option, you can make use of the Inbox Check tool in Wired Plus which will show you how your email will render in different email clients, including Outlook. If white spaces appear in your emails when testing them, reorganising your content blocks to make your email shorter is the most surefire way of getting rid of them.
To carry out a full rendering test of your email from Wired Plus, navigate to stage 4 (‘Test & Schedule’) of the campaign build. From here, under ‘Start Inbox Check’, click ‘Get Started’. The testing will take approximately 15 minutes to complete. You can view your results by navigating to ‘Apps’ > ‘Inbox Check’ inside your account. Please note: this is a paid service.
7. Mysterious horizontal lines
There’s a known issue with Outlook 2016 for Windows where horizontal lines might appear in the body of your email. They tend to be the same colour as the email background colour, so you might only spot them if the background colour of your content block is different to the colour of the email background. Although Microsoft have never explained the reason for this bug, it’s believed that it has something to do with heights that are odd numbers.
How to fix it: Annoyingly, there’s no guaranteed way to fix this issue right now, but there are a couple of things you can try to minimise the problem:
Option 1: Adjust heights and font sizes – Changing font sizes to even numbers can sometimes solve this issue, for example changing the font size from 13px to 14px. You can also try changing the line heights.
Option 2: Match the content background colour to the main background colour – By matching the background colours, the lines will become invisible.
8. Buttons with rounded corners turn square-shaped
If your email has buttons with rounded corners, they might be displayed as square-shaped buttons in some Outlook versions. This is because Outlook 2007, 2010, and 2013 don’t support rounded buttons.
How to fix it: Wired Plus automatically converts the button element for you so a functional button will still appear in versions of Outlook that don’t support rounded buttons.
9. Content blocks next to each other don’t align
If you have 2 or 3 content blocks next to each other, you might notice that they don’t properly align – even if your blocks look equal and aligned inside the editor. This is caused by the way Outlook versions render text and line height, it can different from one PC to another. This can also be dependent on the email client which your email is read in, but there are some things you can try to minimise the issue.
How to fix it: You could try adding returns in text boxes to adjust the height of content blocks and ensure everything aligns. You could also try adding ‘invisible pipes’ by inserting the | character and making it the same colour as the content background to ‘fake’ another line of text.
How to design emails that render properly across all clients
Solving these Outlook rendering problems can be a real headache. Overtime you’ll pick up tricks and tips to fix any issues you spot. It can also help to share these known issues with your design team, in a way you will design your email ‘for Outlook’ knowing to avoid any common pitfalls, before your email even makes it into Outlook.
Did we miss anything off our list? Let us know by chatting to your Account Manager or emailing our support team and we’ll happily be of assistance.