Hacker News Reader

Comment by ryanbigg | Hacker News Reader

What an excellent resource! (And yes Outlook is a pain and supports so very little!)

We've tried building email templates for notifications for our apps where I work, and it has typically been a pain. We have since swapped to using mjml (https://mjml.io/) to build the templates, and it's working wonders. The output seems the be the most compatible with all different devices that we've tested on.

The other tool we enjoy using is Litmus (https://litmus.com), which allows you to throw in an email template and see what it looks like on all kinds of apps and devices. Other thread here mentions https://testi.at/ as well, which we've also had success with.

All of these have been really invaluable to designing emails for our apps.

View on HN

mjml looks really interesting, thanks for sharing. I wish there was a business reason for orgs to care about accessable and machine readable (I guess OCR is a thing now but still) emails.

I've been using Foundation for Emails[1] for the very small number of emails that I've worked on which required more than just a list of img tags, and I really appreciate it for existing because HTML emails have been stuck in ie6 web days.

[1]: https://get.foundation/emails.html

> I wish there was a business reason for orgs to care about accessable and machine readable emails.

I hope the upcoming EU Accessibility Act will be enough for many organizations to finally make their emails accessible. I disable images by default in my email client, and some emails are pretty much empty without them, without providing any alternative.

I assume most email client support email with both html and txt content. If they don't support html or configured not to display it, the txt version is displayed.

We have a html and txt template for each email we send. It's not exactly double the work, but it's appreciated by some of our customers.

I have my email client configured to display messages as plain text. A large fraction of emails that I receive have a text part that is empty or has some placeholder text. Also, senders often generate the text version by taking the HTML version and just stripping all tags, which means that all links are removed. I wish I could configure my client to ignore the text part completely, and instead to convert the HTML part to plain text, which is what it is doing already if there is no text part.

> I wish there was a business reason for orgs to care about accessable and machine readable

Isn’t the whole point of sending emails to get the recipient to read them? If the recipient can’t read them, you wasted that money and captured no value. Possibly negative value because you just reminded the recipient of how annoying your website is. “Oh right, that vendor with the full-page modal that I couldn’t dismiss, or was it the vendor that had a pretty site that turned gray three seconds after loading for not discernible reason and wouldn’t let me click anything after that? I’ll just shop at Amazon next time even though they’re more expensive and vaguely evil.”

MJML is easily the best tool of its kind and I use it a lot. If anyone is trying to build emails in 2024, it's a major shortcut that helps avoid and mitigate some of HTML email’s biggest headaches.

It can quite quickly lead to clipping in gmail if you’re not careful though.

can you elaborate?

the mjml components unpack to a very large number of html tags. so depending on how you structure the doc it can exceed the gmail doc size with a surprisingly small amount of content

Gmail will clip emails if they’re larger than (I think) 104kb.

Using frameworks like mjml can add a lot of arbitrary markup that’ll rapidly increase the size of your email.

I usually add a minify step to my sends for this reason.

In my experience one of the biggest causes of clipping is styled links with lots of tracking, oddly enough.

While we‘re here I‘d also like to recommend react-email[1] which I‘ve been using for building emails for a while now. The components it offers are more than enough and it‘s definitely better than building mails with <!—MSO—> tags every five lines like we did back in my email marketing days.

[1] https://react.email

Thank you so much for linking testi.at. I’ve been looking for an affordable alternative to Litmus!

> What an excellent resource! (And yes Outlook is a pain and supports so very little!)

So outlook today is the internet explorer of mail?

It literally is, Outlook for Windows uses the IE9 engine to render HTML email, IIRC. And even then not everything is supported.

You aren't trying to send an angular SPA in an email, are you?

Which is an improvement over when it used to use the Word engine to render HTML email, IIRC.

Actually, it uses the Word engine for HTML rendering.

Kind of. Though if outlook magically goes away we'll still make emails with <table> because most clients still do not support even flex-direction. Outlook is just exceptionally bad with stuff like width:100px working on table elements, but not on <div>, or padding working only on specific elements.

Holy shit all of those are awesome links, I'm working on an internal tool and i like to have clean looking notification and alert emails but its a FUCKING NIGHTMARE because everyone uses either Gmail or Outlook and both handle everything so poorly and... weirdly. And oh my god having to use tables... so many tables.

Reply on news.ycombinator.com