Creating HTML Email Templates: Best Practices and Templates (2023)

How to encode HTML emails?

This is the part where you start creating emails. So let's start.

• Select a document type

A document type is adocument type declaration (DTD). These statements tell an email client which version of HTML you are using so that it can correctly display your email to the viewer.

Choosing a document type is the most important step in creating HTML email, because without it there is no guarantee that email clients will display your email the way you want.

Now, you need to decide which document type to use for the emails as there are many of them like HTML5, HTML4.01 Strict, HTML 4.01 Transitional etc.

HTML5 is the latest and is designed to accommodate many forms of code, but as it is still evolving, HTML5 support is limited in all email clients. For this reason, you should avoid using HTML5.

Scalerorecommends XHTML 1.0 Transitional and HTML 4.01 Transitional document type declarations:

<!PUBLIC HTML DOCTYPE "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<!PUBLIC HTML DOCTYPE "-//W3C//DTD HTML 4.01 Transitional//EN" "">

You can choose the correct document type for your emails in theList of document types recommended by the W3C.

• Vector markup language and DPI scaling

After choosing a document type, you must add support for Vector Markup Language (VML). It is useful for ensuring that unsupported features such as background images and rounded edges display correctly in email clients such as Outlook 2007-16 and Outlook Express. The code looks like this:


Dots per inch, or DPI, is a measure of screen resolution. DP scaling can also be an issue with Outlook email clients, so we suggest adding the following code inside the<head>label:

<!--[si gte mso 9]>


<o:Office document settings>


(Video) The RIGHT WAY to Build HTML Email Templates 2023


</o:Office document settings>



• Email header encoding

It's time to create theemail header.The header elements contain the information that your subscribers cannot see, but which is necessary for machine processing byemail clients. Information is placed in meta tags within a tag.

** Metatags **

He<meta>The HTML element represents metadata that cannot be represented by other meta-related HTML elements, such as<base>,<link>,<script>,<style>o<title>.

There are many meta tags you can add in HTML, but the following are the most useful for keeping control over how your email essentials are displayed:

<meta name="detection format" content="data=no">

<meta name="detection format" content="phone=no">

These meta tags will tell iOS devices not to convert addresses or phone numbers in your emails into links. You might want these items to display as clickable links, but Apple's default blue might not match your email's color scheme.

Therefore, these meta tags will prevent such occurrences and allow you to modify your links according to your preferences.

<meta content="width=device-width, initial-scale=1" name="viewport" />

This tag guides email clients on how to size the email precisely its width. This will help maintain the position of the email content to avoid any white space next to images or text that doesn't fit properly.

After the meta tags, add a CSS style tag to indicate that your email content is, in fact, CSS:

<style type="text/CSS">

(Video) HTML Email Template - Responsive HTML Email 2023

• Create tables and email body

Now you can create the general structure of your emails. In the body of the email, add a tag for the parent container with a width of 100%, as this table contains most of the email's content. You must follow these guidelines when creating tables:

  • To addpadding: 0px; margin: 0pxto the body tag to remove the extra space in the email.
  • To add“paper=presentation”attribute to each of your tables to help email clients know that the table is for visual purposes only, not as a data table.
  • In the main table, create rows (tr) and columns (td). Inside each column, create a table with a width of 600px. You can then define the contents of the table.

How to create emails in HTML?

When creating an HTML email, the design is just as important as the coding. An attractive, attractive andresponsive email designcan provide a better user experience. While creating an HTML email, you need to consider many elements like buttons, typography, layout and media elements like videos, GIFs, etc.

Each of these elements can significantly affect how your email looks and how the reader perceives it. Therefore, paying attention to them is essential.

💡Read in detail:A Beginner's Guide to HTML Email Design

How to make HTML emails accessible

When creating HTML emails, you must ensure the accessibility of the email. This means that all users must be able to access and read their email, regardless of their status. These states can be human or technical shortcomings, such as limited email client support.

For example, colorblind people may not see specific colors in their emails. On the technical side, Outlook (web) doesn't support AMP email, but the Gmail app for Android does.

💡Read in detail:What is email accessibility and why is it important?

7 Responsive HTML Email Templates

Ready to see some awesome and creative HTML email templates? We've curated a list of 7 different and most responsive email templates that you can customize and send with just a few clicks.

1. HTML Email Newsletter Template

for usEmail status report 2023, the newsletter was the most sent type of email. Then we have the perfect newsletter template for you, a mix of zigzag and single column layouts. It comes with placeholders that you can customize based on your newsletter content.

Creating HTML Email Templates: Best Practices and Templates (1)customize thisemail newsletter template

2. Cyber ​​​​Monday HTML Email Templates

This email uses a Cyber ​​​​Monday color theme to attract customers, and the images add a more engaging touch. It's a multi-column template that's best if you have multiple products to display in your email. Also, the minimalist theme makes this email stand out in the inbox as most holiday emails are edgy and edgy.

Creating HTML Email Templates: Best Practices and Templates (2)

Take a look at our collection ofvacation email templates

3. HTML E-Commerce Email Template

Do you have a new product line launching? This product promotion email with zigzag and inverted layout is best for showing your products images and features. Add a customizable banner to the footer to drive more conversions.

Creating HTML Email Templates: Best Practices and Templates (3)

Take a look at our collection ofecommerce email templates

(Video) Free Email Template - Beautiful Email HTML Template Builder

4. Responsive promotional email template

This abandonment email aims to recover lost sales from website visitors. To compel action and recommendations to give visitors more options.

Creating HTML Email Templates: Best Practices and Templates (4)

Take a look at our collection ofpromotional email templates

