If you create an e mail utilizing a drag-and-drop or module-based software, you are really producing an HTML e mail.
There are two most important forms of e mail you may ship and obtain: plain textual content emails (these are precisely what they sound like — any e mail that accommodates simply plain outdated textual content with no formatting) and HTML emails, that are formatted and styled utilizing HTML and inline CSS.
HTML emails are simple to identify — many of the styled, multimedia advertising emails in your inbox are HTML emails.
As a marketer, you’ve got in all probability in contrast HTML emails versus plain-text emails and realized that there are totally different advantages to every sort. HTML emails aren’t inherently higher than plain textual content emails, and in several conditions, each sorts could be a part of a profitable e mail advertising program.
Right here’s what an HTML seems to be like on the front-end. Click on on the HTML button to see the code behind it.
See the Pen HTML Electronic mail Template from HubSpot by Christina Perricone (@hubspot) on CodePen.
On this article, we’ll cowl how one can get began creating HTML emails, no matter your expertise stage and luxury with coding, and share some free templates you should utilize. Let’s dive in.
Learn how to Create an HTML Electronic mail
Excellent news: You really don’t have to know the best way to 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 back-end.
As you make modifications within the e mail editor, these modifications can be mechanically coded into the ultimate product. Electronic mail constructing instruments like this are a perfect possibility if you do not have an e mail designer in your workforce, however you continue to need to ship professional-looking advertising 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 need to create an HTML e mail from scratch?
For those who’re snug with HTML and need extra direct management over the code of your emails, most e mail instruments will permit you to import HTML recordsdata immediately to be used as customized e mail templates.
There are all kinds of free HTML e mail templates accessible on the internet (a few of which we’ll share beneath), and if your approach round an HTML file, it is normally fairly simple to adapt the template to the e-mail constructing software of your selection.
To create an HTML e mail utterly from scratch, you may have to have a sophisticated data of HTML (or work with a developer who does). This information gives a strong 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 suggest working with a developer or utilizing a pre-made HTML e mail template as an alternative.
Growing an HTML e mail particularly for HubSpot?
For those who’re growing an HTML e mail template particularly to be used in HubSpot, you may need to be sure to embody the required HubL tokens (these guarantee your emails could be custom-made and are compliant with CAN-SPAM legal guidelines). You could 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 Electronic mail Greatest Practices
- Be certain that your HTML e mail is responsive for various display screen sizes and gadgets.
- Be certain that your styling works in several e mail purchasers.
- Take heed to how lengthy your HTML emails take to load.
- Plan (as a lot as you may) for end-user inconsistencies.
- Conduct thorough testing.
Now that you just perceive the fundamentals of what goes into growing an HTML e mail, let’s go over a couple of vital greatest practices it is best to take into accout. It doesn’t matter what technique you intend to make use of to create HTML emails, these greatest 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 gadgets.
The best way your e mail seems to be in a person’s inbox is dependent upon all kinds of various elements.
One of many greatest and most evident elements is the display screen measurement of the machine it is being considered 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 considered on a smartphone display screen.
To make sure your HTML emails look the way in which you supposed throughout a large spectrum of display screen sizes, one of the best factor you are able to do is hold your structure easy and easy. If you begin including extra advanced parts 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.
For those who do resolve to develop a extra advanced structure, be sure to’re actively fixing for a way 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 will not fly on cellular — you may want to make use of media queries to outline how parts can be displayed on totally different display screen sizes.
Bear 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 gadgets. Be certain that your font selections are simply as legible on cellular as they’re on desktop, and use mobile-friendly buttons or CTAs rather than hyperlinked textual content (have you ever ever tried to faucet a little bit line of hyperlinked textual content on cellular? It is not very simple).
You could find our extra in-depth information to cellular e mail greatest practices proper right here.
2. Be certain that your styling works in several e mail purchasers.
One other huge issue that closely impacts the way in which 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 approach in Gmail will doubtless look totally different in Outlook.
Fortunately, if you know the way hottest e mail purchasers load specific HTML and CSS parts, you may create a reasonably constant expertise throughout totally different customers’ inboxes. It is all about realizing which unsupported tags to keep away from and adapting accordingly. This complete information explains how the most well-liked e mail purchasers (together with Gmail and a number of variations of Outlook) help and render totally different styling parts.
You may also take a look at 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 may very properly be the distinction between gaining a brand new buyer and shedding a annoyed subscriber. Whereas it may be tempting to benefit from all of the totally 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 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 information connection. Listed below are a couple of little steps you may take that can go a great distance in the direction of bettering load time.
Use photographs sparingly.
That approach, you’ll bolster the message you need to get throughout to subscribers. All the time use a picture compressor (like Compressor.io) to cut back the file measurement as a lot as doable. Most picture compressors can considerably scale back the file measurement of a picture with out compromising on high quality, so taking this further step will not harm the visible integrity of your e mail.
Use normal net fonts.
Customized fonts are nice for spicing up a touchdown web page, however they’ll add an extraneous layer of complexity when added to an e mail. As we talked about above, all e mail purchasers deal with model parts in a different way, and this particularly extends to fonts. To be protected, use normal net fonts and examine 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) mechanically removes code that is not wanted in an HTML file. Repetitive, further parts 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 constructive impact on load time.
Maintain your message centered on a single goal.
The easiest way 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 person needs to learn a novel in e mail type), however it might ship your load time without work the charts and trigger customers to desert your e mail. Maintain it easy, and your customers will thanks.
4. Plan (as a lot as you may) for end-user inconsistencies.
The display screen measurement and e mail shopper aren’t the one elements that may alter the way in which 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 mechanically loading photographs can all affect how your e mail masses.
As you may in all probability guess by that hefty listing of things, attempting 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 do not have to be utterly helpless within the face of those variables — you simply must do some pre-planning.
Take into account making a webpage model of your e mail.
That is sort of like giving your e mail a fail-safe button. If for some cause — as a consequence of one of many many elements mentioned above — your lovingly designed e mail renders like an absolute mess when a subscriber opens it, they may a minimum of have the choice to click on “view as net web page” and see the e-mail as you supposed it to be.
Since model parts render far more constantly throughout net browsers versus e mail purchasers, you’ll have far more management over the net web page model of your message. In HubSpot, there’s an possibility you may activate that can generate an online web page model mechanically.
Create a plain textual content model of your e mail.
A plain textual content model is precisely what it seems like — another model of your HTML e mail that renders in utterly 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 cannot (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 would not exist, it may sign to the recipient’s e mail server that your message is spam — or doubtlessly harmful.
Most e mail instruments like HubSpot will mechanically present a plain textual content model that shows if a recipient’s e mail server requires it, however in case you’re coding an HTML e mail from scratch, you may have to create one thing known as a multipart MIME message.
A multipart MIME message is an e mail that accommodates each a plain textual content and HTML model of the identical e mail. If a recipient’s e mail shopper or safety system would not enable HTML e mail, the plain textual content model can be displayed. It is a course of that requires a sophisticated data of coding, so we suggest working with a developer.
Be certain that your e mail nonetheless is smart if the pictures do not load.
Some customers have computerized image-loading turned off, which implies they’re going to see your e mail with out photographs once they open it. For that reason, do not rely fully on photographs to get the which means of your message throughout, and all the time add alt-text to the pictures you do embody. Alt-text will load even when photographs do not, so your subscribers can get the overall thought of what the visuals embody.
5. Conduct thorough testing.
Lastly, you may want to check your HTML e mail at each stage of growth to make sure it really works throughout totally different e mail purchasers, working techniques, and machine sorts. Do not wait till the very finish of the method to check out your e mail — testing as you’re employed is one of the simplest ways to identify inconsistencies between totally different e mail purchasers and make sure you’re creating essentially the most constant expertise doable on your recipients.
Some e mail instruments (like HubSpot) provide in-app testing inside their e mail builders to make the method simpler. For those who’re working from scratch, you should utilize a software like HTML Electronic mail Verify or PreviewMyEmail to get a greater thought of how your e mail will look in several e mail purchasers and gadgets.
Easy and Free HTML Electronic mail Templates
There are an awesome quantity of HTML e mail templates accessible on the internet, and so they range in high quality, responsiveness, and worth. We have pulled collectively a choice of free HTML e mail templates that present a responsive person expertise. Be sure you learn the phrases and circumstances on every particular person template earlier than use.
1. Product Promotion HTML Electronic mail Template by HubSpot
Whether or not you are launching a brand new product or just promoting your current choices, this e mail template is a good place to start out. Included within the free model of Advertising and marketing Hub’s e mail software, this template gives loads of room for personalization. You may simply add photographs, textual content, and buttons in an intuitive drag-and-drop editor. You may also be assured that the templates you design can be absolutely responsive on any machine.
The primary good thing about utilizing this template is that it is bundled with all different Advertising and marketing Hub instruments. Plus, you’ve different templates to select from — you do not have to remain confined to this feature. The drag-and-drop e mail editor is one other improbable plus.
2. Firm Information HTML Electronic mail Template by Marketing campaign Monitor
For those who’re planning to ship firm information to your prospects, it is a nice template to make use of. It is image-heavy, making it an incredible match for trend or modern manufacturers. Plus, it is linked to Marketing campaign Monitor’s e mail software, which begins at 10 euros monthly (there is a free trial, too).
I personally love that this contemporary template is so refined and minimal. The delicate shade palette and easy design make it a flexible possibility for a lot of industries and functions, and it has been examined on totally different e mail purchasers and gadgets to make sure a constant person expertise throughout platforms.
3. Welcome HTML Electronic mail Template by Unlayer
Unlayer is an e mail advertising software that primarily focuses on e mail design. Its drag and drop editor makes enhancing 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 may simply adapt it on your personal use. This clear, muted template is a good way to show content material your workforce 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 call-to-action.
4. Minimalist Welcome HTML Electronic mail Template by MailBakery
Proof that generally 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 parts. With out design distractions, your content material can actually shine — on any machine.
This template is on the market on the MailBakery e mail template retailer. I find it irresistible as a result of you may merely obtain it and add it to your most popular software, whereas different templates require you to make use of their software program to entry their templates. I’d suggest it in case you’re snug dealing with HTML recordsdata and in case you’re aware of the add course of on your software.
5. Free HTML Electronic mail Templates from Bee Free
I could not resolve on a template to function from the Bee Free market, so I’ve determined to suggest its total library as an alternative. This assortment of free, open-source templates are utterly responsive and examined throughout well-liked e mail purchasers. 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 e mail advertising software.
These are a perfect possibility if you would 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 functions, like transactional emails, NPS assortment, and e mail subscriber re-engagement.
6. Retailer Sale HTML Electronic mail Template by Marketing campaign Monitor
This glossy, responsive design from Marketing campaign Monitor could be good for sending out a reduction code — nevertheless it may additionally function a trendy 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 join on the Marketing campaign Monitor platform. It’s additionally price testing Marketing campaign Monitor’s full library of responsive e mail templates.
7. Fashionable HTML Electronic mail Template by ActiveCampaign
This e mail template from ActiveCampaign is trendy and optimized — good for introducing your organization or your merchandise. Its hero part consists of ample area for a picture and a call-to-action, and additional down, you may 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 may want to enroll in an ActiveCampaign free trial. Its e mail software begins at $49/month and consists of 3 seats, making this template an incredible match in case your e mail advertising workforce consists of a number of folks.
8. Apology HTML Electronic mail Template by Stripo Electronic mail
It is by no means enjoyable to fail to fulfill a buyer’s expectation, nevertheless it’s even much less enjoyable to depart them at nighttime. This free HTML e mail template from Stripo, an e mail software, lets you succinctly apologize. The lovable cartoon is a plus, however you may all the time change the picture.
I particularly like that this template lets you 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 up to now.
To make use of this template, you solely have to join on Stripo’s free tier, which permits you 4 e mail exports.
9. Hero Picture Free HTML Electronic mail 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 call-to-action highlighted in blue. I like that it has a sidebar to incorporate extra hyperlinks. It is a good match for newsletter-dependent manufacturers.
You may need 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 is a improbable tool-agnostic possibility. Merely obtain the template and add it into your most popular e mail advertising software program.
10. Password Reset HTML Electronic mail Template by Basis Framework
A password reset e mail would not should be elaborate, and this HTML e mail template from Basis Framework (additionally is aware of as ZURB) checks all of the containers. It leaves an area so that you can both embody your emblem or a cute graphic, and placeholder textual content which you could go away as is if you would like.
I particularly like this template as a result of it already seems to be so good with out customizing it. All you want is to vary the button’s shade to considered one of your model colours, and you will be all set. Plus, you should utilize it with any software.
Create HTML Emails to Enhance Your Subscriber Depend
HTML emails are an enticing approach to share what’s taking place in your small business and hold subscribers coming again for extra. With the information and templates we’ve shared, you’re properly in your approach to creating stunning HTML emails with out writing a single line of code.
Editor’s observe: This put up was initially revealed in June 2019 and has been up to date for comprehensiveness.
