Blog

Spread the Christmas cheer with our animated email template

December 12, 2011

Template in iPhone Mail

This year, we felt like starting a new holiday tradition - creating an email template for our customers that's as robust as it is lovely. To kick things off, Matt Farag and myself joined forces to roll both the most recent and most enduring email design techniques into a mobile-optimized newsletter, ready for use in our email editor. Hopefully you'll find it to be as joyful to customize, as it is for your subscribers to receive.

Cheerful in (almost) any email client

To do justice to Matt's sublime design, it was necessary to ensure that it looked as consistent as possible across the most popular email clients. As many designers can appreciate, this involves countless rounds of tweaks, testing, more tweaks and well, table cells. Without rattling on too much about it, here's what our final product looks like in the devil's own email client, Outlook '07:

Template in Outlook 2007

And here, my friends, is what it looks like in Apple Mail:

Wait, hold on a moment, is that... Snow?

Don't adjust your monitor - the header is smoothly animated with semi-randomized snow in WebKit email clients, thanks to a dusting of CSS animation. I used Estelle Weyl's 'Making it snow...' presentation as a starting point, then handed the template to Matt, who transformed it into something more subtle and stopped it from sprinkling all over the text. The animation was created using pure CSS and thanks to the use of keyframes, displays no visual artifacts in non-WebKit email clients. So when viewed on the iPhone, in Apple Mail, or when the webversion is opened in the Safari, Firefox or Google Chrome browsers, your subscribers will enjoy a little taste of the northern winter.

We'll cover CSS animation in email in an upcoming post, so watch this blog for more.

Finally, we get a lot of questions about whether @media queries work in Gmail on Android phones and the answer is sadly, no - like web Gmail, it has a Christmas list of limitations. The good news is this one-column design should still be easy to navigate in Gmail, but won't display the mobile-optimized bells and whistles.

As customizable as it is forgiving

Max dimensions

The most common feedback we receive in regards to our other free templates is that there should be more options for editing header images and footer text. So we've made it possible to change the 'Hello and Seasons Greetings!' message, swap out the logo and well, pretty much edit any text, all from within the email editor. We've even added useful descriptions to the editable images so you know the maximum width that images can be, keeping in mind that the app will resize images that exceed these widths anyway.

Note that the one thing you can't do in the editor is change the default 'Wishing you a safe and merry holiday season!' preheader, however this can be updated in the code.

To really fill your stocking, we've also included the original PSD file so you can edit and re-export parts of the design as you see fit.

Learn timely email techniques for 2012

Despite reviewing and and debugging HTML email code on a daily basis, its been a while since I've been built and tested an email template from the ground up. This process ran across a few afternoons and provided a great opportunity to brush up on email theory and techniques like which CSS3 properties can be used reliably, getting background images to display in Outlook '07/'10 and using @media queries for mobile display. Hopefully it will prove to be a solid starting point for future campaigns - hey, you may even jump into the code and learn a new technique or hack along the way, too!

Here's the template, free for you to download and modify - it's by no means perfect and I'm sure you will pass on lots of ideas as to how it can be improved. Rest assured that it's white-label and we don't need a plug in any shape or form if you do use it - for you to celebrate the silly season with us is enough.

Download the holiday email template and PSD (zip file, 8.4Mb)

All of us here are looking forward to seeing your Christmas creations, so pop us a comment below if you have something you'd like to share. Have a happy holiday ahead!

Posted in: Tips & Resources

36 Comments

essenz_A
December 12, 2011 7:56pm

lovely! thx!
Justin Sykes
December 12, 2011 9:14pm

Thank you, thank you, thank you!! You have just saved me a few hours work!

Great work!
mcangil
December 12, 2011 10:57pm

great, but it doesnt work for all platforms.
saul edmonds
December 12, 2011 11:39pm

super duper, thanks CM crew
eric g.
December 13, 2011 1:08am

@mcangil, that’s why the article sez “Cheerful in (almost) any email client”, Scrooge.
James
December 13, 2011 1:43am

Having trouble getting the CSS snow to work at all. Opened the html file in the zip in Chrome and nothing happens. Hmm.

Looks great though in the video!
sam
December 13, 2011 2:12am

i’d love to use this, but cant get it to work in anything, i can view it in a browser (live on server) and it works but not as an email, any help?
Ros Hodgekiss
December 13, 2011 8:35am

Hey everyone, thanks for the great feedback so far.

@James - That’s very curious, I’ve tested in Google Chrome 15.0 on Win and Mac. Make sure you’re running the latest version and get in touch with OS/browser version if you still can’t see the snow :)

@sam - Mind me asking, are you uploading it as a template to your Campaign Monitor account? It’s designed for use in the email editor specifically. If you still have no luck with it, pop us a line with details as to what you’re seeing.

Thanks again! Happy to look into making tweaks and improvements, so keep it coming. :)
James
December 13, 2011 11:31am

@Ros - My mistake, I forgot to unpack the slices file! It works!
Ros Hodgekiss
December 13, 2011 11:35am

Haha James, no worries - glad it’s working now and thanks for letting us know :D
Purchase Digital / email marketing
December 13, 2011 12:29pm

The dream of animation/movement in email is slowly becoming a dream, if only WebKit was used more consistently! Would also help with mobile design and pretty much everything else. An email marketer can dream.
Amy
December 13, 2011 3:28pm

The holiday template is beautiful! Thanks for adding another amazing tool to use!
In the comment above you say it is intended to be used with your email editor. Do you mean the new template builder? If so, how do you add the image slices and code? It looks more like a template to be uploaded.
Thanks again!
Amy
December 13, 2011 3:33pm

Follow up:
I just uploaded it as a “new template” into the template builder and it looks great!
Ros Hodgekiss
December 13, 2011 3:34pm

Thank you, Amy - glad that you like it :D You will be able to use it in the email editor when you next create a new campaign. Good luck!
Martin Duplessis
December 14, 2011 1:14am

Wondering if the snow works at all anywhere beside apple mail?
Ros Hodgekiss
December 14, 2011 8:00am

Martin Duplessis, as mentioned above, it works in iPhone and iPad Mail and in the Safari and Chrome web browsers. It should also work on Android devices too - pretty much any email client/browser that’s powered by WebKit :)
Ian Oliver
December 14, 2011 8:11pm

Great stuff, thanks for this. Looks fantastic!

Can I suggest the addition of ‘pointer-events: none’ on the i element - this should prevent any potential problem when briefly hovering a snowflake. Especially useful if you have the snow overlaying other clickable elements.
Ian Oliver
December 14, 2011 9:43pm

After sneakily taking the HTML elements and CSS to use on a separate page, I was trying to figure out why the snow wasn’t showing in Firefox. After all, Firefox is more than capable of CSS animations.

So I did some digging around in the CSS. You’d already done 95% of the work for Firefox (-moz), but there were a couple of bits that only catered for -webkit. I duplicated these and amended to -moz.

After that, the snow still wasn’t showing in Firefox, but I discovered it was due to the background-color not being set in the -moz animation.

Now it’s working great in Firefox too! Thanks again, hope that helps :)

The snow can be seen at http://www.venturebanners.co.uk/
Ros Hodgekiss
December 15, 2011 8:18am

Ian, that’s awesome! Thank you so much for the suggestions and making the template Firefox-friendly to boot. When I have a sec, I’ll update the template and add Firefox to the list. If I could rock on over with a gold medal, I would.
Ian Oliver
December 16, 2011 2:39am

Thanks Ros! No problem, glad I can help.

Another addition I’ve made is to fade in the snow as it starts, and then fade out the snow as it reaches the end of the animation.

This can be done with something like:

0% {
opacity: 0;
}
10% {
opacity: 0.8;
}
60% {
opacity: 0.8;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}

In the email template, it’s not really an issue, but if the keyframe isn’t finishing behind a solid element, it can be a bit of a jumpy end to a nice animation.

Obviously, the percentages can be changed to suit the height and ‘distance’ of the snowfall, and where you want it to ‘melt’ etc. :)
Ros Hodgekiss
December 16, 2011 1:30pm

Perfect, Ian - I just updated the template so it works in Firefox, too. I’ve also added -webkit-font-smoothing: antialiased; for smoother snow in Chrome. Huge thanks for your help!
Monique Truss
December 20, 2011 5:33am

Thanks! You made it snow in the Caribbean!

http://createsend.com/t/y-93A65BE13326ADF1
lei ouyang
December 22, 2011 7:52pm

Great work, thanks for sharing! :-)

See it in Google Chrome, but not in Firefox 4.0.1.

Merry Christmas & Happy new year!
Pieter
December 22, 2011 8:54pm

This is really awesome!

I took the liberty to just copy the flakes div and the necessary css to my own e-mail template, and it worked just fine. I even ‘widened the sky’ a little by adding more ‘<i>’ tags, so snow is now falling over the full width of the template!

