16 ms·
Why does email development have to suck? – Explaining all the <tr>'s and <td>'s
- hdodov 3y agoWhen I first got introduced to email development, I remember I wanted to throw myself off a cliff. I couldn't believe how nonsensical everything was. I kept track of everything in a little text document, which I've now turned into a post. If you happen to be starting out with emails, I hope this can get you up to speed with exactly how everything is fucked. And if you're an Outlook survivor, I hope you'll find something you can relate to…
- mdgrech23 3y agoFor the most part you can kind of have header and a footer which you reuse across all email and then just more or less text in the middle. Maybe an image every once in a while. If you can get business partners to agree to that I've found that to be an ideal middle ground.
- scrollaway 3y agoSince you mention MJML: I wrote a little tool called mjmgr which was meant to be a prototype of a MJML email manager for a bunch of providers. So that you can keep the source code of the MJML email checked in, but deploy it as compiled templates across various email template providers. https://github.com/siguelaola/mjmgr https://github.com/siguelaola/mjmgr I only really did sendgrid and mailgun, but as a POC it worked well. Just putting this out there because it's useful but I don't touch it much anymore.
- shortformblog 3y agoThis is cool! My CMS (Craft CMS) has an MJML plugin as well as some good inlining plugins, making it possible to build emails using the CMS as the base. My goal was to have a system that put email templating on equal ground to content display, and MJML was a really key part of that. Love seeing the cool ideas MJML has inspired in the ecosystem.
- dsr_ 3y agoIf you were thinking more clearly, you would want to throw whoever asked for "email development" off a cliff. People choose the wrong targets for violence.
- JohnFen 3y ago> An email is essentially just an HTML document, like a web page, except it's visualized in an email client, rather than a web browser. However, both are capable of rendering, which is the process of turning HTML code into text, rectangles, and images, i.e. the visualization of the content. No, it is not. An email is a text document. That document might be HTML, but it doesn't have to be. And if such email is sent to me, the HTML is never rendered because I don't allow it. The only time I get HTML through email is when it's spam or commercial email, and screw them. Sometimes a real person will neglect to turn HTML off in their mail client, but even then, they aren't really using HTML or are using it for trivial things, so not allowing HTML only makes the garbage email hard to read.
- jgalt212 3y agoI assume your preferred browser is lynx, or maybe you just pipe curl into emacs?
- mr_mitm 3y agoI use mutt and unfortunately in the corporate world you can't just ignore HTML or even HTML only mails. I pipe them to elinks, works 99.9% of the time easily.
- JohnFen 3y agoThat may be the case, but that still doesn't make HTML a part of email itself. It's using email to send/receive HTML.
- JimDabell 3y agoThe ability to use formats other than plain text have been a standard part of email since 1992: https://datatracker.ietf.org/doc/html/rfc1341 https://datatracker.ietf.org/doc/html/rfc1341 HTML email is not merely an HTML file sent by email – it is the email.
- 3y ago
- Finnucane 3y agoI am involved in ebook production, so I can somewhat sympathize, in that ebook reading systems tend to be way behind browsers in what code they support. On the other hand, complex html in emails is mainly for the benefit of the businesses sending you the email, for their commercial purposes, i.e., mostly spam. It rarely has anything to do with communicating useful content to the receiver. If the email is too complex for the client, maybe it shouldn't be in the email.
- NoraCodes 3y agoI don't understand the insistence on building "beautiful" emails. I'm not the kind of person to insist on text-only e-mail, but I do think it's ridiculous to spend lots of time and money making e-mails that look like fully-fledged Web documents. Either your message does have some useful information for the reader, in which case say that and then get out of my way, or it doesn't, in which case you're a spammer. There is no third option.
- blowski 3y agoPerhaps that is your response, but it’s not true of everybody. I’ve done a lot of experiments with different types of email, and beautiful emails always get significantly better response rates.
- NoraCodes 3y agoAh. I think the difference is that when I send emails, I do so to communicate information, rather than to elicit people to buy a product.
- yakshaving_jgt 3y agoAre you relying on the user's email client to convert plaintext URIs into interactive hyperlinks in transactional mail?
- NoraCodes 3y agoNo. As I said, I'm not advocating for plain text only emails, just simple ones.
- franga2000 3y agoEven when communicating important information, using the company design has been the norm since graphic printing was invented. Even something as transactional as a bank statement or court summon will use the sending organization's logo, fonts and colors.
- 3y ago
- globalreset 3y agoText. Just use damn text. Nobody wants to look at your logo. Why biz people have to ruin everything.
- mr_mitm 3y agoI'm pleasantly surprised that amazon actually sends plain text emails. Pretty much every other corporation insists on HTML mails.
- bilalq 3y agoI just checked, and they don't. It's certainly plain looking and without fancy styling/formatting, but they do send content-type text/html. The links and tracking pixel images are why they need HTML, I guess.
- chungy 3y agoThere's an account setting somewhere to always send plain text emails and do not send HTML. I don't know where the setting is, I enabled it many years ago. Been happy with that.
- m463 3y agoThis appears to be untrue. I looked at all the amazon emails in my inbox and they are all: Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: quoted-printable
- bilalq 3y agoDid you actually scroll through all the way? Some emails send both plain text and HTML. I looked through mine and indeed saw text/html for most Amazon emails (including AWS). Some AWS emails like ACM cert renewals were text/plain. Though like someone else said here, you may have changed a setting in your account preferences. The default is still HTML. ------=_Part_4161549_398020174.1685704999675 Content-Type: text/html; charset=utf-8 Content-Transfer-Encoding: 7bit
- alentred 3y agoWhile we are at it, what is the most surefire way to include images into email? How do I make sure that simple images, like logos, are shown in most common email clients?
- gabereiser 3y agobase64 encoded <img src"<base64>">... It's the only way to ensure you're logo is forwarded to every single CC and BCC. edit I take it all back, gmail strips them. I guess as an attachement and then referenced like <img src="cid:<id>">
- javitury 3y agoGmail does not support base64 images according to caniemail https://www.caniemail.com/features/image-base64/ https://www.caniemail.com/features/image-base64/ The most reliable method is to attach a png image to the email and reference it from the body using `<img src="cid:insert_cid_ref_here" `
- SAI_Peregrinus 3y agoYou don't. Common email clients block images by default, because advertisers used them for tracking. Or you make ASCII art of the logo.
- chungy 3y agoOr you include a base64-encoded version of the image. Doing it in-line in HTML should work; I believe <img> tags can also reference an email attachment containing the image (email attachments are base64-encoded anyway...).
- internet101010 3y agoHow do I make gmail automatically scan every incoming email for "unsubscribe" links and click them?
- epolanski 3y agoYou can't get the end result by automation alone but you could automate half of it. 1) Use AppScript from google to find those. 2) Save all the links. 3) Go through them manually (because each service will want you to confirm you did not click by mistake).
- rahkiin 3y agoVirus scanners and other tools like google will fetch any urls in emails to check their target. So having a direct unsubscribe action behind GET of a link breaks your email list as Gmail will unsubscribe everyone
- chungy 3y agoIs this why they always have a confirm button? That's been a pet-peeve annoyance of mine.
- JimDabell 3y agoIt’s a basic part of HTTP. If you follow a link, that’s a GET request. GET requests are supposed to be safe. A user may not have initiated the action if it’s a GET. If you want something that implies “yes, the user made an intentional choice to take action”, then use another verb, like POST.
- pvorb 3y agoThere must be some additional logic behind that, because I see this regularly behind GET requests and I'm not being unsubscribed from everything.
- ndriscoll 3y agoAlternatively, make a filter that applies a label and skips inbox. Occasionally, open the label, select all, and Report Spam.
- shortformblog 3y agoAs someone who has custom-coded newsletters over the years, I understand the other comments here, but to me, email deserves to have room as a creative medium with visual elements, because visuals are often part of the storytelling. MJML has been a real shot in the arm from that standpoint, as it greatly simplified what was possible.
- legitster 3y agoAs someone who is very familiar with designing and developing emails, I think it's actually a pretty happy medium between format and freedom. Not everything needs to be a responsive, javascript-riddled design with interactivity. 600px-wide text with graphics does the job. (The irony is that often plaintext emails perform better) The problem is the lack of consistency between email clients. It's crazy how each email client has a completely different and crazy idea for how to interpret basic HTML. And heaven help you if you have a brand designer breathing down your neck about dark mode...
- amelius 3y agoIf you think sending email is hard, you haven't tried sending whatsapp messages.
- rcbdev 3y agoYou mean using the godawful Facebook API or one of the unofficial Whatsapp-Web based APIs? As someone who has done E-Mail Development and worked with Whatsapp, I'm still very much of the opinion that the former is much worse.
- pvorb 3y agoWouldn't most of these pains go away if you simply could include style tags (not attributes) in the body? I've always wondered why it's possible to include script tags pretty much everywhere but not style tags.
- hdodov 3y agoNope, that doesn't work as well. I tested it before finishing up the article a few days ago. If you put `<style>` in the `<body>`, it gets removed when the email is forwarded and it still looks like shit.
- pvorb 3y agoThat's why I said "if you could". I know it's not valid HTML. For some reason, style tags are only allowed inside the <head/>. My point was that I find it strange that HTML in general has this limit and that script tags are allowed in the <body/> as well.
- hdodov 3y agoI had missed the "if you could" part, sorry. Browsers are actually okay with <style> tags in the <body> and apply the rules inside. Although MDN says they must be placed in the <head> [1]. Email clients seem to be a lot more restrictive, apparently. Or lazy. [1](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style https://developer.mozilla.org/en-US/docs/Web/HTML/Element/st...)
- pvorb 3y agoHuh, I didn't know browsers are behaving this way these days. I believe I tried this several years ago and it didn't work. Or did I just read the standard? I'm not sure. Anyway, I always assumed it wouldn't work.
- rossdavidh 3y ago"So if you want a reasonable portion of users to see your email as intended, let's say 95%, you have to stick to the most basic features of HTML and CSS..." Or, you know, you could just SEND TEXT.
- thiht 3y agoWow so clever. That totally solves the need to show logos and images, colors, formatting, centering things, making things visually appealing, etc. Can you conceive your needs and your basic understanding of an issue is not, in fact, the whole thing?
- rossdavidh 3y agoThere is no "need" to show logos and images, etc. etc. In fact, far from making things visually appealing, all of that tells me (and most other people) "this is an email which I can safely delete without reading", precisely because real people not trying to sell you something rarely do that.
- thiht 3y ago> There is no "need" to show logos and images, etc. …yes, there is. Email is a communication medium, and like in all written communication, an image can be useful. Do I really need to explain that images are useful in human communication? > and most other people According to you I guess?
- maw 3y agoI read the first paragraph and it seemed about right to me: there are many standards at play and many implementations of varying quality; lots of folklore, possibly false, makes the rounds and some of the more important providers are, by reputation at least, known to be difficult; one has to deal with issues of scale and stability and atomicity and reliability; there's spam. In other words, no shortage of interesting if often maddening problems to work on here. Then I saw that this was all just about formatting HTML mail. Oh.
- cypressious 3y agoLast time I had to deal with emails, I've used https://mjml.io/ https://mjml.io/ and was very happy with it. You can version the templates, compile them as part of your build pipeline and it seems to do produce very _adequate_ HTML full of tables that looks good on all clients that we tested.
- andrei_says_ 3y agoHow’s responsive design with mjml? Creating precise multi column responsive designs that work both in outlook and sane email clients is a nightmare.
- marpstar 3y agoI've been using MJML for a few years now, I can't imagine even trying to build a responsive email without it. I don't even have to think about it. You may still have to slice images, but it's grid/column support has worked great for me.
- andrei_says_ 3y agoDoes it support things like rounded buttons in outlook? (Require use vml with hard-coded widths)
- tacone 3y agoDoesn't seem to be able to automatically embed images as data urls though. That would be very very nice. Or perhaps it does and I just missed it myself?
- nottheengineer 3y agoAs an ABAP developer, I thought "that doesn't sound too bad". I definitely need to get out of there before my brain rots further. And for anyone curious: https://help.sap.com/doc/abapdocu_751_index_htm/7.51/en-us/abenabap_words.htm https://help.sap.com/doc/abapdocu_751_index_htm/7.51/en-us/a... Those are the keywords, about a third of that list is obsolete and you usually need multiple of them to make a valid statement. And that's just the tip of the iceberg.
- fdgjgbdfhgb 3y agoHah, that takes me back!! MY first internship was at SAP and I foolishly didn't even ask which technologies I would work with... ABAP is literally the worst lol. This was 2018 btw
- nottheengineer 3y agoAt SAP, you get to use all the latest features and are free to change basically anything. On the customer/consulting side, we get to work around terrible ancient standard implementations and our products need to work on old systems, so 700 syntax it is. And don't get me started on forms.
- cosmodisk 3y agoThat's why I never saw any SAP job paying peanuts...
- hyperman1 3y agoI love how the numbers 1 to 7 are keywords and 8 and 9 aren't.
- JimDabell 3y agoAt first I thought it might have some weird connection to octal, but then I noticed that 0 isn’t a keyword, but ZERO is.
- tinus_hn 3y agoThe answer is, because Outlook is rendering your emails using Word as a browser. Only a monopoly like Microsoft could get away with that.
- Nextgrid 3y ago> Only a monopoly like Microsoft could get away with that. What's the problem there? Unless Microsoft forces you to buy a separate Word license to use their email product, who cares if they reuse some of their own code?
- tinus_hn 3y agoBecause they are a monopoly, they get to ignore the HTML standards and set the defacto standard which is the subpar rendering of Word as an HTML browser. If real competition existed senders would send modern HTML mail using CSS and Outlook would not be able to render half of it. But instead developers have to write email to the antique standards used by Word, with layout using tables and without css. And Microsoft doesn’t care, they get away because Outlook is the monopoly.
- BarbaryCoast 3y agoWell, that explains why, when I try to paste text into an Outlook email, I get an error "there's a problem with Word". (Then you hit Enter and paste again, which works fine.) It's good to remember that Outlook isn't actually an email client. It was bought by Microsoft back in the days before TCP/IP became common. Outlook (still) calls messages "memos". The _first_ thing Outlook does with an RFC-compliant email is convert it into the Outlook "memo" format. There is no option to view the original email message at all. Microsoft simply bolted on a filter to deal with emails. I had hoped that the "Mail" client in Windows 10 would be a real mail user agent, but it's _worse_ than Outlook, without the excuse of predating email and being another program MS bought and rebranded.
- s-xyz 3y ago100% recognizable
- dehrmann 3y ago<tr> and <td> are just hipster flexboxes.
- mediumsmart 3y agoIt’s slowly getting better though. I start receiving emails in nmh that can’t even try to display before I delete them.
- hifix 3y agoIt's HN, so I'm not surprised by the old "just send text" argument that always gets wheeled out when this topic come up, but for those not in a terminal all day there are valid reasons to format HTML emails (that don't include marketing). We send out HTML emails and reports to our users that make use of progress bars, lists, photos, colours etc and they love them. They can get quick full updates on their business without having to leave their mailbox. Pretty hard to do that in plain text.
- progfix 3y agoWhy don't you send PDFs?
- conception 3y agoThe faster you get to what a user wants or has to review in an email, the more likely they’ll read it.
- dreamcompiler 3y agoI read a lot of email on mobile, and PDFs on mobile are a terrible experience. If I see a PDF attachment in an email, I don't even bother opening it unless it's something I was expecting.
- hifix 3y agoFair point, and we do generate PDFs elsewhere for similar reports but the general feedback from users is that they want to have the data available directly in the email.
- BarbaryCoast 3y agoI am a "just send text" guy. But you are correct; users like HTML and no one, like the author of this blog post, even remember that Internet messages are all plain 7-bit ASCII. I don't mind the HTML as much as I mind the Javascript inside them, or the web bugs that are included. Those are privacy and security issues. So I've adapted to the reality that "email client" is now a web page on a service somewhere, and "email message" is another web page. I don't have to like it, I don't have to use it, but raging against it is a waste of everyone's time.
- xrd 3y agoThe solution is to use maizzle. It's awesome and has a dev mode where you can preview emails as you write them. It's all tailwind and a great authoring experience. Then, use html-to-text from npm to convert that into text. Then, every email sending service allows you to send text and html based emails. Regardless of the end user preference, it just works.
- brianjking 3y agoIf the answer isn't "Microsoft Outlook" I will be very surprised.
- nkko 3y agoJust in the last year, I have sent over 30 million emails to our users. Mostly plain text. The last two emails, to the list with over 400k subs, were sent using MJML. Anecdotally OR dropped ~3-5 points. OR avg on the above numbers was 33%, rarely dropping below 30%. Now was 30% in both cases, but it took longer to get to that (I suppose the cause of email filters introducing some delay). Also, our links in the email received spikes of traffic (email spam software running crazy over them). Also, I've got some replies from happy users on how nice the new emails are. I yet have to see what to conclude. TLDR just use MJML.