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.
- EmailWhat You Should Know About HTML EmailNicole Merlin
- Email DesignBuild an HTML Email Template From ScratchNicole Merlin
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.
The Complete Guide to Designing for Email
How to Formulate an Email Design and Development Strategy
How We Did It: Designing the New Tuts+ 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 DesignCreating a Simple Responsive HTML EmailNicole Merlin
- EmailCreating a Future-Proof Responsive Email Without Media QueriesNicole Merlin
- Email DesignDesign Considerations for Multiple Email Clients and DevicesJaina Mistry
- Email DesignHow We Did It: Building the New Tuts+ Email TemplatesNicole 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)
Building an Inclusive Web: Why Accessibility Matters
Quick Tip: Remember to Style Your ALT Text
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 DesignUsing Grunt to Make Your Email Design Workflow Fun AgainLee Munroe
- Email DesignHow to Create an Email Template With Envato ElementsAdi 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.
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 MarketingHow to Boost Email Conversions With Personalization and Dynamic ContentJustin Khoo
- Email MarketingHow to Write Great Subject Lines for Your Marketing EmailsDavid 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
Best MailChimp Templates to Level Up Your Business Email Newsletter 2020
18 Great Campaign Monitor Templates for Email and Newsletters
Mastering MailChimp: Best Templates and Email Tips for MailChimp Newsletters
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weekly