1. Web Design
  2. Learning Guides

Mastering HTML Email

The subject of HTML Email can make even the most seasoned web designers’ palms clammy; it’s a minefield of hacks, pitfalls, and means disregarding all the things we’ve learned about web standards during the past decade.

This guide will take you through the fundamentals, exploring development techniques, workflow, tools, resources, marketing considerations, and design approaches. By the end, you’ll have gained enough knowledge and confidence to tackle HTML email properly.

1. Start With Learning Email Basics

Nowadays, many email clients will handle semantic HTML markup to a certain extent, but to be absolutely sure your emails are rendered properly you’ll still need to be familiar with building layouts with our friend the <table>. So put all your knowledge of web standards to one side for a moment, and let Nicole Merlin explain the basics of HTML email development.

Take your understanding of using the table element up a level with this guide by Paul Airy:

2. Designing for Email

By this point you’ll have realised that building HTML emails requires a different mentality to developing HTML for the web. That change in approach starts at the design stage; you’ll need to think about how your design will be built, how UX for email differs from UX on the web, the practicalities of reading email on mobile devices, and much more.

3. Responsive Email Design

According to Litmus’ study of email analytics in the first half of 2018, most emails are read on iPhones and in Gmail.

“Mobile remains the most popular reading environment” – Litmus

The domination of these platforms is quite striking, but the range of clients and devices means that responsive design for email couldn’t be more important. The following tutorials will give you everything you need to know.

4. Email and Accessibility

Accessibility is a vital part of how we build the web, and that applies equally to email. 

5. Email Development Workflow Tips

As we’ve covered many times in the tutorials so far in this guide, designing and developing email can be difficult, especially when you compare the process to that of building websites. The tips in this section will help you adjust your workflow and tools to alleviate the headaches and make the process as smooth as possible.

6. Transactional Email

There’s more to email design than newsletters and marketing–transactional emails are the unsung heroes which keep your favorite services and online stores running smoothly. Login confirmations, sales invoices, purchases, lost password notifications, the list goes on.


7. Marketing

Marketing is a huge subject in itself, but much of it does cross over into the design world. These tutorials will get you started thinking about marketing and email design, UX, understanding your audiences, and ultimately getting those conversions.

8. Email Service Providers (ESPs)

All of the design and development we’ve covered so far will likely be leading to this point: an email campaign. Whether you’re using MailChimp, Campaign Monitor, ActiveCampaign, or one of the many other service providers available, the tutorials and resources in this section will help you reach your audience as effectively as possible.


Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.