What is HTML Email?

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}

In this quick explainer, I’ll clear up any doubts or questions you have about HTML emails, how to create them, and how to send them.

What is HTML Email?

Your email program or service can send and receive emails in two formats; plain text and HTML. Plain text has no formatting at all, not even bold or italics. Technically, if an email has any styling at all, like bold text, different fonts, colors or backgrounds, then it is an HTML email.

Plain text has no formatting at allPlain text has no formatting at allPlain text has no formatting at all
Plain text has no formatting at all

But when people talk about HTML email they’re generally talking about specially designed or marketing emails. These are created using the same coding languages as those used for building websites; HTML and CSS.

Have you ever received a specially designed promotional message or newsletter in your inbox, and wondered how it was made and sent?

This guy hasThis guy hasThis guy has
This guy has

Well, you can design and build your own HTML email, or you can use an HTML email template that someone else has built then add your own text and images.

Building an email in HTML is specialized, and it’s not exactly like building a web page. There are hundreds of different services and apps that people use to read their email, like Gmail, Yahoo!, and Outlook, and each service displays HTML and CSS slightly differently. On top of this, to prevent email viruses and scams, these services won’t let you include things that can pose a security risk, like JavaScript or forms.

How to Create Your Own Email Templates

To learn more about HTML email development, check out these tutorials on Tuts+:

And if you’re familiar with building for the web, instead of building an email template from scratch you can also use a framework like MJML which will do a lot of the heavy lifting for you.

Email Testing Services Are Vital

Once you’ve finished creating your email it’s important to use a testing service like Email on Acid or Litmus, to make sure your email looks perfect when it’s opened in all the different email services that people use.

Download Hundreds of Email Templates on Envato Elements

If you don’t want to build an email template yourself you can buy one, or sign up to Envato Elements which gives you unlimited access to hundreds of email templates that have already been tested and can be used straight away. 

What is an ESP?

To send your finished email you’ll need an ESP, or Email Service Provider. Most ESPs offer free templates that you can use as well, and some of them have built-in testing services too.

So what exactly is an ESP and why would you need one? You might think you can send your HTML email using your normal email service, like Gmail or Outlook, but unfortunately that’s not the case. Most email services don’t provide a reliable way for you to upload your email and send it; they strip out important code when it’s sent. This means your layout will look wrong, elements will be missing, and in most cases your images will be sent as attachments. This is not the look you’re going for…

copied and pasted email contentcopied and pasted email contentcopied and pasted email content
Original email (right) and pasted into Gmail (left)

Additionally, you can only send a limited number of emails per day from a regular email service. For example, Gmail limits customers to 500 emails per day. Generally, if you’re sending promotional emails, you’ll want to send them to hundreds, thousands, even millions of people, and this calls for specialized infrastructure.

ESPs are companies which provide this infrastructure. Companies like HubSpot, Campaign Monitor, and MailChimp manage the powerful and specialized servers necessary to send large volumes of email. They all have loads of features, but most importantly:

  • they help you manage the names and addresses of the people you want to email
  • they make sure your HTML email is delivered intact and displays correctly
  • they allow you to send personalized, automated, and scheduled emails
  • they help make sure your emails don’t fail to deliver or get marked as SPAM

Email SPAM Laws

Lastly, and most crucially, before you send a single email you always need to make sure you have permission to contact the people you’re emailing. It’s against SPAM laws to contact people without their permission.

spamspamspam

Conclusion

So, to get started sending HTML email:

  • brush up on spam and email laws that apply to you
  • obtain permission from the people you want to email
  • sign up to an ESP
  • find a template or build one yourself
  • test it thoroughly
  • and send!

To get sending in record time subscribe to Envato Elements which gives you unlimited downloads of professionally created email templates, as well as illustrations, photos, icons, and millions of other creative digital assets.

And don’t forget to subscribe to the Tuts+ Youtube channel for more helpful explainers, courses, and tutorials.

Email Template Collections on Tuts+

Check out these templates to start your first email campaign:

Leave a comment

Your email address will not be published.