If you create an e-mail utilizing a drag-and-drop or module-based device, you’re truly producing an HTML e-mail.
As a marketer, you’ve most likely in contrast HTML emails versus plain textual content emails and realized that every kind has totally different advantages.
HTML emails aren’t inherently higher than plain textual content emails, and in numerous conditions, each sorts could 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 utilize. Let’s dive in.
Plain Textual content vs. HTML Emails
There are two foremost sorts of e-mail you possibly can ship and obtain: plain textual content emails (these are precisely what they sound like — any e-mail that incorporates simply plain previous textual content with no formatting) and HTML emails, that are formatted and styled utilizing HTML and inline CSS.
HTML emails are simple to identify — a lot of the styled, multimedia advertising and marketing emails in your inbox are HTML emails.
Right here’s what an HTML appears like on the entrance finish. Click on on the HTML button to see the code behind it.
See the Pen HTML E mail Template from HubSpot by Christina Perricone (@hubspot) on CodePen.
Methods to Create an HTML E mail
Excellent news: You truly don’t must know easy methods to code to create an HTML e-mail.
Most instruments that create and ship e-mail (like HubSpot) will supply 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 adjustments within the e-mail editor, these adjustments can be robotically coded into the ultimate product.
E mail-building instruments like this are a perfect choice when 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 Marketing campaign Assistant can create a custom-made first draft in just some clicks— so you may 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 help you import HTML recordsdata instantly to be used as customized e-mail templates.
There are all kinds of free HTML e-mail templates obtainable on the net (a few of which we’ll share beneath), and if you already know your method 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 learn to create an HTML e-mail template fully from scratch, you’ll must have a sophisticated information of HTML (or work with a developer who does).
This information presents a stable overview of coding a primary HTML e-mail.
As a result of the method of making an HTML e-mail from scratch could be fairly concerned, we advocate working with a developer or utilizing a pre-made HTML e-mail template as an alternative.
Growing an HTML e-mail particularly for HubSpot?
If you wish to know easy methods to create an HTML e-mail template particularly to be used in HubSpot, you’ll wish to ensure you embrace the required HubL tokens (these guarantee your emails could be custom-made and are compliant with CAN-SPAM legal guidelines).
You’ll find a whole information to coding HubSpot-specific HTML e-mail templates right here. Or alternatively, simply use our easy what-you-see-is-what-you-get e-mail editor.
HTML E mail Greatest Practices
- Be certain that your HTML e-mail is responsive for various display screen sizes and units.
- Be certain that your styling works in numerous e-mail purchasers.
- 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 number of vital finest practices it is best to take note.
It doesn’t matter what methodology you propose to make use of to learn to create an HTML e-mail template, these finest practices will assist enhance the design, person expertise, and deliverability of your emails.
1. Be certain that your HTML e-mail is responsive for various display screen sizes and units.
The way in which your e-mail appears in a person’s inbox relies on all kinds of things.
One of many greatest and most evident elements is the display screen measurement of the machine it’s being considered on.
An e-mail that appears superb and well-formatted on a desktop can simply devolve right into a tangle of illegible, overlapping textual content and pictures when considered on a smartphone display screen.
To make sure your HTML emails look the best way you meant throughout a large spectrum of display screen sizes, the most effective factor you are able to do is preserve your format easy and simple.
If you begin including extra complicated components like a number of columns and floated photographs, it turns into tougher to translate the format of your e-mail for various display screen sizes.
In the event you determine to develop a extra complicated format, ensure you’re actively fixing how the weather can be rearranged to swimsuit totally different display screen 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 can be displayed on totally different display screen sizes.
Let’s take a look at this template from HubSpot. You’ll be able to see how the picture and the copy have switched layouts when it’s on totally different screens.
What I like about that is its capacity to take 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 can be perceived on totally different units.
Be certain 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) rather than hyperlinked textual content (have you ever ever tried to faucet slightly line of hyperlinked textual content on cell? It’s not very simple).
You’ll find our extra in-depth information to cell e-mail finest practices proper right here.
2. Be certain that your styling works for various e-mail purchasers.
One other massive issue that closely impacts the best way your HTML emails seem in your subscribers’ inboxes is the e-mail shopper they’re utilizing to open the message.
Each e-mail shopper masses emails barely in a different way, so an e-mail that appears a sure method in Gmail will seemingly look totally different in Outlook.
Fortunately, if you understand how hottest e-mail purchasers load specific HTML and CSS components, you possibly can create a fairly constant expertise throughout totally different customers’ inboxes.
It’s all about understanding which unsupported tags to keep away from and adapting accordingly.
This complete information explains how the preferred e-mail purchasers (together with Gmail and a number of variations of Outlook) help and render totally different styling components.
In the event you’re questioning the way it’ll look, HubSpot truly works with a number of e-mail purchasers to ensure you’re conscious of your e-mail preview.
You may as well try an article we wrote on optimizing emails for various e-mail purchasers.
3. Take heed to how lengthy your HTML emails take to load.
How lengthy your e-mail takes to load might very nicely be the distinction between gaining a brand new buyer and shedding a annoyed subscriber.
Whereas it may be tempting to make the most of all of the totally different styling choices and alternatives to include visuals that HTML emails supply, none of that issues in case your e-mail takes too lengthy to load.
As you design your HTML e-mail, stay 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 number of little steps you possibly can take that can go a good distance towards bettering load time.
Use photographs sparingly.
That method, you’ll bolster the message you wish to get throughout to subscribers. All the time use a picture compressor (like Compressor.io) to scale back the file measurement as a lot as doable.
Most picture compressors can considerably cut back the file measurement of a picture with out compromising on high quality, so taking this additional step gained’t harm the visible integrity of your e-mail.
Use commonplace 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 purchasers deal with fashion components in a different way, and this particularly extends to fonts.
To be protected, use commonplace internet fonts and test to ensure the e-mail shopper most of your subscribers use helps a selected font.
Attempt an HTML minifier.
An HTML minifier (like minifycode.com and smallseotools.com) robotically removes code that isn’t wanted in an HTML file.
Repetitive, additional components can be stripped out, however the precise rendering of your e-mail ought to stay the identical (all the time 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 optimistic impact on load time.
Right 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 traces of code, however it additionally improved total e-mail loading time.
Hold your message targeted on a single goal.
One of the best ways to scale back e-mail load time is to scale back how a lot content material you add to every of your e-mail sends. It might sound 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 type), however it might ship your load day without work the charts and trigger customers to desert your e-mail. Hold it easy, and your customers will thanks.
4. Plan (as a lot as you possibly can) for end-user inconsistencies.
The display screen measurement and e-mail shopper aren’t the one elements that may alter the best way your HTML e-mail renders in your subscribers’ inboxes.
Parts 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 robotically loading photographs can all affect how your e-mail masses.
As you possibly can most likely guess by that hefty listing of things, attempting to unravel for all of them (each single time you ship an e-mail) would most likely be sufficient to make you throw your laptop 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 motive — on account of one of many many elements mentioned above — your lovingly designed e-mail renders like an absolute mess when a subscriber opens it, they’ll 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 fashion components render far more constantly throughout internet browsers versus e-mail purchasers, you’ll have the ability to have far more management over the online web page model of your message.
In HubSpot, there’s an choice you possibly can activate that can generate an internet web page model robotically.
Create a plain textual content model of your e-mail.
A plain textual content model is precisely what it feels 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 vital as a result of some e-mail purchasers and person settings can’t (or select to not) load HTML.
If so, the shopper will search for a plain textual content various 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 probably harmful.
Most e-mail instruments like HubSpot will robotically 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 when you’re coding an HTML e-mail from scratch, you’ll must create one thing referred to as a multipart MIME message.
A multipart MIME message is an e-mail that incorporates each a plain textual content and HTML model of the identical e-mail. The plain textual content model can be displayed if a recipient’s e-mail shopper or safety system doesn’t permit HTML e-mail.
This can be a course of that requires a sophisticated information of coding, so we advocate working with a developer.
Be certain that your e-mail nonetheless is sensible if the photographs don’t load.
Some customers have automated image-loading turned off, which suggests they’ll see your e-mail with out photographs after they open it.
For that reason, don’t rely solely on photographs to get the which means of your message throughout, and all the time add alt-text to the photographs you do embrace.
Alt-text will load even when photographs don’t, so your subscribers can get the overall concept of what the visuals embrace.
5. Conduct thorough testing.
Lastly, you’ll want to check your HTML e-mail at each stage of improvement to make sure it really works throughout totally different e-mail purchasers, working techniques, and machine sorts.
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 totally different e-mail purchasers and make sure you’re creating probably the most constant expertise doable on your recipients.
Some e-mail instruments (like HubSpot) supply in-app testing inside their e-mail builders to make the method simpler.
In the event you’re working from scratch, you should utilize a device like HTML E mail Examine or PreviewMyEmail to get a greater concept of how your e-mail will look in numerous e-mail purchasers and units.
See beneath:
Utilizing the identical code from earlier than, I reviewed the e-mail’s show/look throughout totally different units. This gave me a greater concept 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 awesome quantity of HTML e-mail templates obtainable on the net as you possibly can see beneath, they usually differ in high quality, responsiveness, and worth.
We’ve pulled collectively a collection of free HTML e-mail templates that present a responsive person expertise. You’ll want to learn the phrases and circumstances on every particular person template earlier than use.
1. Product Promotion HTML E mail Template by HubSpot
Whether or not you’re launching a brand new product or just promoting your current choices, this e-mail template is a superb place to begin.
Included within the free model of Advertising and marketing Hub’s e-mail device, this template presents loads of room for personalization. You’ll be able to simply add photographs, textual content, and buttons in an intuitive drag-and-drop editor.
You may as well be assured that the templates you design can be absolutely responsive on any machine.
The primary advantage of utilizing this template is that it’s bundled with all different Advertising and marketing Hub instruments. Plus, you have got different templates to select from — you don’t have to remain confined to this feature.
The drag-and-drop e-mail editor is one other improbable plus.
Professional tip: Happily, HubSpot presents pre-made e-mail designs which you can 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 beneath:
2. Firm Information HTML E mail Template by Marketing campaign Monitor
In the event you’re planning to ship firm information to your prospects, it is a nice template to make use of. It’s image-heavy, making it an amazing match for style 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 refined and minimal.
The delicate colour palette and easy design make it a flexible choice for a lot of industries and functions, and it’s been examined on totally different e-mail purchasers and units 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 on 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 E mail 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 really 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 on your personal use.
This clear, muted template is a good way to show the content material your crew has created and join subscribers together with your most up-to-date merchandise or weblog posts.
The design options two absolutely responsive columns with a number of colour scheme choices and room on the high to focus on a CTA.
Professional tip: Unlayer integrates with many e-mail advertising and marketing platforms, reminiscent of MailChimp and HubSpot. Because of this when you’re performed designing HTML emails, you possibly can simply export your template.
4. Minimalist Welcome HTML E mail Template by MailBakery
Proof that typically much less actually is extra, this simple, absolutely responsive design makes probably 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 machine.
This template is out there on the MailBakery e-mail template retailer. I like 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 when you’re snug dealing with HTML recordsdata and when you’re acquainted with the add course of on your device.
Professional tip: With any e-mail template from MailBakery, you possibly can make sure that it would seem flawlessly on numerous platforms, having been examined on 40 e-mail purchasers.
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 E mail Templates from Bee Free
I couldn’t determine on a template to function from the Bee Free market, so I’ve determined to advocate its whole library as an alternative. This assortment of free, open-source templates is totally responsive and examined throughout in style e-mail purchasers.
You’ll be able to 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 e-mail advertising and marketing device.
These are a perfect choice if you need 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 out there 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. Retailer Sale HTML E mail Template by Marketing campaign Monitor
This glossy, responsive design from Marketing campaign Monitor can be good for sending out a reduction code — however it might additionally function a classy approach 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 info.
This template is free to make use of, as long as you enroll on the Marketing campaign Monitor platform. It’s additionally price trying out Marketing campaign Monitor’s full library of responsive e-mail templates.
Professional tip: In the event you want particular code, you possibly can learn 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. Trendy HTML E mail Template by ActiveCampaign
This e-mail template from ActiveCampaign is fashionable and optimized — good 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, supplying 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 an amazing match in case your e-mail advertising and marketing crew contains a number of folks.
Professional tip: Need your purchasers to view real-time content material that’s up to date each couple of minutes? You’ll be able to truly add a code that’s equipped 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 E mail Template by Stripo E mail
It’s by no means enjoyable to fail to fulfill a buyer’s expectation, however it’s even much less enjoyable to depart them at the hours of darkness. This free HTML e-mail template from Stripo, an e-mail device, means that you can succinctly apologize.
The lovable cartoon is a plus, however you possibly can all the time substitute the picture.
I particularly like that this template means that you can ask for suggestions proper within the e-mail. That makes it simple and easy for the recipient to inform you how they really feel about their interplay together with your firm to date.
To make use of this template, you solely must enroll on Stripo’s free tier, which permits you 4 e-mail exports.
Professional tip: You may as well use the generated templates to develop Model Pointers kits, which can enable you write emails constant together with your model extra rapidly on your campaigns.
These kits include all desktop and cell e-mail layouts and help you save all of the required design components and settings in a single easy-to-use type.
9. Hero Picture Free HTML E mail Template by ZURB
ZURB is an e-mail template supplier that has created a collection 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 really like that it has a sidebar to incorporate extra hyperlinks. This can be a good match for newsletter-dependent manufacturers.
You’ll wish to closely customise this template together with your model colours and fonts to make it really feel extra like “you.” In any other case, it’s a improbable tool-agnostic choice. Merely obtain the template and add it into your most popular e-mail advertising and marketing software program.
Professional tip: Do not forget that each CSS factor should be inline for HTML emails. ZURB retains the CSS separate to make modifying simpler. When sending your e-mail, it is best to use a CSS device, reminiscent of Premailer or MailChimp, to call a pair.
10. Password Reset HTML E mail Template by Basis Framework
A password reset e-mail doesn’t have to be elaborate, and this HTML e-mail template from Basis Framework (also called ZURB) checks all of the bins.
It leaves an area so that you can both embrace your brand or a cute graphic, in addition to placeholder textual content which you can go away as is when 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 vary the button’s colour to one among your model colours, and also you’ll be all set. Plus, you should utilize it with any device.
Professional tip: You’ll be able to strive making some adjustments to the templates, or obtain them and preview them to see how the options had been carried out by trying on the supply.
You’ll see that the Basis for Emails fashion tag is included on the high of every template, indicating the place the template is from.
Create HTML Emails to Enhance Your Subscriber Rely
HTML emails are an interesting approach to share what’s taking place in your online business and preserve subscribers coming again for extra.
With the information and templates we’ve shared, you’re nicely in your approach to creating lovely and purposeful HTML emails with out writing a single line of code.
Editor’s be aware: This publish was initially revealed in June 2019 and has been up to date for comprehensiveness.
