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.

• 
  Email
  What You Should Know About HTML Email
  Nicole Merlin
• 
  Email Design
  Build an HTML Email Template From Scratch
  Nicole Merlin

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

• 
  Email Design
  Developing HTML Emails Using Divs and “Ghost Tables”
  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.

• 

  The Complete Guide to Designing for Email

  Designing for email is about getting to the point and making the most of the brief chance you have with your subscribers. You only get one shot, so it's...
• 

  How to Formulate an Email Design and Development Strategy

  In this tutorial I’ll explain how to focus your efforts on the email clients and webmail clients being used by your target audience.
• 

  How We Did It: Designing the New Tuts+ Emails

  We recently redesigned all the emails we send out at Envato Tuts+; the newsletters, the various digests, the marketing campaign emails, and the admin emails....

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.

• 
  Email Design
  Creating a Simple Responsive HTML Email
  Nicole Merlin
• 
  Email
  Creating a Future-Proof Responsive Email Without Media Queries
  Nicole Merlin
• 
  Email Design
  Design Considerations for Multiple Email Clients and Devices
  Jaina Mistry
• 
  Email Design
  How We Did It: Building the New Tuts+ Email Templates
  Nicole Merlin

4. Email and Accessibility

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

• 

  A Beginner’s Guide to Email Accessibility (Checklist + Resources)

  This guide will walk you through a checklist of improvements you can make to your emails to make sure they’re as accessible as possible.
• 

  Building an Inclusive Web: Why Accessibility Matters

  In this article I’ll share my point of view about why accessibility is important; from empathy and what is simply “good business”, through to selfishness and...
• 

  Quick Tip: Remember to Style Your ALT Text

  The alt attribute within an image tag provides alternative content for users who can't download images, or who have images turned off altogether. We use this...

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.

• 
  Email Design
  Using Grunt to Make Your Email Design Workflow Fun Again
  Lee Munroe
• 
  Email Design
  How to Create an Email Template With Envato Elements
  Adi Purdila

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.

• 

  Everything Developers Need to Know About Sending Transactional Email

  There are a few key things you need to know about building HTML emails, sending emails and maintaining a good sender reputation score. This checklist will...

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.

• 
  Email Marketing
  How to Boost Email Conversions With Personalization and Dynamic Content
  Justin Khoo
• 
  Email Marketing
  How to Write Great Subject Lines for Your Marketing Emails
  David Masters

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.

• 

  How We Did It: Converting the Tuts+ Emails Into Campaign Monitor Templates

  In the first two parts of this case study series, we’ve seen how the new Envato Tuts+ emails were designed, then built as static HTML/CSS deliverables. In...
• 

  Best MailChimp Templates to Level Up Your Business Email Newsletter 2020

  Here’s a comprehensive and updated collection of the best MailChimp templates available right now. Also, get a few helpful tips on how to put these new...
• 

  18 Great Campaign Monitor Templates for Email and Newsletters

  Here’s some inspiration for your email design from some of the best campaigns out there–plus easy-to-download templates you can use for your business.
• 

  Mastering MailChimp: Best Templates and Email Tips for MailChimp Newsletters

  A collection of the most creative and eye-catching MailChimp templates; plus, we break down the most common terms in email marketing, and give you email...