The Design Guide You Need [+ Free Templates]

Whenever you create an e-mail utilizing a drag-and-drop or module-based software, you’re truly producing an HTML e-mail.

As a marketer, you’ve in all probability in contrast HTML emails versus plain text emails and realized that every kind has totally different advantages.

HTML emails aren’t inherently higher than plain textual content emails, and in several conditions, each sorts might be a part of a profitable email 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 need to use. Let’s dive in.

There are two foremost kinds 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 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 straightforward to identify — many of the styled, multimedia advertising emails in your inbox are HTML emails.

Right here’s what an HTML seems to be like on the entrance finish. Click on on the HTML button to see the code behind it.

See the Pen HTML Email Template from HubSpot by Christina Perricone (@hubspot) on CodePen.

Most instruments that create and ship e-mail (like HubSpot) will provide pre-formatted, ready-to-go HTML templates that allow you to design emails with out ever needing to entry the precise code on the again finish.

As you make modifications within the e-mail editor, these modifications will likely be robotically coded into the ultimate product.

E-mail-building instruments like this are an excellent possibility for those who don’t have an e-mail designer in your staff, however you continue to wish to ship professional-looking advertising emails.

Professional tip: Need assistance with the content material of your e-mail? HubSpot’s Campaign Assistant can create a personalized 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 case 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 files directly to be used as customized e-mail templates.

There are all kinds of free HTML e-mail templates accessible on the net (a few of which we’ll share under), and if you understand your manner round an HTML file, it’s normally fairly simple to adapt the template to the email-building software of your selection.

If you wish to discover ways to create an HTML e-mail template utterly from scratch, you’ll must have a complicated data of HTML (or work with a developer who does).

This guide 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 might be fairly concerned, we suggest working with a developer or utilizing a pre-made HTML e-mail template as a substitute.

Creating an HTML e-mail particularly for HubSpot?

If you wish to know find out how to create an HTML e-mail template particularly to be used in HubSpot, you’ll wish to be sure to embody the required HubL tokens (these guarantee your emails might be personalized and are compliant with CAN-SPAM legal guidelines).

You will discover a whole guide to coding HubSpot-specific HTML email templates here. Or alternatively, simply use our easy what-you-see-is-what-you-get email editor.

You will discover our extra in-depth guide to mobile email best practices right here.

2. Ensure that your styling works for various 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 shopper they’re utilizing to open the message.

Each e-mail shopper hundreds emails barely in a different way, so an e-mail that appears a sure manner in Gmail will doubtless look totally different in Outlook.

Fortunately, if you understand how hottest e-mail shoppers load specific HTML and CSS parts, you’ll be able to create a fairly constant expertise throughout totally different customers’ inboxes.

It’s all about figuring out which unsupported tags to keep away from and adapting accordingly.

This comprehensive guide explains how the preferred e-mail shoppers (together with Gmail and a number of variations of Outlook) assist and render totally different styling parts.

In case you’re questioning the way it’ll look, HubSpot truly works with a number of e-mail shoppers to be sure to’re conscious of your e-mail preview.

It’s also possible to try an article we wrote on optimizing emails for different email clients.

3. Take heed to how lengthy your HTML emails take to load.

How lengthy your e-mail takes to load may very effectively be the distinction between gaining a brand new buyer and shedding a annoyed subscriber.

Whereas it may be tempting to reap the benefits of all of the 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 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 information connection.

Listed here are just a few little steps you’ll be able to take that may go a great distance towards enhancing load time.

Use pictures sparingly.

That manner, you’ll bolster the message you wish to get throughout to subscribers. At all times use a picture compressor (like Compressor.io) to scale back the file dimension as a lot as doable.

Most picture compressors can considerably scale back the file dimension of a picture with out compromising on high quality, so taking this further step gained’t damage the visible integrity of your e-mail.

Use customary internet 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 parts in a different way, and this particularly extends to fonts.

To be secure, use standard web fonts and check to make sure 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, further parts will likely 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.

Here’s the code I used to make my e-mail template. look how a lot junk code Smallseotools eliminated:

And look how a lot junk code Smallseotools eliminated. This not solely saved me from importing pointless strains of code, however it additionally improved total e-mail loading time.

Maintain your message centered on a single goal.

The easiest way 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 one desires to learn a novel in e-mail kind), however it will probably 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’ll be able to) for end-user inconsistencies.

