A Complete Guide to Creating HTML Emails: Best Practices and Examples for Saas Companies

Content Team -

Designing and building HTML emails can be a challenging task. How do you confirm that you have created the best performing HTML emails for your brand? This guide will provide insights into the best practices for designing and building HTML emails.

How your emails appear to your customers can make a big difference in your overall marketing strategy. The last thing you want is your emails to be a total disaster when they hit your subscriber's inbox. If you have some technical knowledge in web development, you should know that email development is a different ball game.

Other web design approaches don't work in building HTML emails. For this reason, you need to ensure that you apply the best HTML email building practices during the development and design process. In this article, you'll learn some of the best practices for designing and building HTML emails. Regardless of your experience in email coding, you'll be able to understand the ropes to create emails that get delivered and perform at an optimum level.

Table of Content

What are HTML Emails?

HTML stands for the hypertext markup language, a way to code a document that signals how to process certain information to a web browser. Like a website, an HTML email is designed using graphics, colors, fonts, and table columns. Unlike plain text emails that are usually just written words, you can create HTML  to suit your brand style and give your readers a more visually appealing experience.

HTML emails are widely used by most marketers and business owners, meaning that it's here to stay. Besides, its beautiful, visually engaging pieces are hard to ignore. Like we mentioned earlier, the technical approach involved in web design doesn't work for email development.

So we've written this guide to guide you through the best practices to help you create HTML emails that will perform well in your email marketing efforts.

HTML Email Best Principles

Now that you've learned the basics of creating a high performing HTML email. Let's move on to some of the best principles you can apply. These HTML email principles will help you create visually engaging emails and improve the deliverability of your emails.

1. Consider different screen sizes and devices

It is popularly known that the way emails appear on a desktop is different from how they appear on mobile devices. Studies have shown that more than 50% of email campaigns are viewed on mobile. So you need to avoid the temptation to design your emails just for desktop.

However, mobile devices are in a wide range of screen sizes. So If you want your emails to fit each screen size, you need to ensure that you keep your layout simple. Too many complex elements can make your emails appear poorly organized on different screen sizes.

The good thing about a mobile-responsive email is that it can also look good on a desktop if it looks good on mobile. Remember, developing a well-designed HTML email is more about the overall user experience of your emails. Ensure you use a single column layout and set your default width to 400px.

This size scales easily well for mobile. Designing your HTML emails for mobile helps you reach a wider audience and generate better marketing results.

2. Build your HTML emails for improved deliverability and accessibility

While you apply different design and technical elements to build the best possible HTML email, you need to ensure that your emails get to your subscriber's inbox, which means that you need to apply best practices that will help you create your emails in a way that your subscribers can access appropriately.

Here are some tips you can use for improved deliverability and accessibility:

  • Ensure you consider file size when designing: choose an appropriate file size and ensure it doesn't exceed 100kb. If your file size happens to exceed that limit, then try to cut off unnecessary spaces and styles. An email with a file too large to open could quickly end up in the spam filter. So you need to do your best to prevent that from happening to your emails.
  • Use a compelling pre-header text: it doesn't end at just creating an accessible HTML email. It would help if you incentivized your subscribers to open your emails. This starts with customizing your pre-header text to boost your email open rates.
  • Make the unsubscribe link as straightforward as possible: there's nothing more annoying than an email with an unsubscribe link that's hard to find. An email with a hidden unsubscribe link leads to an annoyed customer. If your subscribers are not happy with your brand, they won't hesitate to flag your emails as spam.

    As a result, it could negatively affect your sender's reputation and delivery rates of subsequent emails. So it's good practice to display your email unsubscribe link for your subscribers. It establishes a great relationship with your customers and guarantees that you'll send emails to customers who want to read your messages.
  • Use an appropriate number of images: using too many images in your emails could slow down the email loading time and make it difficult for your subscribers to read your emails. Ensure you use relevant images with an appropriate number that serves the purpose of your email.

3. Optimize your email styling for different email services

Another essential factor you need to consider when creating HTML emails is how they appear in your subscriber's inbox. Remember that your customers or subscribers use separate email clients. For this reason, your HTML emails wouldn't appear the same way to them.

For example, how your HTML email would appear in Gmail is different from how it appears on Yahoo mail. An excellent way to solve this is to learn how each email client loads HTML and CSS elements. This would help you structure your emails in a way that suits each email client.

4. Make room for end-user inconsistencies

When it comes to HTML emails loading time, there are many factors to consider. From security software to unique user settings and email clients. To make your emails fully functional, you need to make room for these crucial factors. However, this is not easy to pull off. However, with proper planning, you don't need to be helpless. Here are some tips you can apply:

  • Consider creating a web page version of your HTML emails: there may be cases where your emails may not appear great on mobile devices due to some factors. You can make up for this by adding an option for your subscribers to view your email on a web page. This will help reduce the chances of your subscribers not reading your emails.
  • Ensure your emails can make sense independent of your images: you don't have to leave your subscribers agitated because of an image that refused to load. Some subscribers may turn off automatic image loading. So it would help if you considered this when sending HTML emails, so don't rely only on images to communicate your message.

5. Ensure that you test your email elements

You won't know how your email performs across various devices and systems if you don't test them.  You can begin to identify inconsistencies and loopholes in email structure at every stage of the development process. This will help to ensure that you deliver the best performing HTML emails to your subscribers.

6. Consider the development structure of your HTML emails

