Thursday, May 30, 2024

The Easy Information to Creating an HTML E mail [+ Free Templates]

Must read


If you create an e mail utilizing a drag-and-drop or module-based instrument, you are really producing an HTML e mail.

There are two important varieties of e mail you’ll be able to 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 straightforward to identify — many of the styled, multimedia advertising and marketing emails in your inbox are HTML emails.

Get Started with HubSpot's Email Builder for Free

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 numerous conditions, each sorts could be a part of a profitable e mail advertising and marketing 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 E 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 use. Let’s dive in.

Learn how to Create an HTML E mail

Excellent news: You really don’t have to know tips on how 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 back-end.

As you make modifications within the e mail editor, these modifications can be robotically coded into the ultimate product. E mail constructing instruments like this are a great possibility if you do not have an e mail designer in your workforce, 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 only a few clicks— so you may get again to the enjoyable half.

Nonetheless wish to create an HTML e mail from scratch?

Should you’re comfy with HTML and need extra direct management over the code of your emails, most e mail instruments will can help you import HTML information instantly 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 manner round an HTML file, it is often fairly easy to adapt the template to the e-mail constructing instrument of your alternative.

To create an HTML e mail utterly from scratch, you will have to have a sophisticated information of HTML (or work with a developer who does). This information presents a strong overview of coding a fundamental 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 a substitute.

Growing an HTML e mail particularly for HubSpot?

Should you’re growing an HTML e mail template particularly to be used in HubSpot, you will wish to be sure you embrace the required HubL tokens (these guarantee your emails could be custom-made and are compliant with CAN-SPAM legal guidelines). You 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.

Now that you simply perceive the fundamentals of what goes into growing an HTML e mail, let’s go over just a few essential greatest practices you must take into accout. It doesn’t matter what methodology 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 sizes and units.

The way in which your e mail appears to be like in a person’s inbox will depend on all kinds of various components.

One of many largest and most evident components is the display 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.

To make sure your HTML emails look the best way you supposed throughout a large spectrum of display sizes, the very best factor you are able to do is hold your format easy and simple. If you begin including extra complicated parts like a number of columns and floated photos, it turns into harder to translate the format of your e mail for various display sizes.

Should you do resolve to develop a extra complicated format, be sure you’re actively fixing for a way the weather can be rearranged to swimsuit totally different display sizes. For instance, in case your e mail shows as multi-column on desktop, that very same construction will not fly on cell — you will want to make use of media queries to outline how parts can be displayed on totally different display 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 units. Be certain that your font decisions are simply as legible on cell as they’re on desktop, and use mobile-friendly buttons or CTAs instead of hyperlinked textual content (have you ever ever tried to faucet slightly line of hyperlinked textual content on cell? It isn’t very straightforward).

You will discover our extra in-depth information to cell e mail greatest practices proper right here.

2. Be certain that your styling works in numerous e mail purchasers.

One other large 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 hundreds emails barely otherwise, so an e mail that appears a sure manner in Gmail will possible look totally different in Outlook.

Fortunately, if you understand how hottest e mail purchasers load specific HTML and CSS parts, you’ll be able to create a reasonably constant expertise throughout totally different customers’ inboxes. It is 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 parts.

You can even 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 may very nicely be the distinction between gaining a brand new buyer and dropping a annoyed subscriber. Whereas it may be tempting to reap the benefits 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 here are just a few little steps you’ll be able to take that may go a good distance in direction of enhancing load time.

Use photos sparingly.

That manner, 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 measurement as a lot as potential. Most picture compressors can considerably cut back the file measurement of a picture with out compromising on high quality, so taking this additional step will not harm the visible integrity of your e mail.

Use customary 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 parts otherwise, and this particularly extends to fonts. To be secure, use customary internet 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) robotically removes code that is not wanted in an HTML file. Repetitive, additional 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 optimistic impact on load time.

Maintain your message targeted 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 desires to learn a novel in e mail kind), however it may well ship your load day 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’ll be able to) for end-user inconsistencies.

The display measurement 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 robotically loading photos can all impression how your e mail hundreds.

As you’ll be able to in all probability guess by that hefty checklist 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 laptop throughout the room.

However you do not have to be utterly helpless within the face of those variables — you simply need to perform a little pre-planning.

Take into account making a webpage model of your e mail.

That is type of like giving your e mail a fail-safe button. If for some motive — 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 supposed it to be.

Since fashion parts render rather more persistently throughout internet browsers versus e mail purchasers, you can have far more management over the online web page model of your message. In HubSpot, there’s an possibility you’ll be able to 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 strictly what it appears like — an alternate 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 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 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 in the event you’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 comprises 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 permit HTML e mail, the plain textual content model can be displayed. 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 smart if the pictures do not load.

Some customers have computerized image-loading turned off, which suggests they will see your e mail with out photos after they open it. For that reason, do not rely totally on photos to get the which means of your message throughout, and all the time add alt-text to the pictures you do embrace. Alt-text will load even when photos do not, so your subscribers can get the final concept of what the visuals embrace.

5. Conduct thorough testing.

Lastly, you will 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 methods, 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 best ways to identify inconsistencies between totally different e mail purchasers and make sure you’re creating essentially the most constant expertise potential on your recipients.

