A Beginners’ Guide to Creating and Sending an HTML Email

Quick pop quiz: What’s the name of the language that web developers use to create the structures of the sites you visit every day? Smart and over-clever answers aside, Hypertext Markup Language (HTML) is an evergreen standard, present at the birth of the web. However, this doesn’t only apply to web pages. Your inbox is fertile ground for HTML email design.

This makes sense if you consider how many images, GIFs, videos, and branded content you see almost every hour in your emails. While you could offer a plain text email, an HTML version will offer more benefits and give you more opportunities to brand and market yourself and your business.

For this post, we’re going to discuss how to create and send HTML emails, and why you should do so. At some points, we’ll get deep into how you’d code up an email, but you won’t need this knowledge to create your own.

What Is an HTML Email?

The emails that hit your inbox can come in two flavors:

• Plain text: It’s almost a telegram for the modern age. There is no styling or minimal formatting, and the recipient will see words to the exclusion of all else.
• HTML: This is a whizz-bang firecracker compared to plain text, and it’s design-heavy. It uses HTML code to present an email, although as we’ll discuss, it’s not always going to utilize modern web standards.

For example, you’ll know if you receive a plain text email, as it looks exactly like a plain text document. In contrast, an HTML email looks almost the same as a modern web page (give or take a few styling and formatting concerns):

In most cases, an HTML email won’t strive to provide the ultimate in interactivity or dynamic engagement. Again, it’s something we’ll cover later on, but HTML email is lagging behind the web, standards-wise. As such, HTML is more of a design-driven tool than one to help provide an experience. This brings up a question though: Why would you want to use HTML email if the only reason is visual? We’ll look to answer this next.

Click to Tweet

Why You’d Use HTML Email Over Plain Text Formatting

It’s rare that you’ll see a plain text email from a business, for a few reasons. However, plain text isn’t wrong per se, more that it offers none of the benefits of HTML email formatting. For example:

• You can use the inherent visual elements to help focus attention on the various parts of your email content.
• By extension, an HTML email is a rich format for presenting your content. This means you can leverage the elements users expect to engage with them, such as images, video, and more.
• Combined, both of these aspects can offer you a superb opportunity to brand your content, just as you would your main website.

However, deciding to use an HTML email isn’t the perfect storm you’d think. There are also a few drawbacks to consider. First, you have to consider the user’s experience, just as you would when you design a website. This might not only include a browser – lots of users also prefer to read emails in a dedicated client.

What’s more, you also have to consider some of the privacy and security issues that dominate web development. This is especially true if you want to include JavaScript, you pull in third-party fonts, and other aspects.

Because of this, you have to fight accessibility and standards battles almost on more fronts than the web. It’s tough to create an HTML email that works on a cross-browser and client basis. Of course, it’s possible to do this, and we’ll cover the technical aspect in a future section. For now, you’ll want to get the various elements of your email decided, then look to implement them.

The Essential Elements (and Typical Practices) of an HTML Email

This article will reference web design in a number of places, because of the inherent similarities. One aspect that offers a similar workflow is how to decide on the facets and sections of your HTML email.

Much like the web, there are some elements that are practically non-negotiable for your emails. Of course, you need content. There are a few typical elements to consider here:

• Your header is important because this is the first impression your email will offer to readers.
• Just like web design, thinking about what elements display above the fold will be beneficial too.
• The body content is vital because after all, this is why the reader will subscribe to your emails.
• The footer of your HTML email also offers much value to you and your subscribers too, and it can be an undervalued element of your emails.

There are a few points here we can touch on further. First, consider how much emojis permeate our day-to-day web usage. While they aren’t a strict HTML element, tasteful application of emojis can do wonders for your content, especially your header:

The footer is also the best place for some essential legal information. Two of the biggest issues relating to emails are spam and whether an email hits the right inboxes (if at all). This is something we’re going to look at in a later section, as it’s a vital part of creating and sending HTML emails.

Considering Some Typical Practices for Your HTML Emails

There is lots of crossover with email marketing when it comes to some of the most optimal practices you’ll use within your designs and layouts. There is one that you’ll want to include almost as a non-negotiable element: A double opt-in.

One of the biggest email marketing hacks is that you want to bring your emails to the reader. In other words, provide an opt-in form on a website, as this has a big rate of conversion. However, it shouldn’t be the only time you ask for confirmation. It’s an excellent practice to also send a second opt-in as an email:

There are a few reasons for this:

• One, it builds trust with your reader, because you get express permission to send them emails.
• By extension, you also have explicit consent in the case of a spam referral (more on this later).
• You help stop email and spam abuse for others because they have to specifically opt into a subscription to your emails.

In fact, because a double opt-in involves you sending an email to the address in question, it’s the best way to validate the email address.

