You know what sucks? Developing emails. This is one email project done for Garmin that I tried having some fun on, and made a bit more interesting by adding dynamic images too.
The idea
We wanted recipients of the email to feel like they were a part of something bigger, contributing their fitness tracking data live to help the world’s total, as it raced to beat its yesterday.
What’s the point
Inspire movement & drive traffic & for Beat Yesterday campaign site.
Make it update itself?
Despite the web changing constantly, emails are still stuck ten years in the past in terms of tech, which makes doing something different really hard.
Gifs, Duh
I love Gifs they’re especially powerful when used subtly and with class. The website, and the campaign were based on dynamic live data, so it seemed the perfect opportunity to leverage gifs. s
Actual live data
Here’s the hard part: Get the email to update to the actual live cumulative total of data that was coming in from Garmin Connect. So that if I opened the email at 3:55pm, I got our current count of steps the world needs left to beat yesterday’s step count. A 60 second gif turned out to be a good balance between average open time, and performance/file size.
The breakdown
- Start with an image src linked to a generic 60 gif, so something will show.
- Hook in to home-brewed API to calc steps left to beat yesterday = total steps made today - yesterdays total steps .
- Calculate the next 60 seconds of data.
- Generate 60 second gif that counted over 60 seconds worth of data.
- Run a CRON job every 60 seconds that ran a bash script to post the new 60 second gif from a dynamic PHP server to a static server where it would be viewed in the email (probably not best practice, but got the job done).
Dynamic, dynamic images
So, the email isn’t actually running a script, it’s simply linking to the same gif, that’s updated on the server every 60 seconds. Several of countdowns write-ups I read link to a script that runs some trickery to work in emails, or create a gif where the last frame is constantly updated.
The email we were sending needed to be a bit more compatible, and assets needed to be run off of a static server (had the potential to be accessed by over 500k users at a time). Using a GIF turned out to be a bit more compatible (some versions of Outlook only show the first frame of gifs, but most other major clients rendered fine), and running the script on a separate server didn’t require the load and performance hit of using a dynamic server everytime someone opened the email.
Gmail, too
Turns out, gmail caches images across emails. So, if I have a Gmail account and open the email first, Gmail makes a ‘Gmail-cache’ version of that image and serves it to the next person on Gmail who opens the same email.
To allow the gif to be reloaded from our static servers every 60 seconds, we were able to cache bust using unique queries on the end of the image src.
Resources & Credits
It’s shockingly difficult to find many technical details on email countdowns and dynamic email images. The best I found, is this article by Alex Ilhan. The foundation of the script used is based on his script for a countdown timer on Github, so again credit to Alex.
You can check out my (somewhat) sanitized PHP up on github.
The Result
See the Pen Self-updating HTML email by Hans Engebretsen (@hans) on CodePen.
Disclaimer
I am by no means a PHP expert, so I’m 100% positive, there’s a better way to do this, this is what got the job done for me.