Note: This technique may not work in Gmail due to their image caching.
There’s nothing like a countdown timer to add a little urgency to an email, especially one promoting an event like an office party or when concert tickets go on sale. Thankfully, with little HTML code know-how, they’re easy to create and use.
Big brands have long featured countdown timers and clocks, such as in these great email campaigns from Style Campaign and Moveable Ink. However, this technique has generally involved rolling your own dynamically-generated images – which can be technically tricky. This has all changed with Gif Countdown by Mathias Pettersson, which can be used to quickly whip up clever timers like this:
Adding a timer to your email campaign
To get started, swing over to Gif Countdown and customize your countdown timer to suit. There are some nice options, such as being able to adjust the timezone and colors, however at present, you can’t remove their subtle branding. Fair game.
Once you’re happy with the result, copy the image URL. You’ll be using this to add the timer to your content, either via the campaign’s HTML email code, or the email editor. We’ll take a look at both methods.
Adding the timer to your HTML code
If you’re cutting and coding an email newsletter from scratch, then it’s likely that adding images is no mystery to you. Here’s the code for the image above:
<img src="http://gifcountdown.com/australia-sydney/1380016800/fdfdfd/474747/fdfdfd/333333/ffff00/true/counter.gif" />
Done and dusted. Note that we’ve considered downloading the image and zipping it up with other image files, however, this would make the timer ‘stick’ at the time of download, plus the time zone feature would no longer work. Also, the standalone file size comes out to be quite large (~450k) and there seem to be timing issues with the animated gif when doing this. Unless you’re sending to a large subscriber list, streaming from their server seems to work pretty well.
Adding the timer via the email editor
Adding an image to any <multiline> editable region is also possible if you’re comfortable with adding code to the <source> view. Here’s the earlier snippet of code, simply added via the editor:
With that in place, you should be able to see the timer in the email editor and of course, in your email campaign previews.
A word of warning
It’s certainly worth keeping in mind that Gif Countdown, like many free services, is supplied as-is – there’s no guarantee that it will remain rock-solid when asked to serve images to squillions of subscribers. Also, keep in mind the earlier caveats in regards to downloading and hosting the image yourself. We’ve also had a potential issue with the image not displaying in IE10… So overall, make sure you give this technique a thorough test before relying on it in your campaigns.
Many thanks to Mathias Pettersson and support hero Stig for suggesting this fun technique. If you use a countdown timer in your campaigns, we’d love to see it in action – feel free to post a share link to it in the comments below.