How to Code Outlook-Proof Emails

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.

Layout

Padding

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.

Tables

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

Colgroups

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=

Vertical Spacers

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

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

Empty Rows and Columns

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>

Cellpadding

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>

Width

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%”

Max-Width

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

Color

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

Transparency

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.

Fonts

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;}

Responsive

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;
}
}

Style Sheets

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

AWS: On the Command Line

Creating Wordle in Python

Why I choose software development

10 Software Engineer Resources | You Will Check Every Day

Modularity in Unity

Why you should give a second look at C# and .NET

Woffice 4.1.6 — Multipurpose IntranetExtranet WordPress Theme [Latest Update & Pre-Licensed]

Static Keywords in C++ ||| (Cref++ 1)

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
Chuk Moran

Chuk Moran

Essayist.

More from Medium

What I’ve Learned from Manual Routing

How to make your users spend more time on your website.

A fun 404 error page

Tools I use as a Developer

Git A Kick Start On Git