How to Code Outlook-Proof Emails

Notes for myself on how to write html emails that work

Outlook is the worst. It uses Microsoft Word to render html. Look at this nice transactional email in Gmail. Now see it in Outlook. Thanks, Microsoft.

Image for post
Image for post

Layout

The CSS box model is how we do layout for the web. Want this text above that text? Want a space between the body and the footer? Width and height of the object, padding to space things in from the edge on each side, and then margins to push it away from other things outside it.

Sadly, you can’t trust Outlook with padding. So I just don’t use padding.

Build out your layout as a series of nested tables. It’s not very sexy, but it makes sense and does work.

HTML tables will default to leaving space for a border on each cell. It’s pixels you didn’t ask for, so kill this with this html attribute on a table:
border-collapse:collapse

Specify a colgroup to establish column widths within a table.

<colgroup>
<col span=”1" style=”width: 4%;”>
<col span=”1" style=”width: 92%;”>
<col span=”1" style=”width: 4%;”>
</colgroup>

You can also specify some of these widths in px and others in percent.

To span all these columns, specify how many columns to span on the td element with colspan=

Use an empty td element in a row to establish vertical space.

<tr>
<td height=”36px” colspan=3>&nbsp;
</td>
</tr>

For cells and rows of whitespace, you have to add filler content or Outlook won’t render them at all. So rude. Use:

&nbsp;

or

<br>

To add a uniform amount of padding to all sides of a table, you can use the html cellpadding attribute. This is reliable, but won’t let you have different padding on the top vs sides, for example. It will simplify your code, so try to use it where possible.

<table width=”100%” style=”background-color:#F8F8F9;” cellpadding=24>

Outlook isn’t too good at widths. In particular, it can’t handle css widths on img tags. Use <img width=”100"> not <img style=”width:100px”>
You can also use width=”5%”

Wrap the element in a table that only Microsoft will render. You can set the width of a td and it will behave as a max-width

<! — [if mso]>
<center>
<table><tr><td width=”580">
<![endif]
Whatever content
<! — [if mso]>
</td></tr></table>
</center>
<![endif]

Style Like It’s 2002

For some reason, Outlook may render your colors wrong. Not sure how to fix this.

Outlook can’t do this. Don’t use opacity=.9 or the opacity control at all. Just figure out what the final rendered flat color is and stick with color=#888888 rather than rgba etc.

Outlook needs an !important tag on fonts or will use Times New Roman. Set this with a <style> tag at the top of the email such as:

body, table, td {font-family: Arial, Helvetica, sans-serif !important;}

Outlook can’t handle @media queries, so design the email for mobile first. Or for mobile only, really.

If you’re using a list element, consider changing their indentation on mobile with

@media screen and (max-device-width:600px), screen and (max-width:600px) {
ul {
padding-left: 20px;
}
}

Many older email clients can’t read anything but inline style, so put all your style inline or use an inliner tool to apply rules you write in a clear and simple <style> block to every single element consistently.

That’s It

There are better email clients, even available from Microsoft, such as their webmail client which is relatively good.

However, if you’re building emails that need to render for all browsers, and especially if you know the email will go to large corporations (who generally use retro Microsoft IT for everything), just write the email Outlook-first from the beginning.

Sample Email Code

This might help get you going

