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, then 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 & email rendering issues happen all the time!

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

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

Modern tools today allow you to send personalized employee emails using your Outlook distribution lists.

But when it comes down to sending beautiful, responsive emails, Outlook will usually take those email templates you worked so hard on and render them with broken links, missing pictures, and a misaligned layout. You think you’ve done a great job until the replies start pouring in: “Re: broken link”, “picture missing?” are probably among the subject lines. 

Learn to Send Responsive Emails From Outlook

 

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… and there’ll be more in years to come.

And they all use different rendering engines. Some use Webkit. Some use Internet Explorer. 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, but some block them. Some support media queries for responsive design, but most don’t.

So how do you ensure your email renders properly in Outlook despite all its quirks? Or perhaps you’re looking for how to code HTML emails for Outlook.

Before you decide to pull out your hair and scream, “how do I send an HTML email in Outlook?” read these tips…

Show me how to create HTML emails in Outlook

6 Tips to Eliminate Outlook Rendering Issues & Create HTML Email 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.

Show me how to avoid Outlook Rendering Issues

2) Stick to Tables When Creating Outlook HTML Email Template

Using tables for layout 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 layout might seem antiquated but it’s still the most reliable way to get predictable email rendering in Outlook.

I want to create responsive emails from Outlook

3) 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 us 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.

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

Learn to create responsive emails from Outlook

4) 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.

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

However 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 in 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.

Avoid Outlook rendering issues with ContactMonkey

5) 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

6) 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.

It’s a plugin that integrates with your Outlook and 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:

Launch your email template builder from Outlook and hit “Design HTML”:

 

how to send html email from outlook

Create your newsletter templates using the drag-and-drop builder

email-template-builder-gmail

You can preview the Outlook HTML email template on both desktop and mobile:

outlook html newsletter

Once you’re happy, import back to Outlook and send:

build template in outlook

Show me how to send HTML emails in Outlook

Conclusion

Creating a responsive email template in Outlook or sending a responsive HTML email template in Outlook can be tricky.

Email address not displayed properly. Problems with background images or html attributes or html tags. These are some of the other problems associated with rendering emails properly in Outlook 2016. 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:

Any other tips for getting rid of Outlook rendering issues? Have you been able to create and send an HTML email newsletter in Outlook? Do you find your HTML email not displaying properly in Outlook?Have you found anything else that works? Do you have any other tips on how to code HTML email for Outlook?Please tweet at ContactMonkey with any other tips.

If this blog interested you, you should also check out how to send responsive HTML emails in Gmail, how to send HTML email in Outlook, ideas for email newsletter templates, Mailchimp email templates free alternatives, free email design templates or outlook email templates.

Create Responsive HTML emails for Free