A straightforward guide to 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.

Option #2: Starting with an HTML email template

If you have limited expertise in HTML or simply want to speed up the creation of your emails, a template is the way to go. 

Templates offer pre-defined structures that you can build upon and iterate; however, not all templates are made equal. Depending on where you’re sourcing your template, you might be limited in what you can customize. For instance, many sending platforms offer templates, but customization is often limited to what you can do within the platform itself.

That’s where HTML email builders come in as a third option. 

Option #3: Using a drag and drop email editor to generate HTML emails

HTML email builders such as Beefree offer the advantages of the previous two options and minimize friction. Beefree is a drag-and-drop, no-code email editor. This means that designers and non-designers alike can simply drag and drop content blocks to build engaging emails. Beefree translates the email into HTML code, allowing you to download it, copy and paste it, or simply push it into your sending platform. 

Using Beefree as an example, let’s explore how an HTML email builder works. 

#1. Start with a blank canvas or with a template 

With Beefree, there are two ways to design an email - from a blank canvas or with a template. 

When starting from scratch you will be taken directly to the email builder where you can start dragging content blocks to build the structure of your email. 

If you prefer to start from a template, you can choose one from our extensive catalog. With over 1,700+ free email templates, you can find the right one for you based on your industry, the intent of the email, or the season. 

#2. Structure your email

With an email builder, you can skip the mockup stage of starting from scratch and jump straight into building the structure. Just drag and drop the elements and move them until you have a foundation that works for you. 

Using this template as an inspiration and Beefree’s pre-designed default rows, we created an outline of how the email will look like and set placeholder for designers and copywriters to go in and work their magic. 

‍

#3. Add interactive and engaging elements 

Once your email's layout is set up, it’s time to start adding your interactive elements. This includes graphics, videos, icons, stickers, gifs, etc. For those with knowledge of code and HTML, the Beefree editor allows you to use the HTML block to further customize your emails. 

#4. Incorporate your brand identity 

Another reason why email builders are the preferred method of designing HTML emails is how easy it is to incorporate your brand identity. With Beefree specifically, you can set your brand guidelines in your workspace settings to ensure that all emails and pages designed within that workspace follow specific guidelines. 

In Beefree, granular design guidelines can be set for the width of your email, CTAs, font, and font size, and everything in between. You can further customize your emails using Mobile Design Mode to create responsive mobile experiences and ensure your emails are viewed as intended on all screen sizes.

#5. Exporting your HTML email

Once your email is designed within Beefree, it’s time to export. The right email builder for you should be compatible with your current tech stack and enable easy integration. With Beefree, you can export your emails in various different ways.

‍

For the sake of show and tell, here is our downloaded HTML email and it’s part of its translated HTML code.

Best practices for designing HTML emails

Whether you're starting manually coding your emails or using an email builder, HTML gives you the capability to create an effective email; however, this doesn’t mean your email will be effective. HTML is merely a tool, so your email’s performance will depend on how well you use that tool. There are a few best practices you can follow to make your emails more impactful:

• Responsiveness: You want your emails to be easy to view and understand on any device your readers are using: phones, laptops, tablets, and so on. Testing and previewing your email before sending them is a crucial step. Additionally, your readers could be viewing your emails on a variety of email clients such as Gmail, Outlook, Apple Mail, to name a few. Each email client interprets the code they receive differently, it's important to use HTML that is widely supported by the majority.

• Consistency: Each email you send is a chance to build and grow your brand and the readers connection to it. Ensure that across all emails your brand identity incorporated and easily identifiable.
  ‍
• Accessibility: Designing for inclusivity means taking into consideration the various disabilities your readers may have. Be sure to include alt text for images, be mindful of flashing graphics, and how your color palette can influence the readability of your email.

Creating HTML emails can seen daunting, but we hope we've provided you with enough options and best practices to help you get started.