Smashing Newsletter: Issue #281

Editorial

Most people don’t like building HTML emails. We often think of them as being clunky, outdated, and just painfully difficult to get right. It’s not surprising: every email has more than 15,000 different renderings, with email clients behaving inconsistently, with all kinds of surprises every now and again. Not to mention limited CSS support, lack of JavaScript support, images that are disabled by default, and infamous table-layouts. Yet still, every now and again, we have to create HTML emails.

In this newsletter issue, we’d like to dive into some of the HTML email tools and resources to make it a bit easier for you to design and build emails.

And if you’d like to dive a bit deeper into the (undoubtedly) fascinating world of HTML email, Rémi Parmentier will be running a fully-fledged online workshop on Building Modern HTML Emails on Feb 2–10, diving into common gotchas, bugs, Outlook and Word’s rendering engine and explaining how to build and test accessible responsive HTML emails.

— Vitaly (@smashingmag)

Getting Started With HTML Email
Responsive Emails Made Easy
Bulletproof HTML Email Templates
Can I Email…?
Upcoming Front-End & UX Workshops
A Repository For Email Bugs
Email Inspiration

1. 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.

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. (vf)

2. Responsive Emails Made Easy

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 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. A library of standard components saves you extra time and lightens your email code base. And if you want to build your own, Modular Template System Guide might help, too. Promising! (cm)

3. Bulletproof HTML Email Templates

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.

Cerberus and HTML Email provide small collections of reliable, solid patterns 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.

Stripo, Chamaileon, Postcards, Topol.io and Bee Free 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. (vf)

4. Can I Email…?

A handy tool that belongs in everyone’s toolset who finds themselves wrangling HTML email — be it every now and then or regularly — is caniemail.com. Inspired by the successful concept of caniuse.com, Can I email lets you check support for 168 HTML and CSS features across 34 email clients.

You can enter a feature to see how well it is supported, check the feature index, compare email clients, or view an email client support scoreboard that ranks email clients based on their support. The complete data is also available as a JSON file. One for the bookmarks. (cm)

5. Upcoming Front-End & UX Workshops

We’ve just announced our new front-end & UX workshops on HTML Email, form design, SVG animation, design systems and new front-end adventures in 2021.

Our Smashing Workshops are filled with practical examples, video recordings and friendly Q&A sessions. There are still some early-birds left, with a lil’ friendly discount, so take a look and perhaps join us as well! (vf)

6. A Repository For Email Bugs

Apple Mail not showing embedded SVGs, Gmail not displaying emails at full width, Outlook changing the behavior of animated Gifs — we all know how weirdly email clients sometimes behave.

To help you understand what’s going on when you come across bugs like these, Rémi Parmentier maintains Email Bugs, a GitHub repository for weird email client behaviors. It not only makes the life of email designers easier by providing a place to discuss bugs but also tries to reporting each bug to the concerned company and fix them for good. But just in case it’s not possible, How to Target Email Clients provides an overview of workarounds to target specific email clients. (cm)

7. Email Inspiration

It might seem like just because HTML email feels quite ancient and outdated, so are possibilities of what we can do with HTML email. However, there are plenty of resources, blogs and podcasts featuring new email techniques — some of them often being on the very creative side of things!

Litmus Blog, CampaignMonitor blog and HTML Email feature plenty of articles and podcasts with best practices, tips, resources, and even podcasts on HTML email. And if you need a bit of inspiration for recent emails, sorted by industry, Really Good Emails and EmailLove have got your back, too. (vf)

8. Accessible Emails

With email, where do we stand in terms of accessibility? Do we announce emails properly to screen readers? What about dark mode? Accessible Email repo highlights a number of articles, tools, presentations and resources about accessibility — not only for email, but mostly specifically for it.

With Accessible-Email.org, you can analyze sent campaigns and check for accessibility improvements. With Dark Mode for Email Simulator, you can check how your email looks like in dark mode. And if you’d like to bring it all together, Parcel is a code editor built for email development, with live preview, impairment emulation, CSS inlining, tests and public shareable links for your team. (vf)

December 29, 2020 Smashing Newsletter: Issue #281

Previous Issues