Email Rendering Issues in Outlook and Hacks to Save the Day
With a plethora of email clients available for email marketers and each one rendering emails in different ways, coding and designing an email has become a turmoil for marketers. After Gmail and Apple mail, Microsoft Outlook is the next big player in the email industry. A recent study of Email Client Market Share shows that Apple email clients account to 49% of market share, Gmail 21% and Outlook accounts to 11% of the email market share.
Outlook has been a great influence for both consumer and business email messaging with its journey from being the first free webmail service to building variations of desktop email programs. There are different versions of Outlook available for desktop, webmail, and mobile environments and there are email rendering issues for all of these.
As a marketer, building emails for Outlook can be a challenging task.
After 2014, the number of emails opened on smartphones and tablets has increased, and since then, desktop emails have been replaced by mobile and web apps. Also, most marketers avoid sending emails via Outlook.
Major Pitfalls for Emails in Outlook
Here are the key issues for building and rendering emails for Outlook and the workarounds for them.
Background images not supported
There different types of backgrounds you can use in your emails.
- Full body background
- Pattern Background
- Graphic Background
- Section-wide background
Unfortunately Outlook 2007-2013 do not support any of the above backgrounds, but the ideal solution for rendering is by using VML (Vector Markup Language).
Input the below code in the <body> tag of your HTML for the background image to cover the entire email window.
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="IMAGE.png" color="#000000"/>
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<td valign="top" align="left" background="IMAGE.png">
And in order to include a background pattern in an email you can upload the pattern onto ‘www.backgrounds.com‘ and get the readymade VML code. You can find more information regarding how to add background in Outlook emails in our blog titled “Background Images in Emails“.
Animated GIFs do not work
Newer versions of Outlook (2003+) do not support animated GIF and instead display just the first frame of the animation.
Outlook freezes an animated GIF on its first frame and hence try creating a GIF that conveys the message in its first frame itself, which runs for just a few milli-seconds.
Additional padding below images
You may find additional space under the images in Outlook.com. A few pixels of additional padding is added below the images. To remove this floating space, add the below style:
This removes the extra padding and gives predictable results for other email clients, too. However, the padding support does not work at span or anchor tag and works for table/td tag. This normally does not happen in Desktop version of Outlooks only in web version i.e. Outlook.com
There are chances that an email which renders well on your system may not work on your clients’ devices. Outlook has an issue with the DPI scaling, wherein any resolution of 1920×1080 and above will distort the layout of your email. This problem usually persists on Windows 10 where default setting is with 125% resolution rather than 100%.
DPI Scaling makes the following changes:
- Widths and heights specified in HTML attributes remain pixel values.
- Widths and heights specified in VML code remain pixel values.
- Other pixel values (px) are converted to point (pt) values instead.
So a text of 10pt @ 150% desktop scaling would be equivalent in size to same text in 15pt @ 100% desktop scaling.
The workaround for this issue is to enable the VML code added in the <head> to scale as per the resolution and additionally have a table with absolute width (containing the email code) nested inside a table with relative width. You may refer to the complete solution in our blog titled “DPI Scaling in Outlook 2007-2013 – Achieving it like a pro!“.
Moreover it is a good practice to test your emails in higher DPI before sending.
Additional page break
Outlook 2007-present use MS Word to render HTML emails and the email appears as it would in print preview- sometimes a white space is inserted above an image or sometimes the text in adjoining tables gets misaligned. This causes the display to look different from how it was actually designed and tested.
To eliminate the white space, reorganize the content, eliminate the nested tables that contain extra length. Remove unnecessarily used nested tables to reduce the length below 22 inches.
Links getting converted to purple or blue
When the emails are sent using HTML template from Outlook, all the links in the email turn to either blue or purple, with an underline. Regardless of what colored text is used, the blue/purple underline persists when viewed on different email clients.
To avoid this issue, use the <font> tag and wrap the text with a <span> tag and a style attribute. Use the following code:
<a style="color:#E3A216; text-decoration:none;">
No support for position and float
Modern web and email development lets you use containers such as divs to structure content. Attributes such as position and float are used with the divs within an HTML code. Outlook doesn’t support these attributes.
To structure your emails that render across all major clients/browsers/devices, use tables to build emails. Think in terms of rows and columns to easily build emails with tables.
Rendering CSS issues
Since Outlook 2007 and above do not support CSS floats, CSS positioning, Flash or other plugins, you need to use XHTML instead of HTML. Moreover the CSS needs to be inlined as far as possible so that it is not stripped away.
Did we miss something here? Do mention it in the comments and get in touch with us if you have email design and coding requirements.
EmailMonks design and code emails that render smoothly on all major email clients and browsers.