HTML Emails 101 For Web Developers

Sending Emails

Developers in charge of email campaigns, or all the emails a company sends, will have to know how emails work, legal requirements and how emails are actually delivered. A company typically sends a number of different email types

Marketing Emails

There are many ESPs (email service providers) specializing in promotional and marketing emails, including Campaign Monitor, SendPulse email, Emma, Constant Contact and MailChimp. They offer complete solutions to manage subscribers, work with email templates, deliver bulk email campaigns and do reporting.

Transactional Emails

Life-Cycle Emails

Behavior-based and life-cycle email services assist with things like engagement and onboarding. Many ESPs specializing in marketing also provide this service, with services like Intercom, SendPulse Automation, Drip, Customer.io, ConvertKit and Vero falling into this category.

Best Practices for Email Lists

Never, ever buy an email list. Although there are a few legitimate services available, it’s better to steer clear from buying any list.

Double Opt-Ins

Subscribers that have to verify the email address they use may have an extra step in the process, but it does make sense and prevents other people from abusing any email address by subscribing to a list without having the owner’s permission. It also assists with keeping subscription lists clean and is the right way to validate email addresses.

CAN SPAM

These are legal requirements that need to be adhered to when sending emails.

  • Don’t use subject lines that are deceptive.
  • Don’t use misleading or false headers.
  • Tell recipients your location.
  • Identify messages as ads.
  • Promptly honor an opt-out request.
  • Let recipients know how to opt out.
  • Monitor what others are doing on your behalf.

Performance Measurement and Analytics

Always measure everything you can to determine if your emails are getting better. The figures will differ greatly depending on your industry, what you do, the context and the type of emails being sent. Generally however:

  • A good open rate is 20%
  • A poor bounce rate is 5%
  • A good click through rate is between 3 and 7%
  • A poor unsubscribe rate is 1%
  • A poor spam rate is 0.01%

Reputation and Sending Score

All email campaigns have a score and reputation. This has an effect on how mailbox providers and ISPs handle your email, whether they reject or accept it and if they’ll send it straight to spam or to the recipient’s inbox.

  • your IP’s reputation (SenderScore)
  • domain name signature (SPF and DKIM)
  • complaints and bounce rates.

Bulk Emails

When a huge number of emails are sent (think millions), they are not all sent at the same time as this is limited by the speed of IP addresses and servers. Remember that recipients won’t receive emails at the exact same time.

Email Client

Litmus uses its own internal statistics to track the market share of email clients. Although this is likely not the same for a specific customer base, it is however a good indicator.

  • Apple Mail: 7%
  • Android: 8%
  • iPad: 12%
  • Gmail: 19%
  • iPhone: 33%

HTML Templates

Building email templates with HTML is a schlep. This has resulted in many poorly designed emails being sent out. These are themed, clunky, pointless, verbose and distracting. Building your own can however be rewarding and fun, providing you want a unique look and feel, and enjoy a challenge. The alternatively is to use good email templates from:

HTML Email Templates

You’ll have to decide whether or not you want to code your own HTML templates. This is however more tricky than simply coding a web page.

Client-Rendering Engines

Emails are rendered for users in many different ways as there are numerous devices and email clients.

  • Internet Explorer is used by Outlook 2000, 2002 and 2003.
  • WebKit is used by Apple Mail, Outlook for Mac, Android Mail and iOS Mail.
  • Web clients use the engine of their browser.
  • MS Word is used by Outlook 2007, 2010 and 2013.

Media Queries and Gmail Support for Inline CSS

Google supports media queries and embedded CSS in Gmail. This is massive for the email development industry.

Using HTML Tables In Layouts

Different clients, specifically Outlook, have box-model and positioning issues with divs. Although divs can be used, it’s safer to use tables. This means:

  • <table> instead of <div>,
  • padding instead of margin,
  • #FFFFFF instead of #FFF,
  • HTML4 instead of HTML5,
  • CSS2 instead of CSS3,
  • HTML attributes instead of CSS,
  • background-color instead of background,
  • inline CSS instead of style sheets or <style> blocks.

Inline CSS

Some clients strip CSS that is not inlined. There are a couple of options:

  • use a web-based CSS inliner
  • write CSS inline as you go
  • let your ESP do the inlining (if supported)
  • use a programmatic CSS inliner

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

Using standard system fonts is normally the easiest. These include Arial, Helvetica, etc., while Web fonts such as Google Fonts can still be used behind a WebKit conditional media query to prevent Outlook from messing them up.

<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

Specific CSS styles can be applied and content and elements shown or hidden for various Outlook versions. Specific version numbers of Outlook can be targeted, while WebKit-based clients can be targeted with a media query.

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

Outlook.com, Apple Mail and iOS, support videos. Media queries can be used to hide or show videos based on the type of client. More on email video support is available on email on Acid.

Email Forms

Support for form elements differs. Rather link to external forms if one is required. Campaign Monitor has some advice on forms.

Gmail Actions

There are various actions available for Gmail and adding code is easy. There are two options:

  • microdata
  • JSON-LD

Pre-header Text

Pre-header text is important, but often forgotten. Various clients show pre-header text under or next to the subject line, e.g. AOL, Gmail, iOS, Outlook 2013, and Apple Mail.

Email Testing

Email are seldom sent successfully the first time. There is always something that does not work, a typo, rendering issues, or something that was not added.

  • Send the email to yourself and check it on desktop, web and mobile clients.
  • Automate tests.
  • Check the layout renders.
  • Proofread the content.
  • Do extensive A/B testing.

MIME Multi-Part

Most emails being sent or received are Multipurpose Internet Mail Extensions (MIME) multi-part emails. The standard combines HTML and plain text, allowing the recipient to decide which one to use.

Accessibility

With email, accessibility is unfortunately often ignored.

  • Provide alt text with meaningful descriptions.
  • Add role="presentation" to each table so that it’s clear the table is being used for layout.
  • Use semantic HTML tags, such as <p> and <h1>, where applicable.
  • If you don’t need or want alt text, then use alt="" so that screen readers know it is meant to be blank.
  • Use the role attribute for elements such as headers and footers (for example, role="header").

Responsive Email Designs

  • Email opens on mobile are at 50% and increasing.
  • Email Client Market Share puts Android at 10%, iPad at 11% and iPhone at 33%.
  • MailChimp lists unique clicks from mobile users rising from 2.7 to 3.1%, an increase of nearly 15%.

Fluid

The easiest option is to make your emails fluid while sticking to one column. This means that the content area shrinks with the viewport.

Adaptive and Responsive

Alternate styles for various viewport sizes can be provided by using breakpoints and media queries. Elements can also be hidden or shown.

Spongy and Hybrid

This technique combines fluid, responsive and a few hacks to support Outlook. This also allows the columns stack without having to use media queries.

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

Retina images should be set at 1.5× to 3×, and the image dimensions should be set inline.

Workflow Automation

Compiling bulletproof emails is complex as there are many steps, and many things can go wrong.

What does the Email Future hold?

The future looks much brighter with developments such as AOL’s Alto now supporting responsive email, Microsoft partnering with Litmus to improve emails and Google providing support for media queries.

Summary

Email client vendors aren’t as progressive as web browser vendors when it comes to adopting new standards, while companies and users don’t adopt new email clients as they do with web browsers. If the increasing number of mobiles is added to the mix, we’re left in a state of having to support an intricate mix of versions and clients.

--

--

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