HTML Emails 101 For Web Developers

Sending Emails

Marketing Emails

Transactional Emails

Life-Cycle Emails

Best Practices for Email Lists

Double Opt-Ins

CAN SPAM

Performance Measurement and Analytics

Reputation and Sending Score

Bulk Emails

Email Client

HTML Templates

HTML Email Templates

Client-Rendering Engines

Using HTML Tables In Layouts

Inline CSS

Buttons

<a href="#" class="btn btn-primary">Click Here</a>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <a href="" target="_blank">Take action now</a> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
<tr>
<td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
</tr>
</table>
</td>
</tr>
</table>

Typography

<style>
@import url(http://fonts.googleapis.com/css?family=Pacifico);
/* Type styles for all clients */
h1 {
font-family: Helvetica, Arial, serif;
}
/* Type styles for WebKit clients */
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1 {
font-family: Pacifico, Helvetica, Arial, serif !important;
}
}
</style>

Conditionals

<!--[if mso]>
Only Microsoft Word-based versions of Outlook will see this.
<![endif]-->
<!--[if (IE)]>
Only IE-based versions of Outlook will see this.
<![endif]-->

Videos in Emails

Email Forms

Gmail Actions

Pre-header Text

Email Testing

MIME Multi-Part

Accessibility

Responsive Email Designs

Fluid

Adaptive and Responsive

Spongy and Hybrid

<!--[if (gte mso 9)|(IE)]><table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" valign="top" width="50%">
<![endif]-->
<div class="span-3" style="display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;">...</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="left" valign="top" width="50%">
<![endif]-->
<div class="span-3" style="display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;">...</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->@media only screen and (max-width: 620px) {
.span-3 {
max-width: none !important;
width: 100% !important;
}
.span-3 > table {
max-width: 100% !important;
width: 100% !important;
}
}

Responsive Images

Workflow Automation

What does the Email Future hold?

Summary

--

--

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