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 sorts of e mail you possibly can ship and obtain: plain textual content emails (these are precisely what they sound like — any e 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 straightforward to identify — a lot 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 completely different advantages to every sort. HTML emails aren’t inherently higher than plain textual content emails, and in several conditions, each varieties may be a part of a profitable email 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 E-mail
Excellent news: You really don’t must know the way 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 might be routinely coded into the ultimate product. E-mail constructing instruments like this are a great choice if you do not have an e mail designer in your staff, however you continue to wish to ship professional-looking advertising emails.
Nonetheless wish to create an HTML e mail from scratch?
When you’re snug with HTML and need extra direct management over the code of your emails, most e mail instruments will help you import HTML files directly to be used as customized e mail templates.
There are all kinds of free HTML e mail templates out there on the internet (a few of which we’ll share beneath), and if your manner round an HTML file, it is normally fairly easy to adapt the template to the e-mail constructing instrument of your alternative.
To create an HTML e mail fully from scratch, you will must have a complicated data of HTML (or work with a developer who does). This guide affords a strong 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 advocate working with a developer or utilizing a pre-made HTML e mail template as an alternative.
Growing an HTML e mail particularly for HubSpot?
When you’re growing an HTML e mail template particularly to be used in HubSpot, you will wish to ensure you embody the required HubL tokens (these guarantee your emails may be personalized and are compliant with CAN-SPAM legal guidelines). Yow will discover an entire guide to coding HubSpot-specific HTML email templates here. Or alternatively, simply use our easy what-you-see-is-what-you-get email editor.
HTML E-mail Greatest Practices
- Be sure your HTML e mail is responsive for various display screen sizes and units.
- Be sure your styling works in several e mail shoppers.
- 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 just perceive the fundamentals of what goes into growing an HTML e mail, let’s go over a number of vital greatest practices it’s best to be mindful. It doesn’t matter what technique you propose 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 sure your HTML e mail is responsive for various display screen sizes and units.
The way in which your e mail appears in a person’s inbox is dependent upon all kinds of various components.
One of many greatest and most blatant components is the display screen measurement of the system 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 best way you supposed throughout a large spectrum of display screen sizes, one of the best factor you are able to do is hold your format easy and easy. If you begin including extra complicated components like a number of columns and floated photographs, it turns into harder to translate the format of your e mail for various display screen sizes.
When you do determine to develop a extra complicated format, ensure you’re actively fixing for the way the weather might be rearranged to go well with completely 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 will want to make use of media queries to outline how components might be displayed on completely different display screen sizes.
Bear in mind, growing actually responsive HTML emails goes past the construction and format of your message. Take into consideration how the general person expertise of your e mail might be perceived on completely different units. Be sure your font selections are simply as legible on cellular as they’re on desktop, and use mobile-friendly buttons or CTAs instead of hyperlinked textual content (have you ever ever tried to faucet just a little line of hyperlinked textual content on cellular? It isn’t very straightforward).
Yow will discover our extra in-depth guide to mobile email best practices right here.
2. Be sure your styling works in several e mail shoppers.
One other large 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 manner in Gmail will seemingly look completely different in Outlook.
Fortunately, if you understand how hottest e mail shoppers load specific HTML and CSS components, you possibly can create a fairly 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 e mail shoppers (together with Gmail and a number of variations of Outlook) help and render completely different styling components.
You may also 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 might very effectively be the distinction between gaining a brand new buyer and shedding a annoyed 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 supply, 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 below are a number of little steps you possibly can take that can go a good distance in the direction of enhancing load time.
Use photographs 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 cut back the file measurement as a lot as attainable. Most picture compressors can considerably cut back the file measurement 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 customary net 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 shoppers deal with model components 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 consumer most of your subscribers use helps a selected font.
Strive an HTML minifier.
An HTML minifier (like minifycode.com and smallseotools.com) routinely removes code that is not wanted in an HTML file. Repetitive, further components might 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.
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 might sound 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 one desires to learn a novel in e mail kind), however it will probably ship your load break day 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 possibly can) for end-user inconsistencies.
The display screen measurement and e mail consumer aren’t the one components that may alter the best way your HTML e mail renders in your subscribers’ inboxes. Parts just like the model of their e mail consumer, their working system, their distinctive person settings, their safety software program, and whether or not or not they’re routinely loading photographs can all influence how your e mail masses.
As you possibly can in all probability guess by that hefty record 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 do not have to be fully 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 form of like giving your e mail a fail-safe button. If for some motive — as a result of one of many many components mentioned above — your lovingly designed e mail renders like an absolute mess when a subscriber opens it, they may at the very least have the choice to click on “view as net web page” and see the e-mail as you supposed it to be.
Since model components render way more constantly throughout net browsers versus e mail shoppers, you can have far more management over the online web page model of your message. In HubSpot, there’s an option you possibly can activate that can generate an online web page model routinely.
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 fully plain textual content. Including a plain textual content model of your HTML e mail is vital as a result of some e mail shoppers and person settings cannot (or select to not) load HTML.
If so, the consumer will search for a plain textual content different model of your HTML e mail to load for the person. 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 routinely present a plain textual content model that shows if a recipient’s e mail server requires it, however should you’re coding an HTML e mail from scratch, you will must 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 consumer or safety system does not enable HTML e mail, the plain textual content model might be displayed. It is a course of that requires a complicated data of coding, so we advocate working with a developer.
Be sure your e mail nonetheless is sensible if the pictures do not load.
Some customers have computerized image-loading turned off, which suggests they will see your e mail with out photographs after they open it. Because of this, do not rely fully on photographs to get the that means of your message throughout, and at all times 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 concept of what the visuals embody.
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 completely different e mail shoppers, working programs, and system varieties. 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 completely different e mail shoppers and make sure you’re creating probably the most constant expertise attainable on your recipients.
Some e mail instruments (like HubSpot) supply in-app testing inside their e mail builders to make the method simpler. When you’re working from scratch, you should use a instrument like HTML Email Check or PreviewMyEmail to get a greater concept of how your e mail will look in several e mail shoppers and units.
Easy and Free HTML E-mail Templates
There are an amazing quantity of HTML e mail templates out there on the internet, they usually range in high quality, responsiveness, and worth. We have pulled collectively a number of free HTML e mail templates that present a responsive person expertise. Make sure to 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 begin should you’re searching for a template with extra room for personalisation. You may simply add photographs, textual content, and buttons in an intuitive drag-and-drop editor, and you’ll be assured that the templates you design might be totally responsive on any system.
This contemporary template is subtle and minimal. The delicate colour 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 e mail shoppers and units 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 on your personal. This clear, muted template is an effective way to show content material your staff 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 high to spotlight a call-to-action.
Proof that generally much less actually is extra, this straightforward, totally 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 system.
This assortment of free, open-source templates are fully responsive and examined throughout common e mail shoppers. You may edit and construct on them on the Bee Free platform, then export the HTML file to your native drive.
These are a great 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 offered in a number of codecs for various advertising functions, like transactional emails, NPS assortment, and e mail subscriber re-engagement.
This glossy, responsive design from Marketing campaign Monitor can be excellent for sending out a reduction code — however it might additionally function a classy solution to showcase your newest merchandise to e mail subscribers. It’s additionally price testing Marketing campaign Monitor’s full library of responsive email templates.
Create HTML Emails to Improve Your Subscriber Depend
HTML emails are an interesting solution to share what’s taking place in what you are promoting and hold subscribers coming again for extra. With the guidelines and templates we’ve shared, you’re effectively in your solution to creating lovely HTML emails with out writing a single line of code.
Editor’s be aware: This publish was initially printed in June 2019 and has been up to date for comprehensiveness.