The display screen dimension and e-mail shopper 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 shopper, their working system, their distinctive consumer settings, their safety software program, and whether or not or not they’re robotically loading pictures can all influence how your e-mail hundreds.

As you’ll be able to in all probability guess by that hefty checklist of things, attempting 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 don’t should be utterly helpless within the face of those variables — you simply should do some pre-planning.

Contemplate making a webpage model of your e-mail.

That is type of like giving your e-mail a fail-safe button.

If for some purpose — attributable to one of many many elements mentioned above — your lovingly designed e-mail renders like an absolute mess when a subscriber opens it, they are going to at the very least have the choice to click on “view as internet web page” and see the e-mail as you meant it to be.

Since type parts render far more persistently throughout internet browsers versus e-mail shoppers, you’ll be capable of have far more management over the online web page model of your message.

In HubSpot, there’s an option you’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 feels 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 necessary as a result of some e-mail shoppers and consumer settings can’t (or select to not) load HTML.

If that is so, the shopper will search for a plain textual content different model of your HTML e-mail to load for the consumer. If one doesn’t 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 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 seems to be like on desktop:

However for those who’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 accommodates each a plain textual content and HTML model of the identical e-mail. The plain textual content model will likely be displayed if a recipient’s e-mail shopper or safety system doesn’t permit HTML e-mail.

It is a course of that requires a complicated data of coding, so we suggest working with a developer.

Ensure that your e-mail nonetheless is sensible if the photographs don’t load.

Some customers have computerized image-loading turned off, which implies they’ll see your e-mail with out pictures once they open it.

For that reason, don’t rely totally on pictures to get the which means of your message throughout, and all the time add alt-text to the photographs you do embody.

Alt-text will load even when pictures don’t, so your subscribers can get the overall thought of what the visuals embody.

5. Conduct thorough testing.

Lastly, you’ll want to check your HTML e-mail at each stage of growth to make sure it really works throughout totally different e-mail shoppers, working methods, and system 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 shoppers and make sure you’re creating probably the most constant expertise doable to your recipients.

Some e-mail instruments (like HubSpot) provide in-app testing inside their e-mail builders to make the method simpler.

In case you’re working from scratch, you need to use a software like HTML Email Check or PreviewMyEmail to get a greater thought of how your e-mail will look in several e-mail shoppers and units.

See under:

Using the same code from earlier than, I reviewed the e-mail’s show/look throughout totally different units. This gave me a greater thought of what my subscribers are , plus I didn’t even should improve to the paid model.

1. Product Promotion HTML Email Template by HubSpot

Whether or not you’re launching a brand new product or just promoting your present choices, this e-mail template is a superb place to start out.

Included within the free model of Marketing Hub’s email tool, this template presents loads of room for personalisation. You’ll be able to simply add pictures, textual content, and buttons in an intuitive drag-and-drop editor.

It’s also possible to be assured that the templates you design will likely be absolutely responsive on any system.

The primary good thing about utilizing this template is that it’s bundled with all different Marketing Hub tools. Plus, you’ve 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 implausible plus.

Professional tip: Thankfully, HubSpot presents pre-made e-mail designs that you would be able to copy and paste proper into your template.

Nonetheless, if you wish to delve deeper into HTML coding, there are many movies and tutorials that stroll you thru the basics of designing HTML emails, just like the one under:

2. Company News HTML Email Template by Campaign Monitor

In case 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 ideal match for vogue or up to date manufacturers.

Plus, it’s linked to Marketing campaign Monitor’s e-mail software, which begins at $11 per 30 days with different paid plans you’ll be able to discover (there’s a free trial, too).

I personally love that this contemporary template is so subtle and minimal.

The delicate shade palette and easy design make it a flexible possibility for a lot of industries and functions, and it’s been examined on totally different e-mail shoppers and units to make sure a constant consumer expertise throughout platforms.

Professional tip: I noticed that utilizing a template alone isn’t sufficient; you’ll additionally should customise it to your subscribers. My private favourite hack is including an organization URL to the Marketing campaign Monitor software in order that it produces a model template.

3. Welcome HTML Email 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 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 to your personal use.

This clear, muted template is an effective way to show the content material your staff 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 focus on a CTA.

Professional tip: Unlayer integrates with many e-mail advertising platforms, comparable to MailChimp and HubSpot. Which means that when you’re carried out designing HTML emails, you’ll be able to simply export your template.

