Home Computer HTML Email Template

HTML Email Template

by stacy

HTML Email Templates: How to Get Started

Chris Hexton

Email marketing is essential for any digital business. Email marketing is an affordable channel that allows us to personalize customer interactions in ways no other channel can.

All these factors contribute to email’s high ROI, with some brands getting $40 per $1. HTML email templates are particularly difficult to create, even though it’s all very well.

This email is an example from Firefox:

It seems pretty simple, right? Here’s the code.

This layout could be displayed online in a simplified version.

It is quite stark. The difference is stark, especially if you are used to creating websites in browsers.

This complexity can be avoided by using plain text emails instead of HTML emails.

Which newsletters will your company send?

Vero allows you to send your customers to use letters. Integrates with Airtable and PostgreSQL. You can send up to 20,000 messages per calendar month for free.

This is how plain text emails look:

These emails still communicate the message, but they might not be the right fit for your brand. HTML emails offer more styling options but are difficult to create.

The problem in creating HTML email templates

Emails can be difficult to create, as there aren’t any accepted guidelines for how they should look.

While the web is controlled by a handful of major browsers, there are many email clients. Litmus estimates that there are approximately 1000 email clients worldwide, 250 mobile email apps, and a lesser number of desktop email applications.

Let Litmus share his thoughts on email rendering.

“Every email sent by marketers has about 15,000 possible renderings (and this is using conservative math).” There are 15,000 ways that your email could be displayed.

It can be difficult to create emails. But it doesn’t have to be. This article will show you how to create responsive emails that are both effective and efficient without spending a lot of time.

How do I create HTML emails?

There are many options for creating HTML emails. Each route has its pros and cons.

Let’s look at them.

1. Using email design agencies

Some businesses also use email design agencies, just as people visit web design agencies to design a website.

This is a good option if you have a small team with limited budgets and still need custom designs.

A few notable email design agencies are:

A professional email agency can create and design templates for your business. Although it is more costly than the other options, it is one of the best ways for your emails to look exactly how you want.

Because you are outsourcing the work, using an email agency can also be more time-consuming. It is important to include a waiting period in the marketing calendar. This will impact your timeline.

2. Drag and drop email editors

This is the easiest option. Drag and drop editors are available to help you create responsive emails.

There is one downside to this: you are limited in how much you can customize your emails. Drag and drop editors are great for creating basic email templates with simple layouts.

This email is an example from Prisma:

With a drag-and-drop editor, I was able to create something very similar.

3. Using pre-designed HTML email templates

Pre-designed email templates work in the same way as to drag and drop editors. However, you can only design your email using the available template. There are many templates online that you can choose from, so your email can look anything you like.

These are some great places to look for HTML email templates:

4. Create a template starting from scratch

This option requires a higher learning curve but gives you complete control over all aspects of your email’s design. You already know HTML and CSS, or are interested in learning them, so you can build HTML templates.

These frameworks make it easier to create HTML templates.

While creating from scratch can be time-consuming, you don’t have to make a new one each time you use a template.

No matter what method you use, there are best practices that you can follow.

HTML email best practice

1. Preheader text: This is usually 50-100 characters and can be found beside the subject line in most email clients. It is important because it can encourage your subscribers to open the email.

Here is an email with a preheader in Gmail

Email clients will usually grab the first line of text from your content and use that as your preheader. However, you can specify what you want it to be.

Preheader text should be an option in your email editor or template.

2. Images: Some email clients block images by default. You should make sure that the reader understands the email without images. If they are unable to see the images, you should add descriptive alt text.

This email is from Microsoft:

The reader can still grasp the essence of the text even though they aren’t visible.

Your image file name is important, but it’s not essential for styling. Long, confusing names can signal spam filters in certain clients. Be sure to keep your images’ names short and meaningful.

Take, for example:

3. Animation and videos: Email animations can only be made using GIF images, CSS animations are not possible. Many email clients, including big ones like Yahoo and Gmail, do not support the playback of videos in emails.

An image that has a play button at the center of it is a simple way to combat this. Clicking the image opens a browser that plays the video.

Which newsletters will your company send?

Vero allows you to send your customers to use letters. Integrates with Airtable and PostgreSQL. You can send up to 20,000 messages per calendar month for free.

Here’s a Platforma 2 example:

4. Buttons: Images don’t load automatically in some email clients so it is best not to use an image as a clickable button. You should instead use HTML buttons (also known as bulletproof buttons).

Adidas’s email is proof that every button is bulletproof.

5. Clients that don’t support the latest web technologies are not supported by email. The rule of thumb is that older code will render better in email clients.

This is how it works:

  • HTML 4 rather than HTML 5
  • CSS 2 rather than CSS 3
  • Instead of divs, tables

HTML 5 will render, but it’s not impossible. Your email might not render correctly on all email clients.

Related Posts

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More