<html>
<head>
<style>
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
@media screen and (max-device-width:600px), screen and (max-width:600px) {
td.inner_margin {
width: 5%;
}
td.main_margin {
width: 12px;
}
ul {
padding-left: 20px;
}
}
</style>
</head>
<body style="font-family:arial, helvetica, sans-serif; line-height: 1.6; letter-spacing:.01em; color:#424242; passing:0;">
<!--[if mso]>
<center>
<table><tr><td width="840">
<![endif]-->
<table id="empty_margin" width=100% style="border-collapse:collapse; max-width:840px; margin:0 auto;">
<tr>
<td height="32px">&nbsp;
</td>
</tr>
<tr>
<td class="main_margin" width=4%>&nbsp;
</td>
<td id="content_area" style="border:7px solid #DFE2D6; font-weight:400;">
<table id="table_2" style="width:100%; border-collapse:collapse;">
<colgroup>
<col span="1" style="width: 4%;">
<col span="1" style="width: 92%;">
<col span="1" style="width: 4%;">
</colgroup>
<tr>
<td height="36px" colspan=3>&nbsp;
</td>
</tr>
<tr>
<td class="inner_margin" width="4%">&nbsp;</td>
<td>
<table id="masthead" width=100% style="height:23px; width:100%">
<colgroup>
<col span="1" style="width: 160px;">
<col span="1" style="width: 80%;">
</colgroup>
<tr>
<td align="left" width=152px style="vertical-align:top;">
<img src="https://miro.medium.com/max/545/1*TGH72Nnw24QL3iV9IOm4VA.png" alt="Medium" width="80" style="width:80px">
</td>
<td align="right" style="font-size: 12px; color: 2B3789">
August 28, 2083
</td>
</tr>
</table>
</td>
<td class="inner_margin" width="4%">&nbsp;</td>
</tr>
<tr>
<td colspan=3 height=36px>&nbsp;<br>
</td>
</tr>
<tr>
<td class="inner_margin" width="4%">&nbsp;</td>
<td align=center>
<table id="services_area" width="100%" style="max-width:500px;">
<tr>
<td class="inner_margin" style="width:4%">&nbsp;
</td>
<td width="500">
<table width="100%" style="background-color:#F8F8F9;" cellpadding=24>
<tr>
<td>
<table id="service_list" width=100%>
<tr>
<td id="servicelist" style="width:100%">
<span style="font-family:arial; font-weight:700; font-size:13px">
NEW ITEMS TO SEE AUGUST 28
</span>
</td>
</tr>
<tr>
<td>
<table id="service_list" style="width:100%;">
<colgroup>
<col span="1" style="width: 40px;">
<col span="1">
</colgroup>
<tr classs="vert-spacer">
<td colspan=2 height="16px">&nbsp;
</td>
</tr>
<tr>
<td class="checkmark" style="vertical-align:top; text-align:center;">
<img src="http://cdn.mcauto-images-production.sendgrid.net/777baeb1287b1710/542b5bd6-a616-4405-9d62-7cdf246984c9/32x34.png" width="13">
</td>
<td>
<span>Mangos</span>
<p style="font-size:13px; margin:0;">
<span style="color:#8B8B8B;">12,000 units</span>
<br>
<span style="color:#063F61;">Doing Great</span>
</p>
</td>
</tr>
<tr classs="vert-spacer">
<td colspan=2 height="16px" style="border-bottom: 1px solid #ccc;">&nbsp;
</td>
</tr>
<tr classs="vert-spacer">
<td colspan=2 height="16px">&nbsp;
</td>
</tr>
<tr>
<td class="checkmark" style="vertical-align:top; text-align:center;">
<img src="http://cdn.mcauto-images-production.sendgrid.net/777baeb1287b1710/c2e7c810-5e4b-467e-9054-5a643a0e33e9/32x34.png" width="13">
</td>
<td>
<span>Jackfruit</span>
<p style="font-size:13px; margin:0;">
<span style="color:#8B8B8B;">5,000 units</span>
<br>
<span style="color:#D63230;">Sad and Rotten</span>
</p>
</td>
</tr>
<tr classs="vert-spacer">
<td colspan=2 height="16px" style="border-bottom: 1px solid #ccc;">&nbsp;
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="inner_margin" style="width:4%">&nbsp;</td>
</tr>
</table>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height=24px>&nbsp;
</td>
</tr>
<tr>
<td class="inner_margin" width="4%">&nbsp;
</td>
<td>
<table width=100%>
<tr>
<td class="inner_margin" width="4%">&nbsp;</td>
<td style="font-weight: 400; line-height: 1.6; letter-spacing: .4px;">
Hi Jalinda,<br>
Just a quick note to let you know that we can write email. Is this the email you were hoping for?
<br><br>
<span style="font-weight: 600;">
Important Points:
</span><br>
For each item listed above:
<ul>
<li>
Do a little dance
</li>
<li>
Make a little noise
</li>
<li>
Get down tonight
</li>
</ul>
<a href="https://www.youtube.com/watch?v=a8IuwOMzWQY" style="color:#0975B5; font-size:20px;">Click here to see more</a>
<br><br>
</td>
<td class="inner_margin" width=4%>&nbsp;
</td>
</tr>
</table>
</td>
<td class="inner_margin" width="4%">&nbsp;
</tr>
<tr class="vert-spacer">
<td colspan=3 height="36px">&nbsp;</td>
</tr>
<tr style="background-color:#F9F9F7;">
<td class="inner_margin" style="background-color:#F9F9F7;">
</td>
<td id="footer_area" style="background-color:#F9F9F7;">
<table id="footer" style="font-size:10px; width:100%;">
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 50%;">
</colgroup>
<tr>
<td height=36px>&nbsp;
</td>
</tr>
<tr>
<td>
<img src="https://miro.medium.com/max/545/1*TGH72Nnw24QL3iV9IOm4VA.png" width=98 alt="Medium">
<br><br>
123 Main St, Suite 7<br><br>San Francisco, CA 94104
</td>
<td style="text-align:right;">
<img src="http://cdn.mcauto-images-production.sendgrid.net/777baeb1287b1710/1a50e2fc-316b-484a-b47d-e55bac382a48/34x34.png" width=17 style="width:17px;">
&nbsp;
<img src="http://cdn.mcauto-images-production.sendgrid.net/777baeb1287b1710/f064a26a-088f-4206-83e4-a2c0e365ea8c/34x34.png" width=17 style="width:17px;">
&nbsp;
<img src="http://cdn.mcauto-images-production.sendgrid.net/777baeb1287b1710/d91faebb-414d-4d1c-adb0-a1d19ab1e68c/34x34.png" width=17 style="width:17px;">
<br><br>
<a href="#" style="color:#424242; text-decoration:none;">Unsubscribe</a>
<br><br>
</td>
</tr>
<tr>
<td height=36px>&nbsp;
</td>
</tr>
</table>
</td>
<td class="inner_margin" style="background-color:#F9F9F7;">
</tr>
</table>
</td>
<td class="main_margin" width=4%>&nbsp;</td>
</tr>
<tr>
<td height="32px">&nbsp;
</td>
</tr>
</table>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
</body>
</html>

Essayist.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store