Why Emails Render Differently in Microsoft Outlook

You may have noticed that your SharpSpring emails look different in Microsoft 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. This article will provide information on email renders in Microsoft Outlook. Article Contents Regarding HTML Rendering in Microsoft Outlook Legacy Emails: Accessing Email HTML Legacy Emails: Adding Buttons via HTML Legacy Emails: Centering Images via HTML Legacy Emails: Placing Page Breaks and Padding Emphasizing Embedded Fonts Modifying Line Height Ready to Learn More?	Available with:
	Marketing Automation	✓
	CRM Ultimate	✓
	CRM PRO	✓
	CRM Free	✓

	Toolbar:


	Users:
	Administrators	✓
	Company Managers	✓
	Marketing Managers	✓
	Sales Managers
	Salespersons
	Jr. Salespersons

Regarding HTML Rendering in Microsoft Outlook

At this time, SharpSpring cannot influence the way that Microsoft Outlook or other email clients render HTML emails. In light of this, 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 appear irregular when in Outlook.

Microsoft Outlook 2007, Microsoft Outlook 2010, and Microsoft Outlook 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 Microsoft Outlook do not support the following:

Buttons
Center-aligned images
Embedded fonts
Padding/spacing
Line height

For more information on inconsistencies with email rendering across platforms, refer to the Email Standards Project.

Important: Microsoft no longer supports Outlook 2007. As such, SharpSpring does not guarantee that email templates and emails created in the email designer will render correctly in Microsoft Outlook 2007. In addition, due to how Microsoft Outlook currently renders emails, two-column layout email templates with an image and text will flip the layout of their renders when sent to clients.

Note: SharpSpring offers Professional Services to assist with custom coding.

Legacy Emails: Accessing Email HTML

For emails to render properly in Microsoft Outlook, you will need to edit the HTML of an email created in SharpSpring.

To access an email's HTML, do the following:

In the top toolbar in SharpSpring, click
Content > Emails.
Create a new email, or edit an existing one.
In the email designer, click view code.

Click to enlarge.

Note: This is for legacy emails only. This does not need to be done in simple and designer emails.

Legacy Emails: Adding Buttons via HTML

To add a button, you will need to create the HTML. The following code is an example of a button's HTML. Copy-and-paste the following code where you would like the button to appear in the email.

 <div class="editable" data-editable="standard">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="www.sharpspring.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">

Click Here!

</a>
      
      </table>
    </td>
  </tr>
</table></div>

When using the preceding code, consider the following when adding buttons:

Adjust the hex codes and font attributes in the a href section of the code to adjust the button's appearance.
Replace www.sharpspring.com with the link that you would like to use for the button.
Replace Click Here! with the text you would like to appear within the button.

Click to enlarge.

Note: This is for legacy emails only. This does not need to be done in simple and designer emails.

Legacy Emails: Centering Images via HTML

Centering an image in the email designer does not always translate when rendering in Microsoft Outlook.

To ensure that your images are centered, wrap your images with one of the following tags:

<center><img src="http://www.sharpspring.com/test.jpg"></center>
<p style="text-align: center;"><img src="http://www.sharpspring.com/test.jpg"></p>

Click to enlarge.

Note: This is for legacy emails only. This does not need to be done in simple and designer emails.

Legacy Emails: Placing Page Breaks

If your email exceeds 1800 pixels, Microsoft Outlook will automatically create a page break for you.

This page break may affect how your email is read by your leads, so controlling where the page break occurs is key.

To create a page break, do the following:

In your email, place your cursor where you want the page break.
In the Content Editor, click
+ Insert > Page Break.

Click to enlarge.

Note: This is for legacy emails only. This does not need to be done in simple and designer emails.

Legacy Emails: Adjusting Spacing and Padding

If you have an image and a paragraph next to each other, the spacing between the two elements may render differently in Microsoft Outlook than it does in other email clients. To add additional spacing between two pieces of content, you must create a three-column table with the middle column being the space between the other two.

To create such a table, do the following:

In your email, place your cursor where you want the table. In the Content Editor, click Table. In the dimensions grid that appears, select three columns and as many rows as needed. In the table that appears, adjust the overall table size. In the table, add content to the left and right cells. Adjust the width of the center cell to modify spacing between the content.		Click to enlarge.
		Note: Tables are only available in legacy emails. This does not need to be done in simple and designer emails.

Emphasizing Embedded Fonts

Microsoft Outlook will often replace your font with Times New Roman or another standard font. If you are using a custom font, an !important tag at the end of the list of fonts is essential.

Click to enlarge.

Placement of the tag should appear similar to the following code:

<style>
    body {
      font-family: Georgia, serif !important;
    }
</style>
<br><br><br><br><br>

Modifying Line Height

Older versions of Microsoft Outlook do not support line height that is designated without a percent. You need to declare a line height as a percentage in order for Microsoft Outlook to respect the spacing between text.

Correct:		`mso-line-height-rule: exactly;line-height:110%;`
Incorrect:		`line-height:13px`

Click to enlarge.

Ready to Learn More?

Articles in this section

Article Contents