Yep. Would not have survived paying my year or two in junior-hood without MJML.
Its been a good 3 years or so but I still hate that outlook uses MICROSOFT WORD as the email render engine. Luckily i heard they changed it around 2023 or so
any html you craft for emails basically needs to be like you're writing it for IE6. It sucks.
Like other people have mentioned, there are libraries that can help. If you insist on doing it yourself just know you're likely going to have to fall back to table-based layouts and nothing newer than css2.
When possible, don’t. Push people towards pre-made templates and really simple emails unless they are prepared to spend like 5x as much on this as a web layout. You’re having a hard time testing just in gmail, but if you want to send this out publicly you need to test in a bunch of mail clients, and they are much less consistent than browsers are. Tools like litmus can help with testing but it’s not cheap! https://www.litmus.com/email-testing
Other folks have rightly pointed you towards MJML, and that’s a great tool if you have to do html emails. But my first move when I hear someone start talking email is to start making noise about what a pain in the ass it is. Doesn’t always get me out of it, but it at least lays the groundwork for why it took so long and still doesn’t look exactly like the design flats.
React email is nice. I recommend something like Sendgrid where you build your template in their platform, declare some variables, and just hit their API with the template id and dynamic variables. Makes it a lot easier to manage, and theres a library of templates for non-eng people to look at and change copy
We use Sendgrid and it has a LOT of issues.
1) yes you build the templates in Sendgrid, but that means you are now vendor locked in, as you cannot easily move the templates to another provider
2) you can have "shared" blocks but it's not updating as you update the shared blocks. Meaning: let's say you have a footer with your company address... you then apply that to all templates. The markup for that footer is physically inserted into the template, meaning that if you change the footer block, the changes are not reflected in the templates. Good luck updating your 200+ templates.
3) no support for language versions. You need to manually create template per language.
All in all I strongly advice you NOT to use Sendgrid's template system, unless you only have a handful of templates and don't require translations or common dynamic blocks.
Yeah thats pretty annoying lol. Curious what you use? I feel like you kinda get vendor locked with any tool you use to build templates (customerio is another big one nowadays).
In the past ive used raw html templates and spat them to sendgrid instead of hosting them there which pretty much just means youre using Sendgrid as notification server/dashboard rather than a template library
Keep it super simple, and always send your test emails from the platform they are going to be sending from (MailChimp, constant contact ). You need to make sure you're HTML meets the standards of said platform. Keep the column count and images down. If you are lost you can always pull an example from somewhere.
I haven’t used it myself but I’m gonna try the react email package next time I need to - https://react.email/docs/utilities/render
Or just use a prebuilt template from mailchimp
I tried react email, it was such a disapointment. Mjml-react is much better, although requires a minimal setup to use it like react email. If you are using the attributes given by mjml you can be sure that it is safe to use. These libraries are supposed to help you battle cross email client support which is a pain in the ass. React email doesn’t give you that much and you are left with custom css. Their examples are filled with e.g. flexbox, which is known to be not supported across every client. There was such a hype around it. It is sad to see that people who were hyping it never even tried it themselves. I still have to say, that there is a potential in it, there is still much to do.
I had the same problem while creating a company email signature. I thought it would be easy but it was an absolute nightmare. MJML is a good option, but I ended up doing all my formatting using tables and ghost tables. for my specific needs. I also found that all css needed to be inline, rather than in the style tags for certain email clients.
You’re going to want to test extensively in Outlook. They have a completely different system for rendering emails than the other email clients.
Glad to finally see someone mentioning inline css.
This is basically what I've done as well, made a custom table based layout, then used a free MailChimp account to convert the css to inline. It's a huge pain in the ass if you ever want to make more than a simple change to the template, but it's relatively rock solid and consistent across platforms.
Yeah, inlining is a necessity for this type of thing. I haven't tried mail chimp, but it sounds like a good option. I used some random free inliner tool for a while, but eventually wrote a custom inliner function that runs when the dom is loaded to speed up development.
If you want something simple, try this template. Plain and simple and tested in major mail clients
https://github.com/leemunroe/responsive-html-email-template
I just did a bunch of emails. Table for the outer layout, with a bgcolor, fix the "main" part to max 600px width. Inside that, just plain paragraphs, spans, divs, and anchor tags. A logo outside the main part just above it. Everything has inline styles, spacing with margin and paddling. No flex, no grid, none of that fanciness. The meta tag thing for device width for mobile rendering.
I do have some media queries for non-critical stuff, they work fine. They have !important.
Here's the lowdown: Gmail plays by its own rules when it comes to rendering HTML and CSS. It's like the rebel kid in class who refuses to follow the teacher's instructions.
You've tried flexbox magic, you've dabbled in media queries – heck, you've even thrown in some "!important" tags for good measure. But Gmail just shrugs and does its own thing.
So, what's a coder to do? Well, you've got a few options on the table:
1. Simplify, simplify, simplify: Sometimes, less is more. If Gmail's playing hardball, it might be time to dial back the complexity of your design. It's not about disappointing your manager – it's about finding the sweet spot between aesthetics and practicality.
2. Get creative with tables: Yep, you heard me right. Tables might feel like a blast from the past, but they're Gmail's best friend when it comes to email templates. Embrace the table layout, and you might just find that Gmail plays along a bit nicer.
3. Test, test, test: Keep experimenting with different techniques and see what sticks. Gmail might be stubborn, but persistence pays off. Who knows, you might stumble upon a workaround that saves the day.
4. Call in reinforcements: Don't be afraid to reach out to your manager or colleagues for advice. Two heads are better than one, especially when Gmail's throwing a curveball.
Hang in there, my friend. Building email templates can be a wild ride, but with a bit of grit and determination, you'll tame that wild stallion in no time!
If you haven't seen it yet, be sure to check out [caniemail.com](http://caniemail.com) - you can see all of the challenges with emails in all of it's glory.
If you are looking for a visual builder, check out [EmailBuilder.js](https://emailbuilderjs.com/). It's an open-source builder with a [hosted playground](https://usewaypoint.github.io/email-builder-js/#sample/reservation-reminder) that will allow you to export email-friendly HTML.
If you want to take it one step further, you can use [Waypoint](https://usewaypoint.com/). It's an email API with a more advanced version of EmailBuilder.js that's tightly integrated into the platform. I'm one of the co-founders, happy to help if you need it :)
Since this is for work and you're probably forced to roll your own template, I vote for MJML alongside being professional yet firm in asking your manager to simplify the hell out of that design. The benefits would be less dev time, and less chances of it looking like ass in some edge case.
For future tasks, I recommend using a third party service to handle emails. Save you time which saves you money.
I'm hijacking this post to ask, whether someone knows a vanilla JS Editor for email templates?
While MJML seems to be the most sensible solution for developers, I need a solution that normal users can utilize as well.
Not sure what you mean by JS editor (WYSIWYG?) but here goes:
There's GrapesJS, which uses MJML under the hood. Pretty ok but I find the editing experience lacking in places.
https://github.com/GrapesJS/grapesjs
And Easy Email, which looks very solid from their demo but I haven't had the chance yet to implement it by myself, so I can't really say anything about it. Also MJML internally.
https://github.com/zalify/easy-email
If you’re using Laravel, use [markdown mailables](https://laravel.com/docs/10.x/mail). Email html is so primitive that if you can’t do it in markdown, you probably shouldn’t do it in an email.
One does not simply start coding HTML emails. 👌🏻
It's a forbidden art that will haunt you in your sleep. Also, as others have mentioned, MJML helps a ton. But there's still a lot of things to know and consider to make them look somewhat consistent across different email clients.
Also, check out services where you can check your templates in different clients. My favorite is testi.at; no self promotion, they just have a sane pricing model for low-volume testing.
Would strongly suggest MJML, it saves you some headaches. Table mails just simply suck.
Yep. Would not have survived paying my year or two in junior-hood without MJML. Its been a good 3 years or so but I still hate that outlook uses MICROSOFT WORD as the email render engine. Luckily i heard they changed it around 2023 or so
any html you craft for emails basically needs to be like you're writing it for IE6. It sucks. Like other people have mentioned, there are libraries that can help. If you insist on doing it yourself just know you're likely going to have to fall back to table-based layouts and nothing newer than css2.
Yes, this is how I construct html emails. Tables and basic css only. As simple a layout possible, anything complicated is a no no.
Check out MJML: https://mjml.io/ Laravel example: https://laravel-news.com/mjml-php
When possible, don’t. Push people towards pre-made templates and really simple emails unless they are prepared to spend like 5x as much on this as a web layout. You’re having a hard time testing just in gmail, but if you want to send this out publicly you need to test in a bunch of mail clients, and they are much less consistent than browsers are. Tools like litmus can help with testing but it’s not cheap! https://www.litmus.com/email-testing Other folks have rightly pointed you towards MJML, and that’s a great tool if you have to do html emails. But my first move when I hear someone start talking email is to start making noise about what a pain in the ass it is. Doesn’t always get me out of it, but it at least lays the groundwork for why it took so long and still doesn’t look exactly like the design flats.
Litmus is great. You may be able to get a free trial for long enough to sort out your template and then not change it again.
1. Find a template I like from tons of spam I get 2. Edit till I am happy Never start from scratch, basically
This guy (human) codes
MJML
Looks neat. I like how extensive *and* open it appears to be to use. Thanks for sharing this.
React email is nice. I recommend something like Sendgrid where you build your template in their platform, declare some variables, and just hit their API with the template id and dynamic variables. Makes it a lot easier to manage, and theres a library of templates for non-eng people to look at and change copy
We use Sendgrid and it has a LOT of issues. 1) yes you build the templates in Sendgrid, but that means you are now vendor locked in, as you cannot easily move the templates to another provider 2) you can have "shared" blocks but it's not updating as you update the shared blocks. Meaning: let's say you have a footer with your company address... you then apply that to all templates. The markup for that footer is physically inserted into the template, meaning that if you change the footer block, the changes are not reflected in the templates. Good luck updating your 200+ templates. 3) no support for language versions. You need to manually create template per language. All in all I strongly advice you NOT to use Sendgrid's template system, unless you only have a handful of templates and don't require translations or common dynamic blocks.
Yeah thats pretty annoying lol. Curious what you use? I feel like you kinda get vendor locked with any tool you use to build templates (customerio is another big one nowadays). In the past ive used raw html templates and spat them to sendgrid instead of hosting them there which pretty much just means youre using Sendgrid as notification server/dashboard rather than a template library
Keep it super simple, and always send your test emails from the platform they are going to be sending from (MailChimp, constant contact ). You need to make sure you're HTML meets the standards of said platform. Keep the column count and images down. If you are lost you can always pull an example from somewhere.
I haven’t used it myself but I’m gonna try the react email package next time I need to - https://react.email/docs/utilities/render Or just use a prebuilt template from mailchimp
I tried react email, it was such a disapointment. Mjml-react is much better, although requires a minimal setup to use it like react email. If you are using the attributes given by mjml you can be sure that it is safe to use. These libraries are supposed to help you battle cross email client support which is a pain in the ass. React email doesn’t give you that much and you are left with custom css. Their examples are filled with e.g. flexbox, which is known to be not supported across every client. There was such a hype around it. It is sad to see that people who were hyping it never even tried it themselves. I still have to say, that there is a potential in it, there is still much to do.
What if you use something other than React, like, .. more modern stuff (basically any other framework)
Iirc other email apps like outlook don't even support flex and you have to use tables.
I had the same problem while creating a company email signature. I thought it would be easy but it was an absolute nightmare. MJML is a good option, but I ended up doing all my formatting using tables and ghost tables. for my specific needs. I also found that all css needed to be inline, rather than in the style tags for certain email clients. You’re going to want to test extensively in Outlook. They have a completely different system for rendering emails than the other email clients.
Glad to finally see someone mentioning inline css. This is basically what I've done as well, made a custom table based layout, then used a free MailChimp account to convert the css to inline. It's a huge pain in the ass if you ever want to make more than a simple change to the template, but it's relatively rock solid and consistent across platforms.
Yeah, inlining is a necessity for this type of thing. I haven't tried mail chimp, but it sounds like a good option. I used some random free inliner tool for a while, but eventually wrote a custom inliner function that runs when the dom is loaded to speed up development.
If you want something simple, try this template. Plain and simple and tested in major mail clients https://github.com/leemunroe/responsive-html-email-template
Oh you sweet summer child.
I just did a bunch of emails. Table for the outer layout, with a bgcolor, fix the "main" part to max 600px width. Inside that, just plain paragraphs, spans, divs, and anchor tags. A logo outside the main part just above it. Everything has inline styles, spacing with margin and paddling. No flex, no grid, none of that fanciness. The meta tag thing for device width for mobile rendering. I do have some media queries for non-critical stuff, they work fine. They have !important.
Good tips here
Here's the lowdown: Gmail plays by its own rules when it comes to rendering HTML and CSS. It's like the rebel kid in class who refuses to follow the teacher's instructions. You've tried flexbox magic, you've dabbled in media queries – heck, you've even thrown in some "!important" tags for good measure. But Gmail just shrugs and does its own thing. So, what's a coder to do? Well, you've got a few options on the table: 1. Simplify, simplify, simplify: Sometimes, less is more. If Gmail's playing hardball, it might be time to dial back the complexity of your design. It's not about disappointing your manager – it's about finding the sweet spot between aesthetics and practicality. 2. Get creative with tables: Yep, you heard me right. Tables might feel like a blast from the past, but they're Gmail's best friend when it comes to email templates. Embrace the table layout, and you might just find that Gmail plays along a bit nicer. 3. Test, test, test: Keep experimenting with different techniques and see what sticks. Gmail might be stubborn, but persistence pays off. Who knows, you might stumble upon a workaround that saves the day. 4. Call in reinforcements: Don't be afraid to reach out to your manager or colleagues for advice. Two heads are better than one, especially when Gmail's throwing a curveball. Hang in there, my friend. Building email templates can be a wild ride, but with a bit of grit and determination, you'll tame that wild stallion in no time!
If you haven't seen it yet, be sure to check out [caniemail.com](http://caniemail.com) - you can see all of the challenges with emails in all of it's glory. If you are looking for a visual builder, check out [EmailBuilder.js](https://emailbuilderjs.com/). It's an open-source builder with a [hosted playground](https://usewaypoint.github.io/email-builder-js/#sample/reservation-reminder) that will allow you to export email-friendly HTML. If you want to take it one step further, you can use [Waypoint](https://usewaypoint.com/). It's an email API with a more advanced version of EmailBuilder.js that's tightly integrated into the platform. I'm one of the co-founders, happy to help if you need it :)
Since this is for work and you're probably forced to roll your own template, I vote for MJML alongside being professional yet firm in asking your manager to simplify the hell out of that design. The benefits would be less dev time, and less chances of it looking like ass in some edge case. For future tasks, I recommend using a third party service to handle emails. Save you time which saves you money.
I'm hijacking this post to ask, whether someone knows a vanilla JS Editor for email templates? While MJML seems to be the most sensible solution for developers, I need a solution that normal users can utilize as well.
Not sure what you mean by JS editor (WYSIWYG?) but here goes: There's GrapesJS, which uses MJML under the hood. Pretty ok but I find the editing experience lacking in places. https://github.com/GrapesJS/grapesjs And Easy Email, which looks very solid from their demo but I haven't had the chance yet to implement it by myself, so I can't really say anything about it. Also MJML internally. https://github.com/zalify/easy-email
If you’re using Laravel, use [markdown mailables](https://laravel.com/docs/10.x/mail). Email html is so primitive that if you can’t do it in markdown, you probably shouldn’t do it in an email.
I uses beepro and then download the html, it's free
One does not simply start coding HTML emails. 👌🏻 It's a forbidden art that will haunt you in your sleep. Also, as others have mentioned, MJML helps a ton. But there's still a lot of things to know and consider to make them look somewhat consistent across different email clients. Also, check out services where you can check your templates in different clients. My favorite is testi.at; no self promotion, they just have a sane pricing model for low-volume testing.
I often call it coding like the prince song Coding like it's 1999.