The Simple Guide to Creating an HTML Email [+ Free Templates]

When you create an email utilizing a drag-and-drop aliases module-based tool, you're really generating an HTML email.

There are 2 main types of email you tin nonstop and receive: plain matter emails (these are precisely what they sound for illustration — immoderate email that contains conscionable plain aged matter pinch nary formatting) and HTML emails, which are formatted and styled utilizing HTML and inline CSS.

HTML emails are easy to spot — astir of nan styled, multimedia trading emails successful your inbox are HTML emails.

As a marketer, you've astir apt compared HTML emails versus plain-text emails and realized that location are different benefits to each type. HTML emails aren't inherently amended than plain matter emails, and successful different situations, some types tin beryllium portion of a successful email marketing program.

Here’s what an HTML looks for illustration connected nan front-end. Click connected nan HTML fastener to spot nan codification down it.

See nan Pen HTML Email Template from HubSpot by Christina Perricone (@hubspot) connected CodePen.

In this article, we'll screen really you tin get started creating HTML emails, sloppy of your acquisition level and comfortableness pinch coding, and stock immoderate free templates you tin use. Let's dive in.

How to Create an HTML Email

Good news: You really don’t request to cognize really to codification to create an HTML email.

Most devices that create and nonstop email (like HubSpot) will connection pre-formatted, ready-to-go HTML templates that alteration you to creation emails without ever needing to entree nan existent codification connected nan back-end.

As you make changes successful nan email editor, those changes will beryllium automatically coded into nan last product. Email building devices for illustration this are an perfect action if you don't person an email designer connected your team, but you still want to nonstop professional-looking trading emails.

Pro tip: Need thief pinch nan contented of your email? HubSpot's Campaign Assistant tin create a customized first draught successful conscionable a fewer clicks— truthful you tin get backmost to nan nosy part.

Still want to create an HTML email from scratch?

If you're comfortable pinch HTML and want much nonstop power complete nan codification of your emails, astir email devices will let you to import HTML files directly for usage arsenic civilization email templates.

