Smashing Newsletter #281: Building HTML Emails

With useful tools and techniques for building bulletproof HTML email, from a code editor for email to resources for dark mode and accessibility. Issue #281 • Tue, Dec. 29, 2020 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, 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]( --------------------------------------------------------------- Table of Contents 1. [Getting Started With HTML Email](#a1) 2. [Responsive Emails Made Easy](#a2) 3. [Bulletproof HTML Email Templates](#a3) 4. [Can I Email...?](#a4) 5. [Upcoming Front-End & UX Workshops](#a5) 6. [A Repository For Email Bugs](#a6) 7. [Email Inspiration](#a7) 8. [New On Smashing Job Board](#a8) 9. [Our Current Most Popular Articles](#a9) --------------------------------------------------------------- #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. [Getting Started With HTML Email]( 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]( [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. [Bulletproof HTML Email Templates]( [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. [Can I email]( 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. [Smashing Online Workshops]( 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. [Email Bugs]( 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! [Email Guides and Techniques]( [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. [Email Guides and Techniques]( 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) --------------------------------------------------------------- #9. New On Smashing Job Board - [Senior Web Designer]( at ZaneRay (Whitefish, Montana) - [Front-End Web Developer]( at Bespoke (Lancashire, UK) - [Principal Software Engineer, Senior Software Engineer, and Developer (React/AWS)]( at Venture Industries Online (Remote) --------------------------------------------------------------- #10. Our Current Most Popular Articles - [What’s Coming To VueX?]( - [How To Optimize Progressive Web Apps: Going Beyond The Basics]( - [Feature Prioritizing: Ways To Reduce Subjectivity And Bias]( --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](