5. Welcome Email HTML Template

Send them this zig-zag welcome email to create a lasting impression on their new registrations. The banner image grabs attention and the product images showcase the products. The welcome coupon code is the highlight of the email.

Creating HTML Email Templates: Best Practices and Templates (5)

Take a look at our collection ofwelcome email templates

6. HTML Event Invitation Email Template

This single column webinar invitation email is easy to customize. It summarizes the guest and event details and looks like a plain text email. Use it in your next webinar by customizing it in our code-free editor.

Creating HTML Email Templates: Best Practices and Templates (6)

Take a look at our collection ofevent invitation email templates

7. Transactional Email Template

Don't let abandoned cart users disappear, they can help you drive great conversions. This reversed abandoned cart email uses the product image to engage the viewer. Plus, adding benefits at the end gives the recipient a compelling reason to complete the transaction.

Creating HTML Email Templates: Best Practices and Templates (7)

Take a look at our collection oftransactional email templates

HTML email coding best practices

Email encoding can seem complex and confusing as email rendering has so many possibilities. To ensure your email works well, you can follow these best practices:

✅ Avoid JavaScript or Flash

These technologies are not widely supported by email clients, so emails will not be processed correctly.

However, if you want to use Javascript and other interactive elements in your emails, consider usingAccelerated Mobile Pages (AMP) for Email, but this format has limited customer support.

currently onlyGmail, Yahoo! y Mail.ruSupports AMP components in email.

(Video) HTML Email Template Built the RIGHT WAY - 2023!

✅ Keep HTML file size below 102KB

Each line of code in an HTML document file affects the email load time. That's why keeping your code tidy and inexpensive is essential to avoid redundant lines that just take up space.

Also, keep the HTML file size under 102KB as Gmail will clip files larger than 102KB. Also, a file size of 100 KB goes through morespam filters

✅ Avoid faulty HTML tags

Avoid using faulty HTML tags. If there are broken tags in your HTML code, the email client may mark them as spam or worse, not process them correctly. It will hurt theemail deliverabilityof current and future email campaigns.

✅ Avoid extra spaces around images

Avoid extra spaces around an image. Instead, use display: block to remove this different space.

✅ Avoid odd numbers for size

Try not to use odd numbers for the size like 11px, 13px etc as email clients sometimes add a 1px line between email elements. This issue is more common in Outlook 2016 and your email may look like this: Unwanted lines appear in Outlook 2016 with strange font sizes.

Creating HTML Email Templates: Best Practices and Templates (8)Source: Acid Email

✅ Remove comments in your CSS

Be sure to remove any comments in your CSS tag from your HTML code. This can break your code in some email clients like Outlook. Therefore, it is good practice to remove them if they are not needed.

✅ Always test your emails before sending them

The best way to know if your code works istest your emails. Therefore, before sending them to final recipients, test your emails at all stages of development.

By testing, you can detect any disparities in your emails. Thus, it will help you create a consistent viewing experience for all your subscribers.

A step up from HTML emails: AMP welcome emails

There's a new buzzword among email marketers:AMP para e-mails. So what is it? AMP for Emails is a set of JavaScript-compatible HTML tags that enable functionality with an additional focus on performance and security.

In addition, AMP emails are more compatible with the introduction of a new MIME (Multipurpose Internet Mail Extensions) part. The MIME part allows emails to fall back into HTML templates if a provider or client doesn't support AMP emails.

AMP for email is still in its infancy, but it will revolutionize email marketing. If you want to try AMP emails thenMailmodois your answer Mailmodo offers over 20 interactive AMP widgets such as forms, surveys, carts and calendars that you can embed in your email and increase your conversions.

What should you do next

Hello, thanks for reading until the end. Here are 3 ways we can help you grow your business:

  1. Talk to an email expert.Do you need someone to take your email marketing to the next level? Mailmodo experts are here for you. Schedule a 30-minute email consultation. Don't worry, he's home.Book a meeting here.

    (Video) The RIGHT WAY to create HTML emails | TUTORIAL [2023]

  2. Send emails that drive higher conversions.Mailmodo is an ESP that helps you create and send app-like interactive emails with forms, carts, calendars, games and other widgets for higher conversions. Sign up for our 21-day free trial.start free.

  3. Get smarter with our email features.Explore our entire knowledge base here and learn about email marketing, marketing strategies, best practices, growth hacks, case studies, templates and more.Access the guides here.


1. Build Responsive HTML Email Templates with HTML Tables & CSS
2. Part 3- Responsive Html Template for Emails, Web Templates for Emails, HTML Email Template Design
3. How To Make Email Templates With Gmail | Easy Tutorial (2023)
(The Social Guide)
4. How To Create Email Templates in Outlook | My Templates & Quick Parts
(Leila Gharani)
5. Build A Responsive HTML Email Template with HTML Tables & CSS
(Drew Ryan)
6. Create an HTML email in minutes
(Email and Landing Page Design with BEE)
Top Articles
Latest Posts
Article information

Author: Merrill Bechtelar CPA

Last Updated: 05/06/2023

Views: 6276

Rating: 5 / 5 (50 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Merrill Bechtelar CPA

Birthday: 1996-05-19

Address: Apt. 114 873 White Lodge, Libbyfurt, CA 93006

Phone: +5983010455207

Job: Legacy Representative

Hobby: Blacksmithing, Urban exploration, Sudoku, Slacklining, Creative writing, Community, Letterboxing

Introduction: My name is Merrill Bechtelar CPA, I am a clean, agreeable, glorious, magnificent, witty, enchanting, comfortable person who loves writing and wants to share my knowledge and understanding with you.