Dont Tell Comedy – Dynamic Email Campaign
June 2021 - August 2021
Goals
- Create HTML emails that work on popular email clients
- Account for dynamic data that is fed through Django
Project Overview
Don’t Tell Comedy needed multiple custom emails for their customers. My job was to code and test them, mainly for Gmail and IOS mail client. I haven’t touched HTML emails in a while, but I thought I’d take on the job since I had good experience with Foundation for Emails/Inky. Using that, I was able to deliver the emails in a decent time frame.
Email Campaign Images
So far, this campaign has had 3 emails. One for a receipt, one for post-show, and one for the show reveal
The reveal email included a custom ticket tear background and a basic description of the show.
The post show email gave information based on the show the user attended. This email had to account for varying amounts of comedian data
Process
The Inky framework uses a build process that converts special markup to the table layouts that are needed for most email clients. This lets me build layouts that would normally take hours and hours of tedious formatting in much less time. As far as the styles go, those are very straightforward, though my styling choices were limited.
Once the emails were built out, the outputted HTML was made into a Django template where data was looped through. Overall, the process was simple it just required tweaks and testing throughout the process.
Technologies Used
HTML emails don’t support much, so basic CSS and HTML was all that was needed. Inky allows for SCSS, so I did utilize it.
Want to check out some code demos?
Check out code samples written in JavaScript, React, Node, and more
Demo 1
Converting jQuery Blog Post Component To Vanilla JS
I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]
Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript
I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]
Demo 3
Defining Reusable Column Extends with SCSS
Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]