If you've ever had the misfortune of being tasked with building a template for HTML emails, you know it's tricky business! In this blog post, I share the approach I took to build responsive, client-friendly emails without a single <table> tag.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

MJML is a responsive email framework from Mailjet. It essentially provides a layer of abstraction over raw HTML. The MJML language provides a set of common tags you can use to structure your email. As long as you follow the MJML conventions, your email should render properly across all email clients.

My Wonderful HTML Email Workflow

Link to this heading Custom components with mjml-react

Link to this heading Composing emails with MDX

Link to this heading Loading different emails by ID

Link to this heading The “View on Web” link

Link to this heading Integrating with Email Service Providers

At first glance MJML seems like a godsend, and for many it will be. Those who have never hand coded complex tables nested in tables, coded emails to be a flex between hybrid/responsive, to take into account the myriad of nightmare outcomes across the numerous problematic Outlook clients, the quirks that Gmail and Yahoo mail does to one’s email, the utter failure of standards from Outlook, needing to use mso and vml among other quirky hacks brings me back to the nightmarish web development days having to deal with the IE version hacks… That being said I did try MJML coding and this is my opinion. If you are a developer who has mad skills in the React world and need to code a simple html email then MJML is your golden choice hands down… If you have a client that spits out 3-5 complex emails a day that requires some components to have nested tables inside columns of a parent table then MJML is NOT going to be your choice it will bring you more pain. If your email has multiple columns say a 4 column on one row, and 2 column on several rows that should display one way in a desktop client and be responsive accordingly for whatever device a person might be using, then coding the html email in a hybrid solution where your columns can collapse and stack, some rows be left column first, others be right column first and so forth, then MJML is not going to be your friend… Those of us who have been coding html emails for years probably have clients hell bent on visually impactful, complex layouts and template is loosely used, a basic framework header, body, footer holding the ever changing content in modules/components that have been built out and tested then coding old school is the way to go… If you are fortunate enough to have to code html emails that are 1 column and/or mostly copy than MJML is definitely the best choice to use, if however your clients designs are complex, with images, dynamic fields, pushing the boundaries for the latest to work in say Apple email but have fall backs for Outlook then coding the old school way is the way to go… basically there is no easy solution for all the html email designs to be coded… Maybe when Microsoft releases their updated Outlook clients that are supposed to use a rendering engine from their latest browser rather than Word, then perhaps we can be less stressed coding these,

Hey Josh, wonderful article. You helped me a ton! I am always struggling with html email 🤬. Especially because my receivers are mainly old-school business people who use older outlook versions. There are so many hacks to make it work properly.

Cool article, but it could be very useful and attractive if you put some preview of the mail you generated thanks to your code. Not necessarily after each sample of code but after somes ;) Keep it up

Such a so useful article! I’ve had a lot of headaches trying to code a good HTML template. Thank you very much, Josh.

Article is great. I am looking forward to your new next article. :)