Creating HTML email marketing campaigns: The design playbook you need [+ free templates]

To get started with HTML email marketing, teams need to choose a user-friendly email builder — like HubSpot’s email marketing software. Then, select a responsive template and test the email across clients.

Let’s dive in.

Table of Contents

• What is HTML email marketing?
• Plain Text vs. HTML Emails
• How to Create an HTML Email
• HTML Email Marketing Best Practices
• Simple and Free HTML Email Marketing Templates
• Frequently Asked Questions About HTML Email Marketing

Free Email Marketing Tools

Create, personalize, and optimize your marketing emails without waiting on designers or IT.

• Boost email opens.
• Design stunning emails.
• Automate follow ups.
• And more!

Get Started for Free

What is HTML email marketing?

An HTML email uses HyperText Markup Language to create visually formatted messages with images, colors, fonts, and layouts. Unlike plain text emails that display only unformatted text, HTML emails let marketers design engaging, branded messages that capture attention and drive action.

Think of HTML email as the difference between a typed letter and a professionally designed brochure. While both communicate information, the HTML version adds visual hierarchy, branding elements, and interactive components that guide readers through the message. HubSpot’s drag-and-drop builder can help teams make HTML email marketing campaigns without any coding knowledge.

Plain Text vs. HTML Emails

Marketers have likely compared HTML emails versus plain text emails and realized that each type has different benefits. The distinction between HTML and plain text emails goes beyond just appearance:

• Plain text emails display only text without formatting.
• HTML emails are formatted and styled using HTML and inline CSS. They support images, buttons, columns, and branded designs. Here's what an HTML email looks like on the front end. Click on the HTML button to see the code behind it.

Plain text emails work in every email client without compatibility issues, bypass spam filters more easily, and often feel more direct. Meanwhile, marketers need to test HTML emails across multiple clients.

Even though they require additional testing, HTML emails feel more personal and allow for more creativity. These messages can include dynamic content and personalization. Marketers can track opens and engagement metrics. HubSpot’s drag-and-drop email builder can help teams create HTML email marketing campaigns that look great on every client.

Common HTML Email Marketing Elements

HTML emails typically include these design elements that aren't possible in plain text. That includes:

• Branded headers and logos that reinforce company identity.
• Multi-column layouts for organizing content sections.
• Call-to-action buttons that stand out visually.
• Background colors and images for visual appeal.
• Custom fonts and typography (with fallbacks for compatibility).
• Embedded images and GIFs to illustrate products or concepts.

HTML Email Marketing Limitations and Challenges

HTML email operates in a different environment than web browsers. In fact, email clients use rendering engines that vary wildly in their HTML and CSS support. Here are the common challenges marketers need to know.

Why HTML Email Differs From Web HTML

Email clients prioritize security and user protection over design flexibility. Most clients strip out potentially dangerous elements like JavaScript, embedded videos, and forms to prevent phishing attacks and malicious code execution. Meanwhile, web browsers often have similar experiences across platforms and support a wide array of media types.

Common Rendering Issues for HTML Email Marketing

What elements are rendered vary by email provider. The same HTML code can display differently in Gmail, Outlook, and Yahoo. Other common rendering issues include:

• Mobile email clients that ignore media queries or apply their own automatic scaling that breaks layouts.
• Varied dark mode support that can invert colors unpredictably.
• Background images that fail to display in Outlook.
• Animated GIFs that won’t play on certain platforms.

Features to Avoid in HTML Email Marketing

JavaScript is completely unsupported and will be stripped out by virtually all email clients, but what about HTML and CSS elements? Here are features that commonly break in email clients:

• CSS positioning properties, like position: absolute or position: fixed rarely work reliably.
• CSS floats are often rendered inconsistently. (Use table-based layouts instead.)
• Web fonts may not display consistently, making fallback fonts essential.
• Form elements like input fields and buttons with submit actions won't function.
• Video and audio embeds are blocked, requiring workarounds like animated GIFs or linked thumbnail images.

Pro tip: External stylesheets won't load in most clients, so all CSS must be inlined or embedded in the <head>.

Free Email Marketing Tools

Create, personalize, and optimize your marketing emails without waiting on designers or IT.

• Boost email opens.
• Design stunning emails.
• Automate follow ups.
• And more!

Get Started for Free

How to Create an HTML Email

