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