PROFESSIONALLY OPTIMIZED WEBSITES STARTING AT $995
Our team of SEO Web Design gurus are standing by to assist you achieve your online marketing goals.

+1-971-599-3330

REQUEST QUOTE
SEO Web Design, LLC aims to improve business by delivering effective solutions based on innovative technologies and professional designs. Discover the variety of services we offer and convince yourself on the basis of the latest works that we've done. We love building fresh, unique and usable websites optimized specifically for your niche.

Responsive Web Design

SEO / SEM / Social Media

Conversion Rate Optimization

Email Marketing

Online Presence Analysis

Web Hosting
Top
SEO Web Design, LLC / Web Design  / A Complete Guide To HTML Email

A Complete Guide To HTML Email

In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS generators[1], SVG generators[2] and accessible front-end components[3]. This time we look into templates and tools for building and designing HTML emails. Don’t miss the next one[4].

Table of Contents

Below you’ll find quick jumps to particular components that you might need. Scroll down for a general overview. Or skip the table of contents[5].

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[6]. 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[7] as well.

How to Code HTML Emails for Any Device
If you are new to HTML Email coding, the guide by Caity G. O’Connor[8] is a good place to start.

Alternatively, How to Code HTML Emails for Any Device[9] 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[10] (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[11] 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[12].

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[13] 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[14] makes the coding of responsive emails a little bit more convenient.

MJML[15] 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[16].

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[17] 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[18] 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[19]) that you can start with right away.