Coding is not required to make great HTML email campaigns. Most tools that create and send email (like HubSpot’s email marketing software) will offer pre-formatted, ready-to-go HTML templates that enable users to design emails without ever needing to access the actual code on the back end.

As marketers make changes in the email editor, those changes will be automatically coded into the final product.

Email-building tools like this are an ideal option for teams that don’t have an email designer on staff but still want to send professional-looking marketing emails. For marketers comfortable with HTML, most email tools will allow users to import HTML files directly for use as custom email templates.

Pro tip: Need help with the content of an email campaign? HubSpot’s Campaign Assistant can create a customized first draft in just a few clicks— so marketers can get back to the fun part.

Still want to create an HTML email from scratch?

There is a wide variety of free HTML email templates available on the web (some of which appear below). For teams that know their way around an HTML file, it’s usually quite straightforward to adapt the template to an email-building tool.

Marketers who want to learn how to create an HTML email template completely from scratch need to have an advanced knowledge of HTML (or work with a developer who does). This guide offers a solid overview of coding a basic HTML email.

Because the process of creating an HTML email from scratch can be quite involved, I recommend working with a developer or using a pre-made HTML email template instead.

Pro tip: HubSpot provides free HTML email templates and a drag-and-drop email builder.

Developing an HTML email specifically for HubSpot?

Marketing teams creating HTML email templates specifically for use in HubSpot will need HubL tokens. This ensures that emails can be customized and are compliant with CAN-SPAM laws. Marketers can find a complete guide to coding HubSpot-specific HTML email templates here. Or alternatively, just use the simple what-you-see-is-what-you-get HubSpot email editor.

HTML Email Marketing Best Practices

1. Make sure the HTML email is responsive for different screen sizes and devices.
2. Make sure the styling works in different email clients.
3. Be conscious of how long the HTML emails take to load.
4. Plan for end-user inconsistencies.
5. Conduct thorough testing.

No matter what method marketers plan to use to learn how to create an HTML email template, these best practices will help improve the design, user experience, and deliverability.

1. Make sure the HTML email is responsive for different screen sizes and devices.

The way an email looks in a user’s inbox depends on a wide variety of factors. One of the biggest and most obvious factors is the screen size of the device it’s being viewed on. Responsive design ensures emails display correctly on mobile and desktop devices.

An email that looks amazing and well-formatted on a desktop can easily devolve into a tangle of illegible, overlapping text and images when viewed on a smartphone screen. To ensure HTML emails look as intended, the best thing to do is keep the layout simple and straightforward.

Adding more complex elements makes the design more difficult to translate for different screen sizes. If marketers decide to develop a more complex layout, make sure to test how the elements will be rearranged to suit different screen sizes.

For example, if an email displays as multi-column on desktop, that same structure won’t fly on mobile. The message will need to use media queries to define how elements will be displayed on different screen sizes.

Let’s look at this template from HubSpot. The image and the copy have switched layouts when it’s on different screens.

What I like about this is its ability to look at the template through a user’s lens to identify what piques their interest to click or subscribe.

Remember, developing truly responsive HTML emails goes beyond the structure and format of the message. Think about how the overall user experience of the email will be perceived on different devices.

2. Make sure the styling works for different email clients.

Another big factor that heavily impacts the way HTML emails appear is the email client used to open the message. Every email client loads emails slightly differently, so an email that looks a certain way in Gmail will likely look different in Outlook.

Luckily, if marketers know how most popular email clients load particular HTML and CSS elements, they can create a pretty consistent experience across different users’ inboxes. It’s all about knowing which unsupported tags to avoid and adapting accordingly. This comprehensive guide explains how the most popular email clients support and render different styling elements.

Wondering how it’ll look? HubSpot actually works with multiple email clients to make sure email marketers know exactly how messages will appear.

You can also check out an article we wrote on optimizing emails for different email clients.

3. Be conscious of how long HTML emails take to load.

How long emails take to load could very well be the difference between gaining a new customer and losing a frustrated subscriber. While it can be tempting to take advantage of all the different styling options that HTML emails offer, none of that matters if an email takes too long to load.

When designing HTML emails, remain conscious of how long emails will take to load — especially if someone is, say, opening a message on their morning subway commute with a weak data connection.

Here are a few little steps that go a long way to improve load time.

Use images sparingly.

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 compromising on quality, so taking this extra step won’t hurt the visual integrity of an email.

Use standard web fonts.

