Let’s face the truth. Creating emails is quite an easy task. But formatting those emails to be Outlook-compatible is quite a task. Infact, harder than you think.
Outlook is the most used, but age-old, email client you will ever find. However, it does not support several advancements you find in other email clients like Gmail.
Sample this:
If you have used a PNG image with background transparency, Outlook will freak out! It does not know how to render such images. Similarly, you may wonder why your rounded buttons (created using border-radius CSS property) look Square in Outlook client. Because Outlook does not support border-radius and several other CSS properties.
Here are the reasons why your outlook emails look terrible and what you could do to improve your email design.
Why do my emails look bad with Outlook?
The biggest challenge to email marketers now is to build an email template for Outlook. This is because, from Outlook 2007, Microsoft has stopped using Internet Explorer to render emails and started to use Microsoft Word as their rendering engine. This changeover suited best for Microsoft office users because it allowed them to just copy or paste content from Word or Excel into Outlook emails. But, made the scenario tough for HTML based email builder. Since HTML email looks different in outlook, to overcome certain challenges follow the below steps to improve email campaigns.
Challenges in email rendering with Outlook
An email marketer needs to take a lot into consideration before designing an email campaign. He needs to know his customer subscription who use Outlook. The desktop version, mobile version and the web version of Outlook differ completely from each other in rendering an email. When it comes to email rendering with Outlook, the following are the things to look upon.
Why is the Image getting Clipped and Loads slow
When it comes to inclusion of images in emails, Outlook has certain limitations on image size.
Email newsletters play a major role in email marketing campaigns. They are made dynamic by adding images into it. Sometimes when a long image is added to the campaign’s template, it gets clipped or rescaled at the receiving end. This is because of Outlook clips off the top portion of the image that exceeds 1728px height. So, in this case, we need to resize the image under 1728px to make it appear without clipping.
In situations where the image can’t be resized, the best alternative is to crop the image into two separate images and then use it in the campaign.
Image not getting resized
Outlook doesn’t work well with images that are constrained with HTML. That is, if the email template is added with an image that is resized using HTML, Outlook will display the image only in the original size rather not in the resized value. So, we need to make sure that the image is resized well before it is used in any of the email automation.
Background Images
The best strategy to ‘wow’ a customer is to build an email with a background image featuring the brand. We can make the background images more purposeful by overlaying live texts on the image. The live text will also help us to convey the purpose of the email even at times when the customer is not displayed with the image.
However, Outlook doesn’t support background images with HTML. We need to use VML (Vector Markup Language) for the background images to be viewed by the subscriber.
Input the below code in the <body> tag of your HTML for the background image to cover the entire email window
<div style="background-color:#000000;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="/IMAGE.png" color="#000000"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="IMAGE.png">The above code worked perfectly in displaying the background image with emails opened in Outlook 2007, 2010 and 2013. But Windows Mail 10 needed some modification in the code to add the image with its source allowing the background image.
The below code will enable the top layer of the image to be transparent and helps to fix the background image.
<td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e" style="height:700px; background-image: url(/Image Live URL Here);background-color: #f7901e;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 550px; height: 700px;" src="/Image Live URL Here" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 550px; height: 700px;"> <v:fill opacity="0%" color="#f7901e" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!-- HTML Content Here -->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>Animated GIFs won’t fit
Video speaks more than words.
But, technically speaking an email template needs complex coding to support videos. Thinking on alternatives, as an email marketer I see GIF to be a dynamic option. GIF’s are animated images to convey a message in the simplest form. Outlook doesn’t support GIF.
The GIF image loads but only the first frame of the GIF is rendered to the customer.
If you’ve got outlook subscribers in the email list, make sure the first frame of the image shares the main context of the GIF.
Consider using the animation part to be an added advantage to subscribers with other email clients.
Border radius property
Speaking of email marketing, Call to action button is a feature that makes the email to generate a lead. How many times have we clicked the round-tipped CTA button?
Border radius property is a common CSS property but this does not work well with Outlook. With Outlook, the subscribers are provided with CTA buttons with square borders.
Additional Blank Spaces
Sometimes blank spaces above the image like we used to see in print preview option after the email are rendered with Outlook.
As said earlier in the blog, this is because Outlook 2007 uses Microsoft Word to render HTML emails.
Hence the email looks a bit different from the actual design.
Primary Font issue
If the subscriber’s device lacks primary font style, Outlook will render the entire email in Times New Roman, ignoring the fallback font mentioned in the code.
<!--[if mso]>
<style>
h1 { font-family: Primary font, Fallback font; }
</style>
<![endif]-->
Email template should be perfect
You run an email campaign for an eCommerce store. The template you design should help in sending effective email because, this is not the old traditioned field marketing where customers get to meet you in person.
Looks of the marketing person define the credibility of the brand. So, what are we sending now to represent our brand?
Emails. The design template of your email gives the first impression of your brand to the customer. The better an email looks with the content, better is the brand
However, we don’t get the liberty of using advanced format options to make our email look attractive. We may see the email looks perfect in Outlook, but that will not be the scenario when it is rendered by other email recipients.
You should stick to using tables in your email html. Do not attempt to use div elements with position and floats as Outlook does not support it. Unfortunately there is no workaround for this as of now.
Unsubscribe option is a must
Managing an eCommerce store, we always want to keep our customers engaged with our brand.
How to do it?
Newsletters. Give the customers potential information on the trend and updates in your business niche.
But ultimately it is the customer who decides to follow your brand or not. Once a customer subscribed with us should be provided with the option to opt out from the subscription list at any time.
Unsubscribe button is a must in every newsletter we sent to our customers and if our customers don’t get to see this button,
Expect What?
We might get Spammed!
Sending emails from Outlook lands our brand at this risk coz it doesn’t give this standard option.
Links gets changed to Underlined Blue/ Purple colored text
As email marketers, we need to make the complete use of the email we send to the customers.
We can include subscription links, links to our trending blogs, redirection links to our website to achieve customer engagement.
When an HTML email is sent from Outlook, such links appear in blue/purple text underlined when it is viewed on different email clients.
To avoid this problem, use the <font> and wrap the text with <span> a tag and a style attribute.
Try using the following code-
<a style="color:#E3A216; text-decoration:none;">
<span style="color:#E3A216;">
<font color="#E3A216">
Click me
</font>
</span>
</a>Outlook may be fine to fill your personal inbox.
But, Speaking business- Look out of the Box.
