Why Emails Render Differently in Microsoft Outlook

You may have noticed that your Lead Gen & CRM 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 Rendering Issues with Microsoft Outlook 2016 and 2019
• Regarding Border-Radius Values for Buttons
• 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
• Regarding Consistent Rendering

Available With:

Trial	✓
Essential	✓
Advanced	✓
Ultimate	✓

Toolbar:

Email

Users:

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

Regarding Rendering Issues with Microsoft Outlook 2016 and 2019

Lead Gen & CRM cannot influence how email clients render HTML emails. Lead Gen & CRM has a Litmus Test feature built into the email designer that allows you to see what your emails look like in different email clients.

This is because email clients do not render HTML emails the same way, among other reasons. There may be times when your emails vary across email clients. For example, they may look great in Gmail but appear distorted in Microsoft Outlook. 

Microsoft Outlook does not render email images correctly at times. Emails created in Lead Gen & CRM will display regular, static background images for Outlook 2016 and 2019. However, due to these rendering limitations on Microsoft Outlook’s part, dynamic content in sections with background images will not render correctly. 

This means that Lead Gen & CRM email layouts that contain dynamic content will not render background images in Outlook 2016 or Outlook 2019, but will render correctly otherwise.

Regarding Border-Radius Values for Buttons

Microsoft Outlook has issues with rendering buttons. In the past, buttons with a modified border-radius value did not render in emails in Microsoft Outlook. This meant that emails in Microsoft Outlook would render with square buttons, regardless of the time invested in modifying them. Ultimately, this is due to Microsoft Outlook's difficulties with rendering CSS.

Microsoft Outlook can now render buttons with a modified border-radius value, but there is a catch: buttons in layouts with background images will not render border-radius. In order to render border-radius and keep rendering issues to a minimum when using buttons in Microsoft Outlook, make sure that they are in layouts without background images.

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 Lead Gen & CRM. 

To access an email's HTML create a new email, or edit an existing one from the Email page in the left toolbar. 

Click   Options >    view code in the email designer.

Click to enlarge.

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.mywebsite.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.mywebsite.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.

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.mywebsite.com/test.jpg"></center>
   
• <p style="text-align: center;"><img src="http://www.mywebsite.com/test.jpg"></p>

Legacy Emails: Placing Page Breaks and Padding

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. As such, controlling where the page break occurs is key. 

To create a page break, do the following:

1. Place your cursor where you want the page break in your email.
2. Click + Insert > Page Break in the Content Editor toolbar.

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:

1. Place your cursor where you want the table in your email.
2. Click    Table in the Content Editor toolbar.
3. Select three columns and as many rows as needed in the dimensions grid that appears.
4. Adjust the overall table size in the table that appears.
5. Add content to the left and right cells in the table.
6. Adjust the width of the center cell to modify the spacing between the content.

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.

The 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.

Click to enlarge.

Regarding Consistent Rendering

Keep these best practices in mind as you design emails for Outlook in Lead Gen & CRM:

• Use a Lead Gen & CRM template. All of Lead Gen & CRM's email templates have been designed to look great in the majority of common email clients.
  
  
• Use "web-safe" fonts in your email. Some of the standard fonts safe to use for webpages and emails are Helvetica, Arial, and Courier New.
  
  
• Test thoroughly. Open your email in various email clients to make sure it looks like how you want it to, or consider using a tool like Litmus to test the email in all of the major clients.
  
  
• Do not rely on images to convey your message. Many of today's email clients do not render images by default. If you are counting on leads to click an image link to access your website, you might be out of luck.