You are actually creating HTML emails when you use a drag-and-drop or module-based tool to create an email.
You can send and receive two types of email: plain text email (which is exactly what they sound like) and HTML email (which are styled and formatted using HTML and inline CSS.
HTML emails are easy for people to recognize — HTML emails make up the majority of multimedia marketing emails you receive.
Get Started with HubSpot’s Email Builder for Free
As a marketer, you’ve probably compared HTML emails versus plain-text emails and realized that there are different benefits to each type. HTML emails aren’t inherently better than plain text emails, and in different situations, both types can be part of a successful email marketing program.
This is how HTML looks on the front end. To see the code behind HTML, click on the HTML button.
This article will show you how to create HTML email templates, regardless of your level of comfort with coding. We’ll also share some free templates that you can use. Let’s get started.
How to create an HTML email
It’s not necessary to be a programmer to create HTML emails.
Most tools that create and send the email (like HubSpot) will offer pre-formatted, ready-to-go HTML templates that enable you to design emails without ever needing to access the actual code on the back-end.
The email editor allows you to make edits and those changes are automatically incorporated into the final product. These email-building tools are a great option for those who don’t have an in-house designer but still need to send professional-looking marketing messages.
Want to make an HTML email?
If you’re comfortable with HTML and want more direct control over the code of your emails, most email tools will allow you to import HTML files directly for use as custom email templates.
There are many HTML email templates that you can download for free online. If you’re familiar with HTML files, it’s easy to modify the template to your email builder of choice.
You will need to be able to create an HTML email from scratch. This guide offers a solid overview of coding a basic HTML email. We recommend that you either hire a professional developer or use a pre-made HTML template to create an HTML email.
How to create an HTML email for HubSpot specifically?
You will need to include the HubL tokens if you are creating an HTML email template for HubSpot. These tokens allow you to customize your emails and comply with CAN-SPAM laws. You can find a complete guide to coding HubSpot-specific HTML email templates here. Alternatively, just use our simple what-you-see-is-what-you-get email editor.
HTML Email Best Practices
- Your HTML email should be responsive to different screen sizes and devices.
- Make sure your styling works for different email clients.
- Pay attention to how long HTML emails take for them to load.
- You should plan as much as possible for inconsistencies by the end-users.
- Do thorough testing.
Let’s now look at the fundamentals of HTML email development. These best practices can be applied to HTML email design regardless of the method used.
1. Your HTML email should be responsive to different screen sizes and devices.
Many factors influence how your email appears in the user’s inbox.
The screen size of the device on which it is being viewed is one of the most important and obvious factors. A beautifully formatted email can quickly become a mess on a smartphone’s screen.
Keep your HTML emails simple and clear to ensure they look great on a variety of devices. It becomes harder to translate your email format for different screen sizes if you add more complicated elements, such as floated images and multiple columns.
If you decide to create a more complicated layout, ensure that you are actively thinking about how elements will be rearranged for different screen sizes. For example, if your email displays as multi-column on desktop, that same structure won’t fly on mobile — you’ll need to use media queries to define how elements will be displayed on different screen sizes.
It is important to remember that responsive HTML emails are more than just the format and structure of your message. Consider how your email will be perceived across different devices. You should ensure that your fonts are as legible as on desktop. Also, you can use mobile-friendly buttons (or CTAs) instead of hyperlinked texts. Have you ever tried tapping a line of hyperlinked content on mobile? It is not easy.
2. Make sure your styling works for different email clients.
The email client your subscribers use to open your HTML emails is another factor that can greatly impact the way they appear in their inboxes. Every email client loads emails differently so an email that looks the same in Gmail may look completely different in Outlook.
You can make sure that users have the same experience by knowing how popular email clients load certain HTML and CSS elements. Knowing which tags are not supported and adapting accordingly is the key. This comprehensive guide explains how the most popular email clients (including Gmail and multiple versions of Outlook) support and render different styling elements.
You can also check out an article we wrote on optimizing emails for different email clients.
3. Pay attention to how long HTML emails take for them to load.
Your email’s load time could make the difference between getting a new customer or losing a subscriber. It can be tempting to use all the styling options and visuals offered by HTML emails, but it doesn’t matter if your email takes too much time to load.
When designing your HTML email, be aware of the time it will take for your email to load. This is especially important if your recipient has a poor data connection. These are some simple steps that you can take to improve load time.
Images should be used sparingly.
This will help you to reinforce the message that you wish to convey to your subscribers. Always use an image compressor (like Compressor.io) to reduce the file size as much as possible. Image compressors are capable of reducing the file size without compromising quality. This will not affect the visual integrity of your email.
Use standard web fonts.
While custom fonts can be great for adding style to landing pages, they can also add complexity to emails. We mentioned above that every email client handles style elements differently. This is especially true for fonts. Use standard web-fonts to be safe. Also, make sure that the email client your most subscribers use supports a specific font.
Use an HTML minifier.
An HTML minified, such as minifycode.com or smallseotools.com, automatically removes any code from an HTML file. While repetitive, unnecessary elements will be removed, the actual rendering of your email should not change (always check it out!). Every line of code has an impact on how long it takes for an email to load. Therefore, taking the time to clean up junk code can make a difference in load time.
Focus your message on one goal.
Email load time can be reduced by reducing the amount of content that you include in each email. Although it may seem obvious, many marketers attempt to stuff too much content in their emails. This not only makes it difficult for users to use your email but can also increase load time and lead to them abandoning your message. Your users will appreciate it if you keep things simple.
4. You should plan as much as possible for inconsistencies by the end-users.
Your subscribers’ HTML email will not render correctly due to their screen size or email client. How your email loads can be affected by elements such as the version of their email program, their operating system, unique user settings, security software, and whether they automatically load images.
You can probably guess from the long list of factors that trying to solve them all (every time you send an e-mail) would be enough to drive you crazy.
You don’t need to be helpless to these variables. All you have to do is do a little planning.
You might consider creating a webpage version for your email.
This is a way to give your email a failsafe button. If your carefully designed email becomes a mess due to any of the factors mentioned above, subscribers will still have the option to view the email as a web page.
Style elements are more consistent across web browsers than email clients so you can have more control over the web version of your message. In HubSpot, there’s an option you can turn on that will generate a web page version automatically.
Make a plain text version.
Plain text versions are exactly what they sound like: an alternative version of your HTML mail that renders in plain text. Because some email clients or user settings don’t allow HTML to be loaded, it is essential that you add a plain text version to your HTML email.
If this is the situation, the client will search for a plain text version of your HTML email that the user can load. It could indicate to the recipient’s mail server that your message may be spam or potentially dangerous if one does not exist.
Email tools such as HubSpot provide a plain text version of the recipient’s server requests. However, if you are coding HTML emails from scratch, you will need to create a multipart MIME message.
Multipart MIME messages are emails that contain both plain text and HTML versions of the same email. The plain text version of the email will be displayed if the recipient’s security system or email client doesn’t allow HTML emails. This process requires advanced knowledge in coding so we recommend that you work with a developer.
If the images aren’t loading, make sure your email is still understandable.
Automatic image loading is disabled by some users. This means that they won’t see any images in your email when they open it. For this reason, don’t rely entirely on images to get the meaning of your message across, and always add alt-text to the images you do include. Alt-text will load images even if they don’t. This gives your subscribers a general idea of what visuals contain.
5. Conduct thorough testing.
To ensure that your HTML email works on different devices, operating systems, and email clients, you will need to test it at each stage of development. You don’t have to wait to test your HTML email at the end of the development process. Testing as you go is the best way for you to find inconsistencies among different email clients and ensure that your recipients receive the most consistent experience.
In-app testing is an option offered by some email tools, such as HubSpot. This makes the process much easier. To get an idea of how your email will look across different devices and email clients, you can use tools like HTML Email Check.