Some e mail instruments (like HubSpot) supply in-app testing inside their e mail builders to make the method simpler. Should you’re working from scratch, you should use a instrument like HTML E mail Verify or PreviewMyEmail to get a greater concept of how your e mail will look in numerous e mail purchasers and units.

Easy and Free HTML E mail Templates

There are an awesome quantity of HTML e mail templates accessible on the net, they usually differ in high quality, responsiveness, and worth. We have pulled collectively a number of free HTML e mail templates that present a responsive person expertise. Remember to learn the phrases and situations on every particular person template earlier than use.

1. Product Promotion HTML E mail Template by HubSpot

Free HTML email 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 and marketing Hub’s e mail instrument, this template presents loads of room for personalisation. You possibly can simply add photos, textual content, and buttons in an intuitive drag-and-drop editor. You can even be assured that the templates you design can be totally responsive on any machine.

The primary advantage of utilizing this template is that it is bundled with all different Advertising and marketing Hub instruments. Plus, you might have different templates to select from — you do not have to remain confined to this selection. The drag-and-drop e mail editor is one other incredible plus.

2. Firm Information HTML E mail Template by Marketing campaign Monitor

Free HTML email template by Campaign MonitorShould 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 important match for style or modern manufacturers. Plus, it is linked to Marketing campaign Monitor’s e mail instrument, 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 possibility for a lot of industries and functions, and it has been examined on totally different e mail purchasers and units to make sure a constant person expertise throughout platforms.

3. Welcome HTML E mail Template by Unlayer

Free HTML email template by UnlayerUnlayer is an e mail advertising and marketing instrument 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’ll be able to simply adapt it on your personal use. This clear, muted template is an effective 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 totally responsive columns with a number of colour scheme choices, and room on the prime to focus on a call-to-action.

4. Minimalist Welcome HTML E mail Template by MailBakery

Free HTML email template by Mail Bakery

Proof that typically much less actually is extra, this straightforward, totally 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 offered on the MailBakery e mail template retailer. I adore it as a result of you’ll be able to merely obtain it and add it to your most well-liked instrument, whereas different templates require you to make use of their software program to entry their templates. I’d advocate it in the event you’re comfy dealing with HTML information and in the event you’re accustomed to the add course of on your instrument.

5. Free HTML E mail Templates from Bee Free

Free HTML email template library by Bee Free

I could not resolve on a template to characteristic from the Bee Free market, so I’ve determined to advocate its total library as a substitute. This assortment of free, open-source templates are utterly responsive and examined throughout fashionable e mail purchasers. You possibly can 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 and marketing instrument.

These are a great possibility 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 offered in a number of codecs for various advertising and marketing functions, like transactional emails, NPS assortment, and e mail subscriber re-engagement.

6. Retailer Sale HTML E mail Template by Marketing campaign Monitor

Free HTML email template by Campaign Monitor advertising a discount code

This modern, responsive design from Marketing campaign Monitor can be good for sending out a reduction code — nevertheless it may additionally function a trendy technique to showcase your newest merchandise to e mail subscribers. I like its clear and attention-grabbing CTA, in addition to its house 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 price trying out Marketing campaign Monitor’s full library of responsive e mail templates.

7. Fashionable HTML E mail Template by ActiveCampaignfree html email template: active campaign

This e mail template from ActiveCampaign is fashionable and optimized — good for introducing your organization or your merchandise. Its hero part consists of ample house for a picture and a call-to-action, and additional down, you’ll be able to 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 will want to join an ActiveCampaign free trial. Its e mail instrument begins at $49/month and consists of 3 seats, making this template an important match in case your e mail advertising and marketing workforce consists of a number of folks.

8. Apology HTML E mail Template by Stripo E mail

free html email template: stripo emailIt is by no means enjoyable to fail to satisfy a buyer’s expectation, nevertheless it’s even much less enjoyable to depart them in the dead of night. This free HTML e mail template from Stripo, an e mail instrument, permits you to succinctly apologize. The lovable cartoon is a plus, however you’ll be able to all the time change the picture.

I particularly like that this template permits you to ask for suggestions proper within the e mail. That makes it straightforward and easy for the recipient to inform you 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 E mail Template by ZURB

free html email template: 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 really like that it has a sidebar to incorporate extra hyperlinks. This can be a good match for newsletter-dependent manufacturers.

You may 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 is a incredible tool-agnostic possibility. Merely obtain the template and add it into your most well-liked e mail advertising and marketing software program.

10. Password Reset HTML E mail Template by Basis Framework

free html email template: password reset by foundation frameworkA password reset e mail would not have to be elaborate, and this HTML e mail template from Basis Framework (additionally is aware of as ZURB) checks all of the bins. It leaves an area so that you can both embrace your brand 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 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 use it with any instrument.

Create HTML Emails to Enhance Your Subscriber Rely

HTML emails are an interesting technique to share what’s occurring in your corporation and hold subscribers coming again for extra. With the information and templates we’ve shared, you’re nicely in your technique to creating lovely HTML emails with out writing a single line of code.

Editor’s word: This publish was initially revealed in June 2019 and has been up to date for comprehensiveness.

drag drop email

 



Supply hyperlink

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article