Outlook: The Struggles of Making a Masterpiece

The good news when it comes to developing HTML emails is that a lot of browsers and email clients have moved in leaps and bounds and, in the right hands, emails are starting to really push the boundaries with more web-like layouts, animations and buttons. Unfortunately, not every client has moved on…

Picture the scene: you have created the perfect campaign with a wonderful background image, animated GIF and perfect call-to-action buttons with rounded corners. You have created the Mona Lisa of email campaigns and just to make sure that your contacts are going to appreciate this work of art, you test it in Outlook.

Instead of that clever offer appearing and perfectly coded lozenge inviting you to click through, Outlook has given you a blank canvas and a message saying that images have been disabled for your safety. A common occurrence when dealing with one of the most popular email clients in marketing.

So what elements of design doesn’t Outlook support and what can we do to get around this?

1. Images off by default

While a simple click will allow your users to download images and view all your hard work, this requires your audience to do more than just open the email. They have to really care about what you have to say. This matters even more if you have included some of your key messages as images. The easiest solution? No images. But that is not going to get across your brands visual identity in quite the right way. Instead, consider the mix of image and text, and try to ensure you keep any really important messages as text.

2. Animated GIFs

Even when images do show, not all of them will show quite how you might expect. GIFs can be great, displaying all sorts of information in a single image space, but Outlook has other ideas. It will only show the first frame in the GIF.

There are a couple of options here: you could make sure the first frame of your animation isn’t blank, ideally containing the most salient points of information/imagery. Alternatively, you could make use of some code to determine whether the email is being viewed in Outlook or not. This way, you can show everyone not in Outlook something really great, and everyone who is something equally great, though slightly less shiny. To do this, you need to wrap anything you WANT to show in:

<!–[if mso]>
<td>Outlook only image here</td>

and then anything that needs to show when it ISNT in Outlook:

<!–[if !mso]>
<td>Non-Outlook image here</td>

3. Spacing

There is a chance your email template is coded in such a way that uses margins or paragraph tags to give your text or images a little bit of space or a small frame, if you will. I think you can tell where I am going with this: Outlook won’t recognise this space. It will be as though it was never there.

This can cause some important issues with spacing in your campaign. It can bunch up your campaign and make it busier than The Wedding at Cana! Again, all is not lost. While the CSS attribute of margin will not work, and paragraph tags seem to make up their own mind about how they should display, the use of padding is perfectly acceptable.

This only works consistently across all clients when used on table cells and this is a good rule of thumb when styling text as well.

Let’s say I wanted to position a block of text next to an image and have the text be easily editable and the image have some space around it. The ideal way to format this would be:

<table width=”600” cellpadding=”0” cellspacing=”0” border=”0”>
<td style=”padding: 0 10px 0 10px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height: 18px;”>
Some text here
<td style=”padding:0 10px 0 10px;”>
<img src=×150 style=”display:block;” />

This will ensure that your padding will stay the same everywhere and that your images and text appear exactly where you expected them.

4. Rounded Corners and Borders

Does your email have cells with rounded corners, for example in a call-to-action button? As a general rule, The Starry Night-esque curves are not likely to display.

A common way around this is to create corner images. The complex aspect about this is that you need to match these up with either the borders or border images. It also makes working with background colours all the more tricky. Our Digital Design team have taken the approach of using graceful degradation to deal with these sorts of Outlook only issues. They use CSS to create the rounded corner – fully aware that this will not work in Outlook.

What it will do is fall back to being a square/rectangular button as this still allows it to be easily editable and is text based and therefore will always show. They feel this is a worthwhile compromise.

5. Page Breaks

Page breaks have become a lot less of a common problem with Outlook’s most recent updates, however it’s not completely unheard of. Also known as the 1,800 pixel bug, Outlook will have a habit of creating a white gap in your campaign should it become over (you guessed it) 1,800 pixels long. The reason for this is because Outlook uses Word as a rendering engine.

The solution here is to split your campaign into parts. So if you know that your campaign is going to be bigger than the Sistine Chapel, we recommend splitting it into different tables throughout to prevent this page break from occurring.

Outlook can be a fickle mistress to work with but as you will hopefully see, with the right brush strokes, you can still create your masterpiece.

View All Resources »