Creating a custom RSS feed in Node.js
The challenge in optimising Squarespace feeds for Mailchimp newsletters
As we are getting more and more projects in the studio it becomes increasingly difficult for the entire team to keep track of what everyone is working on and how each project is progressing. Although we use an internal blogging site to publish these updates, the problem with it is that it requires people to frequently visit a page whilst juggling work. In other words, it’s time-consuming for everyone.
Enter our internal newsletter, which sought to improve upon this by notifying all employees about project updates on a weekly basis. The platform we decided to use for delivering the content was Mailchimp due to it a) having a free 12.000 emails/month plan and b) supporting automated emails using RSS feeds — where our news content are displayed.
Our initial plan was meant to be a nice and simple task: Use an automatically generated RSS feed from our Squarespace site and then feed that into Mailchimp, which handles the rest. As you may have guessed by now, that proved slightly more complicated than we initially anticipated.
When we did an initial test email we noticed that there was a small issue with the images:
The RSS feed links to full sized versions of the images. The issue here is that some images are more than 1000 pixels wide, much larger than our 220 pixel image in the template. These image sizes had two significant implications:
- As can be seen above, it completely broke our email template in some mail clients — including a little known service called Gmail. It’s not pretty nor very legible which won’t do.
- And it made the emails very heavy. Essentially making the load times and data usage for each email much larger than they need to be. Even considering high pixel density, or retina, screens the sizes were excessive.
Solutions (and more problems)
Option 1 — Modify the image on Mailchimp
Our first attempt to fix this was to simply make the images smaller in code. Unfortunately, Mailchimp was less than keen on that idea.
In other words, Mailchimp doesn’t allow us to modify the images originating from RSS feeds in any way. Traditional changes in the <head> isn’t possible and writing style tags in the <body> is often stripped out before people open the emails. In short, none of the standard solutions would work here.
Option 2 — Enforce size requirements
Another solution would be to simply have all employees use specific sized imagery when they upload them. Problem with that is that we would impose rules on others for the sake of making our job easier. Not to mention the likely future problems of policing this requirement. Rather, we wanted to make it truly automated without anyone having to worry about the details.
Option 3 — DIY
This left us with a third and final option, making a custom solution.
As they say, limitations encourage creativity so as it turns out the image sizes Mailchimp outputs are all defined in the RSS feed itself. Meaning, there was a way to resize the image, though we had to change the feed itself to accomplish this. So what did we do? Well we made our own custom RSS feed on a server using Node.js, naturally!
The process getting this to work involved setting up a remote script that, on a set interval, pulls information from a file that contains the data the newsletter needs and spits out a new XML-file, i.e. what makes for a RSS feed. The task involved digging into an automatically generated json-file on our Squarespace site as it required the minimum amount of work to extract the relevant information from. Even more importantly is that its content is generated parallelly with the existing RSS feed. In other words, the content mirrors one another, albeit with a very different data structure and format. The final result is a new feed that has appropriately sized images and can be used alongside Mailchimp.
All of this was really just a long-winded way to modify a single tag in an otherwise perfectly functional RSS feed.
Was it the only way to do it? No.
Was it the best and easiest way to do it? Probably not.
Some </> thoughts
The exact cause of the whole issue, the thing that needed to change before the images would play nicely with Mailchimp, was the sizes defined in the <media:content> — just 2 short tags.
What is interesting about this whole workaround fix was that even seemingly insignificant changes can sometimes require surprisingly convoluted workarounds. Even as a (somewhat) seasoned web-developer, working with emails is never truly easy — not even when using what most of us consider to be easy-to-use services.
It’s an often spoken argument but it does go to show that if you want to create something custom using services that claim they give you everything you need right off the bat it can sometimes be tricker than you would think. The supposed ease and accessibility some of these services provide can, ironically, become the biggest hurdle when it comes to creating what you want as they often lack customisation features. Luckily, there’s always a solution to these kinds of problems - it’s just about finding it.