Spread the Christmas cheer with our animated email template
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:
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
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!
13th December
lovely! thx!
13th December
Thank you, thank you, thank you!! You have just saved me a few hours work!
Great work!
13th December
great, but it doesnt work for all platforms.
13th December
super duper, thanks CM crew
13th December
@mcangil, that’s why the article sez “Cheerful in (almost) any email client”, Scrooge.
13th December
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!
13th December
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?
13th December
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. :)
13th December
@Ros - My mistake, I forgot to unpack the slices file! It works!
13th December
Haha James, no worries - glad it’s working now and thanks for letting us know :D
13th December
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.
13th December
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!
13th December
Follow up:
I just uploaded it as a “new template” into the template builder and it looks great!
13th December
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!
14th December
Wondering if the snow works at all anywhere beside apple mail?
14th December
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 :)
15th December
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.
15th December
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/
15th December
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.
16th December
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. :)
16th December
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!
20th December
Thanks! You made it snow in the Caribbean!
http://createsend.com/t/y-93A65BE13326ADF1
23rd December
Great work, thanks for sharing! :-)
See it in Google Chrome, but not in Firefox 4.0.1.
Merry Christmas & Happy new year!
23rd December
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>’.
23rd December
Love this!! Thank you for showing me something i didn’t think was possible!
23rd December
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!
23rd December
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….....
23rd December
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?!
24th December
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…. :-}
24th December
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).
24th December
for some reason I am getting an error message:
Images not found
24th December
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 :)
24th December
Loved it. Used it.
Bummed that my Sparrow Mail App doesn’t sprinkle snow. But it’s a lovely visual presentation anyway.
24th December
@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
25th December
@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!
25th December
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!