Custom fonts are great for spicing up a landing page, but they can add an extraneous layer of complexity when added to an email. To be safe, use standard web fonts and check to make sure the email client most subscribers use supports a particular font.

Try an HTML minifier.

An HTML minifier (like minifycode.com and smallseotools.com ) automatically removes code that isn’t needed in an HTML file. Repetitive, extra elements will be stripped out, but the actual rendering of an email should remain the same. Each line of code impacts how long an email takes to load, so taking the time to remove junk code can have a positive effect on load time.

Here’s the code I used to make my email template.

Look how much junk code Smallseotools removed. This not only saved me from importing unnecessary lines of code, but it also improved overall email loading time.

Keep the message focused on a single objective.

The best way to reduce email load time is to reduce the amount of content in each email send. It might seem obvious, but too many marketers try to stuff too much content into their emails.

Not only does that lead to an off-putting user experience (nobody wants to read a novel in email form), but it can also increase load time and cause users to abandon an email. Keep it simple, and users will thank you.

Free Email Marketing Tools

Create, personalize, and optimize your marketing emails without waiting on designers or IT.

• Boost email opens.
• Design stunning emails.
• Automate follow ups.
• And more!

Get Started for Free

4. Plan for end-user inconsistencies.

The screen size and email client aren’t the only factors that can alter the way HTML emails render in 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’re automatically loading images can all impact how emails load.

Trying to solve for each factor would probably be enough to make anyone throw their computer across the room. But teams don’t have to be completely helpless in the face of these variables. They just have to do a little pre-planning.

Consider creating a webpage version of your email.

If a lovingly designed email renders like an absolute mess when a subscriber opens it, they will at least have the option to click “view as web page” and see the email as intended. Since style elements render much more consistently across web browsers versus email clients, marketers have way more control over the web page version of a message.

Pro tip: Marketers using HubSpot can turn on an option that generates a web page version automatically.

Create a plain text version of your email.

A plain text version is exactly what it sounds like — an alternative version of an HTML email that renders in completely plain text. Adding a plain text version of an HTML email is important because some email clients and user settings can’t (or choose not to) load HTML.

If this is the case, the client will look for a plain-text alternative version of an HTML email to load for the user. If one doesn’t exist, it could signal to the recipient’s email server that the message is spam or potentially dangerous.

Most email tools like HubSpot will automatically provide a plain text version that displays if a recipient’s email server requires it. Here’s an example of what it looks like on desktop:

Those coding an HTML email from scratch will need to create something called a multipart MIME message. A multipart MIME message is an email that contains both a plain text and HTML version of the same email. The plain text version will be displayed if a recipient’s email client or security system doesn’t allow HTML email.

This is a process that requires advanced knowledge of coding, so I recommend working with a developer.

Make sure your email still makes sense if the images don’t load.

Some users have automatic image-loading turned off, which means they’ll see the email without images when they open it. For this reason, don’t rely entirely on images to get the meaning of a message across, and always add alt-text to the images.

Alt-text will load even when images don’t, so subscribers can get the general idea of what the visuals include.

5. Conduct thorough testing.

Finally, test the HTML email at every stage of development to ensure it works across different email clients, operating systems, and device types.

Don’t wait until the very end of the process to test out the email — testing throughout the process is the best way to spot inconsistencies between different email clients and ensure teams are creating the most consistent experience possible for recipients.

Some email tools (like HubSpot) offer in-app testing within their email builders to make the process easier.

Those working from scratch can use a tool like HTML Email Check or PreviewMyEmail to get a better idea of how the email will look in different email clients and devices.

Using the same code from before, I reviewed the email’s display/appearance across different devices. This gave me a better idea of what my subscribers are looking at, plus I didn’t even have to upgrade to the paid version.

Simple and Free HTML Email Marketing Templates

There are an overwhelming amount of HTML email templates available on the web, and they vary in quality and price. The best HTML email marketing templates are easy to use and provide a responsive user experience. Be sure to read the terms and conditions on each individual template before use.

Marketing & Promotional HTML Email Marketing Templates

1. Product Promotion HTML Email Template by HubSpot

Whether launching a new product or simply advertising existing offerings, this email template is a great place to start. Included in the free version of Marketing Hub’s email tool, this template offers plenty of room for customization. Marketers can easily add images, text, and buttons in an intuitive drag-and-drop editor.

