Coding HTML email templates is complicated. Coding templates for Outlook gets even more complicated since Outlook rendering issues are incredibly common. Outlook 2000, 2002, 2003, 2007, 2010, 2013, Outlook.com, Outlook for Office 365, Outlook for iOS, Outlook for Android… the list won’t stop there, there will be more in years to come.
And they all use different rendering engines. Some use Webkit. Some use IE. Some use Microsoft Word. On top of those rendering engines they each add their own flavor of rendering, classes and security policies. And some support media queries for responsive design, most don’t.
Some good news. As an Outlook user, you’re part of a network of more than 400 million active users around the world using what’s probably the best corporate email client. Another good news is that modern tools today allow you to send personalized employee emails using your Outlook distribution lists.
The bad news is that when it comes down to sending beautiful, responsive emails, more often than not Outlook will take the templates you worked super hard on and render them incorrectly with broken links, missing pictures and misaligned text. 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.
The first thing to remember is that, in short, Outlook doesn’t really do responsive emailing. What this means is that, in order for your emails to be rendered properly both on desktop and on mobile, you need to create email templates that work for both, rendering your content properly regardless of the size of the screen.
How do we accomplish this? Below some tips!
Eliminating Outlook Rendering Issues
1) Stick to table-based layouts
Let’s get this out of the way. Email development is not like modern web development. Years ago in web development, we accepted that using tables to markup your layouts and content was not best practice. However, in the email world, it is still good practice, especially if supporting Outlook.
Various Outlook versions don’t support the box model. So to ensure your layout looks as expected, we don’t use divs and floats, we have to use tables, table rows and table cells. This ensures your layout and structure stays intact.
Since Outlook embraces simplicity, this is not the time to be building templates using multiple divs and floats. Instead, embracing tables is the most reliable way to get predictable rendering in Outlook. As our friends over at emailonacid.com put it:
“When using align=”left”, tables will stack on top of each other on smaller screens. This technique is the basis of responsive and fluid design. It works like this: You have two tables that are each 300px wide with align=”left” inside the same container. If the screen is 600 or more pixels wide (as it would be for most desktop clients) then the tables will appear side by side. If the screen is only 400px wide, then the two tables will stack on top of each other. Nested tables are totally safe, so feel free to nest away.”
Here’s an example — feel free to play around with the window size to see how the tables respond.
2) Bulletproof Your Images
When it comes to sending out images, whether a client will block your images or not can feel like a game of Russian Roulette. For that reason, it’s extremely important to include descriptive alt text for your images so your audience still get the information you tried to convey with your pictures.
In the example below from Campaign Monitor you can see how alt text still gets your point across even if images don’t load.
For high resolution (retina) screens you want to make use of 2x or 3x images. To ensure that these images don’t break out of your layouts we need to set the height and width attributes i.e. if your image is displayed at 600px wide in the email then you want to save this image as 1200px wide so it is high resolution and set the width attribute to 600px.
Here’s an example of how your image HTML should look:
<img src=”https://your-cdn.com/image.png” alt=”Descriptive text” width=”600px” height=”300px” border=”0” style=”display:block; max-width: 100%;”>
Note that Outlook 2013 requires you add this code to the <head> of your email to fix DPI scaling issues.
<!–[if gte mso 9]>
3) Stick to 600px Width
The trick to creating “responsive” emails that don’t cause Outlook rendering issues is to make sure your template works in the lowest common denominator. In width terms that means that you want to stick to 550-600px so your email is displayed properly in small screens while still giving you plenty of room to play with your content.
You can target specific Outlook clients and versions with conditional statements. So if you want to apply certain classes or widths that introduce different styles or “fixes” for those versions you can.
<!–[if gte mso 9]>
This particular 550px width above would only apply to “gte mso 9” which means “greater than or equal to Microsoft Office 9” which would actually target Outlook 2000 and above.
4) Use Email-safe Fonts
We know that the designer in you wants to use that custom font you feel embodies the brand but not all email clients can display different types of fonts.
Using an email safe font stack will ensure that all your subscribers or employees, regardless of their browser or email client of choice will see the same font.
The most common email-safe fonts are Arial, Helvetica, Tahoma, Lucida, Verdana, Times, and Trebuchet.
5) Inline CSS
While various modern email clients have started to support embedded CSS, most Outlook versions do not. If you link to an external stylesheet, or embed your CSS in the head of your document, you’ll often find that no styles get rendered. They’re simply ignored.
That’s why we inline our CSS. We write the styles inline with the HTML elements. Doing this manually can take up a lot of time which is where CSS inliners come in handy to automate that task for you.
For example, a piece of content in your email might look like this:
<table border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center”><tr><td style=”font-family: Helvetica, sans-serif; font-size: 14px; vertical-align: top; font-weight: normal; padding-bottom: 8px;” valign=”top”>Hello world</td></tr></table>
A combination of HTML tables and inlined CSS ensures your templates are solid and that no Outlook rendering issues get in the way.
Bonus: ContactMonkey Email Template Builder
The template builder is a powerful feature to help internal communicators send and customize emails that actually get read and interacted with, all from Outlook.
With the brand new ContactMonkey Email Template Builder—which you can access from the ContactMonkey menu within Outlook— users can choose from dozens of templates and edit them with easy-to-use drag and drop tools.
Get Email Template Builder in Outlook, request your demo now and we will get you set up on your Free Email Template Builder Trial!
Emails in Outlook are tricky, 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:
- Word 2007 HTML and CSS Rendering
- Responsive HTML Email Templates for Outlook
- Creating HTML Newsletters in Outlook
- Can I Use in HTML Emails
Any other tips for getting rid of Outlook rendering issues? Sending responsive or HTML emails to Outlook can be a nightmare but following the tips above or using our Email Template Builder for sending responsive HTML emails from Outlook should make your life a little easier. Have you found anything else that works? Please tweet at us with any other tips.