There are a few other good practices to consider too. However, the following are more optional, in that you’ll get fantastic results, but there will be times when you won’t want to follow these guidelines:

• Your subject line should be perfect, and your email content should be to the point. Given the advent and now dominance of mobile browsing, this is especially important.
• Speaking of which, you’ll want to make sure that your HTML email reads without a hitch on smaller screens – this means no overreaching banners or oversized logos.
• If you include a strong call to action (CTA) within every email, you stand a good chance of better user engagement.
• Tracking is a contentious issue, but this will help you fathom what your users do when you send them an email. Some providers include a solid set of analytics as a standard.

Just as important as how you present and set up your email, is how to create the design and layout. In the next few sections, we’ll look into how to build an HTML email, then finish up with some tips to send them.

The Technical Approach You’ll Need to Take to Create an HTML Email

If you have some web development experience, you’ll no doubt use HTML5 as your markup language. This is a world apart from previous instances of HTML and XHTML and includes more of a division between styling (of which there are practically zero elements that are valid) and structure.

For an example of the latter, HTML5 offers a number of different tags to define content areas of your site.

However, email HTML is a different beast, in as much as it’s behind the times somewhat. As such, you’ll want to use all of those old HTML4 tables and inline styling to create your layout. For why this is, you’d need to speak to the developers of email clients, as they will often alter the HTML email as it comes into your inbox. One of the most common acts is to strip CSS and JavaScript out of emails for security reasons (among others).

This means you’ll need to provide another way to add styling to your HTML emails – inline is the only option for compatibility. Speaking of compatibility, this is an important consideration. You have to balance a unique styling with the capabilities of the end user’s email client. As such, there are a few other technical considerations you’ll want to note:

• Using system fonts rather than a third-party one will save you an HTTP request, load the email fast for the user, and deliver a consistent-looking email to boot.
• You could go even further and provide a plain text version of your email for those who can’t view HTML email in their client. Lots of sites will offer an HTML version you can access online, for both this reason and as a backup.
• Alt-text is just as important for HTML emails as it is for the web. As such, use alt text everywhere you add an image to your content for accessibility.

There’s one technical aspect of an HTML email that you should think about more, as it can straddle the line between inline styling, CSS, and other factors. Let’s discuss “conditionals” in brief.

Using Conditionals

One holdover of HTML emails that used to be in an older HTML web developer’s toolkit is that of conditionals. This is where you specify which browser will use a particular code snippet.

In honesty, this is almost always a Microsoft-based issue. For web developers, Internet Explorer (IE) was the demon browser spawn. However, for HTML emails, it’s Outlook. Between the different versions, you may see that your styling renders in a way you didn’t expect.

Because of this, you can add condition blocks to your code, and define those elements. For example, you can target both Word-based and IE-based versions of Outlook.

First, Word:

<!--[if mso]>

This is for Word-based versions of Outlook:

<![endif]-->

For Internet Explorer, you use a different tag:

<!--[if (IE)]>

This is for IE-based versions of Outlook:

<![endif]-->

If the browser you target is WebKit-based (such as Apple Safari, the PlayStation browser, Amazon’s Kindle, and more), you can use a media query to provide specific styling:

.html-email-webkit {
  display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ..html-email-webkit {
    display: block !important;
  }
}

This gives you a slightly better way to adapt your HTML email to the end user’s display. On the whole, HTML styling for emails isn’t perfect, but there is enough grunt under the hood of each email client to help you create some stunning layouts.

Your Options For Building HTML Emails

Despite what we already discussed, you have a number of flexible options to help you create HTML emails. For example, you can build from scratch using a nice text editor and HTML.

However, there are other options we can consider:

• You could use a dedicated service, such as an email marketing app, to create your emails. Lots of apps will provide a visual builder, but also give you the scope to write your own code, and create your own template.
• Speaking of which, you could download a template for your HTML emails. This is a lot like a WordPress theme, in that it provides a base for the rest of your design. From there, you can customize it to your liking. It’s a good middle ground between the coding and building options.

Later on, we’ll build our email using HTML. However, before this, let’s look at some of the email service providers you might want to consider, regardless of your chosen method for creating your emails.

3 Email Service Providers Perfect for Creating HTML Emails

Because the focus of this post is on creating HTML emails, we don’t need to get too in-depth when it comes to email service providers. Even so, there are a few you’ll likely consider.

We can’t cover them all, so we’re going to mention three of the most popular. Let’s round them up.

1. Mailchimp

This email service provider is a go-to solution – almost a knee-jerk decision for many. Mailchimp is the gold standard in email marketing apps in the eyes of many, and there are a lot of good reasons for this:

