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.
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>
</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:
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">
</td>
</tr>
<tr>
<td class="main_margin" width=4%>
</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>
</td>
</tr>
<tr>
<td class="inner_margin" width="4%"> </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%"> </td>
</tr>
<tr>
<td colspan=3 height=36px> <br>
</td>
</tr>
<tr>
<td class="inner_margin" width="4%"> </td>
<td align=center><table id="services_area" width="100%" style="max-width:500px;">
<tr>
<td class="inner_margin" style="width:4%">
</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">
</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;">
</td>
</tr>
<tr classs="vert-spacer">
<td colspan=2 height="16px">
</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;">
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
<td class="inner_margin" style="width:4%"> </td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td height=24px>
</td>
</tr>
<tr>
<td class="inner_margin" width="4%">
</td>
<td><table width=100%>
<tr>
<td class="inner_margin" width="4%"> </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%>
</td>
</tr>
</table></td>
<td class="inner_margin" width="4%">
</tr><tr class="vert-spacer">
<td colspan=3 height="36px"> </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>
</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;">
<img src="http://cdn.mcauto-images-production.sendgrid.net/777baeb1287b1710/f064a26a-088f-4206-83e4-a2c0e365ea8c/34x34.png" width=17 style="width:17px;">
<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>
</td>
</tr>
</table>
</td>
<td class="inner_margin" style="background-color:#F9F9F7;">
</tr>
</table></td>
<td class="main_margin" width=4%> </td>
</tr>
<tr>
<td height="32px">
</td>
</tr>
</table>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
</body>
</html>
