Browse by...
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!

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.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free