Recently we’ve covered CSS generators, SVG generators and accessible front-end components. This time we look into HTML email, with tools, templates and guides for designers and developers.

Getting Started With HTML Email

If you’re just trying to understand everything that’s happening behind the scenes of a quirky world of HTML email, Caity G. O’Connor has published a wonderful guide on how to start with email coding. The article features courses, tutorials, articles, and just general guidelines to keep in mind when building and designing emails — all in a comprehensive one-page-guide. On SmashingMag, Lee Munroe has published a detailed guide to building and sending HTML emails as well.

If you are new to HTML Email coding, the guide by Caity G. O’Connor is a good place to start.

Alternatively, How to Code HTML Emails for Any Device is a very thorough guide on building a reliable HTML email template, and how to test it — along with a hands-on example of building a newsletter template from scratch. In general, that’s a very solid overview of everything you need to know to get started on the right foot.

Jason Rodriguez has a detailed video course on HTML Email (not free) with pretty much everything to know about them, from accessibility to troubleshooting, workflows and tools.

And if you find yourself struggling with an email issue or just looking out for some help from a community, #emailgeeks is a great starting point. It’s an invite-only Slack community with plenty of channels to discuss code, design, job openings, events and new tools and resources. You can also find many resources shared with the hashtag #emailgeeks on Twitter.

HTML Email Languages and Frameworks

Coding clean, responsive emails that provide a solid experience in all popular email clients can be a time-consuming challenge. HEML is here to change that. The open-source markup language gives you the native power of HTML without having to deal with all of the email quirks. There are no special rules or styling paradigms to master, so if you know HTML and CSS, you are ready to start.

MJML makes the coding of responsive emails a little bit more convenient.

MJML is based on the same idea of simplifying the process of creating responsive emails. The markup language is based on a semantic syntax that makes the process straightforward while an open-source engine does the heavy lifting and translates the MJML you wrote into responsive HTML. You can start out with a step-by-step tutorial through MJML.

A library of standard components saves you extra time and lightens your email codebase. And if you want to build your own, Modular Template System Guide might help, too.

HTML Email Framework Based On Tailwind CSS

Making an HTML email work across email clients ain’t an easy task. Fortunately, there are plenty of reliable tools, templates and frameworks to make it easier to get your work done. For example, Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing. It also provides a few ready-made projects (Maizzle Starters) that you can start with right away.

An explanation of how Maizzle users ‘bring their own HTML’. (Image source: Maizzle

Maizzle uses the Tailwind CSS framework to enable designers and developers to easily prototype emails with HTML and CSS. It also comes with beautiful templates if you’d rather not develop every email from scratch. Alternatively, you might want to consider MJML as well.

Bulletproof HTML Email Templates

Cerberus and HTML Email provide small collections of reliable, solid templates for responsive HTML emails that are well-tested in 50+ email clients, including Gmail, Outlook, Yahoo, AOL, and many others. EmailFrame.work allows you to build responsive HTML email templates with pre-built grid options and basic components, supported in over 60+ email clients.

Codedmails includes 60 email templates and themes, all written in MJML, and tested for compatibility.

Codedmails includes 60 email templates and themes, all written in MJML, and tested for compatibility. The code is all available on Github, and the templates are free to use for non-commercial projects, while MJML source files are provided for an extra charge.

Stripo, Chamaileon, Postcards, Topol.io, GoodEmailCode, Pixelbuddha and Bee Free all feature plenty of free HTML email templates, Litmus provides Responsive Email Templates for newsletters, product updates and receipts, and CampaignMonitor has a free HTML email template builder with drag’n’drop functionality.

#html