Image blocking in email
If you want to find out more about email image blocking (and what you can do about it), this is the article for you.
It’s one of the most common (and frustrating things that happen). You design a beautiful email campaign, you’re chuffed with how your content is making your message shine, and then...you open your test email in your Outlook account - and it looks like a bomb hit it.
None of your links are working and all the fonts have been scrambled. Background images aren’t showing and you’re about to throw your laptop out the window. Don’t. Understanding how Outlook rendering works can help you design a more cohesive look that you’ll be happy with.
Even though Microsoft offered the first free webmail service, they’ve released quite a number of Outlook versions that unfortunately don’t all render emails in the same way. We’ll uncover common problems we see with how emails render in different versions of Outlook and then offer you a comprehensive summary of what different Outlook versions allow.
Common problems we see in Outlook and how to account for them
Background images
Background images not showing is a common issue when it comes to various Outlook versions as Outlook does not support the display of background images. This is actually an issue that isn’t just seen in Outlook but some other email clients too. This especially applies when you are using a drag and drop editor and not necessarily when you code your email in HTML.
How to account for this: You could try adding a background colour to the image as a fallback so that something displays in the container instead of an empty background. Alternatively, you could also custom code your template to display images.
Links
If you use custom colours for your links, you might be surprised to hear that on Outlook your links will appear in blue (by default) and in purple (if they’ve been clicked on.)
How to account for this: If you want to make sure your links appear in your selected colours, it’s best to manually hyperlink them. Be sure to also do this for phone numbers or mobile numbers.
Image blocking and alt text
Outlook is strange in that it sometimes doesn’t show your images, or clips your images in your emails.
How to account for this: If your image height is more than 1728px your image will definitely be clipped to fit this height. Make sure you crop your image to a height of max 1728px. If you need images with a height of more than 1728px, you could just split your image up into smaller images. For images that don’t display at all, we recommend that you add alt text to all your images. That way even if the image doesn’t show, your subscriber will still be able to see a description of what should have appeared.
Forms in emails
Forms in Outlook will render differently depending on which Outlook version they are viewed in. In some versions of Outlook, text in forms will be displayed but any other elements that require interactivity do not display, for example radio buttons, form fields and checkboxes. Furthermore, these inputs are replaced with brackets (so essentially they appear as the plain-text version of the form).
How to account for this: The easiest way to account for any rendering issues on Outlook is to place a button with a link to your form.
Symbols in subject lines
In some versions of outlook symbols or emojis in your subject lines do not appear. Instead, a black box appears in their place.
How to account for this: If you use emojis in your subject lines, you should ensure that your text is completely understandable without the emoji. This will mean that your subject line will still be legible to readers who receive your email in Outlook versions that don’t support emojis.
Typography
Typography can cause various rendering problems when it comes to your email campaigns. In buttons your text could default to Times New Roman when extra spaces are added to the end of the calls to action. Sometimes you will also see that a default font appears in your campaign instead of the font you chose to use.
How to account for this: Make sure you do not leave any extra spaces at the end of your calls to action. Use web-safe fonts to ensure that your fonts appear. If your brand uses a font that is not web-safe, you might want to select a font that is close in appearance to the font your brand uses.
Animated GIFs
Particularly Outlook 2007, 2010 and 2013 won’t show any animations like GIFs that are in your email. Instead a static image will appear.
How to account for this: If you need to use a GIF and it includes a headline, calls-to-action or offer you should include these in the first frame of the GIF. Another workaround is to offer your subscribers the ability to view your email in their browser, this would allow your GIF to display.
Rounded corners
Do you use buttons with rounded corners? Well in some Outlook versions rounded buttons will appear square.
How to account for this: Unfortunately, there is no way around this.
IN SUMMARY:
Outlook can wreak havoc on some of your most well laid out plans for your email marketing campaigns. By using Mail Blaze’s campaign builder our engine will optimise elements to render as close to your design as possible for Outlook.
Comments
