A responsive countdown timer for Mailchimp

Creating a sense of urgency prompts our potential customers to buy. Scarcity of course is another means of persuading people to buy. In email marketing, or on our website, a countdown timer is a great way to impose these psychological effects on our clients.

A simple countdown timer for email marketing

On websites we can code a countdown timer using, for example, JavaScript or PHP or even use an already coded timer such as a WordPress plugin. Unfortunately inserting code into an email won’t show to many of your recipients due to the variances in email reader capabilities. The most reliable means of inserting a countdown timer into a campaign in by embedding an image which shows the time remaining.

NiftyImages has a free plan where you can create and customise the look of countdown timers that you may embed into your Mailchimp campaigns. The example above shows a timer created with NiftyImages.

Horizontal scrolling to see full email campaign width

Once you’ve created your timer in NiftyImages you’ll receive some code that you can add to a Mailchimp code content block that will display the image. The code will look something like:

<img src="https://img1.niftyimages.com/bmi/cg-/02k" />

You’ll notice that if you view the campaign on a small width screen (e.g. Android phone or iPhone), the countdown time image will force you to horizontal scroll to see the full width email message. Fortunately with a few simple changes we can make the image responsive so that subscribers don’t need to scroll to see the full width email you send them.

How to make your email countdown timer looks good on small screens

To make the NiftyImages countdown timer image responsive (so it looks good on mobile and other small width devices) follow these instructions:

1. In Mailchimp, add a code content block to your campaign.
2. Add the following to the code content block in Mailchimp:

   <style type="text/css">
       @media only screen and (max-width: 480px){
           .organicweb{
               height:auto !important;
               max-width:600px !important;
               width: 100% !important;
           }
       }
   </style>

3. Create your countdown timer in NiftyImages and copy the HTML provided.
4. In Mailchimp, add the HTML to the code content block (below the CSS as added earlier).
5. Your code will look something like

   <img src="https://img1.niftyimages.com/bmi/cg-/02k" />

   Change this to include class="organicweb" e.g.

   <img class="organicweb" src="https://img1.niftyimages.com/bmi/cg-/02k" />

You’ll notice that the image in your email campaign will now resize according to the width of the viewing screen. A simple solution to make your countdown timer display responsively.