Complete Guide to Create HTML in Emails

19.04.2022
Read time: 13 min
Try Publicate For Free Today
Start Now
Complete Guide to Create HTML in Emails
Try Publicate For Free Today
02.03.2022
Read time: 13 min

Email marketing and email creation has come a long way with advents like drag-and-drop email builders and email analytics. Yet, some companies and teams still rely on HTML in email to send their communications. While HTML email code can do the job, it can also be tricky.

Here, we’ll look at how to create an HTML email and uncover the best practices for both email design and development.

What are the Types of Emails?

Whether you’ve been responsible for sending an email or not, you certainly have received emails. So, you’re probably already aware that there are different types of emails. These include:

1. Marketing email

Marketing emails are geared towards an ultimate goal such as making a sale or converting a new customer. Marketing email service providers typically focus on solutions to manage subscribers, send bulk email campaigns, track their success, and provide reporting.

2. Transactional email

Transactional emails are those related to an action, which means they can include receipts, welcome emails for new subscribers, password resets for those who forgot, and more. Many companies rely on software solutions to automate these types of emails through APIs or development tools.

3. Life-cycle email

Life-cycle emails are behavior-based and can be used to drive engagement or help with onboarding, for example. There are email service providers that focus primarily on this function as well.

What are Email List Best Practices?

Sending any of the aforementioned types of emails relies on having a list of people to send the email to. When it comes to collecting, storing, and growing your email list, keep in mind the following best practices:

1. Build Organically

You may be tempted to pay for an existing email list. But, it’s advisable to ignore this temptation because you’ll likely end up experiencing bounced emails. If your emails are considered as SPAM, then you are hurting your internet protocol (IP) address’ reputation and could ultimately be blocked.

2. Remain Compliant

Did you know that there are legal ramifications for sending emails? The CAN-SPAM Act states that email senders can’t use misleading subject lines, ignore opt-out requests, or use false header information. Additionally, your emails have to include a way for recipients to easily opt-out and know your location, among other requirements.

3. Two-Step Authentication

Add an extra step for your subscribers to verify their email address. This way, you can ensure that no one is abusing their email address and your subscribed emails are accurate and clean.

How to Measure Email Performance?

Once you create an HTML email or any email and send it, the job isn’t done yet. You’ll want to assess how it performed. But, what exactly should you look out for?

There are a number of key performance indicators (KPIs) to track and you can choose which make the most sense based on your goal. When tracking KPIs, it’s useful to know benchmarks for comparison’s sake. Keep in mind that the below benchmarks can vary by industry, so it’s useful to do some research of your own.

1. Open Rate

The number of people who opened your email/the total number of sends x 100: 20% is typically considered good

2. Clickthrough Rate

The number of people who clicked on an ad or call-to-action button / the total impressions x 100: 3-7% is considered strong

3. Bounce Rate

The number of bounced emails divided by send emails x 100: benchmark calls for less than 2%

4. Unsubscribe rate

The number of unsubscribed / total number of emails delivered x 100: the average unsubscribe rate is about .49%

That’s where an email builder can provide even more value. HTML email builders offer a suite of analytics that deliver actionable insights into your email’s reach and success.

With access to these analytics, you can measure what is and isn’t working in your email strategy and adjust accordingly. An email builder like Publicate has detailed analytics including heat maps, open rates, click rates, and more.

The best part is you can drill down into analytics regardless of the platform you choose to use to send HTML in email.

What is the Sending Score?

If you’ve been in the world of sending emails, you may have come across the metric called sender score. A sender score is basically your reputation in the world of emails and ISPs.

Mailbox providers assess your sender score before accepting your email or considering it to be SPAM. Your sender score can be your golden ticket in, so it’s very important to take care of your sender score. This rating is based on your IP reputation, your domain name signature, your bounce rate, and your compliant rates.

This is yet another reason why you want to pay close attention to your subscriber list and ensure that the email addresses you send bulk campaigns to have actually opted-in and want to receive your emails.

Why is Coding HTML Emails Challenging?

Now that you know how to perform due diligence and cover best practices for sending emails, let’s drill to the core of creating HTML emails.

The word coding itself can scare off a lot of people. But beyond knowing how to code HTML to design and develop an email, you’ll also need to keep in mind that different email service providers render HTML emails differently. So, you can optimize your HTML email for Gmail and then an Apple Mail recipient may receive the email and see it wonky.

Additionally, different email clients that you use to build HTML emails may use different codes for the same thing.

