The easy Guide to Creating an HTML Email [+ Free Templates]

Posted on Posted in Blog

Once you create an email using a drag-and-drop or module-based tool, you’re in fact generating an CODE email.

You will find two main types of email you can send out and receive: ordinary text emails (these are exactly what they will sound like — any kind of email that contains just plain old text with no formatting) and HTML emails, which are formatted and styled making use of HTML and inline CSS.

HTML emails are easy to spot — most of the designed, multimedia marketing emails in your inbox are usually HTML emails.

Download Now: Email Marketing Planning Template 

Being a marketer, you’ve probably compared HTML emails compared to plain-text emails plus realized that there are different benefits to each type. HTML emails not necessarily inherently better than basic text emails, and different situations, both types can be portion of a successful email marketing system.

Here’s exactly what an HTML seems like on the front-end. Click the HTML button to see the code behind it.

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

In this article, we’ll protect how you can get started developing HTML emails, no matter your experience level and comfort along with coding, and share several free templates you may use. Let’s dive in.

How to Develop an HTML Email

Good news: You really don’t need to know the right way to code to create a good HTML email.

Most tools that creates and send e-mail (like HubSpot) will give you pre-formatted, ready-to-go CODE templates that enable you to design emails with out ever needing to entry the actual code to the back-end.

As you make changes in the email editor, those adjustments will be automatically coded into the final product. Email building equipment like this are an ideal option if you don’t have an email designer on your team, but you still want to send professional-looking marketing emails.

Nevertheless want to create an HTML email from the beginning?

If you’re comfortable with HTML and wish more direct control of the code of the emails, most e-mail tools will allow you to transfer HTML files directly for use as custom made email templates.

There are a wide variety of free of charge HTML email web templates available on the web (some of which we’ll discuss below), and if you understand your way around a good HTML file, it’s usually quite straightforward to adapt the template to the email creating tool of your choice.

To create a good HTML email completely from scratch, you’ll need to have an advanced knowledge of HTML (or work with a creator who does). Information offers a solid introduction to coding a basic HTML email. Because the process of creating an HTML email from scratch can be quite involved, we suggest working with a developer or using a pre-made HTML email design template instead.

Building an HTML e-mail specifically for HubSpot?

If you’re developing an HTML email design template specifically for use in HubSpot, you’ll want to make sure you are the required HubL tokens (these ensure your emails can be customized and are compliant with CAN-SPAM laws). You can find a complete guide to coding HubSpot-specific HTML e-mail templates here. Or alternatively, just make use of our simple what-you-see-is-what-you-get email editor.

Now that you understand the basics of what switches into developing an HTML email, let’s review a few important guidelines you should keep in mind. No matter what method you plan to make use of to create HTML emails, these best practices will help improve the design, consumer experience, and deliverability of your emails.

1 . Make sure your HTML email is receptive for different screen dimensions and devices.

The way your e-mail looks in a user’s inbox depends on a multitude of different factors.

One of the greatest and most obvious factors is the screen size of the device it’s becoming viewed on. An email that looks incredible and well-formatted on a desktop can easily devolve into a tangle of illegible, overlapping textual content and images when viewed on a mobile phone screen.

To make sure your HTML email messages look the way you intended across a wide range of screen sizes, the best thing you can do is definitely keep your layout simple and straightforward. When you start adding more complex elements like multiple columns and floated images, it becomes more difficult to translate the format of your email for different screen sizes.

If you undertake decide to develop a more complicated layout, make sure most likely actively solving pertaining to how the elements is going to be rearranged to suit different screen sizes. For instance , if your email shows as multi-column upon desktop, that exact same structure won’t take flight on mobile — you’ll need to use press queries to establish how elements will be displayed on different screen sizes.

Remember, developing really responsive HTML email messages goes beyond the structure and format of your message. Think about how the overall user experience of your email will be perceived on different devices. Make sure your font choices are simply as legible on mobile as they are on desktop, and make use of mobile-friendly buttons or even CTAs in place of hyperlinked text (have you ever tried to tap a little line of hyperlinked text on mobile? It’s not very easy).

