Have you ever googled “how to send HTML email in Outlook” or “how to create HTML email in Outlook”? If you’ve ever experienced Outlook rendering issues when sending responsive HTML emails, this blog is for you.

We know sending HTML email in Outlook or figuring out how to embed HTML email in Outlook can be a royal pain. Outlook email display issues and email rendering issues happen all the time!

There are more than 400 million Outlook users worldwide, and Outlook is often considered the best email client.

But when it comes to coding and sending HTML emails in Outlook, things can get super complicated. It can be hard to make your emails look good in Outlook.

Outlook will usually take email templates you worked so hard on and render them with broken links, missing pictures, and misaligned layouts. You think you’ve done a great job until the replies start pouring with subject lines like:  “Re: broken link” and “FYI picture missing?”.

Just consider the sheer number of Outlook products: Outlook 2000, 2002, 2003, 2007, 2010, 2013, 2016, 2019, Outlook.com, Outlook for Office 365, Outlook for Mac, Outlook for iOS, Outlook for Android… with more to come in the future.

They all use different rendering engines; some use Webkit, some use Internet Explorer, and some use Microsoft Word.

On top of that, they each add their own flavor of rendering, classes, and security policies.

Some display images by default, whereas others block them. Some support media queries for responsive design, though most don’t.

How can you ensure your email renders properly in Outlook despite all its quirks?

For those who do not know how to code HTML emails for Outlook, modern internal communications tools like ContactMonkey allow you to send personalized employee emails using your Outlook distribution lists. ContactMonkey’s drag-and-drop email template builder allows you to create responsive employee newsletters without having to deal with HTML coding at all.

href=”https://cta-redirect.hubspot.com/cta/redirect/6282300/d8ad9e75-9388-4a46-a82f-0a4506ce42d6″ >New call-to-action

 

6 Tips to Eliminate Outlook Rendering Issues & Create HTML Email Newsletters in Outlook

1. Include CSS resets for Outlook rendering issues

Just like when developing for the web, it’s a good idea to provide a reset CSS for emails to help normalize how code gets rendered and prevent any unwanted styling in email clients. CSS reset code should be added in a few places.

The <head> reset

Adding a few CSS properties in the email <head>’s <style> tag will reset most of Outlook’s unwanted default styles.

<style>

   /* Remove space around the email design. */

   html,

   body {

       margin: 0 auto !important;

       padding: 0 !important;

       height: 100% !important;

       width: 100% !important;

   }

 

   /* Stop Outlook resizing small text. */

   * {

       -ms-text-size-adjust: 100%;

   }

 

   /* Stop Outlook from adding extra spacing to tables. */

   table,

   td {

       mso-table-lspace: 0pt !important;

       mso-table-rspace: 0pt !important;

   }

 

   /* Use a better rendering method when resizing images in Outlook IE. */

   img {

       -ms-interpolation-mode:bicubic;

   }

 

 /* Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inline. */

   a {

       text-decoration: none;

   }

</style>

A CSS reset in the email’s <head> is a good start, but a adding a few more reset styles inline in the email body’s markup will ensure consistent rendering in Outlook.

The <body> reset

Adding a few reset styles in the <body> tag will ensure consistent spacing and text line-height in Outlook.

<body width=“100%” style=“margin: 0; padding: 0 !important; mso-line-height-rule: exactly;”>

The <table> reset

Adding inline attributes to all table tags will remove Outlook’s default spacing and borders on each individual table:

<table role=“presentation” cellspacing=“0” cellpadding=“0” border=“0”>

Including these resets will ensure Outlook does not add any unwanted styles to your email designs.

 

2. Stick to tables when creating Outlook HTML email templates

Using tables for layouts isn’t a good practice in the web world, but it’s still good practice in the email world… especially for supporting Outlook.

Most Outlook versions don’t support the box model or things like flexbox, CSS Grid, and floats. This lack of CSS support makes it hard to use semantic HTML to build email layouts that display properly in Outlook.

While most web browsers could display this HTML in two columns, Outlook would display each column div as its own row. 😕

<div>

<div style=”width; 50%; display: inline-block;”>Column 1</div>

<div style=”width; 50%; display: inline-block;”>Column 2</div>

</div>

To ensure these two columns appear side by side in Outlook, it’s best to use tables:

<table role=“presentation” cellspacing=“0” cellpadding=“0” border=“0”>

<tr>

<td>Column 1</td>

<td>Column 2</td>

</tr>

</table>

Embracing tables for layouts might seem antiquated but it’s the most reliable way to get predictable email rendering in Outlook.

 

3. Use ContactMonkey’s drag-and-drop email template builder

The tips above are most useful if you’re learning how to code HTML emails for Outlook. If you’d like an easier way to build templates, particularly employee newsletters or create stunning email newsletter templates, check out ContactMonkey’s email template builder.

ContactMonkey is an internal communications solution that works with your existing Outlook account. It allows you to create, send, track, and measure responsive HTML emails from your Outlook inbox.

When you use ContactMonkey in Outlook, your emails will look exactly how you designed them because you’re designing in Outlook.

Here’s how it works:

Within ContactMonkey’s internal communications tool, click “Design HTML”. You will be taken to ContactMonkey’s in-browser email template builder. Create your newsletter templates using the drag-and-drop template builder. Simply drag the content you want from the sidebar onto your template to create a beautiful email newsletter.

