Once you create an electronic mail utilizing a drag-and-drop or module-based software, you are really producing an HTML electronic mail.
There are two primary kinds of electronic mail you possibly can ship and obtain: plain textual content emails (these are precisely what they sound like — any electronic mail that comprises 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 and marketing 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 kind. HTML emails aren’t inherently higher than plain textual content emails, and in numerous conditions, each varieties might be a part of a profitable electronic mail advertising and marketing program.
Right here’s what an HTML appears like on the front-end. Click on on the HTML button to see the code behind it.
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.
Easy methods to Create an HTML Electronic mail
Excellent news: You really don’t must know tips on how to code to create an HTML electronic mail.
Most instruments that create and ship electronic 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 electronic mail editor, these modifications might be mechanically coded into the ultimate product. Electronic mail constructing instruments like this are an excellent choice if you do not have an electronic mail designer in your group, however you continue to need to ship professional-looking advertising and marketing emails.
Nonetheless need to create an HTML electronic mail from scratch?
For those who’re snug with HTML and need extra direct management over the code of your emails, most electronic mail instruments will assist you to import HTML recordsdata instantly to be used as customized electronic mail templates.
There are all kinds of free HTML electronic mail templates obtainable on the internet (a few of which we’ll share under), and if you realize your means round an HTML file, it is often fairly simple to adapt the template to the e-mail constructing software of your selection.
To create an HTML electronic mail fully from scratch, you will must have a sophisticated data of HTML (or work with a developer who does). This guide affords a stable overview of coding a fundamental HTML electronic mail. As a result of the method of making an HTML electronic mail from scratch might be fairly concerned, we advocate working with a developer or utilizing a pre-made HTML electronic mail template as an alternative.
Growing an HTML electronic mail particularly for HubSpot?
For those who’re creating an HTML electronic mail template particularly to be used in HubSpot, you will need to be sure to embrace the required HubL tokens (these guarantee your emails might be personalized and are compliant with CAN-SPAM legal guidelines). You will discover an entire information to coding HubSpot-specific HTML electronic mail templates right here. Or alternatively, simply use our easy what-you-see-is-what-you-get electronic mail editor.
HTML Electronic mail Finest Practices
- Make sure that your HTML electronic mail is responsive for various display sizes and gadgets.
- Make sure that your styling works in numerous electronic 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 creating an HTML electronic mail, let’s go over a couple of vital finest practices you need to take note. It doesn’t matter what technique you propose to make use of to create HTML emails, these finest practices will assist enhance the design, person expertise, and deliverability of your emails.
1. Make sure that your HTML electronic mail is responsive for various display sizes and gadgets.
The way in which your electronic mail appears in a person’s inbox is determined by all kinds of various elements.
One of many greatest and most evident elements is the display dimension of the machine it is being seen on. An electronic 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 seen on a smartphone display.
To make sure your HTML emails look the way in which you meant throughout a large spectrum of display sizes, the very best factor you are able to do is preserve your format easy and easy. Once you begin including extra advanced components like a number of columns and floated photos, it turns into harder to translate the format of your electronic mail for various display sizes.
For those who do determine to develop a extra advanced format, be sure to’re actively fixing for the way the weather might be rearranged to swimsuit completely different display sizes. For instance, in case your electronic 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 might 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 person expertise of your electronic mail might be perceived on completely different gadgets. Make sure 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 just a little line of hyperlinked textual content on cellular? It isn’t very simple).
You will discover our extra in-depth information to cellular electronic mail finest practices proper right here.
2. Make sure that your styling works in numerous electronic mail purchasers.
One other massive issue that closely impacts the way in which your HTML emails seem in your subscribers’ inboxes is the e-mail consumer they’re utilizing to open the message. Each electronic mail consumer masses emails barely in a different way, so an electronic mail that appears a sure means in Gmail will possible look completely different in Outlook.
Fortunately, if you know the way hottest electronic mail purchasers load specific HTML and CSS components, you possibly can create a reasonably constant expertise throughout completely different customers’ inboxes. It is all about understanding which unsupported tags to keep away from and adapting accordingly. This comprehensive guide explains how the preferred electronic mail purchasers (together with Gmail and a number of variations of Outlook) assist and render completely different styling components.
You can too try an article we wrote on optimizing emails for various electronic mail purchasers.
3. Take heed to how lengthy your HTML emails take to load.
How lengthy your electronic 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 benefit from all of the completely different styling choices and alternatives to include visuals that HTML emails supply, none of that issues in case your electronic mail takes too lengthy to load.
As you design your HTML electronic mail, stay acutely aware of how lengthy your electronic 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 a couple of little steps you possibly can take that can go a good distance in direction of bettering load time.
Use photos sparingly.
That means, you’ll bolster the message you need to get throughout to subscribers. At all times use a picture compressor (like Compressor.io) to cut back the file dimension as a lot as attainable. Most picture compressors can considerably cut back the file dimension of a picture with out compromising on high quality, so taking this additional step will not harm the visible integrity of your electronic 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 electronic mail. As we talked about above, all electronic mail purchasers deal with fashion components in a different way, and this particularly extends to fonts. To be protected, use customary internet fonts and check to make sure the e-mail consumer most of your subscribers use helps a selected font.
Strive an HTML minifier.
An HTML minifier (like minifycode.com and smallseotools.com) mechanically removes code that is not wanted in an HTML file. Repetitive, additional components might be stripped out, however the precise rendering of your electronic mail ought to stay the identical (at all times check it out!). Every line of code impacts how lengthy an electronic mail takes to load, so taking the time to take away junk code can have a optimistic impact on load time.
Preserve your message centered on a single goal.
The easiest way to cut back electronic mail load time is to cut back how a lot content material you add to every of your electronic 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 electronic mail type), however it may possibly ship your load day without work the charts and trigger customers to desert your electronic mail. Preserve it easy, and your customers will thanks.
4. Plan (as a lot as you possibly can) for end-user inconsistencies.
The display dimension and electronic mail consumer aren’t the one elements that may alter the way in which your HTML electronic mail renders in your subscribers’ inboxes. Components just like the model of their electronic mail consumer, their working system, their distinctive person settings, their safety software program, and whether or not or not they’re mechanically loading photos can all influence how your electronic mail masses.
As you possibly can in all probability guess by that hefty record of things, attempting to unravel for all of them (each single time you ship an electronic mail) would in all probability be sufficient to make you throw your laptop throughout the room.
However you do not have to be fully helpless within the face of those variables — you simply must perform a little pre-planning.
Contemplate making a webpage model of your electronic mail.
That is form of like giving your electronic mail a fail-safe button. If for some purpose — resulting from one of many many elements mentioned above — your lovingly designed electronic mail renders like an absolute mess when a subscriber opens it, they are going to not 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 rather more constantly throughout internet browsers versus electronic mail purchasers, you can have far more management over the net web page model of your message. In HubSpot, there’s an choice you possibly can activate that can generate an internet web page model mechanically.
Create a plain textual content model of your electronic mail.
A plain textual content model is precisely what it feels like — another model of your HTML electronic mail that renders in fully plain textual content. Including a plain textual content model of your HTML electronic mail is vital as a result of some electronic mail purchasers and person settings cannot (or select to not) load HTML.
If that is so, the consumer will search for a plain textual content various model of your HTML electronic mail to load for the person. If one would not exist, it might sign to the recipient’s electronic mail server that your message is spam — or doubtlessly harmful.
Most electronic mail instruments like HubSpot will mechanically present a plain textual content model that shows if a recipient’s electronic mail server requires it, however when you’re coding an HTML electronic mail from scratch, you will must create one thing known as a multipart MIME message.
A multipart MIME message is an electronic mail that comprises each a plain textual content and HTML model of the identical electronic mail. If a recipient’s electronic mail consumer or safety system would not enable HTML electronic mail, the plain textual content model might be displayed. This can be a course of that requires a sophisticated data of coding, so we advocate working with a developer.
Make sure that your electronic mail nonetheless is smart if the pictures do not load.
Some customers have automated image-loading turned off, which suggests they’re going to see your electronic mail with out photos once they open it. For that reason, do not rely totally on photos to get the which means of your message throughout, and at all times add alt-text to the pictures you do embrace. Alt-text will load even when photos do not, so your subscribers can get the overall thought of what the visuals embrace.
5. Conduct thorough testing.
Lastly, you will want to check your HTML electronic mail at each stage of improvement to make sure it really works throughout completely different electronic mail purchasers, working techniques, and machine varieties. Do not wait till the very finish of the method to check out your electronic mail — testing as you’re employed is the easiest way to identify inconsistencies between completely different electronic mail purchasers and make sure you’re creating probably the most constant expertise attainable to your recipients.
Some electronic mail instruments (like HubSpot) supply in-app testing inside their electronic mail builders to make the method simpler. For those who’re working from scratch, you should use a software like HTML Email Check or PreviewMyEmail to get a greater thought of how your electronic mail will look in numerous electronic mail purchasers and gadgets.
Easy and Free HTML Electronic mail Templates
There are an awesome quantity of HTML electronic mail templates obtainable on the internet, and so they differ in high quality, responsiveness, and worth. We have pulled collectively a number of free HTML electronic mail templates that present a responsive person expertise. You should definitely learn the phrases and circumstances on every particular person template earlier than use.
Included within the free model of Marketing Hub, this template is a superb place to start out when you’re searching for a template with extra room for personalization. You may simply add photos, textual content, and buttons in an intuitive drag-and-drop editor, and you’ll be assured that the templates you design might be absolutely responsive on any machine.
This contemporary template is refined and minimal. The delicate shade palette and easy design make it a flexible choice for a lot of completely different industries and functions, and it has been examined on completely different electronic mail purchasers and gadgets to make sure a constant person expertise throughout completely different platforms.
Although this template was designed for a health firm, you possibly can simply adapt it to your personal. This clear, muted template is an effective 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 shade scheme choices, and room on the prime to spotlight a call-to-action.
Proof that generally 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 assortment of free, open-source templates are fully responsive and examined throughout in style electronic mail purchasers. You may edit and construct on them on the Bee Free platform, then export the HTML file to your native drive.
These are an excellent choice 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 obtainable in a number of codecs for various advertising and marketing functions, like transactional emails, NPS assortment, and electronic mail subscriber re-engagement.
This glossy, responsive design from Marketing campaign Monitor could be excellent for sending out a reduction code — however it might additionally function a classy strategy to showcase your newest merchandise to electronic mail subscribers. It’s additionally price testing Marketing campaign Monitor’s full library of responsive email templates.
Create HTML Emails to Enhance Your Subscriber Depend
HTML emails are an enticing strategy 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 strategy to creating lovely 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.