When timing is essential – using countdown clocks in email
We recently sent out an invitation to our annual event Email Marketing Evolved. This year, we wanted to highlight the time and date of the event and, with a bit of effort, we included an animated countdown clock in the invitation email. Would you like to know how it works?
Using animated GIF-images in email is not new by any means, but to create an animation that lasts for weeks is a true challenge – and one we couldn’t resist.
While this article is mainly written for readers with an interest in technical solutions, we hope that it will be inspirational for everyone who wants to do something a little bit different!
We set out to send an email that would show our recipients exactly how many days, hours, minutes and seconds that were left until the event and the end of the early bird registration period. Since we wanted a live countdown clock, we had to use an animated GIF-image. This presented us with two challenges:
1. The recipients would open their email messages at different times (with different time periods remaining to the event) making it impossible to send the same image to everyone. The timing wouldn’t be right. The images in the letter had to be rebuilt constantly.
2. We needed to create an animation that would last for weeks, until the event started.
Here’s how we did it:
Instead of keeping a set of static images on a server, we wrote a small piece of software that constantly created updated images. Since the software knows the correct time and the time of the event, it instantly creates images with the correct remaining time.
The software did what it was supposed to, but since the work load can be very high for a short period when sending large numbers of email, we needed to use a Content Delivery Network. The advantage of this is that the image files are stored on and distributed from a large network of geographically distributed servers that relieves the original server.
Additionally, recipients all over the world get shorter load times (this technology is used for all images in newsletters sent from our servers) since images are downloaded from a server close to each recipient. This way, the software will not have to perform the same task 100 times if 100 people open the letter at the same time. The load on the server will be lighter and the recipients get to see the images faster.
The long animation:
This was easier than we initially thought – for the simple reason that it’s ”only” all about numbers being ”looped” at different speeds. In part, this is why we added the animated circles – we couldn’t be to easy on ourselves...
We programmed the software to create a number of images that accompanied the numbers, counting down and starting over in sync with the seconds, minutes, hours and days. As 0 seconds was about to be 59 again, the circle symbolising the minutes also had to change. In total, 8 different numbers have to interact with each other and with the animated circles. As an added bonus challenge, the different numbers had different load times (due to variations in file sizes) – something we needed to take into account when calculating the images.
This was one of the reasons why we needed a smart piece of software, that could both keep track of the time and synchronise all the images.
PS. If you are really into the complexities of technical solutions, let us mention that we looked at multipart boundary push as a possible way to make it all happen (this is used to create video in email) but we opted out from this technology since the server loads gets very high. DS.
Still, we were quite satisfied with the results (take a look for yourself at the top of the page) – and we hope to get back to you soon with more exciting examples of solutions that take your email marketing a step further.