Subscribe to our Newsletter

Get articles, advice and tips about:

You can read more about our privacy policy and how we use your personal data here

HTML Emails

HTML Emails the Easy Way

by Frida Nyvall

Email coding has generally had a bad reputation, known for being stuck in old-fashioned coding patterns and practices:

It’s coding like it’s 1999!

Chris Coyier
ShopTalk Show 263

When I realized my business needed a new newsletter template, I did not exactly look forward to deep diving down a vortex of nested tables. But even if the code for creating so-called bullet-proof emails still lacks a lot of the features we take for granted when creating websites, writing it doesn’t have to be just as bad as I imagined.

My goal was to find a reasonably quick and easy workflow for creating a responsive HTML email that looked good across different email clients.

Email Templating Languages

The most popular email templating languages seemed to be MJML and Inky. The big deal with both of these languages is that they offer ways of avoiding having to write nested tables by introducing special markup for creating layout organised in more user-friendly rows and columns. The special templating language markup is then translated into normal HTML, authomagically complete with those pesky nested tables.

Both MJML and Inky offers different ways of installing and using, for example both have Gulp integration or can be used directly from the command line.

Even if the setup and installation seemed pretty straight forward with both tools, I’ve come to never underestimate the time it might take to get front-end tooling running as intended.

Since I just had one email and wanted to get it out as soon as possible, I chose to use Inky because of the very nifty integration with Codepen.

Of course, if you are going to create a large amount of different emails, a more automated workflow would save you time.

Inky with Codepen

On Codepen, there is a starting Inky email template using Inky for laying out the content. You can fork the pen and rewrite the code to suit your needs. When you’re happy with your email you just click the big pink button at the bottom to open a new webpage where you can copy your email translated to plain HTML. Easy peasy!

Sadly, the day I wanted to do this, Codepen was having some bug issues, and the Inky to HTML translation never showed up. It seems to have been fixed since then, yay ?.

Inky with inky-js

Another way to translate your Inky markup to HTML without using the big pink button over at Codepen, is to add this little script at the bottom of your Inky template. When you open your file in a browser, all of the Inky markup has been translated into normal HTML. Even better!

<script src="https://foundation.zurb.com/emails/docs/assets/js/inky-browser.js"></script>

Inky with Gulp

Because some email clients remove css style tags or style links, all css styles have to be inlined in the HTML document.

There are many ways of inlining css, for example using different types of npm packages. There are both packages catering specifically for MJML as well as Inky and stand-alone ones. Sometimes they come with a lot of dependencies, sometimes just a few.

But if you like me want to make the minimal possible effort, you can also use the the Foundation online inliner. No shame in copy pasting! Just remember to add your un-minified styles within style tags in the head of the document.

To watch out for

<th> to <td>

When Inky is translated to HTML, it often makes use of <th> tags. In some email clients, styling can get lost or weird unless some of these tags are changed to <td> tags instead.

Inlining Removes Duplicate Style Rules

When using the Foundation online inliner, multiple styles declaring the same property will be removed. This becomes problematic because: to get the same color on all links across multiple email clients, you will need to make sure there is both an !important rule and a normal rule inlined for the link color.

Media Queries

Remember that a lot of the email clients can’t handle media queries. Mobile email clients are often better at this compared to email clients aimed at desktop usage, so it might be useful to think in terms of @media (max-width){} rather than @media (min-width){}.

Test Real Emails

Last tip might seem obvious, but even so: make sure to view your email using real email clients when testing, because you can be surprised how many edge cases and quirks exist.

If you want to go pro (have a lot of emails to build and test), you might want to consider using Litmus, an email testing service. However if your needs are smaller, you can happily save that subsciption money and either create own send-outs for testing or use email campaigning tools like MailChimp or Campaign Monitor.

Cheat Sheet for CSS Support

When in doubt about whether or not a certain CSS property is supported, head over to Campaign Monitor’s guide on CSS support for the 10 most popular email clients.

Conclusion

Coding HTML emails might never be as quick and easy as one would want it to be, but to prevent frustration building nested tables, using an email templating language is a good start.

If I knew that I frequently had to produce multiple HTML email templates, I would consider investing more time to also look into using MJML and try to add inlining in a complete MJML build task.

However, for building one or two HTML email templates once in a while, I really like the simplicity of using inky-js.

Sometimes development (even front-end!) just like life doesn’t have to be more complicated than you make it ?.

This article was first publishied on Frida Nyvall’s account on Medium.

Tags

More posts

img

Flexbox vs. CSS Grid – When to Use What

img

Responsive Typography with CSS Custom Properties (CSS Variables)

img

CSS Variables or Custom Properties