You are here
Home > Nerdom > Technology > Mobile > An Introduction To Building And Sending HTML Email For Web Developers

An Introduction To Building And Sending HTML Email For Web Developers

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

Not much has changed in email design. In fact, it has gotten worse. With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email.

I’ve spent the past several years building development tools — two of those years as product design lead at Mailgun1, an email service for developers, where I learned a lot about how email works and the problems that developers face when building HTML email. In this post, I’ll share some of my knowledge about the topic.

Introduction To Sending Email Link

As a developer responsible for an email campaign or all of the emails your company sends, you will need to know how email works, the legal requirements and how to actually get email delivered. Companies send a few different types of email. Let’s take a look.

Marketing Email Link

A lot of email service providers (ESPs) specialize in marketing and promotional emails: Campaign Monitor2, MailChimp3, Emma4, Constant Contact5, to name just a few. They provide full solutions for managing subscribers, working with email templates, running bulk email campaigns and reporting.

Transactional Email Link

Transactional email includes receipts, alerts, welcome emails, password resets and so on, and it is typically implemented with development tools and APIs such as Mailgun6, SendGrid7 and Postmark8. These tools are more API-focused, less CMS- and WYSIWYG-based; however, combined with a service such as Sendwithus9, they can be made even more powerful.

An alternative to using a service is to roll your own email server with something like Postfix10. The downside of this is that it’s up to you to set up and configure it and to understand the technical details of sending email, implementing tracking and unsubscribing, and getting email delivered to inboxes.

Life-Cycle Email Link

Life-cycle and behavior-based email services help with onboarding, engagement and more. A lot of ESPs focused on marketing also offer this service, but I tend to group services such as Intercom11, Customer.io12, Drip13, Vero14 and ConvertKit15 into this category.

Email List Best Practices Link

Don’t buy email lists. Maybe a handful of legit services are out there, but you’re best off staying away from buying lists altogether.

My experience is that anyone who buys an email list will suffer from a lot of bounces, give their Internet Protocol (IP) address a bad reputation, and get their emails blocked by Internet service providers (ISPs) or sent to spam. 85% of the world’s email is considered spam, according to SenderBase16; don’t fall into this bucket.
SenderBase spam stats17

Double Opt-In Link

A subscriber having to verify their email address adds an extra step to the process, but it makes sense and stops other people from abusing their email address by signing them up for lists without their permission. It also helps to keep your subscription list clean and is the “100% correct way to validate an email address18”.
Double opt in email19

CAN SPAM Link

These are your legal requirements for sending email, enforced by the CAN-SPAM Act of 200320:

  • Don’t use false or misleading header information.
  • Don’t use deceptive subject lines.
  • Identify the message as an ad.
  • Tell recipients where you’re located.
  • Tell recipients how to opt out of future email from you.
  • Honor opt-out requests promptly.
  • Monitor what others are doing on your behalf.

CAN SPAM legal requirements21MailChimp has a good list of email legal requirements by country22.

Analytics And Measuring Performance Link

Measure everything. You need to measure to know whether your emails are improving. The numbers will differ vastly depending on what you do, your industry, the type of emails you send and the context. However, in general:

  • 20% is a good open rate,
  • 3 to 7% is a good clickthrough rate,
  • 5% is a poor bounce rate,
  • 0.01% is a poor spam rate,
  • 1% is a poor unsubscribe rate.

Also, remember that open rates and clickthrough rates can be vanity metrics (read “they don’t really matter”). At the end of the day, what you really want to track is that end goal or conversion. At Airbnb they track an email quality score23, which is a good indicator on engagement quality.

Google’s URL builder24 can help with tracking if you’re using Google Analytics.

Sending Score And Reputation Link

Your emails have a reputation and score associated with them. This affects how ISPs and mailbox providers deal with your email, whether they accept or reject it and whether they send it to the recipient’s inbox or straight to spam.

Some contributing factors are:

  • your IP reputation (check yours with SenderScore25),
  • your domain name signature (see DKIM26 and SPF27),
  • bounce rates and complaint rates.

SenderScore example28

Sending Bulk Email Link

When you send a lot of emails (imagine a campaign with millions of emails), they are not all sent instantaneously. They can only be sent as fast as the servers and IP addresses can handle them. Keep in mind that your recipients might not receive the emails at exactly the same time.

So, if you’re sending millions of emails at once, you’ll probably want quite a few IPs to handle the load.

Email Clients Link

Litmus keeps track of the market share of email clients29, based on its own internal statistics. Keep in mind that this is probably not the same for your customer base, but it is a good indicator to go by.

Here are the statistics as of December 2016:

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

Bear in mind that not all emails can be tracked. Email tracking is done via pixel-tracking, so only those clients with images enabled will report back.

HTML Templates Link

Building HTML email templates can be a slog. As a result, a lot of poorly designed email is out there — clunky, themed, verbose, pointless, distracting. If you enjoy a challenge or want a unique look and feel, then building your own can actually be fun and rewarding. Alternatively, some good email templates are available:

Building HTML Email Templates Link

Now you know how to properly set up and send emails. The next decision you’ll make is whether to code your own HTML template. This is a bit more complex than coding the average web page. Let’s dive in.

Client-Rendering Engines Link

Email design is still in the dark ages. Due to the numerous email clients and devices, your email will get rendered for users in a variety of ways.

Email clients use different engines to render HTML emails:

  • Apple Mail, Outlook for Mac, Android Mail and iOS Mail use WebKit.
  • Outlook 2000, 2002 and 2003 use Internet Explorer.
  • Outlook 2007, 2010 and 2013 use Microsoft Word (yes, Word!).
  • Web clients use their browser’s respective engine (for example, Safari uses WebKit and Chrome uses Blink).

Clients will also add their own flavor of styles on top of yours. For example, Gmail sets all

fonts to font-family: Arial,sans-serif;.

Look at your own statistics so that you know what to design for.

Gmail Support for Inline CSS and Media Queries Link

Only recently34 did Google announce support for embedded CSS and media queries in Gmail. This is huge for the email development industry.

Now, as of September 2016, Gmail will support a slew of CSS properties35, which makes template development for Gmail a lot easier.

Using HTML Tables For Layout Link

Divs have positioning and box-model issues in different clients — in particular, those that use Microsoft Word to render (i.e. Outlook). You can use divs if you want, but it’s safer to code like it’s 1999 and stick to tables. This means: