HTML Emails 101 For Web Developers

March 22, 2019

Email development and design is not easy, as email client suppliers have not been nearly as progressive as web browser suppliers are in implementing new standards. This article gives some insight into building and sending email.

If you are into web development, it’s likely that coding emails will be a job that you get asked to do at some stage in your career. Coding emails in HTML is however old-fashioned and harks back to the days when developers called themselves webmasters while using tables, WYSIWYG editors and FrontPage to mark up a website.

Email design has not changed much, but has in fact gotten worse. As more mobile devices and email clients are introduced, there are more limitations to deal with when having to build HTML emails.

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 templates, deliver bulk email campaigns and do reporting.

Transactional Emails

Transactional emails include alerts, receipts, password resets, welcome emails, etc. They are normally implemented by using APIs and development tools like Postmark, SendPulse Transaction, SendGrid and Mailgun. Although the tools are less based on WYSIWYG and CMS, and more API-focused, combined with services like Sendwithus, they could be extremely powerful.

Rather than using a service, you may want to implement your own email server by using a product such as Postfix. The disadvantage of doing this is that you’ll have to configure and set it up, and have to understand the technical side of not only sending emails, but also implementing unsubscribing and tracking, and making sure emails are actually delivered.

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.

People who buy email lists typically experience a huge number of bounces, gain a bad reputation for their IP (Internet Protocol) address, have their emails blocked by ISPs (Internet service providers) or the email gets sent to spam. According to SenderBase, a full 85% of emails globally are considered spam - don’t join that club.

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.

A good list of legal email requirements for different countries is provided by MailChimp.

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%

Click through and open rates are often seen as vanity metrics, i.e. they don’t mean anything. What you really need to track is conversion and the end goal. Airbnb tracks email quality scores, a good engagement quality indicator.

The URL builder by Google can assist with tracking if you use Google Analytics.

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.

Some factors that influence this are:

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.

It’s a good idea to use a few IPs to handle the load when sending millions of emails at the 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.

Here are recent statistics:

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

Not every email can be tracked as tracking of emails is done via pixel-tracking. Only email clients with enabled images will send reports.

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:

Really Simple Responsive HTML Email Template
Litmus Templates
Foundation for Emails 2
HTML Email Templates
Postcards Email Builder

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.

Different engines are used to render HTML emails:

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.

Looking at your statistics will help you determine what you need to design for.

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.

Gmail also supports numerous CSS properties that makes template development for Gmail much simpler.

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.

When you use tables, remember to use border="0" cellpadding="0" cellspacing="0". Premailer has special CSS declarations to apply these HTML attributes.

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

Writing inline CSS as you go is not maintainable or scalable, but it is often used to retain 100% control. When writing manual CSS inline, make use of a templating language with helpers and partials, and/or snippets.

Foundation for Email’s Responsive Email Inliner and HTML Email’s Responsive CSS Inliner are both good web-based inliners, Node.js module Juice is a good programmatic inliner, while Roadie and the Premailer gem are good Ruby alternatives.

Buttons

Trying to create a perfect button across clients is difficult. Always use table cells for almost everything, including buttons.

<a href="#" class="btn btn-primary">Click Here</a>

Instead, write it like this:

<tr>

<tr>

<td> <a href="" target="_blank">Take action now</a> </td>

</tr>

</table>

</td>

</tr>

</table>

Then, once your CSS is inlined, it will look like this:

<tr>

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

This is one of many ways to implement a button in email, although it might not always look exactly the same in all clients. It is simpler and does not involve using VML or image assets.

VML (Vector Markup Language) is supported by older Outlook versions. Microsoft states that VML is obsolete as of IE (Internet Explorer) 10. This means it is no longer supported in new IE versions. As long as Outlook 2007, 2010 and 2013 are still being used, it will be used, mainly for background images.

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.

For Outlook:

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

Font families, font sizes and colors need to be used for every <td> to prevent the client overwriting chosen type styles.

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

Several clients show images by default, while others don’t. Remember this when adding images to content. This also has an influence on tracking metrics, as images are typically used to track opens. Gmail and Apple Mail don’t block image-rendering by default, while Outlook does.

<!--[if (IE)]>

Only IE-based versions of Outlook will see this.

<![endif]-->

It is always good to add good alt text to images. The text should tell users what the image is about or simply describe what it is, e.g. a logo. For clients that turn off images, you could even get creative with alt text. Also remember to include basic resets for images.

Most clients support animated GIFs, except Outlook 2007 to 2013 which revert to the first frame.

Media assets should be compressed and uploaded to a CDN (content delivery network) like imgix, Cloudinary or Amazon Web Services. Most marketing ESPs offer this service.

SVGs (scalable vector graphics) have many advantages on the internet. Email support does however vary, and SVG need a few conditionals or fallback hacks. SVG in email is not recommended, but if you want to use them, CSS-Tricks has a good guide that will assist.

Supply larger images (1.5× to 3×) for Retina-ready images and resize them.

Remember to declare how wide an image should be using the width attribute for Outlook. Outlook might otherwise render the actual image width, which will break the email.

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.

Although not using forms is safer, Mixmax and Rebelmail have done exciting things with forms for e-commerce and surveys, with good fallback support.

Gmail Actions

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

microdata
JSON-LD

Getting whitelisted takes more steps. Gmail actions can be tested with an address from @gmail.com.

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.

Clients take the first piece of text in the email’s body and display it there. Use this to add a hidden element to the content that appears first. This text could provide extra incentives for users to open the email.

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.

Email can be tested in a number of ways:

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.

HTML emails can be sent to yourself using PutsMail, while Thunderbird allows you to compose with an HTML editor.

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.

Always include both HTML and plain-text versions, even if you think everyone uses HTML.

Various clients render plain-text emails as HTML, e.g. Gmail adds default styles and converts URLs into links. Most ESPs will construct the MIME and some will create a plain-text version, based on the HTML.

Accessibility

With email, accessibility is unfortunately often ignored.

The following is recommended:

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

We can use media queries, grid-based layouts and fluid design in emails, but not every client support these.

Gmail supports media queries, but various mobile clients don’t, including Gmail for Android, Windows Phone 8 and Yahoo.

Various techniques can be used in emails to overcome the lack of support for media queries. Some terms used are spongy, hybrid, fluid, responsive, and adaptive.

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.

This gets complex when columns and a grid are introduced. It is possible to have a two-column layout switching to a stacked one-column layout below specific viewport widths.

As media queries are not always supported, this is however not always reliable.

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

<tr>

<![endif]-->

<!--[if (gte mso 9)|(IE)]>

</td>

<![endif]-->

<!--[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. max-width: 100%; can’t be used as it is ignored by some clients.

Workflow Automation

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

As with any monotonous tasks with many steps, automating what is possible will allow you to build the system once and make future work easier.

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.

An increasing number of developers and companies experiment with the possibilities of email technology: audio, shopping cart emails and CSS animation. In the future, more kinetic and interactive emails will emerge.

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.

As this article is simply a high-level overview, you could investigate each of these points in detail. I hope it has given you a good foundation for building and sending emails.

Go Back

0 comments

Posted in General

Articles & Blogs

Subtitle

HTML Emails 101 For Web Developers

Comment

Blog Search

Blog Archive

Comments