The best practices are not restricted to just design. There are also some factors to consider when coding HTML emails. Here are some tips you can apply:

  • Avoid complex CSS. You can do this by avoiding compound style variations. For example, font: (#000 12px Arial, Helvetica, sans-serif;”) complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements).
  • Use technologies other than JavaScript or flash, for they are usually not supported by most email clients.
  • Use element attributes such as cell padding and width to set table dimensions.

Key Practices When Building HTML Email

Now that you've learned some of the best principles of designing and building HTML email templates. Let's go more in-depth into practices involved in building HTML email templates.

1. HTML tables for layout

Using tables during the development process can help keep your layout simple and consistent. Using "divs" could lead to positioning issues in different email clients. So tables are safer because they work in all email clients and are ideal for layout consistency. Here are some tips you can apply when using tables:

  • Use a container table to apply background color
  • Avoid empty table cells because some email clients will interpret them differently.
  • inline CSS instead of style sheets or <style> blocks.

2. Images and media

Another thing about HTML emails is that some email clients will display images by default while some won't. Whatever the outcome, you need to ensure that your emails are displayed flawlessly.

  • Ensure you include good alt text for all your images so your subscribers can know what the image is about—for example, a discount offer.
  • Use image editing tools such as photoshop and image optic to optimize your images.
  • For devices with retina displays, supply an extra-large image (1.5px to 3px).
  • For email clients such as Outlook, you need to indicate the specific width of an image with the width attribute. If you don't, Outlook may render the width of the image and break your email.
  • Ensure that you compress your images and videos and upload them to a content delivery network.
  • Avoid float tags. Instead use align tags. For example, <img src="image.jpeg" align="right">

Video content

We know that Andriod OS, Gmail, Outlook and Apple mail support in-video content in emails. If you're using HTML5 video, know that not all clients support it. However, it's possible with a fallback image. For better results, use a thumbnail that links back to your email copy. You can also use media queries to display or hide a video.

3. Fonts and special characters

It's a good practice to set your email with your preferred font. If you don't, many email clients will replace it with their default styling. Here are some popular fonts you can use in your HTML emails.

  • Arial
  • Georgia
  • Time New Roman
  • Verdana
  • Courier new
  • Tahoma

Remember to encode special characters because email clients render special characters differently. A good way around this is to test before sending.

4. Preheader text

It would help if you had the right incentive to make your subscribers open your email, where the Preheader text comes in. In HTML emails, some clients display preheader text next to or just beneath the subject line. For example, Outlook, Gmail and ios.

Emails clients usually select the first line of text in the copy of your email and display it as a preview text. This means that you need to leverage this by using compelling words to drive your users to take action.

5. Testing HTML emails

When building HTML emails for the first time, there's a chance that an error might occur. It could be a typo or a rendering issue. Either way, you need to correct the mistake. Testing your emails is usually the best way to identify the problems with your HTML emails. Here are a few tips you can apply when testing your emails:

  • A/B tests various types of copy as well as subject lines and call-to-actions.
  • Automate tests using tools such as litmus
  • Pre-send your email to ensure that it's deliverable, accessible and displays well across various devices.

There are two ways you can test your emails: DIY or Email testing software. Do-it-yourself can be great to create an account with different email clients and send your emails to yourself. However, the process can get overwhelming, especially if you're dealing with a lot of emails.

If you want to save yourself the manual workload, you can automate the software testing process. Before you begin testing different email clients, it'll be helpful to know the email clients used mainly by your audience.

With the Engage, you can track which device your customers or subscriber is using, their browser and email client. You can also test your HTML emails before sending them to your customers or subscribers.

Track which device or operating system your customer is using on Engage

6. Accessibility

Here are some tips you can apply for improved email accessibility :

  • If you don't intend to use alt text, include the alt=" " so that your subscribers know that no text is meant to be there.
  • Use the role attribute for headers and footers.

Simple HTML Email Template Examples

This article wouldn't be complete without going through some HTML email templates for inspiration. Whether you decide to build your HTML email template from scratch or not, you'll find some good examples to guide you through the development process. There are so many HTML email templates on the web for us to cover.

However, we've selected some of the best templates that are free and provide a responsive user experience.

1. Black Friday HTML email template

This black Friday HTML email template uses a great blend of bold colors with detailed responsive columns. The design also features clear call-to-actions that are hard to miss. You can easily add images and text using a drag and drop editor that's not hard to use.

2. Fitness HTML email template template

This fitness email template is easily customizable with a transparent white space background to enhance the template's appearance. The design features a fully responsive introductory image to highlight your company's value statement. The template also contains two functional columns with different color scheme options.

So you can easily and quickly choose the right blend of colours that highlight your brand style and color. The clear call-to-action at the end of each column also adds more functionality to the template.

3. Discount sale HTML email template

This free HTML email template is appropriate if you're running a discount sale offer on your company's products. The design features an intuitive drag and drop editor that you can use to add images, text and other visual elements. This email template also contains a subtle color range, and it's been tested across various email clients and devices to ensure that it performs at an optimal level.

Getting Started on HTML Emails

HTML email design and development is no easy task. How you build your email plays a significant role in whether your customers will receive your messages. For this reason, apply the best HTML email practices and principles explained above as you build your emails.

HTML is a smart option when it comes to building emails. With HTML emails, you can tailor your messages to look more professional and consistent with your brand style. Also, when you plan your development process correctly, you will be able to navigate through a complex mix of email clients.

With the Engage, you can send HTML emails to your customers or subscribers, track which device and browser your customers or subscribers are using. Using Engage will help you build a better relationship with your customers and improve your retention rate.

To accomplish this, Engage allows you to:

  • Track how customers interact with your product.
  • Send personalized messages to your customers via Email, SMS, Push Notification and In-app Messages.
  • Create automated messaging workflows or sequences.

It is free to try out. Sign up now.