Phew, that’s a lot to overcome. The good news is that an HTML email builder provides you with templates that are optimized already and designed to render across email providers.

You can choose from a suite of professional templates and customize them using the drag-and-drop functionality, which removes the need for a designer or coder.

How to Build HTML Email Templates?

If you’re moving forward with using HTML in email, then you’ll need to know how to cover the following:

1. Layout

A basic HTML email template will need both a header and a body section. To create a header section, you’ll use <head> and </head> to end the header section. Styling, CSS, and animation is specified within your header section.

Then, you’ll lead into the body by using the code <body> and </body>. Email engines use this code to create the HTML structure.

2. Inline CSS

Then, you’ll lead into the body by using the code <body> and </body>. Email engines use this code to create the HTML structure.Email development will involve CSS, or cascading style sheets, along with HTML. Link colors, headline fonts, and other styling elements are described by CSS. There are some email clients that will ignore any CSS that isn’t inlined, which means you’ll want to write your CSS inline as you go.

3. Buttons

To incorporate a button in HTML in an email, it’s preferred to use tables to style everything. This will add more lines of code than you’d need to add a button on a website, but it is necessary in emails so that you can style buttons across email clients.

4. Typography

General fonts are considered typefaces like Arial and Helvetica. But, if you choose to stray and choose web fonts (i.e. Google fonts) instead, use a WebKit conditional media query so they display properly in clients like Outlook.

5. Images

When adding images into your HTML email code, it’s vital to know that some clients don’t automatically render emails. For example, Outlook blocks image-rendering, but Apple Mail and Gmail don’t.

That’s why it’s necessary to include alt text (which is a description of what the image is in plain text). So, if the image doesn’t load, the recipient can read what was in that place.

6. Forms

If you need to include a form in your HTML email, it’s recommended to link to an external form because each email client will support forms differently.

As you can gather, creating your own HTML in email from scratch can become more complicated than you may already think it is. Instead, you can use an email builder like Publicate that comes with pre-built templates for HTML emails.

This way, you can use a drag-and-drop editor to visually design your email and spend your time focused on content creation rather than the logistics. Once it’s ready, you can export the email to the email provider of your choice with a few clicks of the mouse.

HTML code on computer screen

Picture source Unsplash

What are HTML Email Template Best Practices?

To create HTML email that renders well across email providers and looks good, use the following bullets as a checklist of sorts to help you cover your design and development bases.

  • Set your maximum width to 600-800 pixels
  • Avoid complicated elements and design for simplicity
  • Always assume that images will be blocked and make sure that you incorporate alt text
  • Try to avoid animation that requires JavaScript or Flash. If you want to use animation, opt for a .gif
  • Try to stick to cross-platform fonts (i.e. Arial, Times New Roman, Verdana, Georgia)
  • Code the structure using tables
  • Keep CSS simple and make sure it’s all inline before sending
  • Use media queries to adjust font sizes for small screens
  • Test your email before sending

Want to know how you can always be sure that your HTML email covers these best practices? Choose an email builder like Publicate that offers professional ready-to-go templates that already have these best practices built in.

The Importance of Testing HTML Emails

The best piece of advice you can remember from this entire article is to test your email before sending. Testing can help you check for typos and ensure the design renders properly. It’s always useful to also ask for a second set of eyes to review the email before you press send because once you send, you can’t take it back.

There are services for email testing that will show you what your HTML email will look like across various email providers. However, given that you have to fulfill requirements across many different platforms, the testing process can become time consuming.

This is another reason why many people are opting for an HTML email builder that can automatically handle the design and development process with the use of an existing HTML template.

Why Use HTML Email Builders?

HTML email builders take cover all the otherwise painful details of having to create an HTML email by hand. For example, a tool like Publicate is a web-based email builder that allows you to choose from hundreds of existing email templates.

Once you adjust your email’s content and design with the drag-and-drop functionality, you can send your HTML email using any email service provider or communication tool of your choice by exporting the email in HTML and uploading it to your preferred service.

Instead of coding HTMLs by hand and having to adjust for different screen sizes, HTML email builders make it simple to get your emails out faster and track their progress once you hit send.

Closing Thoughts

When going down the path of embedding HTML in email, you may face challenges when coding by hand. The optimal path forward is to utilize an HTML email builder that will handle the heavy lifting for you so that you can focus on your email’s message and strategy rather than being bogged down by testing, coding, and re-coding.