SM3
Responsive HTML Email (Open Source)
Hi everyone,
I'm trying to create an open source template for developers to use and improve without having to worry about so many different hacks. I'm aware of different emails will require different structure - so I'm open to contributors for imrpovements.
https://github.com/charlesmudy/Respmail
The current structure is very flexible and customisable.
Please share your thoughts.
Shina.
Shina, thanks so much for sharing this on GitHub. I’ll take a look at your template sometime this week to see if there’s a way I can contribute.
Depending on who you’re building this for, I have one bit of obvious advice: Keep it simple.
I have a few responsive templates on GitHub myself, and Respmail looks a bit like my first. The first template I wrote included a plethora of email patterns. The code got so complicated that even I had a hard time following it. Worst of all, even though all of the patterns worked, I never used half of them in production. I, the author, stopped using it and created something much simpler to start from. And when I need something not already in my template, advanced email patterns are not hard to find and add.
Your demo looks solid, but HTML / CSS clocks in at 1,200+ lines. I wonder if it’s all necessary. I dunno, I’d be interested to hear what kind of life this template takes over the next few months
Hi Ted,
Your templates look fantastic, I will certainly take a look at the code - perhaps I can learn one or two things.
Thanks for showing interest. I am aware of the size but the whole idea behind the template is to create a common or multiple patterns and it can easily be removed. Imaging you only wanted to create 1-full width column campaign, with my template - all you need to do is pick that row, delete the others, change color or font-size to match your design and you are done without having to worry about compatibility.
The template is pretty solid and well tested across multiple devices and platforms and I even remember asking Fabio (MailChimp email designer) couple of questions ... I used MailChimp's blue-print as the foundation and built a solid styling (with fixes).
At work, what we did was to create something similar but with different designs and most of the time - we reuse the same design especially for campaigns like follow-up events. With MailChimp's "mc:hideable" we can easily hide a row and just edit the text, replace images .e.t.c.
I will appreciate your contribution and ideas to improve the template.
Hi Shina, I studied your template and it is, as you say, quite solid! I admire the nesting strategy you created and don’t want to mess with that! In an effort to contribute something, I submitted a PR that attempts to simplify your background color declarations. Feel free not to use it.
Again, very nice work. When using this template, do you modify it much or use it mostly out of the box?
Hi Ted,
Thanks for the comment and I appreciate your contribution, I hope to have more.
The template works out of the box depending on the row you choose to use it and I never had to modify anything except the colors, that was the idea. More like Bootstrap which you can use as a core foundation that has all the browser fixes in place. I am currently brainstorming how I can improve the patterns and structure while I keep the core fixes.
Maybe you can also suggest any row you would like to add.