How to Build and Send an HTML Email? 

If you get into your inbox, you will see that most of the emails are either plain text or full of beautiful fonts and multimedia. The second type is likely to be an HTML email that people use without even knowing it. Why? Marketers continue to rely on built-in and drag-and-drop email constructors to create templates. However, they do not consider what is under the surface.

Yes, the complexity and the time necessary for arranging things make it more efficient to use the provider’s templates. Yet, there is another world of HTML and CSS allowing developers to create exciting HTML emails. Notably, in the very end, such HTML messages still follow deliverability rules, meaning you should think of them before sending.

Read on to know how to design HTML emails, get some tips on the email formatting HTML provides, and discover some deliverability fundamentals.

How to Send HTML Email

Let’s start with the email basics. Whether you create an HTML email by yourself or use templates within the email services like Mailchimp or Sendpulse, the success of your email campaign depends not only on the code but also on other things. Marketing specialists underline the deliverability factors that can affect the opening and engagement rates. What are the crucial steps to consider before sending emails:

• Create a healthy email list. Ensure that your list is healthy. It means that the email addresses you have are valid. How to define their status? You can try using an email verifier to test email address validity.
• Check your domain reputation. Before even trying to send HTML email templates to different audiences, you need to check your domain. If it has a low rating or is listed in spam databases, your HTML messages will likely go into the spam box.
• Create clear subject lines. It is crucial to have a clear subject line that will reflect your offer. Notably, it should have no spam elements, exclamation points and be understandable.
• Add unsubscription buttons. Before you contact your target audience, allow them an opportunity to unsubscribe. It is a general practice under anti-spam regulations.
• Test emails. Before you start your campaign, do some tests. For instance, you have a group of b2b contacts you extracted from LinkedIn with Chrome extension and the group of the addresses you got via opt-in tactic. Make different templates for them and send them to study the specific audiences. Besides, the test can show you how the message looks, whether there are some errors or shifts within the text.
• Make your code clear. Email formatting HTML allows to be established should be clear. It means you should have the code without errors. Any poor formatting may result in the inadequate representation of the information and be perceived by email service providers as spam. That’s why if you design email templates in HTML, you should pay attention to the existing practice.

How to Use HTML in Email

Interestingly, many underline that coding HTML emails have not significantly changed in recent times. It implies that developers can use the same methods for writing emails they utilized before. Moreover, due to the idea that various clients apply their own rules and have specific CSS orders, choosing the classic coding methods would be a safe bet.

Let’s see what to consider when you want to write an HTML email.

Utilization of table tags

To start with, it must be the main rule for coding HTML emails. Certain clients, in particular, Gmail or Outlook, can differently perceive “div” tags. Thus, it is better to use tables so that your HTML emails look the same for different clients. In this regard, when you create an HTML email body, start the content part by inserting the <table> tag.

Besides, it would help if you considered minimizing the border and border-spacing values to the lowest point. The main reason is to make sure the space would be equally distributed within the email body. The same applies to the alignment of the elements; centre them.

Also, if you want to add buttons, for instance, you should as well include them through table tags. You can incorporate them via the <class> tag. Yet, before doing it, define the proper padding.

Addition of CSS

As you already know, specific clients can ignore or misinterpret the CSS elements. Yet, to create HTML email campaigns, you still need them. How to utilize them then? Make sure that you are using the inline CSS. The reason is simple: the inline CSS allows you to define the priorities of the design of HTML emails.

That way, the order is strict, making the email clients follow it. For sure, it can be difficult for the developer. However, they can use web-based inliners to facilitate their operation and save time.

Application of ordinary fonts to design an email template in HTML

Another thing to consider when you design email templates in HTML refers to the usage of fonts. You, as a developer, may want to be unique. However, it can turn against you. That’s why the best idea is to stick to well-known Helvetica or Arial types.

At the same time, a good idea may be to use some of the web-based fonts. In case your recipients have Gmail accounts, the Google web-based types of fonts can suit your HTML emails well.

Notably, make sure that you define the parameters for each font in terms of size and colour. The same applies to margins. The best practice is concerned with setting a “0” value for them. All of these things you should define within the table format indicated above.

Check this email HTML CSS example to see how the inline CSS should look if you want to make a heading about HTML format in your email:

<h2 style=”font-size:20px; margin:0 0 24px 0; font-family:Helvetica, sans-serif”>What is HTML format</h2>

Inclusion of images

Lastly, another critical element for the exciting email is an image. For instance, you can gather your contacts in a Google sheet, retrieve the emails using a special tool and have a list of valid emails. Yet, how would you engage the contacts to answer you or go to the website? The image plays a role in affecting engagement rates as well as tracking emails. Thus, you may want to include them.

In this regard, try to compress them. At the same time, always add the alt in the code identifying the image’s contents. That way, if the image fails to be downloaded, the recipients at least would know what it is about.

Such things need to be considered in terms of spam filters and algorithms. Why? They can direct the email with suspicious content into the spam box. Also, you should manually determine all the tags and margins in a similar manner when you add an HTML email link to the template.

As a result, these are the main things that will allow you to use HTML in email and don’t be afraid that some clients, like Outlook, would circumvent your message.

About author

Elena Osipova is an SEO Specialist with 5 years of experience. I am skilled in keyword research experience, technical optimization, and SERP Analysis. I know how to get leads from organic traffic and I’m happy to share these tips.