The main benefit of using this template is that it’s bundled with all other Marketing Hub tools. Marketers can also be confident that the templates they design will be fully responsive on any device. Plus, users have other templates to choose from — so they don’t have to stay confined to this option.

The drag-and-drop email editor is another fantastic plus.

Pro tip: Fortunately, HubSpot offers pre-made email designs that marketers can copy and paste right into their template.

2. Store Sale HTML Email Template by Campaign Monitor

This sleek, responsive design from Campaign Monitor would be perfect for sending out a discount code — but it could also serve as a stylish way to showcase products to email subscribers.

I like its clear and attention-grabbing CTA, as well as its space to include more information.

This template is free to use, so long as users sign up on the Campaign Monitor platform. It’s also worth checking out Campaign Monitor’s full library of responsive email templates .

Pro tip: If you need special code, you can learn how to create a template in your favorite HTML editor and import it to Campaign Monitor.

Using their template language, marketers can design a template with changeable sections and then pick and edit it for an email.

3. Hero Image Free HTML Email Template by ZURB

ZURB is an email template provider that has created a series of free email templates for anyone to download. This one includes a clear heading, a hero image, and a CTA highlighted in blue.

I love that it has a sidebar to include additional links. This is a good fit for newsletter-dependent brands.

Marketers will want to heavily customize this template with their brand colors and fonts. Otherwise, it’s a fantastic tool-agnostic option. Simply download the template and upload it into the team’s preferred email marketing software.

Pro tip: Remember that every CSS element must be inline for HTML emails. ZURB keeps the CSS separate to make editing easier. When sending an email, marketers should use a CSS tool, such as Premailer or MailChimp, to name a couple.

Welcome & Onboarding HTML Email Templates

4. Welcome HTML Email Template by Unlayer

Unlayer is an email marketing tool that primarily focuses on email design. Its drag-and-drop editor makes editing its templates a breeze. I love the template above because of its structure and customizability.

Though this template was designed for a fitness company, marketers can easily adapt it for their own use. This clean, muted template is a great way to display the content a team has created and connect subscribers with the most recent products or blog posts.

The design features two fully responsive columns with multiple color scheme options and room at the top to highlight a CTA.

Pro tip: Unlayer integrates with many email marketing platforms, such as MailChimp and HubSpot. This means that once marketers are done designing HTML emails, they can easily export a template.

5. Minimalist Welcome HTML Email Template by MailBakery

Proof that sometimes less really is more, this easy, fully responsive design makes the most of whitespace and keeps the focus firmly on words and visual elements. Without design distractions, the content can really shine — on any device.

This template is available on the MailBakery email template store. I love it because you can simply download it and upload it to your preferred tool, whereas other templates require you to use their software to access their templates.

I would recommend it if you’re comfortable handling HTML files and if you’re familiar with the upload process for your tool.

Pro tip: With any email template from MailBakery, users can be sure that it will appear flawlessly on various platforms, having been tested on 40 email clients. The message will still be effective whether the subscriber uses Outlook, Gmail, or any other email provider.

6. Password Reset HTML Email Template by Foundation Framework

A password reset email doesn’t need to be elaborate, and this HTML email template from Foundation Framework (also known as ZURB) checks all the boxes. It leaves a space for marketers to either include a logo or a cute graphic, as well as placeholder text that they can leave as is if they’d like.

I especially like this template because it already looks so good without customizing it. All you need is to change the button’s color to one of your brand colors, and you’ll be all set. Plus, you can use it with any tool.

Pro tip: Marketers can try making some changes to the templates, or download them and preview them to see how the features were implemented.

Business Communication HTML Email Templates

7. Company News HTML Email Template by Campaign Monitor

If a communications team is planning to send company news to customers, this is a great template to use. It’s image-heavy, making it a great fit for fashion or contemporary brands. Plus, it’s linked to Campaign Monitor’s email tool, which starts at $11 per month with other paid plans to explore (there’s a free trial, too).

I personally love that this modern template is so sophisticated and minimal.

The subtle color palette and simple design make it a versatile option for many industries and purposes, and it’s been tested on different email clients and devices to ensure a consistent user experience across platforms.

Pro tip: I realized that using a template alone isn’t enough; you’ll also have to customize it for your subscribers. My personal favorite hack is adding a company URL to the Campaign Monitor tool so that it produces a brand template.

8. Apology HTML Email Template by Stripo Email

