While you create an e-mail utilizing a drag-and-drop or module-based device, you are really producing an HTML e-mail.
There are two principal sorts of e-mail you may ship and obtain: plain textual content emails (these are precisely what they sound like — any e-mail that incorporates simply plain outdated textual content with no formatting) and HTML emails, that are formatted and styled utilizing HTML and inline CSS.
HTML emails are straightforward to identify — many of the styled, multimedia advertising emails in your inbox are HTML emails.
As a marketer, you have in all probability in contrast HTML emails versus plain-text emails and realized that there are completely different advantages to every sort. HTML emails aren’t inherently higher than plain textual content emails, and in numerous conditions, each varieties may be a part of a profitable e-mail advertising program.
Right here’s what an HTML appears to be like 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 degree and luxury with coding, and share some free templates you should utilize. Let’s dive in.
Easy methods to Create an HTML Electronic mail
Excellent news: You really don’t have to know easy methods 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 will likely be robotically coded into the ultimate product. Electronic mail constructing instruments like this are a great choice if you do not have an e-mail designer in your group, 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?
When you’re snug with HTML and wish extra direct management over the code of your emails, most e-mail instruments will permit you to import HTML recordsdata instantly to be used as customized e-mail templates.
There are all kinds of free HTML e-mail templates out there on the net (a few of which we’ll share beneath), and if you already know your approach round an HTML file, it is often fairly simple to adapt the template to the e-mail constructing device of your alternative.
To create an HTML e-mail utterly from scratch, you will have to have a sophisticated data of HTML (or work with a developer who does). This information gives a stable overview of coding a fundamental HTML e-mail. As a result of the method of making an HTML e-mail from scratch may be fairly concerned, we suggest working with a developer or utilizing a pre-made HTML e-mail template as an alternative.
Creating an HTML e-mail particularly for HubSpot?
When you’re creating an HTML e-mail template particularly to be used in HubSpot, you will need to be sure you embrace the required HubL tokens (these guarantee your emails may be custom-made and are compliant with CAN-SPAM legal guidelines). Yow will discover 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 sizes and units.
- Be certain 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 may) for end-user inconsistencies.
- Conduct thorough testing.
Now that you simply perceive the fundamentals of what goes into creating an HTML e-mail, let’s go over a number of essential finest practices you need to take into accout. It doesn’t matter what technique you intend to make use of to create HTML emails, these finest practices will assist enhance the design, consumer expertise, and deliverability of your emails.
1. Be certain that your HTML e-mail is responsive for various display sizes and units.
The best way your e-mail appears to be like in a consumer’s inbox depends upon all kinds of various elements.
One of many greatest and most blatant elements is the display dimension of the gadget it is 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.
To make sure your HTML emails look the best way you supposed throughout a large spectrum of display sizes, the perfect factor you are able to do is hold your format easy and simple. While you begin including extra complicated components like a number of columns and floated pictures, it turns into tougher to translate the format of your e-mail for various display sizes.
When you do resolve to develop a extra complicated format, be sure you’re actively fixing for a way the weather will likely be rearranged to go well with completely different display sizes. For instance, in case your e-mail shows as multi-column on desktop, that very same construction will not fly on cellular — you will want to make use of media queries to outline how components will likely be displayed on completely different display sizes.
Keep in mind, creating really responsive HTML emails goes past the construction and format of your message. Take into consideration how the general consumer expertise of your e-mail will likely be perceived on completely different units. Be certain that your font decisions 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 slightly line of hyperlinked textual content on cellular? It isn’t very straightforward).
Yow will discover our extra in-depth information to cellular e-mail finest practices proper right here.
2. Be certain that your styling works in numerous e-mail shoppers.
One other huge issue that closely impacts the best way your HTML emails seem in your subscribers’ inboxes is the e-mail consumer they’re utilizing to open the message. Each e-mail consumer masses emails barely in a different way, so an e-mail that appears a sure approach in Gmail will probably look completely different in Outlook.
Fortunately, if you know the way hottest e-mail shoppers load explicit HTML and CSS components, you may create a reasonably constant expertise throughout completely different customers’ inboxes. It is all about figuring out which unsupported tags to keep away from and adapting accordingly. This complete information explains how the preferred e-mail shoppers (together with Gmail and a number of variations of Outlook) help and render completely different styling components.
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 effectively be the distinction between gaining a brand new buyer and dropping a pissed off subscriber. Whereas it may be tempting to make the most 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 here are a number of little steps you may take that may go a good distance in direction of bettering load time.
Use pictures 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 scale back the file dimension as a lot as potential. Most picture compressors can considerably scale back the file dimension of a picture with out compromising on high quality, so taking this further step will not damage 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 shoppers deal with type components in a different way, and this particularly extends to fonts. To be secure, use normal net fonts and test to verify the e-mail consumer most of your subscribers use helps a specific font.
Attempt an HTML minifier.
An HTML minifier (like minifycode.com and smallseotools.com) robotically removes code that is not wanted in an HTML file. Repetitive, further components will likely be stripped out, however the precise rendering of your e-mail ought to stay the identical (at all times try 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.
Preserve your message targeted on a single goal.
One of the simplest 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 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 consumer expertise (no person desires to learn a novel in e-mail type), however it will probably ship your load time without work 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 may) for end-user inconsistencies.
The display dimension and e-mail consumer aren’t the one elements that may alter the best way your HTML e-mail renders in your subscribers’ inboxes. Components just like the model of their e-mail consumer, their working system, their distinctive consumer settings, their safety software program, and whether or not or not they’re robotically loading pictures can all impression how your e-mail masses.
As you may in all probability guess by that hefty record of things, making an attempt to resolve for all of them (each single time you ship an e-mail) would in all probability be sufficient to make you throw your laptop throughout the room.
However you do not have to be utterly helpless within the face of those variables — you simply should perform a little 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 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 net web page” and see the e-mail as you supposed it to be.
Since type components render way more constantly throughout net browsers versus e-mail shoppers, you’ll have far more management over the net web page model of your message. In HubSpot, there’s an choice you may activate that may generate an online 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 utterly plain textual content. Including a plain textual content model of your HTML e-mail is essential as a result of some e-mail shoppers and consumer settings cannot (or select to not) load HTML.
If so, the consumer will search for a plain textual content various model of your HTML e-mail to load for the consumer. If one does not 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, however if you happen to’re coding an HTML e-mail from scratch, you will have to create one thing known 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. If a recipient’s e-mail consumer or safety system does not permit HTML e-mail, the plain textual content model will likely 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 sensible if the photographs do not load.
Some customers have computerized image-loading turned off, which implies they’re going to see your e-mail with out pictures once they open it. For that reason, do not rely totally on pictures to get the that means of your message throughout, and at all times add alt-text to the photographs you do embrace. Alt-text will load even when pictures do not, so your subscribers can get the overall concept of what the visuals embrace.
5. Conduct thorough testing.
Lastly, you will 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 programs, and gadget varieties. Do not 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 probably the most constant expertise potential to your recipients.
Some e-mail instruments (like HubSpot) provide in-app testing inside their e-mail builders to make the method simpler. When you’re working from scratch, you should utilize a device like HTML Electronic mail Verify or PreviewMyEmail to get a greater concept of how your e-mail will look in numerous e-mail shoppers and units.
Easy and Free HTML Electronic mail Templates
There are an amazing quantity of HTML e-mail templates out there on the net, they usually range in high quality, responsiveness, and worth. We have pulled collectively a collection of free HTML e-mail templates that present a responsive consumer expertise. You should definitely 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 present choices, this e-mail template is a good place to start out. Included within the free model of Advertising Hub’s e-mail device, this template gives loads of room for personalization. You’ll be able to simply add pictures, textual content, and buttons in an intuitive drag-and-drop editor. You can even be assured that the templates you design will likely be absolutely responsive on any gadget.
The principle good thing about utilizing this template is that it is bundled with all different Advertising 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
When you’re planning to ship firm information to your prospects, this can be a nice template to make use of. It is image-heavy, making it an amazing match for trend or modern manufacturers. Plus, it is linked to Marketing campaign Monitor’s e-mail device, which begins at 10 euros per thirty days (there is a free trial, too).
I personally love that this contemporary template is so refined and minimal. The refined colour palette and easy design make it a flexible choice for a lot of industries and functions, and it has been examined on completely different e-mail shoppers and units to make sure a constant consumer expertise throughout platforms.
3. Welcome HTML Electronic mail Template by Unlayer
Unlayer is an e-mail advertising device 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 to your personal use. This clear, muted template is a good way to show content material your group 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 colour scheme choices, and room on the high to focus on a call-to-action.
4. Minimalist Welcome HTML Electronic mail Template by MailBakery
Proof that typically much less actually is extra, this straightforward, absolutely responsive design makes probably the most of whitespace and retains the main focus firmly in your phrases and visible components. With out design distractions, your content material can actually shine — on any gadget.
This template is offered on the MailBakery e-mail template retailer. I like it as a result of you may merely obtain it and add it to your most well-liked device, whereas different templates require you to make use of their software program to entry their templates. I might suggest it if you happen to’re snug dealing with HTML recordsdata and if you happen to’re acquainted with the add course of to your device.
5. Free HTML Electronic mail Templates from Bee Free
I could not resolve on a template to characteristic from the Bee Free market, so I’ve determined to suggest its complete library as an alternative. This assortment of free, open-source templates are utterly responsive and examined throughout in style e-mail shoppers. 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 well-liked e-mail advertising device.
These are a great choice in order for you 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 offered 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 smooth, responsive design from Marketing campaign Monitor can be excellent for sending out a reduction code — but it surely might additionally function a trendy solution 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 join on the Marketing campaign Monitor platform. It’s additionally value testing Marketing campaign Monitor’s full library of responsive e-mail templates.
7. Trendy HTML Electronic mail 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 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 will want to join an ActiveCampaign free trial. Its e-mail device begins at $49/month and contains 3 seats, making this template an amazing match in case your e-mail advertising group contains 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, but it surely’s even much less enjoyable to go away them at midnight. This free HTML e-mail template from Stripo, an e-mail device, lets you succinctly apologize. The lovable cartoon is a plus, however you may at all times change the picture.
I particularly like that this template lets you ask for suggestions proper within the e-mail. That makes it straightforward and easy for the recipient to let you know how they really feel about their interplay along with your firm to this point.
To make use of this template, you solely want to enroll 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 collection 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 further hyperlinks. It is a good match for newsletter-dependent manufacturers.
You will 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 choice. Merely obtain the template and add it into your most well-liked e-mail advertising software program.
10. Password Reset HTML Electronic mail Template by Basis Framework
A password reset e-mail does not must 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 embrace your emblem or a cute graphic, and placeholder textual content that you may go away as is if you would like.
I particularly like this template as a result of it already appears to be like so good with out customizing it. All you want is to alter the button’s colour to one in every of your model colours, and you will be all set. Plus, you should utilize it with any device.
Create HTML Emails to Enhance Your Subscriber Depend
HTML emails are an attractive solution to share what’s occurring in your corporation and hold subscribers coming again for extra. With the ideas and templates we’ve shared, you’re effectively in your solution to creating stunning HTML emails with out writing a single line of code.
Editor’s observe: This publish was initially revealed in June 2019 and has been up to date for comprehensiveness.