BYOHTML coding with Maizzle
An explanation of how Maizzle users ‘bring their own HTML’. (Image source: Maizzle[20]

Maizzle[21] 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[22] as well.

Bulletproof HTML Email Templates

Cerberus[23] and HTML Email[24] 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[25] allows you to build responsive HTML email templates with pre-built grid options and basic components, supported in over 60+ email clients.

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

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

Stripo[29], Chamaileon[30], Postcards[31], Topol.io[32], GoodEmailCode[33], Pixelbuddha[34] and Bee Free[35] all feature plenty of free HTML email templates, Litmus provides Responsive Email Templates[36] for newsletters, product updates and receipts, and CampaignMonitor has a free HTML email template builder[37] with drag’n’drop functionality.

HTML Email Feature Support: 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[38]. Inspired by the successful concept of caniuse.com[39], Can I email lets you check support for 179 HTML and CSS features across 31 email clients.

Can I Email...
Can I email highlights web features and their support in HTML 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.

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
Meet Email Bugs, a growing repository of, well, email bugs.

To help you understand what’s going on when you come across bugs like these, Rémi Parmentier maintains Email Bugs[40], 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[41] provides an overview of workarounds to target specific email clients.

Mailto Link Generator

Good old HTML links can do more than what we usually give them credit for. We might be used to mailto: prefix, but actually generating the code can be quite annoying. Mailtolink.me[42] does one thing, and it does it well: it generates the snippet for the mailto links including CC, BCC, subject line and body text.

Mailto Link Generator
A simple doing done one task well: Mailto Link Generator takes good care of mailto: links.

Mailto Selection Prompt

Sometimes when you click on an email address, it might open an application that your customers aren’t really using. That’s why it’s common to copy-paste email addresses instead of clicking on the links directly. To avoid frustration on the other end, we can use Mailgo[43] and MailtoUI[44].

Mailgo
Mailgo[45] opens a prompt to allow customers to send email in their favorite client, or just copy the email address.

Instead of opening a native email client, both tools prompt a modal window, allowing the user to choose one of the preferred services, or copy-paste the link. Additionally, Mailgo can address all tel links as well, allowing them to open Telegram, WhatsApp, Skype, call as default or copy the phone number — and it supports dark mode, too.

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[46], blogs and podcasts featuring new email techniques — some of them often being on the very creative side of things!

There is no shortage in HTML email showcases out there: Email Love[47] highlights thousands of them.

Litmus Blog[48], CampaignMonitor blog[49] and HTML Email[50] 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[51] and EmailLove[52] have got your back, too.

  • You don’t need to comb through your own email inbox to find HTML email design inspiration. Email Love[53] has rounded up a fantastic selection of inspiring emails from top companies.
  • Really Good Emails[54] makes it easy to search for HTML email inspiration. You have the choice of exploring the collection chronologically or you can narrow down the results based on what type of email it is (e.g. coupon, free trial), what the goal is (e.g. customer rewards, thank you), the company name or category and so on.
  • Not enough? There is also HTML Email Designs[55] and HTML Email Gallery[56].
Really Good Emails
Really Good Emails[57] enables users to filter through over 7000 designs.

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[58] highlights a number of articles, tools, presentations and resources about accessibility — not only for email, but most specifically for it.

Accessible Email repo
Accessible Email Repository[59] provides hundreds of resources and tools to test and improve the accessibility of your emails.

With Accessible-Email.org[60], you can analyze sent campaigns and check for accessibility improvements. With Dark Mode for Email Simulator[61], you can check how your email looks like in dark mode.

Inline CSS and Transform HTML Emails

If all you need is a clean space to transform your HTML and CSS, Alter.Email[62] is a reliable option. With the tool, you can choose a few “transformers” — e.g. inline CSS and clean up the code, remove unused CSS, as well as format HTML and even prevent widow words. Alternatively, you can also use Postdrop[63] which also allows you to minify and inline CSS and send a test email as well.

Alter.Email
A fantastic email tool when you need that level of details: Alter.Email[64] allow you to change HTML on the fly. (Image source: Alter.Email[65])

Remove Unused CSS From Email Templates

Writing CSS isn’t a particularly exciting task with HTML Email, scattered with !important and inline styles all over the place. To remove unused CSS from email templates, there’s Email Comb[66]. The tool allows you to add classes and IDs you’d like to ignore, choose if you’d like to minify it and remove comments, and it shows what exactly it has removed.

Email Comb
Cleaning up your HTML email: Email Comb[67] removes what you don’t need, but you can add classes to ignore.

Cheatsheet For Targeting Email Clients

Email clients modify and remove some of your HTML and CSS, often mercilessly. If one of the email clients doesn’t behave quite as expected, you might want to treat it separately. A cheatsheet for targeting email clients[68] allows you to pick a target email client and at least attempt to address it directly. It might not work all the time as email clients change all the time, but it’s something that’s worth giving a try.

How To Target Email Clients
Just in case you really need it: targeting email clients[69] with hacky CSS selectors.

Everything HTML Email Resources

Thebetter.email[70] provides a growing repository of useful email marketing resources, including people, learning sites, tools, details about email service providers, newsletters, code and interactive email resources. Hand-picked by Jason Rodriguez who’s been in the industry for years and has spent a lot of that time wading through the muck to find the good stuff.

Thebetter.email
Everything from templates to marketing resources on TheBetter.email[71].

Email Marketing Resources

If you need to dive deep into the trenches of HTML email, best practices and email marketing, CampaignMonitor Guides[72] and Mailchimp Guides[73] have plenty of resources to get started. Indeed, some of them will be product-specific, but they’re also more general guides around best practices for sending emails, design guides, delivery tips, anti-spam requirements and plenty of other topics along these lines.

Oracle Email Marketing Trends
Thorough guides around building and marketing for email, as well as email marketing trends[74], by Oracle.

And if you are looking for ongoing trends in email marketing, Oracle’s Email Marketing Trends[75] includes plenty of videos around email deliverability, modular email architecture, email accessibility and also email marketing.

Dark Mode In Gmail And Outlook

We’ve all got used to the dark mode in many apps and websites out there, but what about dark mode support in HTML email clients? We could, of course, serve the same email to all subscribers, but if you are used to dark mode on your operating system, a bright email might rather be offputting and encourage abandonment.

The Developer’s Guide to Dark Mode in Email[76] highlights some of the important guidelines to keep in mind when you are building a dark mode version of your HTML email. It explains how to target dark mode, how to deal with images and general browser support (which is pretty good!).

The Developer’s Guide to Dark Mode in Email
The Developer’s Guide to Dark Mode in Email[77]: thorough and comprehensive.

Rémi Parmentier goes a little bit deeper, showing how to fix Gmail’s dark mode issues with CSS Blend Modes[78]. Gmail enforces a change of any light text color to dark text color. If you need to fix it, Rémi has come up with a creative use of mix-blend-mode (supported in Gmail) to maintain the light text color if you need to. And if you need to ensure that your emails respond to Outlook.com’s dark mode, Remi has got you covered[79], too.

Fixing Dark Mode in HTML emails
Fixing Dark Mode in HTML emails: Rémi Parmentier get creative to fix Gmail’s dark mode issues with CSS Blend Modes[80].

HTML Email Development IDE

If you spend quite a bit of time with HTML email, you might want to use a dedicated HTML Email editor. Parcel[81] is just that: a code editor built specifically for coding and designing emails. It provides live previews, so you can see in real-time what you are building, and it also has accessibility features out of the box, so you can check accessibility issues while you are building or designing the email. Plus, the tool also allows you to collaborate with your team and run email tests directly from the tool.

Parcel
HTML Emails can be messy and difficult to build and maintain. HTML Email IDEs such as Parcel[82] help you keep it all in order. (Image source: Parcel[83])

Alternatively, you can also take a look at Mail Studio[84], a sophisticated desktop application (for Windows, macOS and Linux) that combines visual and code editing in one email IDE.

The app comes with a library of components, from headings to navbars and accordions, a couple of responsive email templates, Google Fonts integrations, built-in Sass support, command palette, collaboration tools, email previews and even integration with email service providers such like MailChimp, Campaign Monitor and Sendgrid. Figma integration is supposed to be coming soon.

Generate A Full-Page Email Preview

If you need a full-page preview of your HTML Email, Emailpreview.io[85] might be just what you need. You can copy/paste HTML, or import an EML file that you’ve just received, and the tool outputs a fully rendered image of your email. You can choose the device width as well. A helpful little tool to keep nearby.

Emailpreview.io
Quick and easy: Emailpreview.io[86] generates a full-page preview of your emails.

Mail Tracker Blocker

Most marketing emails include trackers in HTML email, so they can track how often, when and where customers open emails. MailTrackerBlocker[87] acts pretty much as an ad-blocker for browsers, but works with email clients. The tool labels who is tracking customers and removes tracking pixels before they can be displayed, so you can still load all remote content and keep your behavior private. Currently only available for Apple Mail on macOS 10.11 – 11.x (shoutout to Jeremy Keith!).

MailTrackerBlocker
You can use an ad-blocker to block third-party tracking, and for Apple Mail ther eis also MailTrackerBlocker to block tracking pixels in emails.

Making Email Better

Overflowing inboxes, spam with backlink requests, people emailing you on a Friday afternoon and following up on Monday morning — there are a lot of things that make dealing with email unpleasant. However, since there is no getting around email, there’s only one solution: Let’s improve the situation together. With that in mind, Chris Coyier is running “Email is Good[88]”, a site about email productivity.

Email Is Good
A fantastic little resource around email productivity. Emails might be difficult to code, but they aren’t inherently bad.

“Email is Good” takes a look at things that make emails annoying, tips and ideas on how we can do better, as well as little anecdotes that everyone can relate to. A great opportunity to reflect on how each one of us deals with email and the reactions that our email habits might provoke on the recipient’s side.

Wrapping Up

We probably have missed some important and valuable techniques and resources! So please leave a comment and refer to them — we’d love to update this post and keep it up-to-date for us all to be able to get back to it and build HTML email better and faster.

Stay smashing!

Further Reading

Smashing Editorial(il)

References

  1. ^ CSS generators (www.smashingmagazine.com)
  2. ^ SVG generators (www.smashingmagazine.com)
  3. ^ accessible front-end components (www.smashingmagazine.com)
  4. ^ Don’t miss the next one (www.smashingmagazine.com)
  5. ^ skip the table of contents (www.smashingmagazine.com)
  6. ^ how to start with email coding (explore.reallygoodemails.com)
  7. ^ detailed guide to building and sending HTML emails (www.smashingmagazine.com)
  8. ^ guide by Caity G. O’Connor (explore.reallygoodemails.com)
  9. ^ How to Code HTML Emails for Any Device (www.campaignmonitor.com)
  10. ^ video course on HTML Email (thebetter.email)
  11. ^ #emailgeeks (email.geeks.chat)
  12. ^ #emailgeeks on Twitter (twitter.com)
  13. ^ HEML (heml.io)
  14. ^ MJML (mjml.io)
  15. ^ MJML (mjml.io)
  16. ^ step-by-step tutorial through MJML (mjml.io)
  17. ^ Modular Template System Guide (blocksedit.com)
  18. ^ Maizzle (maizzle.com)
  19. ^ Maizzle Starters (maizzle.com)
  20. ^ Maizzle (maizzle.com)
  21. ^ Maizzle (maizzle.com)
  22. ^ MJML (mjml.io)
  23. ^ Cerberus (tedgoas.github.io)
  24. ^ HTML Email (htmlemail.io)
  25. ^ EmailFrame.work (emailframe.work)
  26. ^ Codedmails (codedmails.com)
  27. ^ Codedmails (codedmails.com)
  28. ^ code is all available on Github, (github.com)
  29. ^ Stripo (stripo.email)
  30. ^ Chamaileon (chamaileon.io)
  31. ^ Postcards (designmodo.com)
  32. ^ Topol.io (topol.io)
  33. ^ GoodEmailCode (www.goodemailcode.com)
  34. ^ Pixelbuddha (pixelbuddha.net)
  35. ^ Bee Free (beefree.io)
  36. ^ Responsive Email Templates (litmus.com)
  37. ^ free HTML email template builder (www.campaignmonitor.com)
  38. ^ caniemail.com (www.caniemail.com)
  39. ^ caniuse.com (caniuse.com)
  40. ^ Email Bugs (github.com)
  41. ^ How to Target Email Clients (howtotarget.email)
  42. ^ Mailtolink.me (mailtolink.me)
  43. ^ Mailgo (mailgo.dev)
  44. ^ MailtoUI (mailtoui.com)
  45. ^ Mailgo (mailgo.dev)
  46. ^ there are plenty of resources (airtable.com)
  47. ^ Email Love (emaillove.com)
  48. ^ Litmus Blog (www.litmus.com)
  49. ^ CampaignMonitor blog (www.campaignmonitor.com)
  50. ^ HTML Email (htmlemail.io)
  51. ^ Really Good Emails (reallygoodemails.com)
  52. ^ EmailLove (emaillove.com)
  53. ^ Email Love (emaillove.com)
  54. ^ Really Good Emails (reallygoodemails.com)
  55. ^ HTML Email Designs (htmlemaildesigns.com)
  56. ^ HTML Email Gallery (htmlemailgallery.com)
  57. ^ Really Good Emails (reallygoodemails.com)
  58. ^ Accessible Email repo (github.com)
  59. ^ Accessible Email Repository (github.com)
  60. ^ Accessible-Email.org (www.accessible-email.org)
  61. ^ Dark Mode for Email Simulator (proofjump.com)
  62. ^ Alter.Email (alter.email)
  63. ^ Postdrop (app.postdrop.io)
  64. ^ Alter.Email (alter.email)
  65. ^ Alter.Email (alter.email)
  66. ^ Email Comb (emailcomb.com)
  67. ^ Email Comb (emailcomb.com)
  68. ^ cheatsheet for targeting email clients (howtotarget.email)
  69. ^ targeting email clients (howtotarget.email)
  70. ^ Thebetter.email (thebetter.email)
  71. ^ TheBetter.email (thebetter.email)
  72. ^ CampaignMonitor Guides (www.campaignmonitor.com)
  73. ^ Mailchimp Guides (mailchimp.com)
  74. ^ email marketing trends (blogs.oracle.com)
  75. ^ Oracle’s Email Marketing Trends (blogs.oracle.com)
  76. ^ The Developer’s Guide to Dark Mode in Email (www.campaignmonitor.com)
  77. ^ The Developer’s Guide to Dark Mode in Email (www.campaignmonitor.com)
  78. ^ fix Gmail’s dark mode issues with CSS Blend Modes (www.hteumeuleu.com)
  79. ^ covered (www.hteumeuleu.com)
  80. ^ fix Gmail’s dark mode issues with CSS Blend Modes (www.hteumeuleu.com)
  81. ^ Parcel (useparcel.com)
  82. ^ Parcel (useparcel.com)
  83. ^ Parcel (useparcel.com)
  84. ^ Mail Studio (mailstudio.app)
  85. ^ Emailpreview.io (emailpreview.io)
  86. ^ Emailpreview.io (emailpreview.io)
  87. ^ MailTrackerBlocker (github.com)
  88. ^ Email is Good (email-is-good.com)

Powered by WPeMatico

[email protected]

Smashing Magazine is a website and eBook publisher that offers editorial content and professional resources for web developers and web designers.

No Comments

Sorry, the comment form is closed at this time.