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