You may have noticed that your SharpSpring emails look different in Outlook than in other email clients, such as Gmail or Apple Mail. When it comes to rendering emails, every email client has a different approach based on its own unique standards. For more information, check out our article on Why Emails Look Different Across Email Clients.
SharpSpring has a Litmus Test feature built into the email designer that allows you to see what your emails look like in Outlook and other email clients. While your emails may look fantastic in Gmail, they may sometimes fall short when it comes to Outlook. In this article, we’re going to go over several ways you can adjust the HTML of your emails so they render properly in Outlook.
Older versions of Outlook (2007, 2010, and 2013) use Microsoft Word to render the HTML of their emails. This causes the formatting of emails to be rendered differently from other email clients like Gmail or Apple Mail, due to the fact that Microsoft Word is meant for print design and not HTML. These versions of Outlook (2007, 2010, and 2013) do not support the following:
- Center-aligned images
- Embedded fonts
- Line height
The following users can create and edit emails:
- Marketing Manager
How to edit your emails to render properly in Outlook:
In the email designer, on the right side under Save and Send, click </> view code to enter the HTML of the email.
Here are several code snippets that you can add to the HTML of your email so it will render properly in Outlook.
To add a button, simply copy and paste the code below where you’d like the button to appear. To edit the style of the button, simply adjust the hex codes and font attributes in the a href section of the code. Make sure to replace www.sharpspring.com with the link that you’d like to use for the button, and also be sure to replace Click Here! with whatever text you’d like to appear within the button:
Centering an image in the email designer does not always translate when rendering in Outlook. To ensure that your images are centered, wrap your images with <center> </center> or <p style="text-align: center;"> </p> tags. See examples below:
Example 1: <center><img src="http://www.sharpspring.com/test.jpg"></center>
Example 2: <p style="text-align: center;"><img src="http://www.sharpspring.com/test.jpg"></p>
Outlook will often replace your font with Times New Roman or another standard font. If you’re using a custom font, then make sure to add the following code to the HTML of your website.
If you have an image and a paragraph next to each other, the spacing between the two elements may render differently in Outlook than it does in other email clients. To add additional spacing between two pieces of content, create a 3-column table with the middle column being the space between the other two.
Within the Content Editor, click the Table drop-down icon and select three columns and one row. Add content to the left-most and right-most cells, and adjust the width of the center cell to give more or less spacing between those two pieces of content.
Older versions of Outlook do not currently support line height that is designated without a percent. You need to declare a line height as a percentage in order for Outlook to respect the spacing between text.
Works: mso-line-height-rule: exactly;line-height:110%;
Doesn’t work: line-height:13px
If your email exceeds 1800 pixels, Outlook will automatically create a page break for you. This page break may affect how your email is read and digested by your leads, so you may want to control where that page break occurs. To create your own page break, enter your Content Editor and click the + plus sign icon and select Page Break.