One minor thing, all my italic text is also falling :-) but I changed those using ‘<em>’.
SBee
December 23, 2011 12:27am

Love this!! Thank you for showing me something i didn’t think was possible!
Sun Swing
December 23, 2011 3:13am

I love to see things animated, even if they don’t work in all email clients.

You, Aussies, are good sports to indulge us Northerners with our holiday traditions. Though, I guess I live in the deserts of Arizona, and we do the same thing here: paper snowflakes, fake snowmen, and everything else, though we never actually see any of the real white stuff at Christmas time!

Thanks!
Jenna Dixon
December 23, 2011 10:10am

I’ve got the template uploaded successfully, boo yah… but can’t seem to find a way to update the images… I’m sure it can be done bc Monique made it work in the Caribbean… :-}

Can anyone point to what I seem to be missing here? The Edit window that opens when I click only let’s me at the relevant text (Title, Alt Text, Description).

Thanks….....
Lindsay
December 23, 2011 10:52am

Jenna, I am having the same problem. When I go to edit the logo or the “Hello and Seasons Greetings” nothing happens. I can change the text in the editor but it doesn’t transfer to the preview. Any help?!
Jenna Dixon
December 24, 2011 4:01am

Ros, you still around or maybe you’re off for the holidays by now? Oh well, it’s a nice template anyway and nice of CM to share it…. maybe next year…. :-}
Dennis Petri
December 24, 2011 7:49am

Anyone experience with using this in MailChimp?
When testing it all worked, but when I wanted to send out a campaign, it showed a complete white screen :-(
I do hope anyone can help me (before Christmas).
Hugh Macken
December 24, 2011 9:41am

for some reason I am getting an error message:

Images not found
Hugh Macken
December 24, 2011 10:18am

Amy, Jenna, Lindsay - Looks like the image folder within the main zip file is zipped also. That seems to be causing the problem. I changed the image zip to an image folder and it now works. You can download the version I just created (with the image file type corrected) from google docs at http://bit.ly/sgcampaignmonitor
Click on “File” then “Download Original” and you should be good to go.
Happy Holidays and Merry Christmas :)
Tim Decker
December 24, 2011 4:05pm

Loved it. Used it.
Bummed that my Sparrow Mail App doesn’t sprinkle snow. But it’s a lovely visual presentation anyway.
Ros Hodgekiss
December 24, 2011 4:49pm

@Jenna @Lindsay - Sorry to hear you’re having trouble with the template - it sounds like Hugh is on the money here (ie. images are zipped in the zip file). If you’re still having troubles, please get in touch with our team and we’ll happily walk you through this.

@Dennis Petri - From my understanding, media queries aren’t supported in MailChimp, so the snow won’t work. We haven’t tried importing it into this app but there’s a chance that both the media queries and/or Outlook comments could be causing this unexpected behaviour. PS: Use Campaign Monitor ;)

Thanks to everyone for your lovely comments. We’re going to be here all Christmas and NYE, so feel free to get in touch if there’s anything we can help out with… Otherwise, have a merry Christmas and a very prosperous year ahead! :D
Jenna Dixon
December 25, 2011 5:48am

@Ros @Hugh - so close, and yet so far? thank you for trying… the directions on the page template upload page specifically say upload the HTML file and then separately upload the images in a zip…. so do I upload the html by itself and then upload the whole zip folder (the new one you just made) and the html in it is ignored?
I’ve tried it both way and still not getting to first base somehow…....
Just posted a tech query per your suggestion @Ros and now I think you really have gone on holiday, the response said “on Monday”.... which is understandable!
Ros Hodgekiss
December 25, 2011 9:02am

Hi Jenna, I see that Mat on our support team has responded to your enquiry. Just to add a little more detail, here’s what you should be seeing when you try to change the image in the template - once you click on ‘Remove image’, you should be given the option of adding your own.

We’ll be answering support tickets all weekend, so kindly respond to Mat if this is different from what you’re seeing :) Have a safe and merry Christmas!

Comments for this entry are closed.

Browse the Blog

Explore the Email Gallery

@GOGET If you have any questions about our service, be sure to get in touch. We’re locals! :D Thanks @ZacDavies :) ^RH

Free templates

Over 30 professionally designed email templates tested in all major email clients.
Single-click testing

See screenshots of your email in 20+ email clients and check against spam filters.
Powerful API

Interact and “sync” with your account via simple web-based methods.