There are a wide assortment of free HTML email templates disposable connected nan web (some of which we'll stock below), and if you cognize your measurement astir an HTML file, it's usually rather straightforward to accommodate nan template to nan email building instrumentality of your choice.

To create an HTML email wholly from scratch, you'll request to person an precocious knowledge of HTML (or activity pinch a developer who does). This guide offers a coagulated overview of coding a basal HTML email. Because nan process of creating an HTML email from scratch tin beryllium rather involved, we urge moving pinch a developer aliases utilizing a pre-made HTML email template instead.

Developing an HTML email specifically for HubSpot?

If you're processing an HTML email template specifically for usage successful HubSpot, you'll want to make judge you see nan required HubL tokens (these guarantee your emails tin beryllium customized and are compliant pinch CAN-SPAM laws). You tin find a complete guide to coding HubSpot-specific HTML email templates here. Or alternatively, conscionable usage our elemental what-you-see-is-what-you-get email editor.

Now that you understand nan basics of what goes into processing an HTML email, let's spell complete a fewer important champion practices you should support successful mind. No matter what method you scheme to usage to create HTML emails, these champion practices will thief amended nan design, personification experience, and deliverability of your emails.

1. Make judge your HTML email is responsive for different surface sizes and devices.

The measurement your email looks successful a user's inbox depends connected a wide assortment of different factors.

One of nan biggest and astir evident factors is nan surface size of nan instrumentality it's being viewed on. An email that looks astonishing and well-formatted connected a desktop tin easy devolve into a tangle of illegible, overlapping matter and images erstwhile viewed connected a smartphone screen.

To guarantee your HTML emails look nan measurement you intended crossed a wide spectrum of surface sizes, nan champion point you tin do is support your layout elemental and straightforward. When you commencement adding much analyzable elements for illustration aggregate columns and floated images, it becomes much difficult to construe nan format of your email for different surface sizes.

If you do determine to create a much analyzable layout, make judge you're actively solving for really nan elements will beryllium rearranged to suit different surface sizes. For example, if your email displays arsenic multi-column connected desktop, that aforesaid building won't alert connected mobile — you'll request to usage media queries to specify really elements will beryllium displayed connected different surface sizes.

Remember, processing genuinely responsive HTML emails goes beyond nan building and format of your message. Think astir really nan wide personification acquisition of your email will beryllium perceived connected different devices. Make judge your font choices are conscionable arsenic legible connected mobile arsenic they are connected desktop, and usage mobile-friendly buttons aliases CTAs successful spot of hyperlinked matter (have you ever tried to pat a small statement of hyperlinked matter connected mobile? It's not very easy).

You tin find our much in-depth guide to mobile email champion practices correct here.

2. Make judge your styling useful successful different email clients.

Another large facet that heavy impacts nan measurement your HTML emails look successful your subscribers' inboxes is nan email customer they're utilizing to unfastened nan message. Every email customer loads emails somewhat differently, truthful an email that looks a definite measurement successful Gmail will apt look different successful Outlook.

Luckily, if you cognize really astir celebrated email clients load peculiar HTML and CSS elements, you tin create a beautiful accordant acquisition crossed different users' inboxes. It's each astir knowing which unsupported tags to debar and adapting accordingly. This broad guide explains really nan astir celebrated email clients (including Gmail and aggregate versions of Outlook) support and render different styling elements.

You tin besides cheque retired an article we wrote connected optimizing emails for different email clients.

3. Be conscious of really agelong your HTML emails return to load.

How agelong your email takes to load could very good beryllium nan quality betwixt gaining a caller customer and losing a disappointment subscriber. While it tin beryllium tempting to return advantage of each nan different styling options and opportunities to incorporated visuals that HTML emails offer, nary of that matters if your email takes excessively agelong to load.

As you creation your HTML email, stay conscious of really agelong your email will return to load — particularly if personification is, say, opening your connection connected their greeting subway commute pinch a anemic information connection. Here are a fewer small steps you tin return that will spell a agelong measurement towards improving load time.

Use images sparingly.

That way, you’ll bolster nan connection you want to get crossed to subscribers. Always usage an image compressor (like Compressor.io) to trim nan record size arsenic overmuch arsenic possible. Most image compressors tin importantly trim nan record size of an image without compromising connected quality, truthful taking this other measurement won't wounded nan ocular integrity of your email.

Use modular web fonts.

Custom fonts are awesome for spicing up a landing page, but they tin adhd an extraneous furniture of complexity erstwhile added to an email. As we talked astir above, each email clients grip style elements differently, and this particularly extends to fonts. To beryllium safe, usage standard web fonts and check to make sure nan email customer astir of your subscribers usage supports a peculiar font.

Try an HTML minifier.

An HTML minifier (like minifycode.com and smallseotools.com) automatically removes codification that isn't needed successful an HTML file. Repetitive, other elements will beryllium stripped out, but nan existent rendering of your email should stay nan aforesaid (always trial it out!). Each statement of codification impacts really agelong an email takes to load, truthful taking nan clip to region junk codification tin person a affirmative effect connected load time.

Keep your connection focused connected a azygous objective.

The champion measurement to trim email load clip is to trim really overmuch contented you adhd to each of your email sends. It mightiness look obvious, but excessively galore marketers effort to worldly excessively overmuch contented into their emails. Not only does that lead to an off-putting personification acquisition (nobody wants to publication a caller successful email form), but it tin nonstop your load clip disconnected nan charts and origin users to wantonness your email. Keep it simple, and your users will convey you.

4. Plan (as overmuch arsenic you can) for end-user inconsistencies.

The surface size and email customer aren't nan only factors that tin change nan measurement your HTML email renders successful your subscribers' inboxes. Elements for illustration nan type of their email client, their operating system, their unsocial personification settings, their information software, and whether aliases not they're automatically loading images tin each effect really your email loads.

As you tin astir apt conjecture by that hefty database of factors, trying to lick for each of them (every azygous clip you nonstop an email) would astir apt beryllium capable to make you propulsion your machine crossed nan room.

But you don't person to beryllium wholly helpless successful nan look of these variables — you conscionable person to do a small pre-planning.

Consider creating a webpage type of your email.

This is benignant of for illustration giving your email a fail-safe button. If for immoderate logic — owed to 1 of nan galore factors discussed supra — your lovingly designed email renders for illustration an absolute messiness erstwhile a subscriber opens it, they will astatine slightest person nan action to click "view arsenic web page" and spot nan email arsenic you intended it to be.

Since style elements render overmuch much consistently crossed web browsers versus email clients, you'll beryllium capable to person measurement much power complete nan web page type of your message. In HubSpot, there's an option you tin move connected that will make a web page type automatically.

Create a plain matter type of your email.

A plain matter type is precisely what it sounds for illustration — an replacement type of your HTML email that renders successful wholly plain text. Adding a plain matter type of your HTML email is important because immoderate email clients and personification settings can't (or take not to) load HTML.

If this is nan case, nan customer will look for a plain matter replacement type of your HTML email to load for nan user. If 1 doesn't exist, it could awesome to nan recipient's email server that your connection is spam — aliases perchance dangerous.

Most email devices for illustration HubSpot will automatically supply a plain matter type that displays if a recipient's email server requires it, but if you're coding an HTML email from scratch, you'll request to create thing called a multipart MIME message.

A multipart MIME connection is an email that contains some a plain matter and HTML type of nan aforesaid email. If a recipient's email customer aliases information strategy doesn't let HTML email, nan plain matter type will beryllium displayed. This is simply a process that requires an precocious knowledge of coding, truthful we urge moving pinch a developer.

Make judge your email still makes consciousness if nan images don't load.

Some users person automatic image-loading turned off, which intends they'll spot your email without images erstwhile they unfastened it. For this reason, don't trust wholly connected images to get nan meaning of your connection across, and ever adhd alt-text to nan images you do include. Alt-text will load moreover erstwhile images don't, truthful your subscribers tin get nan wide thought of what nan visuals include.

5. Conduct thorough testing.

Finally, you'll request to trial your HTML email astatine each shape of improvement to guarantee it useful crossed different email clients, operating systems, and instrumentality types. Don't hold until nan very extremity of nan process to trial retired your email — testing arsenic you activity is nan champion measurement to spot inconsistencies betwixt different email clients and guarantee you're creating nan astir accordant acquisition imaginable for your recipients.

Some email devices (like HubSpot) connection in-app testing wrong their email builders to make nan process easier. If you're moving from scratch, you tin usage a instrumentality for illustration HTML Email Check aliases PreviewMyEmail to get a amended thought of really your email will look successful different email clients and devices.

Simple and Free HTML Email Templates

There are an overwhelming magnitude of HTML email templates disposable connected nan web, and they alteration successful quality, responsiveness, and price. We've pulled together a action of free HTML email templates that supply a responsive personification experience. Be judge to publication nan position and conditions connected each individual template earlier use.

1. Product Promotion HTML Email Template by HubSpot

Whether you're launching a caller merchandise aliases simply advertizing your existing offerings, this email template is simply a awesome spot to start. Included successful nan free type of Marketing Hub's email tool, this template offers plentifulness of room for customization. You tin easy adhd images, text, and buttons successful an intuitive drag-and-drop editor. You tin besides beryllium assured that nan templates you creation will beryllium afloat responsive connected immoderate device.

The main use of utilizing this template is that it's bundled pinch each different Marketing Hub tools. Plus, you person different templates to take from — you don't person to enactment confined to this option. The drag-and-drop email editor is different awesome plus.

2. Company News HTML Email Template by Campaign Monitor

If you're readying to nonstop institution news to your customers, this is simply a awesome template to use. It's image-heavy, making it a awesome fresh for manner aliases modern brands. Plus, it's linked to Campaign Monitor's email tool, which starts astatine 10 euros per period (there's a free trial, too).

I personally emotion that this modern template is truthful blase and minimal. The subtle colour palette and elemental creation make it a versatile action for galore industries and purposes, and it's been tested connected different email clients and devices to guarantee a accordant personification acquisition crossed platforms.

3. Welcome HTML Email Template by Unlayer

Unlayer is an email trading instrumentality that chiefly focuses connected email design. Its resistance and driblet editor makes editing its templates a breeze. I emotion nan template supra because of its building and customizability.

Though this template was designed for a fittingness company, you tin easy accommodate it for your ain use. This clean, muted template is simply a awesome measurement to show contented your squad has created and link subscribers pinch your astir caller products aliases blog posts. The creation features 2 afloat responsive columns pinch aggregate colour strategy options, and room astatine nan apical to item a call-to-action.

4. Minimalist Welcome HTML Email Template by MailBakery

Proof that sometimes little really is more, this easy, afloat responsive creation makes nan astir of whitespace and keeps nan attraction firmly connected your words and ocular elements. Without creation distractions, your contented tin really radiance — connected immoderate device.

This template is disposable connected nan MailBakery email template store. I emotion it because you tin simply download it and upload it to your preferred tool, whereas different templates require you to usage their package to entree their templates. I would urge it if you're comfortable handling HTML files and if you're acquainted pinch nan upload process for your tool.

5. Free HTML Email Templates from Bee Free

I couldn't determine connected a template to characteristic from nan Bee Free marketplace, truthful I've decided to urge its full room instead. This postulation of free, open-source templates are wholly responsive and tested crossed celebrated email clients. You tin edit and build connected them connected nan Bee Free platform, past export nan HTML record to your section thrust and upload it to your preferred email trading tool.

These are an perfect action if you want a much styled, polished starting place, but you still want to beryllium capable to customize nan creation to fresh your company's needs. Each template is disposable successful aggregate formats for different trading purposes, for illustration transactional emails, NPS collection, and email subscriber re-engagement.

6. Store Sale HTML Email Template by Campaign Monitor

This sleek, responsive creation from Campaign Monitor would beryllium cleanable for sending retired a discount codification — but it could besides service arsenic a stylish measurement to showcase your latest products to email subscribers. I for illustration its clear and attention-grabbing CTA, arsenic good arsenic its abstraction to see much information.

This template is free to use, truthful agelong arsenic you motion up connected nan Campaign Monitor platform. It’s besides worthy checking retired Campaign Monitor’s full room of responsive email templates.

7. Stylish HTML Email Template by ActiveCampaign

This email template from ActiveCampaign is modern and optimized — cleanable for introducing your institution aliases your products. Its leader conception includes ample abstraction for an image and a call-to-action, and further down, you tin punctual your readers to cheque retired much products, giving you a 2nd chance astatine converting them.

To usage this free HTML email template, you'll request to motion up for an ActiveCampaign free trial. Its email instrumentality starts astatine $49/month and includes 3 seats, making this template a awesome fresh if your email trading squad includes respective people.

8. Apology HTML Email Template by Stripo Email

It's ne'er nosy to neglect to meet a customer's expectation, but it's moreover little nosy to time off them successful nan dark. This free HTML email template from Stripo, an email tool, allows you to succinctly apologize. The tiny animation is simply a plus, but you tin ever switch nan image.

I particularly for illustration that this template allows you to inquire for feedback correct successful nan email. That makes it easy and elemental for nan recipient to show you really they consciousness astir their relationship pinch your institution frankincense far.

To usage this template, you only request to sign up connected Stripo's free tier, which allows you 4 email exports.

9. Hero Image Free HTML Email Template by ZURB

ZURB is an email template supplier that has created a bid of free email templates for anyone to download. This 1 includes a clear heading, a leader image, and a call-to-action highlighted successful blue. I emotion that it has a sidebar to see further links. This is simply a bully fresh for newsletter-dependent brands.

You'll want to heavy customize this template pinch your marque colors and fonts to make it consciousness much for illustration "you." Otherwise, it's a awesome tool-agnostic option. Simply download nan template and upload it into your preferred email trading software.

10. Password Reset HTML Email Template by Foundation Framework

A password reset email doesn't request to beryllium elaborate, and this HTML email template from Foundation Framework (also knows arsenic ZURB) checks each nan boxes. It leaves a abstraction for you to either see your logo aliases a tiny graphic, and placeholder matter that you tin time off arsenic is if you'd like.

I particularly for illustration this template because it already looks truthful bully without customizing it. All you request is to alteration nan button's colour to 1 of your marque colors, and you'll beryllium each set. Plus, you tin usage it pinch immoderate tool.

Create HTML Emails to Increase Your Subscriber Count

HTML emails are an engaging measurement to stock what’s happening successful your business and support subscribers coming backmost for more. With nan tips and templates we’ve shared, you’re good connected your measurement to creating beautiful HTML emails without penning a azygous statement of code.

Editor's note: This station was primitively published successful June 2019 and has been updated for comprehensiveness.