You can find our more in-depth facts mobile email best practices right here.

2 . Make sure your styling functions in different email customers.

Another big factor that heavily impacts the way your own HTML emails come in your subscribers’ inboxes is the email customer they’re using to spread out the message. Every single email client a lot emails slightly differently, so an email that will looks a certain strategies Gmail will likely appear different in Outlook.

Luckily, once you know how most popular e-mail clients load specific HTML and CSS elements, you can create a pretty consistent experience across different users’ inboxes. It’s all about knowing which unsupported tags to avoid plus adapting accordingly. This comprehensive guide explains how the most popular email clients (including Gmail and multiple versions of Outlook) support and render different styling elements.

You can also check out an article we wrote on optimizing emails for different email clients.

3. Be aware of how long your HTML emails take to load.

How long your own email takes to load could very well be the difference among gaining a new customer and losing the frustrated subscriber. While it can be tempting to take advantage of all the different styling options and for you to incorporate visuals that HTML emails provide, none of that matters if your email takes too long to load.

As you design your own HTML email, remain conscious of how long your email will take to launch — especially if someone is, say, starting your message on the morning subway commute with a weak data connection. Here are a few little steps you can take that will proceed a long way towards enhancing load time.

Use images sparingly.

That way, you’ll bolster the message you want to get throughout to subscribers. Use an image compressor (such Compressor. io) to reduce the file size whenever possible. Most image compressors can significantly slow up the file size of an picture without compromising on quality, so acquiring this extra step won’t hurt the visual integrity of the email.

Make use of standard web fonts.

Custom fonts are great for spicing upward a landing page, however they can add an extraneous layer of complexity when added to a message. As we talked about above, all email customers handle style components differently, and this specifically extends to fonts. To be safe, use regular web fonts plus check to make sure the email client most of your own subscribers use facilitates a particular font.

Try an CODE minifier.

An HTML minifier (such minifycode. com plus smallseotools. com) automatically removes code it’s not needed in an HTML file. Repetitive, extra elements will be removed out, but the real rendering of your email should remain the same (always test it away! ). Each line of code impacts just how long an email takes to launch, so taking the time to get rid of junk code may have a positive effect on fill time.

Keep the message focused on a single objective.

The best way to reduce email weight time is to reduce how much content you add to each of your email sends. It may seem obvious, yet too many marketers attempt to stuff too much content material into their emails. Not just does that lead to an off-putting consumer experience (nobody really wants to read a book in email form), but it can deliver your load time off the charts and cause users in order to abandon your e-mail. Keep it simple, as well as your users will thank you.

4. Plan (as much as you can) for end-user incongruencies.

The screen-size and email customer aren’t the only elements that can alter the method your HTML email renders in your subscribers’ inboxes. Elements such as the version of their email client, their operating system, their unique user settings, their security software program, and whether or not these kinds of are automatically loading images can all effect how your e-mail loads.

As you can probably guess by that hefty listing of factors, trying to resolve for all of them (every single time a person send an email) would probably be enough to create you throw your computer across the room.

But you don’t have to be totally helpless in the face of these types of variables — you just have to do a little pre-planning.

Consider developing a webpage version of the email.

This is kind of like giving your email a fail-safe button. If for some reason — due to one of the numerous factors discussed over — your lovingly designed email makes like an absolute clutter when a subscriber starts it, they will at least have the option to click “view as internet page” and see the e-mail as you intended this to be.

Considering that style elements render much more consistently across web browsers versus e-mail clients, you’ll be able to have got way more control over the web page version of the message. In HubSpot, there’s an option you can turn on that will generate a web page version automatically.

Produce a plain text edition of your email.

A plain text version is exactly what it sounds like — an alternative version of your HTML email that renders in completely plain text. Incorporating a plain text edition of your HTML e-mail is important because some email clients and user settings can not (or choose not really to) load CODE.

If this could be the case, the client will look for a plain textual content alternative version of your HTML email to load for the user. In the event that one doesn’t can be found, it could signal towards the recipient’s email server that your message is usually spam — or even potentially dangerous.

