The simple guide to creating an HTML email [+ Free Templates]

When you compose an email using a drag-and-drop or module-based tool, you are actually generating an HTML email.

There are two main types of email you can send and receive: plain text email (this is what they sound like – any email that contains just plain old text with no formatting) and HTML email, which are formatted and designed with HTML and inline CSS file.

HTML email is easy to spot – most of the multimedia marketing formatted email in your inbox is HTML.

As a marketer, you’ve likely compared HTML email to plain text email and found that each type has different benefits. HTML email is no inherently better than plain text email, and in different situations both types can be part of a successful email marketing program.

This is what an HTML looks like in the frontend. Click the HTML button to see the code behind it.

Check out the HubSpot pen HTML email template by Christina Perricone (@hubspot) on CodePen.

In this article, we’ll cover how to get started creating HTML email, regardless of your level of programming experience or comfort, and we’ll introduce some free templates you can use. Let’s dive in.

How to compose an HTML email

Good news: you don’t really need to know how to code to compose an HTML email.

Most tools for creating and sending emails (like HubSpot) offer pre-formatted, ready-to-use HTML templates that you can use to design emails without ever having to access the actual code in the backend.

When you make changes in the email editor, those changes are automatically coded into the final product. Email building tools like this are an ideal option when you don’t have an email designer on your team but still want to send professional looking marketing emails.

Still want to create an HTML email from scratch?

If you are familiar with HTML and want more direct control over the code of your email, most email tools allow you to import HTML files directly for use as custom email templates.

There are a variety of free HTML email templates available on the web (some of which we will discuss below), and if you are familiar with an HTML file it is usually quite easy to send the template to the email. Creation tool from. adapt your decision.

To create an HTML email from scratch, you must have advanced knowledge of HTML (or work with a developer who does). This guide provides a solid overview of how to encode a simple HTML email. Since creating an HTML email from scratch can be quite laborious, we recommend working with a developer or using a pre-made HTML email template instead.

Are you developing an HTML email specifically for HubSpot?

If you’re developing an HTML email template specifically for use in HubSpot, make sure you include the required HubL tokens (these ensure your emails can be customized and comply with CAN-SPAM laws correspond). Complete instructions on how to code HubSpot-specific HTML email templates can be found here. Or, alternatively, just use what you see what you get using our simple email editor.

Best Practices for HTML Email

  1. Make sure your HTML email responds to different screen sizes and devices.
  2. Make sure your styling works in different email clients.
  3. Be aware of how long it takes to load your HTML emails.
  4. Plan for end-user inconsistencies (as much as possible).
  5. Do thorough testing.

Now that you understand the basics of developing HTML email, let’s go over some key best practices to keep in mind. Whichever method you choose to use to compose HTML email, these best practices will help improve the design, user experience, and deliverability of your email.

1. Make sure your HTML email is responsive to different screen sizes and devices.

How your email looks in a user’s inbox depends on a variety of different factors.

One of the biggest and most obvious factors is the screen size of the device it is being viewed on. An email that looks amazing and well formatted on a desktop can easily turn into a jumble of illegible, overlapping text and images on a smartphone screen.

To ensure that your HTML emails look the way you imagined on a wide range of screen sizes, it is best to keep your layout simple and straightforward. As you add more complex elements like multiple columns and floating images, it becomes more difficult to translate the format of your email for different screen sizes.

If you decide to come up with a more complex layout, make sure you are actively thinking about how to rearrange the elements to accommodate different screen sizes. For example, if your email appears in multiple columns on the desktop, the same structure is not used on mobile devices – you need to use media queries to define how items appear on different screen sizes.

Remember, creating really engaging HTML email is beyond the structure and format of your message. Think how the general user experience of your email is perceived on different devices. Make sure your font choices are as readable on mobile as they are on desktop, and use mobile-friendly buttons or CTAs instead of hyperlinked text (have you ever tried tapping a small line of hyperlinked text on mobile? It’s not very easy).

Here is our more in-depth guide to mobile email best practices.

2. Make sure your styling works in different email clients.

Another important factor that greatly affects the way your HTML emails appear in your subscribers’ inboxes is the email client they use to open the message. Each email client loads email a little differently, so an email that looks a certain way in Gmail is likely to look different in Outlook.

Fortunately, knowing how the most popular email clients load certain HTML and CSS elements can create a fairly consistent experience across different users’ inboxes. It’s about knowing which unsupported tags to avoid and adapting accordingly. This comprehensive guide explains how the most popular email clients (including Gmail and several versions of Outlook) support and render different style elements.

You can also read an article we wrote about optimizing email for different email clients.

3. Be aware of how long it takes to load your HTML emails.

How long your email takes to load can very well mean the difference between getting a new customer and losing a frustrated subscriber. While it can be tempting to take advantage of all of the different design options and ways to incorporate visuals that HTML emails offer, it doesn’t matter if your email is taking too long to load.

When designing your HTML email, be careful how long it takes to load your email – especially if someone opens your message on their morning subway commute with a weak data connection, for example. Here are a few small steps you can take to improve load time.

Use images sparingly.

This way, you reinforce the message you want to convey to subscribers. Always use an image compressor (like Compressor.io) to reduce the file size as much as possible. Most image compressors can significantly reduce the file size of an image without sacrificing quality, so this extra step doesn’t affect the visual integrity of your email.

Use standard web fonts.

Custom fonts are great for spicing up a landing page, but they can add an extra layer of complexity when added to an email. As mentioned earlier, all email clients handle style elements differently, and this is especially true of fonts. To be on the safe side, use standard web fonts and check that the email client most of your subscribers use supports a specific font.

Try an HTML minifier.

An HTML minifier (like minifycode.com and smallseotools.com) automatically removes code that is not needed in an HTML file. Repetitive, additional elements are removed, but the actual rendering of your email should remain the same (always test!). Each line of code affects the loading time of an email, so the time it takes to remove junk code can have a positive effect on loading time.

Focus your message on a single goal.

The best way to reduce email loading time is to reduce the amount of content you add to each of your emails. It may seem obvious, but too many marketers are trying to cram too much content into their emails. Not only does this lead to a daunting user experience (no one wants to read a novel in email form), it can drive your load time off the charts and cause users to leave your email. Keep it simple and your users will thank you for it.

4. Plan (as much as possible) for end-user inconsistencies.

Screen size and email client aren’t the only factors that can affect the way your HTML emails appear in your subscribers’ inboxes. Elements like the version of their email client, their operating system, their unique user settings, their security software, and whether or not they automatically load images can all affect how your email loads.

As you can probably guess from this extensive list of factors, trying to solve them all (every time you send an email) would likely be enough to throw your computer around the room.

But you don’t have to be completely helpless to these variables – you just have to plan a little ahead.

Consider making a webpage version of your email.

This is like giving your email a failsafe button. If for some reason – due to one of the factors mentioned above – your lovingly crafted email looks like an absolute mess when you open it, at least it has the option to click “View as Webpage” and view the email as you have it so wanted.

Because style elements are rendered much more consistently in web browsers compared to email clients, you have much more control over the webpage version of your message. There is an option in HubSpot that you can activate to automatically generate a website version.

Create a plain text version of your email.

A plain text version is exactly what it sounds like – an alternate version of your HTML email that is rendered entirely in plain text. Adding a plain text version of your HTML email is important because some email clients and user preferences may not be able to load (or choose to) HTML.

If so, the client looks for an alternative plain text version of your HTML email that it can load for the user. If there isn’t one, it could signal the recipient’s email server that your message is spam or potentially dangerous.

Most email tools like HubSpot automatically offer a plain text version that will appear if the recipient’s email server requires it. However, when you encode an HTML email from scratch, you need to create what is known as a multipart MIME message.

A multipart MIME message is an email that contains both plain text and HTML versions of the same email. If a recipient’s email client or security system does not allow HTML email, the plain text version is displayed. This is a process that requires advanced coding skills, so we recommend working with a developer.

Make sure your email makes sense even if the images aren’t loading.

Some users have turned off auto-loading of pictures, which means they will see your email without pictures when they open it. For this reason, don’t rely solely on images to get the meaning of your message across and always add alt text to the images you include. Alt text will load even when images aren’t loading, so your subscribers can get a general idea of ​​what the visuals contain.

5. Perform thorough testing.

Finally, you need to test your HTML email at every stage of development to make sure it works across different email clients, operating systems, and types of devices. Don’t wait until the end of the process to test your emails – testing while you work is the best way to spot inconsistencies between different email clients and make sure you’re creating the most consistent experience possible for your recipients .

Some email tools (like HubSpot) offer in-app testing in their email builders to make the process easier. If you’re working from scratch, you can use a tool like HTML Email Check or PreviewMyEmail to get a better idea of ​​how your emails will look on different email clients and devices.

Simple and free HTML email templates

There is an overwhelming amount of HTML email templates on the web, each varying in quality, responsiveness, and price. We have compiled a selection of free HTML email templates that provide a responsive user experience. Before using it, be sure to read the terms of use for each template.

1. Free HubSpot HTML Email Template

Free HTML email template from HubSpot

This template included in the free version of Marketing Hub is a great place to start if you’re looking for a template with more flexibility. You can easily add images, text, and buttons in an intuitive drag-and-drop editor, and you can be sure that the templates you design are fully responsive on any device.

2. Campaign Monitor corporate news HTML email template

Free HTML email template from Campaign MonitorThis modern template is sophisticated and minimalist. The subtle color palette and simple design make it a versatile option for many different industries and purposes. It has been tested on different email clients and devices to ensure a consistent user experience across different platforms.

3. Unlayer’s free HTML email template

Free HTML Email Template from Unlayer

Although this template was designed for a fitness company, you can easily customize it for your own. This clean, silent template is a great way to display content your team has created and connect subscribers to your latest product or blog post. The design features two fully pleasing columns with multiple color scheme options and space at the top to highlight a call-to-action.

4. MINImalistic free HTML email template

Free HTML Email Template from Mail Bakery

Proof that sometimes less is more, this simple, fully responsive design makes the most of white space while keeping focus on your words and visuals. With no design distractions, your content can really shine – on any device.

5. Free Bee Free HTML Email Templates

Bee Free's Free HTML Email Template Library

This collection of free, open source templates is fully responsive and has been tested with popular email clients. You can edit and build on them on the Bee Free platform and then export the HTML file to your local drive.

These are an ideal option if you want a more stylish, sophisticated place to start, but still want to tweak the design to suit your company’s needs. Each template is available in several formats for different marketing purposes, such as: B. for transactional emails, NPS collection, and re-enlisting email subscribers.

6. Campaign Monitor’s free HTML email template

Free HTML email template from Campaign Monitor for a discount code

This sleek, responsive design from Campaign Monitor would be perfect for sending a discount code – but it could also serve as a stylish way to showcase your latest products to email subscribers. It’s also worth checking out Campaign Monitor’s full library of responsive email templates.

Create HTML emails to grow your subscribers

HTML email is a great way to cover what’s going on in your business and get subscribers to come back to learn more. With the tips and templates we shared, you’ll be well on your way to creating beautiful HTML emails without writing a single line of code.

Editor’s note: This post was originally published in June 2019 and has been updated for completeness.

New call-to-action

Leave a Reply

Your email address will not be published. Required fields are marked *