Home Resources Blog

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 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!

  • essenz_A

    lovely! thx!

  • Justin Sykes

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

    Great work!

  • mcangil

    great, but it doesnt work for all platforms.

  • saul edmonds

    super duper, thanks CM crew

  • eric g.

    @mcangil, that’s why the article sez “Cheerful in (almost) any email client”, Scrooge.

  • James

    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

    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

    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

    @Ros – My mistake, I forgot to unpack the slices file! It works!

  • Ros Hodgekiss

    Haha James, no worries – glad it’s working now and thanks for letting us know :D

  • Purchase Digital / email marke

    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

    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

    Follow up:
    I just uploaded it as a “new template” into the template builder and it looks great!

  • Ros Hodgekiss

    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

    Wondering if the snow works at all anywhere beside apple mail?

  • Ros Hodgekiss

    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

    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

    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 https://venturebanners.co.uk

  • Ros Hodgekiss

    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

    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% &#123
    opacity: 0;
    10% &#123
    opacity: 0.8;
    60% &#123
    opacity: 0.8;
    70% &#123
    opacity: 0;
    100% &#123
    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

    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

    Thanks! You made it snow in the Caribbean!


  • lei ouyang

    Great work, thanks for sharing! :-)

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

    Merry Christmas & Happy new year!

  • Pieter

    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 ‘‘.

  • SBee

    Love this!! Thank you for showing me something i didn’t think was possible!

  • Sun Swing

    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!


  • Jenna Dixon

    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… :-&#125

    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).


  • Lindsay

    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

    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…. :-&#125

  • Dennis Petri

    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

    for some reason I am getting an error message:

    Images not found

  • Hugh Macken

    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 https://bitly.com/sgcampaignmonitor
    Click on “File” then “Download Original” and you should be good to go.
    Happy Holidays and Merry Christmas :)

  • Tim Decker

    Loved it. Used it.
    Bummed that my Sparrow Mail App doesn’t sprinkle snow. But it’s a lovely visual presentation anyway.

  • Ros Hodgekiss

    @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

    @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

    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!

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free