• It includes lots of typical features you’ll find across many other similar apps.
• There is lots of assistance when it comes to promoting a business, such as marketing automation, audience management tools, and more.
• You have a top-notch suite of creative tools to help you build HTML emails.

Of course, we want to look at the latter here. The Creative Assistant is a way for Mailchimp to learn about your brand and help you build and personalize your emails. You can also connect third-party apps such as Adobe Photoshop to help you build the perfect email.

It’s also straightforward to work with existing HTML, especially if you use Mailchimp’s Classic Builder. Regardless, you do have ways to import HTML templates if you need them.

Mailchimp uses a complicated hybrid of monthly subscription tiers and the number of contacts to come to a final price. We’d suggest that small businesses would need a plan of around $35 per month, up to 2,500 contacts. However, you’ll need to research the best plan for you based on the features you need and the number of contacts you’ll think you’ll bring on board.

2. AWeber

For some, AWeber represents the pinnacle of email marketing. It’s a fantastic and powerful platform and includes an arguably more focused feature set than Mailchimp.

It includes a number of essential features that you’ll need to send emails:

• The ability to automate and schedule messages, campaigns, and more.
• You have great organizational tools, such as subscriber tagging and segmentation.
• AWeber also lets you automate the content you create for your emails. For example, you can turn blog posts into mailouts with a minimum amount of work.

When it comes to creating your emails, AWeber has a few tricks up its sleeve. It uses a drag-and-drop visual builder and includes a library of custom templates to start you off. What’s more, you can connect AWeber to your Canva account and use the latter to help design your emails.

There’s also a dedicated HTML editor, which isn’t the case with Mailchimp. You even get this on AWeber’s free tier. Speaking of which, the pricing is more straightforward here. You’ll pay around $25 per month for up to 2,500 contacts.

3. Constant Contact

Constant Contact is an outlier when it comes to email service providers, but it’s more like a secret weapon. It offers a fantastic range of features and functionality, and also lets you work with HTML when you need to.

Much like AWeber, Constant Contact focuses on email marketing over other business-centric areas. As such, it’s got a feature set you’ll enjoy:

• You have customer list management tools and marketing automation functionality.
• There are extensive reporting options.
• You’re able to integrate ad programs from Facebook, Instagram, and Google.
• There are lots of ways to engage and attract new subscribers to your lists.

The design functionality of Constant Contact is good too. You can choose a template and work with a visual editor to build the whole design. However, you can also work with HTML – sometimes in advanced ways in relation to other tools.

Pricing is reasonable too. You’ll pay around $35 per month for the Core plan and 2,500 contacts, or $70 for the Plus plan.

What You’ll Need to Build an HTML Email

Before you begin to build your HTML emails, you’ll need a few tools and skills to hand. Here’s what you should arrange before you crack your knuckles and begin:

• You’ll want to use a code editor you find comfortable because it will need to support you during the process. If you don’t know which one to pick, lots of users opt for Visual Studio Code, although Brackets would be ideal for this particular task. We’re going to use Onivim2, which is a Vim-style editor based on the core VS Code infrastructure.
• While you’ll need HTML skills, you won’t need the same set of knowledge as a modern web developer (although it doesn’t harm your prospects).
• You’ll need a way to test your emails out – MailHog is a solution we feature elsewhere on the Kinsta blog.
• While we’re not going to use a pre-built template, you might want to use one of these in the future.
• You’ll also need an email provider, as you’ll need some way to send your finished HTML email.

With all this in place, you’re ready to open a text editor and begin. Next, we’ll run through the process to create a basic HTML email.

How To Create an HTML Email From Scratch

Before we start, it’s worth noting that we’re not going to use a dedicated service such as Mailchimp or AWeber. Instead, we’re going to create a simple template from scratch that you can import wherever you need.

We’ll split the process into a few different sections because although an HTML email is simply relative to a website, there’s still a lot to consider.

1. Create the Foundation For Your HTML Email

It’s a good idea to start with the skeleton of your email template. This will follow some typical practices for HTML in general:

<!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
  </head>
  <body>
  </body>
</html>

There are a few things going on here that we should mention. First, we specify a “doctype” for Transitional XHTML 1.0, which is a common practice among email developers. From there, we specify an XML namespace, which will be important later.

You’ll also notice some meta tags, and these define the character set and how the browser should render the HTML that follows in its viewport.

The rest of the skeleton is straightforward – there’s the title and body tags that we’ll use next.

2. Add the Structure For Your Email Template

Harking back to our discussion on what HTML tags to use, you’ll remember that we don’t want to use <div> or other typical structural elements. Instead, we want to use tables, as this renders well within email clients and services.

Everything will start with a simple set of <table> tags within the body:

<body>
  <table role="presentation">
    <tr>
      <td>
      </td>
    </tr>
  </table>
