This is by no means a guide on how to make Email Newsletter, but rather the particular problems I faced while developing my first email newsletter as a jr. dev & how I found the solution the hard way!
The Beginning of a Disaster
Recently I had the opportunity to develop an Email newsletter , but also I had to make a backend functionality to send to multiple people at once. I used Mailgun API for email management. But also at the same time, had no idea how one might develop a newsletter subscription system (honestly , I'm still learning :))
I a Figma File Far Far Away....
There was a design, that I had no idea how to convert to code & send to a bunch of people. So I did what literally everyone does these days.
AI... I used an AI
But that is just the beginning of the disaster :)
I thought I could just convert the figma file to html & send it. Well that plan seems solid until I actually tried doing it & figured the plugins convert figma to basic html which don't have images linked. Some plugins do, but most are premium.
AWS S3 to the Rescue
So I used good old S3 Bucket to store the images & serve them.
But it wasn't easy. I still iterated through a bunch of AI Figma Plugins & what I realized was that instead of Figma to HTML Plugin, I needed Figma to Email Template Plugin. There's a big difference & we'll discuss why in a moment.
But basically I innocently downloaded the html code, uploaded EACH Photo to S3 .... Multiple Times Too! Because I have shitty Internet :)
Then the html template for the email was done! Then I ran by Script for sending the Email to a list of recipients. It was pretty basic Script that has a function read a list of emails from an excel sheet & send an html template to those emails.
So I loaded up everything & sent a test mail to my own mail first (pheew)
The email looked liked this:
No CSS Loaded, No Structure... Nothing. Just a bunch of text.
Then I started googling... and I found that google doesn't allow any external CSS to be sent over email. And a lot of other css classed & properties aren't allowed. What fascinated me was WHY they weren't allowed. Because they can be used as a vulnerability to inject malicious scripts. 👀👀👀
So THEN I looked for Figma to Email Template & Found Kombai !
Kombai proved to be a great tool for email newsletter because it creates html template that directly adhere to gmail css restrictions.
It also organized the images in the design properly.
And then I had to use AWS S3 again 😢. But finally got it working (Kinda). I mean it worked mostly fine ,except on some devices where it still broke. But Yeah, building a Email Newsletter Template Sender from Scratch is like reinventing the wheel :)
But I learned some interesting Info. Also While I was checking different figma plugins for html conversion, I found Brevo ! Which is like an All in one tool for email marketing.
Mailgun is also good , I used it to track the emails. But it does not have a template designer. In comparison Brevo had a lot of built in features. Then I learned more about Brevo's no-code/low-code email newsletter features. But ultimately I learned a lot stuff while making this newsletter template.
I also made a small diagram & I want to hone my skills in designing architecture components.
None of these are perfect or standard, but I wanted to learn how to make these architecture designs as well and I thought the best way would be to get my hands dirty!
Keep on Coding!
Top comments (0)