Creating HTML emails

First, what is an HTML email?

An HTML email is a type of email formatted using HyperText Markup Language (HTML). Unlike plain text emails, HTML emails contain dynamic and sometimes more complex elements such as graphics, videas, and other multimedia elements.

What makes a great HTML email?

You can probably look at your email inbox and group your emails into two categories: the garden-variety text-only emails you generally get from colleagues or family members and the “fancy” emails you get from companies.

For marketing and business purposes, HTML emails are preferred to create interactive communications for optimal engagement and conversions.

• Engaging: Simply put, people are attracted to pretty things. When your emails are visually appealing, readers are more likely to scroll around and view them.
  ‍

• Engagement: HTML’s design capabilities allow you to design your emails in a strategic way that improves engagement. For example, you can place design elements in a way that encourages readers to scroll on, and you can make call-to-action buttons that stand out and entice readers to click.
  ‍

• Branding: Building familiarity with your brand takes repetition over time. The more that a person sees your branded imagery, the more familiar your brand feels to them, and HTML emails give you the opportunity to send emails that are perfectly on-brand.
  ‍

• Multimedia: HTML lets you harness the power of not only words but images, videos, gifs, and more. There are some types of messages that are just more impactful and memorable when they’re delivered in these ways, and HTML gives you that capability.

How to create an HTML email

Now that you know why, let’s talk about how to create HTML emails. There are several ways you can go about creating an HTML email.‍

• ‍Option #1: Create your own HTML emails from scratch. This requires knowledge of HTML and coding experience.

• ‍Option #2: Start with a pre-designed template and customize it.

• ‍Option #3: Find an HTML email builder. These are often standalone applications that integrate with your sending platform to export your emails.

The third option is one of the most effective ones as it doesn’t require any knowledge of code or HTML in order to design responsive and engaging email communications. However, let’s explore all three. 

Option #1: Build an HTML email from scratch

While this is more time-consuming and can have a larger learning curve, it does give you the most creative freedom. It is an excellent choice if you have a specific vision in mind and simply can’t find a template that can be adjusted to match it.

When it comes to creating a new HTML email, writing code from scratch is as freestyle as it gets - no training wheels, no guidelines, just you and an open page. That could sound perfect if you’re the type for an adventure or for creativity, or it could sound terrifying if you’re new to HTML. 

This method isn’t particularly common and is used mostly by designers who are highly experienced in HTML already. 

#1: Start with an idea

Regardless of how you choose to create an email, you’ll need to plan ahead first. Defining your goal and your target audience are important first steps to understanding how to tailor your email content accordingly. 

Additionally, when starting from scratch it helps to draw a mock-up of the basic structure of your email. This includes where you want images, text, headers, subheaders, and so on. This will serve as your guide.

You can source inspiration from many places, Really Good Emails being one of them. 

#2: Set up your tools

To create HTML emails from scratch, you'll need the right tools that will help you write, test, and optimize your emails. This includes a text editor and an email testing tool. A text editor will support you in writing clean and efficient HTML and CSS code. Some popular options include VSCode, Sublime, or Brackets.

Email testing tools such as Litmus or Email on Acid, help ensure that once your emails are build they look good across different email clients and devices. When starting from scratch, testing your emails is crucial.

#3: Build your structure

Begin writing the HTML code that will serve as the structure of your email. This is where your layout begins to come to life. Tables are often used to build HTML emails as many email clients, like Outlook, do not support modern CSS layouts. You can adjust or replicate these tables however you choose. 

#4: Create your header

Once you've built the structure of your email, it’s time to start filling in the pieces. Start at the top with your header. The email header will contain brand-defining elements such as your logo. 

#5: Build out your content 

Once you have clear guidance on the copy of your email, you will begin to add your main content, images or other interactive elements, and CTA’s. 

#6: Create your footer

The content of the footer will depend heavily on your sending platform and your country’s legal requirements. Once you meet those requirements, you can add other relevant information, such as social and website links. 

#7: Infuse your brand 

Once your email is built, if you haven’t already done so throughout, it’s time to implement your brand’s color scheme, font, text size, and any other elements that will ensure that your recipients know who the email is coming from.

There’s a lot that happens between these steps, and many lines of code that go into your finished email. But for those who want full creative control over their HTML emails, the steps above can be your guide.