</body>

The attribute we set within the <table> tag helps screen readers to parse the text within, so it’s good for accessibility.

From here, you’ll need to add new rows and columns to your table in order to build the HTML email template. How you do this is up to you, but it’s good to start with a base of header, footer, and body sections. We won’t repeat them here for brevity, but we will mention them as we progress.

The good news is that you can continue to add new rows to your table if you need to add further sections. However, from here, you’ll want to start introducing styling and other elements.

3. Include Styling for Your Elements

The beauty of HTML is that it is almost agnostic to your styling. The markup is straightforward, but the styles you apply might not be. This is where you’ll see your HTML email come to life.

As a guide while we design, we’ll add a <style> tag to the <head> to display a general border:

<style>
  table, td {border:2px solid #000000 !important;}
</style>

To begin, we’re going to make sure there’s no unexpected space in the body or the main table (which here acts as our body because some email clients will remove that tag):

<body style="margin:0;padding:0;">
  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
</body>

We’re also going to add some centering and remove any extra padding from our different section cells:

<tr>
  <td align="center" style="padding:0;">Header
  </td>
</tr>

If you take a look at this in your browser, it won’t look like much:

However, from here, you can further develop your email template using tables and styling tags. For example, we’ve made a hero section for our header, and expanded the footer and body:

You will likely create a better and more suitable template for your needs, but using nested tables and some basic HTML skills, you can create a responsive and custom HTML email template that hits the mark.

4. Test Your Email

Before you finish, you’ll want to test your email in order to make sure it renders well on different devices. There are a few different services that can help here.

For example, Email on Acid includes a full pre-deployment checklist to help you make sure your template doesn’t cause issues:

Litmus users will know of PutsMail, but it’s accessible to all:

You’ll need to sign up for an account to use the service, but it’s straightforward to use. You leverage the functionality to preview emails within a number of different browsers and on various devices.

Mailgun also offers a fantastic service that ties in with its main offering. You’re able to test out email clients, browsers, and more through the interface. In addition, you can test out elements such as subject lines, to make sure you keep your open rates high.

However, once you test out your email, you’ll need to make sure it hits the recipient’s inbox. In the final section, we’ll discuss this more.

Sending an HTML Email: What You Need to Know

One benefit of using an email marketing service that we haven’t yet mentioned is how it will handle the legal aspect of sending emails. This is important because if you get something wrong here, you won’t just fail to reach a recipient, you’ll get yourself into trouble.

An email marketing service will already have a good working relationship with the organizations that handle spam and related facets of sending an email. As such, it’s often a good idea to choose one of these if you don’t want the worry of delivering spam.

However, there are a few tips we can give that matter regardless of the platform you use:

• Make sure you follow all of the guidelines of the CAN-SPAM act, especially if your main audience is in the US. Of course, different countries will have their own legal directives.
• Include a double opt-in for subscribers. This is where you ask them to confirm a subscription, but also send a second confirmation. This protects you and the subscriber if there is a spam query or privacy request down the line.

Deliverability is a key element of your emails, and this is something we cover in another article, in-depth. However, this concept is a mixture of several aspects, such as using good code, obtaining the right level of permission, and more.

This ties into another facet – your sending score. This is akin to a credit score and is ultimately a measure of your reputation. There are a few different components here that make the whole:

• Your site’s bounce rate.
• The number of complaints your site receives relating to the emails you send.
• The reputation of your IP address.
• Your domain name signature.

The latter relates to your DomainKeys Identified Mail (DKIM) and Sender Policy Framework (SPF). In addition, you can check the reputation of your IP through services such as SenderScore, or IPQualityScore.

If you choose the right simple mail transport protocol (SMTP) provider in the first instance, you can tick off some of these boxes in one swoop. Much like your choice of email marketing solution, this service will understand what you need to keep your deliverability high, and on the right side of the powers that be.

Mailgun is a solution we mentioned earlier, and this could be ideal. However, there are others such as Mailjet, Sendinblue, and even Gmail’s own service.

Learn how to create and send HTML emails with a little help from this guide Click to Tweet

Summary

Email is not anywhere near coming to an end. As such, using email for your own needs – such as promotion and marketing – is a fantastic and cost-effective way to reach potential subscribers, users, and customers.

While you could buy a dedicated HTML template, creating your own HTML emails is not that difficult. It could be the way you succeed if you have a specific vision in mind. However, you’ll need to pull out your old HTML tricks, such as conditionals and nested tables. HTML email design is not yet at the level of modern web design, but you can still achieve lots with little.

Do you have a need to create HTML emails, and if so, what questions do you have? Let us know in the comments section below!

The post A Beginners’ Guide to Creating and Sending an HTML Email appeared first on Kinsta®.