Drag and Drop Builder

Or you can choose from one of our pre-made templates.

internal communications screenshot

Your completed newsletter templates will appear in the ContactMonkey sidebar within Outlook. Simply click “Insert” and your custom template will appear in your Outlook message window, ready to send.

sidebar screenshot

You’ve just created great-looking email newsletter without having to do any HTML coding with ContactMonkey. Now wasn’t that easy?

href=”https://cta-redirect.hubspot.com/cta/redirect/6282300/af59117f-3cd2-488a-8655-6d810c5c00a3″ >Create Responsive Email Newsletter Templates

4. Use bulletproof buttons for responsive HTML email templates in Outlook

If you’re building templates for Outlook—particularly email templates or newsletter templates—you need to use bulletproof buttons.

Bulletproof buttons allow you to build buttons with code instead of images, making them accessible and easy to maintain.

Calls-to-action are critical in getting people to interact with your emails, and bulletproof buttons ensure that your CTAs are displayed, even if the recipient has email images disabled.

Outlook doesn’t recognize link tags as block elements, so we can’t just style an <a href=””> tag by itself.

Instead we have to wrap the link in a <table> and duplicate a few CSS properties to ensure the button looks like a button in Outlook.

 

create-html-email-outlook

 

<table role=“presentation” cellspacing=“0” cellpadding=“0” border=“0”>

   <tr>

       <td style=“border-radius: 4px; background: #0077cc;”>

            <a class=“button-a button-a-primary” href=“https://www.contactmonkey.com/” style=“background: #0077cc; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; border-radius: 4px;”>Button text</a>

       </td>

   </tr>

</table>

This is one of a few ways to achieve bulletproof buttons in Outlook.

Both Litmus and Campaign Monitor have done deep dives on bulletproof email buttons, including versions that use Vector Markup Language (VML) to draw gradients in Windows Outlook.

 

 

5. Include system fonts when learning how to code HTML email for Outlook

All computers come pre-installed with a limited number of system fonts. Arial, Times New Roman, Verdana, Georgia being some of the most common ones.

Web fonts allow designers to get creative with their typography, allowing them to choose from a large number of web fonts for their designs.

Not every version of Outlook supports web fonts, so it’s important to have a fallback system font defined for those versions where web fonts don’t display.

Since some versions of Outlook don’t support web fonts, we should include system fonts behind the web font in the font stack.

<head>

 <link href=“https://fonts.googleapis.com/css?family=Roboto” rel=“stylesheet”>

</head>

<p style=”font-family: Roboto, arial, sans-serif”>

This text will be displayed in Roboto within email clients that support web fonts (like Outlook for Mac) and Arial in email clients that don’t (like Windows Outlook 2010-2019).

</p>

Including system fonts in an email’s font stack as a fallback ensures that everyone sees consistent (though not identical) typography.

 

6. Bulletproof foreground images for Outlook rendering issues

Many versions of Outlook block images by default, only downloading them if a user requests they be downloaded.

We can’t force images to automatically download and display, but we can optimize the email experience when images aren’t displayed.

<img src=“https://cdn.website.com/path/to/image.png” width=“600” height=“” alt=“alt_text” border=“0” style=“width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; display: block;”>

There’s a lot going on there, let’s break it down:

  1. Using absolute paths (instead of relative paths) ensures our images can be downloaded. We have to host an image somewhere public so any email client can access them.
  2. Using either .png, .jpg, or .gif file formats ensures our image can be displayed in every major email client, including all versions of Outlook. While formats like WebP and SVG have good support in web browsers, they are not well supported in email clients.
  3. Specifying image widths using the width, max-width, and height ensures our images display at the proper size on desktop and scale down on mobile. In the example above, the image displays at a maximum of 600px (like on Windows Outlook), but scales down proportionally on mobile (like iOS Outlook).
  4. Using border=”0” removes unwanted borders on emails.
  5. Using display: block; removes unwanted gaps beneath images.
  6. Specifying alt text to provides contextual information about our images, especially handy when Outlook blocks images from automatically displaying. We can also style blocked images with CSS properties like background-color, font-family, font-size, and color.

 

latest-products-outlook-rendering-issues

 

Apply What You’ve Learned

Creating a responsive email template in Outlook or sending a responsive HTML email template in Outlook can be tricky: email addresses may not display properly or background images or HTML attributes or tags may not appear correctly.

These are some of the other problems associated with rendering emails properly in Outlook. This Microsoft Office email client isn’t exactly known for being HTML-code-friendly or email-developer-friendly.

So even after sticking to the best practices and tips mentioned above, it goes without saying you need to test your email templates to make sure that nothing breaks. Some tools where you can test your templates:

Other helpful resources:

Fixing bugs with Outlook specific CSS

Word 2007 HTML and CSS Rendering

Responsive HTML Email Templates for Outlook

Email Rendering Issues in Outlook and Hacks to Save the Day

Can I Use in HTML Emails

Are you fed up experiencing rendering problems when creating HTML emails in Outlook? Do you want an easier way to create beautiful HTML email newsletters? ContactMonkey’s email template builder is a powerful tool that will transform your internal communications tool. Book your free demo to try it yourself!

href=”https://cta-redirect.hubspot.com/cta/redirect/6282300/5bdfb1bf-4869-444c-9ccb-234e6d7a7d55″ >Book Demo