4. Minimalist Welcome HTML Email Template by MailBakery

Proof that generally 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 parts.

With out design distractions, your content material can actually shine — on any system.

This template is obtainable 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 popular software, whereas different templates require you to make use of their software program to entry their templates.

I might suggest it for those who’re snug dealing with HTML recordsdata and for those who’re conversant in the add course of to your software.

Professional tip: With any e-mail template from MailBakery, you’ll be able to ensure that it would seem flawlessly on varied platforms, having been examined on 40 e-mail shoppers.

Your message will nonetheless be efficient whether or not your subscriber makes use of Outlook, Gmail, or every other e-mail supplier.

5. Free HTML Email Templates from Bee Free

I couldn’t determine on a template to function from the Bee Free market, so I’ve determined to suggest its total library as a substitute. This assortment of free, open-source templates is totally responsive and examined throughout well-liked 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 popular email marketing tool.

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

Professional tip: In case you’re utilizing the professional model of BeeFree, you’ll be able to export on to your e-mail advertising program, which is much less of a trouble.

6. Store Sale HTML Email Template by Campaign Monitor

This smooth, responsive design from Marketing campaign Monitor can be good for sending out a reduction code — however it may additionally function a trendy option 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 info.

This template is free to make use of, as long as you join on the Marketing campaign Monitor platform. It’s additionally value trying out Marketing campaign Monitor’s full library of responsive email templates.

Professional tip: In case you want particular code, you’ll be able to discover ways to create a template in your favourite HTML editor and import it to Marketing campaign Monitor.

Utilizing their template language, you’ll be able to design a template with changeable sections after which decide and edit it for an e-mail.

7. Stylish HTML Email 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 house for a picture and a CTA, and additional down, you’ll be able to immediate your readers to take a look at extra merchandise, providing you with a second probability 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 software begins at $49 per 30 days and consists of three seats, making this template an ideal match in case your e-mail advertising staff consists of a number of individuals.

Professional tip: Need your shoppers to view real-time content material that’s up to date each couple of minutes? You’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 Email Template by Stripo Email

It’s by no means enjoyable to fail to satisfy a buyer’s expectation, however it’s even much less enjoyable to go away them in the dead of night. This free HTML e-mail template from Stripo, an e-mail software, means that you can succinctly apologize.

The lovable cartoon is a plus, however you’ll be able to 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 straightforward and easy for the recipient to let you know how they really feel about their interplay along with your firm so far.

To make use of this template, you solely must sign up on Stripo’s free tier, which permits you 4 e-mail exports.

Professional tip: It’s also possible to use the generated templates to develop Model Tips kits, which is able to assist you to write emails constant along with your model extra shortly to your campaigns.

These kits include all desktop and cellular e-mail layouts and permit you to save all of the required design parts and settings in a single easy-to-use kind.

9. Hero Image Free HTML Email Template by ZURB

ZURB is an e-mail template supplier that has created a 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. It is a good match for newsletter-dependent manufacturers.

You’ll wish to closely customise this template along with your model colours and fonts to make it really feel extra like “you.” In any other case, it’s a implausible tool-agnostic possibility. Merely obtain the template and add it into your most popular e-mail advertising software program.

Professional tip: Keep in mind that each CSS aspect should be inline for HTML emails. ZURB retains the CSS separate to make enhancing simpler. When sending your e-mail, it is best to use a CSS software, comparable to Premailer or MailChimp, to call a pair.

10. Password Reset HTML Email Template by Foundation Framework

A password reset e-mail doesn’t must be elaborate, and this HTML e-mail template from Basis Framework (also referred to as ZURB) checks all of the bins.

It leaves an area so that you can both embody your brand or a cute graphic, in addition to placeholder textual content that you would be able to go away as is for those who’d 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 one in every of your model colours, and also you’ll be all set. Plus, you need to use it with any software.

Professional tip: You’ll be able to strive making some modifications to the templates, or obtain them and preview them to see how the options have been carried out by wanting on the supply.

You’ll see that the Basis for Emails type tag is included on the prime of every template, indicating the place the template is from.

Create HTML Emails to Enhance Your Subscriber Rely

HTML emails are an enticing option to share what’s occurring in your online business and hold subscribers coming again for extra.

With the information and templates we’ve shared, you’re effectively in your option to creating stunning and purposeful HTML emails with out writing a single line of code.

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