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.
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.
> 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 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.”
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.
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.
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.
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.
Hilarious anecdote about this website: the owner once said there are tons of entries in the usage log of people misunderstanding the purpose of the website and inputting celebrities names to try to email them. :D
At first glance I was trying to figure out what this is about but, so far nothing. It's "like caniuse but for email content", ok but, what is caniuse? I don't know if it is worth but, before launching something new, I wish everyone consider to publish a brief section to explain to the average person what this is about.
That's not true and a very much defeatist view. Yes, you can talk with people if they're willing to listen and maybe even respond. Yes, even if they're extremely popular already. Even if they're richer than you.
I know for a fact that Gabe Newell, for example, reads all emails that people send him, and even responds pretty often. So I'm pretty sure other famous people do that
The lower the score, the better. I know many who have a policy of "emails must be in plaintext only, with no attachments unless agreed to in advance; everything else gets deleted automatically."
I disagree. I wish I had more people that fit that filter. Email is broken and just a platform for spam. Even if it might be from someone that I purchased something from once or even regularly, if I did not select a check box to opt-in to receiving your email, it is spam.
It's 2024. Emailing large file attachments is about as old and busted as FTP. There are so many other services to "share" large files. Attachment to email was such a kludgy hack in the first place just shows it was only the best worst idea waiting for better solutions. We have them now.
There's a good case for expanding slightly on plaintext. It's not just decorative - some usecases like Right-to-Left or lists or linked are helped by a little markup, and HTML is good enough.
The problem is going overboard on CSS (maybe none should be allowed) or allowing any javascript at all. I can't recall any email security issue ever which is HTML only without any CSS or javascript.
I know at least two people who send emails where the HTML version is either blank or tells the recipient to stop using a bloated client, and the actual email content is in the plaintext fallback. I think I had to look at the email source in thunderbird to read them.
When I look at the features gmail doesn't support, I see things like "display: none", animation, and other kinds of css which arguably shouldn't be part of an email. The basics are there, so that makes high ranking not necessarily a good target.
Most popular only because it was included with the OS and most IT departments did not allow use of other browsers. Just because it was the most installed does not make it the most popular. There was an old saying, "Internet Explorer: the most used browser to download another browser."
A fully-featured HTML "document" is really an application, not a document at all, so it makes sense that mail clients limit support. But this fragmentation makes me yearn for a real standard here, an official non-application subset of HTML that doesn't allow fetching remote resources or executing code. Just a document format with embedded media, animations, styling, etc.
Readit News
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.
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 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.
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.”
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.
Deleted Comment
[1] https://react.email
So outlook today is the internet explorer of mail?
Deleted Comment
there is money to be made here.
It's 2024. Emailing large file attachments is about as old and busted as FTP. There are so many other services to "share" large files. Attachment to email was such a kludgy hack in the first place just shows it was only the best worst idea waiting for better solutions. We have them now.
The problem is going overboard on CSS (maybe none should be allowed) or allowing any javascript at all. I can't recall any email security issue ever which is HTML only without any CSS or javascript.
Can I Email? - https://news.ycombinator.com/item?id=27112960 - May 2021 (273 comments)
Can I Email: ‘Can I Use’ for email - https://news.ycombinator.com/item?id=20948826 - Sept 2019 (196 comments)
'Can I Use' for Email - https://news.ycombinator.com/item?id=20934601 - Sept 2019 (1 comment)
I get that adtech is interested in using my email as their billboard, but they can fuck right off. Plaintext + attachments or gtfo.
CanIEmail? The answer is generally no.
and select "check all", it'll show you the features that are supported by all the email clients, and separately, which features have mixed support.
These appear to be the few features supported by all clients:
- border-collapse
- font shorthand
- list-style-type
- cm unit
- em unit
- ex unit
- in unit
- mm unit
- pc unit
- % unit
- pt unit
- px unit
- vertical-align
- <del> element
- <div> element
- <h1> to <h6> elements
- <hr> element
- <img> element
- <p> element
- <pre> element
- <span> element
- <strong> element
- <table> element
- valign attribute
- JPG image format
- PNG image format
Deleted Comment