It’s never fun to fail to meet a customer’s expectation, but it’s even less fun to leave them in the dark. This free HTML email template from Stripo, an email tool, allows teams to succinctly apologize. The cute cartoon is a plus, but users can always replace the image.

I especially like that this template allows you to ask for feedback right in the email. That makes it easy and simple for the recipient to tell you how they feel about their interaction with your company thus far.

To use this template, you only need to sign up on Stripo’s free tier, which allows you four email exports.

Pro tip: Communications teams can also use the generated templates to develop brand guidelines, which will help keep emails consistent.

Free Email Marketing Tools

Create, personalize, and optimize your marketing emails without waiting on designers or IT.

• Boost email opens.
• Design stunning emails.
• Automate follow ups.
• And more!

Get Started for Free

HTML Email Marketing Template Libraries

9. Free HTML Email Templates from Bee Free

I couldn’t decide on a template to feature from the Bee Free marketplace, so I’ve decided to recommend its entire library instead. This collection of free, open-source templates is completely responsive and tested across popular email clients.

Marketers can edit and build on them on the Bee Free platform, then export the HTML file to a local drive and upload it to the preferred email marketing tool. These are an ideal option for teams that want a more styled, polished starting place, but still want to be able to customize the design to fit the company’s needs.

Each template is available in multiple formats for different marketing purposes, like transactional emails, NPS collection, and email subscriber re-engagement.

Pro tip: If you’re using the pro version of BeeFree, you can export directly to your email marketing program, which is less of a hassle.

10. Free Email Templates by Engage Bay

With over 1,000 beautifully made HTML email templates from EngageBay, choosing one was hard. EngageBay has a wide range of templates, including ecommerce, travel and tourism, real estate, beauty, education, business, technology, home furnishing, and more. Marketers can customize it and add content to suit their business’s needs. The templates are responsive, the CTAs are perfectly placed, and the colors complement each other.

Frequently Asked Questions About HTML Email Marketing

How is HTML used in email marketing?

HTML email marketing uses HyperText Markup Language to create visually rich emails. That serves as the foundation for creating visually engaging, branded email campaigns that go beyond plain text. Marketers use HTML to structure email layouts while incorporating design elements.

What is the 60/40 rule in email?

The 60/40 rule recommends that HTML emails contain approximately 60% text and 40% images to optimize deliverability and engagement. This balance prevents emails from being flagged as spam by email filters, which often scrutinize image-heavy messages as potential phishing attempts.

How to do an HTML email?

Creating an HTML email involves either building code from scratch or customizing existing templates. Here’s how:

• Start by defining the email's structure using HTML tables for layout reliability across email clients.
• Add content sections, including headers, body copy, images, and calls-to-action.
• Apply CSS styling either inline or in the email's head section.
• Test the email across multiple clients.
• Validate the HTML code, optimize images for quick loading, ensure all links work correctly, and include a plain-text version as a fallback.
• Then, schedule the email to send.

Do I need coding skills to create HTML emails?

No, coding skills are not required to create professional HTML emails thanks to modern email marketing tools. Platforms like HubSpot offer drag-and-drop email builders that generate HTML automatically.

Which email clients support HTML emails?

Virtually all modern email clients support HTML emails, though their rendering quality varies significantly. However, “support” doesn't mean consistent rendering. Email rendering will vary based on platform. Some older clients or text-only email readers may not support HTML at all, which is why including a plain-text alternative remains important.

How much do HTML email tools cost?

HTML email tools range from completely free to enterprise-level pricing based on features and subscriber count. HubSpot's Marketing Hub offers HTML email tools starting with a free plan that includes email marketing for up to 2,000 sends per month. Paid plans scale based on contact database size and advanced marketing automation needs.

Can I use HTML email templates for free?

Yes, numerous free HTML email templates are available from multiple sources. Many email marketing platforms provide free template libraries to their users. HubSpot offers a collection of free, customizable email templates designed for various marketing purposes, including newsletters, promotions, and event invitations.

Create HTML email marketing campaigns to increase your subscriber count.

HTML email marketing helps businesses stay connected with audiences and keeps them informed about new offerings. Tools like HubSpot’s drag-and-drop builder make the process of building an HTML email easy.

With these tips and templates, marketers can create great HTML email marketing campaigns without writing a single line of code.

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

Free Email Marketing Tools

Create, personalize, and optimize your marketing emails without waiting on designers or IT.

• Boost email opens.
• Design stunning emails.
• Automate follow ups.
• And more!

Get Started for Free