How to Code Outlook-Proof Emails

Notes for myself on how to write html emails that work

Layout

Padding

Tables

Colgroups

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

Vertical Spacers

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

Empty Rows and Columns

&nbsp;
<br>

Cellpadding

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

Width

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

Transparency

Fonts

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

Responsive

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

Style Sheets

That’s It

Sample Email Code

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

--

--

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