Once you create an e mail utilizing a drag-and-drop or module-based device, you’re really producing an HTML e mail.
As a marketer, you’ve in all probability in contrast HTML emails versus plain textual content emails and realized that every kind has completely different advantages.
HTML emails aren’t inherently higher than plain textual content emails, and in numerous conditions, each varieties will be a part of a profitable e mail advertising and marketing program.
On this article, we’ll cowl how one can get began creating HTML emails, no matter your expertise degree and luxury with coding, and share some free templates you should use. Let’s dive in.
Plain Textual content vs. HTML Emails
There are two fundamental kinds of e mail you possibly can ship and obtain: plain textual content emails (these are precisely what they sound like — any e mail that comprises simply plain previous textual content with no formatting) and HTML emails, that are formatted and styled utilizing HTML and inline CSS.
HTML emails are easy to spot — most of the styled, multimedia marketing emails in your inbox are HTML emails.
Here’s what an HTML looks like on the front end. Click on the HTML button to see the code behind it.
See the Pen HTML Email Template from HubSpot by Christina Perricone (@hubspot) on CodePen.
Learn how to Create an HTML E mail
Excellent news: You really don’t have to know how one can code to create an HTML e mail.
Most instruments that create and ship e mail (like HubSpot) will provide pre-formatted, ready-to-go HTML templates that allow you to design emails with out ever needing to entry the precise code on the again finish.
As you make modifications within the e mail editor, these modifications shall be routinely coded into the ultimate product.
E mail-building instruments like this are an excellent possibility should you don’t have an e mail designer in your crew, however you continue to wish to ship professional-looking advertising and marketing emails.
Professional tip: Need assistance with the content material of your e mail? HubSpot’s Campaign Assistant can create a custom-made first draft in just some clicks— so you will get again to the enjoyable half.
Nonetheless wish to create an HTML e mail from scratch?
In the event you’re snug with HTML and wish extra direct management over the code of your emails, most e mail instruments will can help you import HTML files directly to be used as customized e mail templates.
There are all kinds of free HTML e mail templates accessible on the net (a few of which we’ll share under), and if you realize your approach round an HTML file, it’s normally fairly easy to adapt the template to the email-building device of your alternative.
If you wish to discover ways to create an HTML e mail template fully from scratch, you’ll have to have a complicated information of HTML (or work with a developer who does).
This guide provides a stable overview of coding a fundamental HTML e mail.
As a result of the method of making an HTML e mail from scratch will be fairly concerned, we advocate working with a developer or utilizing a pre-made HTML e mail template as a substitute.
Creating an HTML e mail particularly for HubSpot?
If you wish to know how one can create an HTML e mail template particularly to be used in HubSpot, you’ll wish to be sure you embody the required HubL tokens (these guarantee your emails will be custom-made and are compliant with CAN-SPAM legal guidelines).
Yow will discover an entire guide to coding HubSpot-specific HTML email templates here. Or alternatively, simply use our easy what-you-see-is-what-you-get email editor.
HTML E mail Greatest Practices
- Ensure that your HTML e mail is responsive for various display sizes and gadgets.
- Ensure that your styling works in numerous e mail shoppers.
- Take heed to how lengthy your HTML emails take to load.
- Plan (as a lot as you possibly can) for end-user inconsistencies.
- Conduct thorough testing.
Now that you simply perceive the fundamentals of what goes into growing an HTML e mail, let’s go over a couple of necessary finest practices you need to remember.
It doesn’t matter what methodology you intend to make use of to discover ways to create an HTML e mail template, these finest practices will assist enhance the design, person expertise, and deliverability of your emails.
1. Ensure that your HTML e mail is responsive for various display sizes and gadgets.
The best way your e mail appears in a person’s inbox relies on all kinds of things.
One of many greatest and most evident components is the display dimension of the gadget it’s being seen on.
An e mail that appears wonderful and well-formatted on a desktop can simply devolve right into a tangle of illegible, overlapping textual content and pictures when seen on a smartphone display.
To make sure your HTML emails look the best way you meant throughout a large spectrum of display sizes, the most effective factor you are able to do is hold your format easy and simple.
Once you begin including extra complicated components like a number of columns and floated pictures, it turns into harder to translate the format of your e mail for various display sizes.
In the event you resolve to develop a extra complicated format, be sure you’re actively fixing how the weather shall be rearranged to swimsuit completely different display sizes.
For instance, in case your e mail shows as multi-column on desktop, that very same construction gained’t fly on cell — you’ll want to make use of media queries to outline how components shall be displayed on completely different display sizes.
Let’s have a look at this template from HubSpot. You may see how the picture and the copy have switched layouts when it’s on completely different screens.
What I like about that is its capacity to have a look at the template by a person’s lens to determine what piques their curiosity to click on or subscribe.
Keep in mind, growing really responsive HTML emails goes past the construction and format of your message. Take into consideration how the general person expertise of your e mail shall be perceived on completely different gadgets.
Ensure that your font selections are simply as legible on cell as they’re on desktop, and use mobile-friendly buttons or calls-to-action (CTAs) instead of hyperlinked textual content (have you ever ever tried to faucet just a little line of hyperlinked textual content on cell? It’s not very simple).
Yow will discover our extra in-depth guide to mobile email best practices right here.
2. Make sure your styling works for different email clients.
Another big factor that heavily impacts the way your HTML emails appear in your subscribers’ inboxes is the email client they’re using 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 you know how most popular email clients load particular HTML and CSS elements, you 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 preferred e mail shoppers (together with Gmail and a number of variations of Outlook) help and render completely different styling components.
In the event you’re questioning the way it’ll look, HubSpot really works with a number of e mail shoppers to be sure you’re conscious of your e mail preview.
You can even take a look at an article we wrote on optimizing emails for various e mail shoppers.
3. Take heed to how lengthy your HTML emails take to load.
How lengthy your e mail takes to load might very properly be the distinction between gaining a brand new buyer and shedding a annoyed subscriber.
Whereas it may be tempting to reap the benefits of all of the completely different styling choices and alternatives to include visuals that HTML emails provide, none of that issues in case your e mail takes too lengthy to load.
As you design your HTML e mail, stay acutely aware of how lengthy your e mail will take to load — particularly if somebody is, say, opening your message on their morning subway commute with a weak knowledge connection.
Listed below are a couple of little steps you possibly can take that may go a good distance towards bettering load time.
Use pictures sparingly.
That approach, you’ll bolster the message you wish to get throughout to subscribers. All the time use a picture compressor (like Compressor.io) to cut back the file dimension as a lot as doable.
Most picture compressors can considerably cut back the file dimension of a picture with out compromising on high quality, so taking this further step gained’t harm the visible integrity of your e mail.
Use normal internet fonts.
Customized fonts are nice for spicing up a touchdown web page, however they will add an extraneous layer of complexity when added to an e mail.
As we talked about above, all e mail shoppers deal with type components in another way, and this particularly extends to fonts.
To be secure, use normal internet fonts and check to make sure the e-mail shopper most of your subscribers use helps a specific font.
Attempt an HTML minifier.
An HTML minifier (like minifycode.com and smallseotools.com) routinely removes code that isn’t wanted in an HTML file.
Repetitive, further components shall be stripped out, however the precise rendering of your e mail ought to stay the identical (at all times check it out!).
Every line of code impacts how lengthy an e mail takes to load, so taking the time to take away junk code can have a constructive impact on load time.
Here’s the code I used to make my e mail template. look how a lot junk code Smallseotools eliminated:
And look how a lot junk code Smallseotools eliminated. This not solely saved me from importing pointless strains of code, however it additionally improved total e mail loading time.
Preserve your message targeted on a single goal.
One of the best ways to cut back e mail load time is to cut back how a lot content material you add to every of your e mail sends. It may appear apparent, however too many entrepreneurs attempt to stuff an excessive amount of content material into their emails.
Not solely does that result in an off-putting person expertise (no one desires to learn a novel in e mail kind), however it might ship your load day off the charts and trigger customers to desert your e mail. Preserve it easy, and your customers will thanks.
4. Plan (as a lot as you possibly can) for end-user inconsistencies.
The display dimension and e mail shopper aren’t the one components that may alter the best way your HTML e mail renders in your subscribers’ inboxes.
Components just like the model of their e mail shopper, their working system, their distinctive person settings, their safety software program, and whether or not or not they’re routinely loading pictures can all impression how your e mail masses.
As you possibly can in all probability guess by that hefty listing of things, making an attempt to unravel for all of them (each single time you ship an e mail) would in all probability be sufficient to make you throw your pc throughout the room.
However you don’t must be fully helpless within the face of those variables — you simply must do some pre-planning.
Think about making a webpage model of your e mail.
That is sort of like giving your e mail a fail-safe button.
If for some purpose — on account of one of many many components mentioned above — your lovingly designed e mail renders like an absolute mess when a subscriber opens it, they are going to no less than have the choice to click on “view as internet web page” and see the e-mail as you meant it to be.
Since type components render far more persistently throughout internet browsers versus e mail shoppers, you’ll be capable of have far more management over the online web page model of your message.
In HubSpot, there’s an option you possibly can activate that may generate an online web page model routinely.
Create a plain textual content model of your e mail.
A plain textual content model is precisely what it appears like — another model of your HTML e mail that renders in fully plain textual content.
Including a plain textual content model of your HTML e mail is necessary as a result of some e mail shoppers and person settings can’t (or select to not) load HTML.
If so, the shopper will search for a plain textual content different model of your HTML e mail to load for the person. If one doesn’t exist, it might sign to the recipient’s e mail server that your message is spam — or doubtlessly harmful.
Most e mail instruments like HubSpot will routinely present a plain textual content model that shows if a recipient’s e mail server requires it. Right here’s an instance of what it appears like on desktop:
However should you’re coding an HTML e mail from scratch, you’ll have to create one thing referred to as a multipart MIME message.
A multipart MIME message is an e mail that comprises each a plain textual content and HTML model of the identical e mail. The plain textual content model shall be displayed if a recipient’s e mail shopper or safety system doesn’t enable HTML e mail.
It is a course of that requires a complicated information of coding, so we advocate working with a developer.
Ensure that your e mail nonetheless is smart if the photographs don’t load.
Some customers have computerized image-loading turned off, which implies they’ll see your e mail with out pictures once they open it.
Because of this, don’t rely solely on pictures to get the which means of your message throughout, and at all times add alt-text to the photographs you do embody.
Alt-text will load even when pictures don’t, so your subscribers can get the final thought of what the visuals embody.
5. Conduct thorough testing.
Lastly, you’ll want to check your HTML e mail at each stage of growth to make sure it really works throughout completely different e mail shoppers, working methods, and gadget varieties.
Don’t wait till the very finish of the method to check out your e mail — testing as you’re employed is the easiest way to identify inconsistencies between completely different e mail shoppers and make sure you’re creating essentially the most constant expertise doable in your recipients.
Some e mail instruments (like HubSpot) provide in-app testing inside their e mail builders to make the method simpler.
In the event you’re working from scratch, you should use a device like HTML Email Check or PreviewMyEmail to get a greater thought of how your e mail will look in numerous e mail shoppers and gadgets.
See under:
Using the same code from earlier than, I reviewed the e-mail’s show/look throughout completely different gadgets. This gave me a greater thought of what my subscribers are , plus I didn’t even must improve to the paid model.
Easy and Free HTML E mail Templates
There are an amazing quantity of HTML e mail templates accessible on the net as you possibly can see under, and so they fluctuate in high quality, responsiveness, and value.
We’ve pulled collectively a number of free HTML e mail templates that present a responsive person expertise. Be sure you learn the phrases and situations on every particular person template earlier than use.
1. Product Promotion HTML Email Template by HubSpot
Whether or not you’re launching a brand new product or just promoting your present choices, this e mail template is a superb place to start out.
Included within the free model of Marketing Hub’s email tool, this template provides loads of room for personalisation. You may simply add pictures, textual content, and buttons in an intuitive drag-and-drop editor.
You can even be assured that the templates you design shall be absolutely responsive on any gadget.
The primary advantage of utilizing this template is that it’s bundled with all different Marketing Hub tools. Plus, you could have different templates to select from — you don’t have to remain confined to this selection.
The drag-and-drop e mail editor is one other unbelievable plus.
Professional tip: Thankfully, HubSpot provides pre-made e mail designs you could copy and paste proper into your template.
Nevertheless, if you wish to delve deeper into HTML coding, there are many movies and tutorials that stroll you thru the basics of designing HTML emails, just like the one under:
2. Company News HTML Email Template by Campaign Monitor
In the event you’re planning to ship firm information to your clients, this can be a nice template to make use of. It’s image-heavy, making it a terrific match for vogue or up to date manufacturers.
Plus, it’s linked to Marketing campaign Monitor’s e mail device, which begins at $11 per thirty days with different paid plans you possibly can discover (there’s a free trial, too).
I personally love that this contemporary template is so subtle and minimal.
The refined shade palette and easy design make it a flexible possibility for a lot of industries and functions, and it’s been examined on completely different e mail shoppers and gadgets to make sure a constant person expertise throughout platforms.
Professional tip: I noticed that utilizing a template alone isn’t sufficient; you’ll additionally must customise it in your subscribers. My private favourite hack is including an organization URL to the Marketing campaign Monitor device in order that it produces a model template.
3. Welcome HTML Email Template by Unlayer
Unlayer is an e mail advertising and marketing device that primarily focuses on e mail design. Its drag-and-drop editor makes modifying its templates a breeze. I like the template above due to its construction and customizability.
Although this template was designed for a health firm, you possibly can simply adapt it in your personal use.
This clear, muted template is an effective way to show the content material your crew has created and join subscribers along with your most up-to-date merchandise or weblog posts.
The design options two absolutely responsive columns with a number of shade scheme choices and room on the prime to spotlight a CTA.
Professional tip: Unlayer integrates with many e mail advertising and marketing platforms, resembling MailChimp and HubSpot. Which means that when you’re completed designing HTML emails, you possibly can simply export your template.
4. Minimalist Welcome HTML Email Template by MailBakery
Proof that typically much less actually is extra, this simple, absolutely responsive design makes essentially the most of whitespace and retains the main target firmly in your phrases and visible components.
With out design distractions, your content material can actually shine — on any gadget.
This template is on the market on the MailBakery e mail template retailer. I adore it as a result of you possibly can merely obtain it and add it to your most popular device, whereas different templates require you to make use of their software program to entry their templates.
I might advocate it should you’re snug dealing with HTML recordsdata and should you’re aware of the add course of in your device.
Professional tip: With any e mail template from MailBakery, you possibly can make sure that it should seem flawlessly on numerous platforms, having been examined on 40 e mail shoppers.
Your message will nonetheless be efficient whether or not your subscriber makes use of Outlook, Gmail, or every other e mail supplier.
5. Free HTML Email Templates from Bee Free
I couldn’t resolve on a template to function from the Bee Free market, so I’ve determined to advocate its complete library as a substitute. This assortment of free, open-source templates is totally responsive and examined throughout fashionable e mail shoppers.
You may edit and construct on them on the Bee Free platform, then export the HTML file to your native drive and add it to your most popular email marketing tool.
These are an excellent possibility if you’d like a extra styled, polished beginning place, however you continue to need to have the ability to customise the design to suit your firm’s wants.
Every template is on the market in a number of codecs for various advertising and marketing functions, like transactional emails, NPS assortment, and e mail subscriber re-engagement.
Professional tip: In the event you’re utilizing the professional model of BeeFree, you possibly can export on to your e mail advertising and marketing program, which is much less of a trouble.
6. Store Sale HTML Email Template by Campaign Monitor
This smooth, responsive design from Marketing campaign Monitor can be excellent for sending out a reduction code — however it might additionally function a classy option to showcase your newest merchandise to e mail subscribers.
I like its clear and attention-grabbing CTA, in addition to its area to incorporate extra data.
This template is free to make use of, as long as you enroll on the Marketing campaign Monitor platform. It’s additionally value testing Marketing campaign Monitor’s full library of responsive email templates.
Professional tip: In the event you want particular code, you possibly can discover ways to create a template in your favourite HTML editor and import it to Marketing campaign Monitor.
Utilizing their template language, you possibly can design a template with changeable sections after which choose and edit it for an e mail.
7. Stylish HTML Email Template by ActiveCampaign
This e mail template from ActiveCampaign is trendy and optimized — excellent for introducing your organization or your merchandise.
Its hero part contains ample area for a picture and a CTA, and additional down, you possibly can immediate your readers to take a look at extra merchandise, providing you with a second likelihood at changing them.
To make use of this free HTML e mail template, you’ll want to join an ActiveCampaign free trial. Its e mail device begins at $49 per thirty days and contains three seats, making this template a terrific match in case your e mail advertising and marketing crew contains a number of individuals.
Professional tip: Need your shoppers to view real-time content material that’s up to date each couple of minutes? You may really add a code that’s provided to you by third-party instruments into your ActiveCampaign HTML e mail template for his or her on-line HTML code editor.
8. Apology HTML Email Template by Stripo Email
It’s by no means enjoyable to fail to satisfy a buyer’s expectation, however it’s even much less enjoyable to go away them at nighttime. This free HTML e mail template from Stripo, an e mail device, permits you to succinctly apologize.
The lovable cartoon is a plus, however you possibly can at all times exchange the picture.
I particularly like that this template permits you to ask for suggestions proper within the e mail. That makes it simple and easy for the recipient to let you know how they really feel about their interplay along with your firm so far.
To make use of this template, you solely have to sign up on Stripo’s free tier, which permits you 4 e mail exports.
Professional tip: You can even use the generated templates to develop Model Pointers kits, which can assist you write emails constant along with your model extra shortly in your campaigns.
These kits include all desktop and cell e mail layouts and can help you save all of the required design components and settings in a single easy-to-use kind.
9. Hero Image Free HTML Email Template by ZURB
ZURB is an e mail template supplier that has created a sequence of free e mail templates for anybody to obtain. This one features a clear heading, a hero picture, and a CTA highlighted in blue.
I like that it has a sidebar to incorporate further hyperlinks. It is a good match for newsletter-dependent manufacturers.
You’ll wish to closely customise this template along with your model colours and fonts to make it really feel extra like “you.” In any other case, it’s a unbelievable tool-agnostic possibility. Merely obtain the template and add it into your most popular e mail advertising and marketing software program.
Professional tip: Keep in mind that each CSS ingredient should be inline for HTML emails. ZURB retains the CSS separate to make modifying simpler. When sending your e mail, you need to use a CSS device, resembling Premailer or MailChimp, to call a pair.
10. Password Reset HTML Email Template by Foundation Framework
A password reset e mail doesn’t have to be elaborate, and this HTML e mail template from Basis Framework (often known as ZURB) checks all of the bins.
It leaves an area so that you can both embody your emblem or a cute graphic, in addition to placeholder textual content you could depart as is should you’d like.
I particularly like this template as a result of it already appears so good with out customizing it. All you want is to alter the button’s shade to one in all your model colours, and also you’ll be all set. Plus, you should use it with any device.
Professional tip: You may strive making some modifications to the templates, or obtain them and preview them to see how the options have been applied by wanting on the supply.
You’ll see that the Basis for Emails type tag is included on the prime of every template, indicating the place the template is from.
Create HTML Emails to Enhance Your Subscriber Depend
HTML emails are an attractive option to share what’s occurring in what you are promoting and hold subscribers coming again for extra.
With the guidelines and templates we’ve shared, you’re properly in your option to creating lovely and useful HTML emails with out writing a single line of code.
Editor’s be aware: This publish was initially printed in June 2019 and has been up to date for comprehensiveness.