Most email tools like HubSpot will certainly automatically provide a plain text version that will displays if a recipient’s email server needs it, but if you’re coding an CODE email from scratch, you will need to create something called a multipart MIME message.

The multipart MIME information is an email which contains both a plain text and HTML version of the same email. If a recipient’s e-mail client or protection system doesn’t allow HTML email, the particular plain text edition will be displayed. This is a process that requires an advanced knowledge of coding, so we recommend working with the developer.

Make sure that your email still makes sense if the images have a tendency load.

Some users have automatic image-loading turned off, meaning they’ll see your e-mail without images if they open it. For this reason, can not rely entirely upon images to get the meaning of your message throughout, and always include alt-text to the pictures you do include. Alt-text will load even when images don’t, so your subscribers can get the general idea of what the visuals include.

five. Conduct thorough screening.

Finally, you’ll need to test your HTML email at every stage of development to ensure it works across different e-mail clients, operating systems, and device types. Don’t wait until the really end of the process to test out your e-mail — testing as you work is the best method to spot inconsistencies between different email clients and ensure you’re generating the most consistent experience possible for your receivers.

Some e-mail tools (like HubSpot) offer in-app screening within their email contractors to make the process simpler. If you’re working from the beginning, you can use a tool such as HTML Email Verify or PreviewMyEmail to obtain a better idea of just how your email will appear in different email customers and devices.

Simple and Free CODE Email Templates

There are an overwhelming quantity of HTML email themes available on the web, and so they vary in high quality, responsiveness, and cost. We’ve pulled with each other a selection of free HTML email templates that offer a responsive user experience. Be sure to read the terms and conditions on every individual template before use.

1 . HubSpot Free HTML Email Template

Free HTML email template by HubSpot

Included in the free version of Marketing Hub, this template is a great place to start for anyone who is looking for a template with increased room for customization. You can easily add images, text, and buttons in an intuitive drag-and-drop editor, and you can become confident that the web templates you design is going to be fully responsive upon any device.

2 . Company News HTML Email Template by Campaign Keep track of

Free HTML email template by Campaign Monitor This particular modern template is definitely sophisticated and minimal. The subtle color scheme and simple design make it a versatile approach to many different industries plus purposes, and it’s been tested on different email clients plus devices to ensure a consistent user experience across different platforms.

3. Free HTML Email Template by Unlayer

Free HTML email template by Unlayer

Though this template was designed for any fitness company, you can easily adapt it for your own. This clean, moderate template is a great method to display content your own team has created and connect subscribers along with your most recent products or blog posts. The design functions two fully responsive columns with multiple color scheme options, and room at the very top to highlight a call-to-action.

4. MINImalist Free CODE Email Template

Free HTML email template by Mail Bakery

Evidence that sometimes much less really is more, this particular easy, fully receptive design makes the most of whitespace and maintains the focus firmly on your own words and visual elements. Without design distractions, your content really can shine — on any device.

5. Free HTML Email Templates from Bee Free

Free HTML email template library by Bee Free

This collection of free, open-source templates are completely responsive and examined across popular email clients. You can edit and build on all of them on the Bee Totally free platform, then foreign trade the HTML document to your local drive.

These are an ideal option if you want a a lot more styled, polished starting point, but you still desire to be able to customize the design to fit your company’s needs. Each template comes in multiple formats for various marketing purposes, like transactional emails, NPS collection, and e-mail subscriber re-engagement.

6. Free CODE Email Template by Campaign Monitor

Free HTML email template by Campaign Monitor advertising a discount code

This sleek, responsive design from Campaign Monitor would be perfect for sending out a discount code — but it could also serve as a stylish way to showcase your latest products to e-mail subscribers. It’s also worth checking out Advertising campaign Monitor’s full library of responsive email templates.

Create HTML Emails to improve Your Subscriber Rely

HTML emails are an engaging method to share what’s taking place in your business and maintain subscribers coming back for more. With the tips plus templates we’ve contributed, you’re well soon on your way creating beautiful HTML emails without composing a single line of program code.

Editor’s note: This post had been originally published within June 2019 and it has been updated meant for comprehensiveness.

New Call-to-action

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *