Litmus’ number was a little higher: 150% over the previous 6 months. I don’t know what the margin of error is in either study, but even being conservative and splitting the difference between the two numbers nets you a healthy increase. Either way, these numbers show that people are overwhelmingly choosing to view email on their Androids, iPhones, and iPads, and that means finding a way to optimize email for smaller screens.

All of this is a long-winded way of saying that media queries are a way to optimize email for mobile devices, and MailChimp v6.8 now supports them in the normal campaign workflow.

Now, chances are that if you do code your own templates, you already know what media queries are, you stopped reading at “MailChimp v6.8 now supports them in the normal campaign workflow,” and have moved on to implementing media queries into your templates. For the rest, what follows is an overview of what a media query looks like, how to implement it into your code, and even how to set it up so that you can adjust the media query style rules within MailChimp’s campaign editor.

We’re starting with a simple, blank template…

A lightly-modified version of the “basic” template from MailChimp’s “basic layouts” library.

…and styling it with basic CSS:

The same template, after some styling and content.

If you’ve never worked with one, the idea behind a media query is basic: it’s pretty much a CSS stylesheet within a CSS stylesheet; a collection of CSS rulesets that are read and rendered when the trigger for the query is hit. Here’s what the opening lines of a media query look like:

The opening of the media query.

The media query contains two important components: “screen” and “max-device-width.” The “screen” component is the media type and the “only” is, as the W3C so eloquently puts it a keyword that’s “…used to hide style sheets from older user agents.” Whatever. The second component, within parentheses, is the actual query; the media feature (max-device-width), along with the trigger value (480px). In short, this media query says “These styles should only be used for screens, and only when the screen’s horizontal width is 480px or less.”

The W3C Article (or W3C Candidate Recommendation Document, if you’re feeling fancy) linked above lists out the other media features you can trigger on, but for the purposes of this email template, we’re only concerned with device-width.

While you can do all sorts of neat stuff with email-valid CSS, there are three things I’ll focus on: email width, header image width, and font sizes.

Since most emails are wider than 480px (the landscape width of the average device), most emails will trigger horizontal scrolling. For the sake of this post, we’ll assume we don’t want that. Thus, the two basic ways to change the width are by either setting a hard value like 300px for your email’s tables, or to set a hard upper limit with max-width, then set table widths to 100%. That’s what I’ve done here, targeting each table that gets its width set:

This method lets the email fill the viewport up to a limit of 600px.

Next, since the header image in this email is also 600px wide, we should scale it down in line with the email’s total width. The same method used above can be applied to the image (The vendor-specific style rule “-ms-interpolation-mode:bicubic;” is there to account for IE7′s inability to scale images down without making them look horrid):

The header image will fill adjust with the template, to the same limit of 600px.

Finally, we should increase readability on small screens, so bumping up the font sizes automatically is important. A good rule of thumb is a font size of at least 16px for your copy and 20px for your main headings. That might strike you as big, especially if you send tons and tons of content (which you shouldn’t). Our friends at Smashing Magazine posted an article that argues otherwise. The article isn’t specifically concerned with email, but it’s relevant and right. For this email, I’ve bumped the font size up to 18px:

An 18px font size allows for comfortable reading.

After adjusting font sizes in the preheader, body, and footer, and adjusting heading sizes, this is what the full media query looks like:

The full media query stylesheet for this email.

I’ve left one detail for last. If you look at the media query styles, you’ll notice I targeted my tables and table cells using an attribute selector ( table[id="templateContainer"]{…} ) instead of using the traditional CSS route ( table.templateContainer{…} ):

CSS attribute selectors

This method, discovered by Campaign Monitor, prevents Yahoo! Mail from reading the query styles and rendering them instead of the normal CSS.

Finally, here’s what the email looks like on both iPhone (4S) and Android (HTC Incredible):

Some basic media query CSS really helps produce a better mobile email experience.

Not bad, for such a small amount of work. You can even save yourself a bit more time by marking the CSS rules in your media query with MailChimp’s template language editable tags. This will allow you to edit the values of your CSS properties when inside the app’s campaign editor. Simply follow the same pattern already established by the template language:

Avoid digging into your code every time by making query styles editable in the app.

You can download and play around with the template I used right here. That’s all I’ve got. Time to dance.

But how do we know if these videos are doing their job? I get asked that a lot. Well, it’s all about the stats.

Graph of viewership, spiking the day we emailed the Wavelength video.

A big part of the using-video-on-your-website mix is the video hosting service that you use. We’re a long way from 2005 when there was either YouTube, or an .flv or .mov embedded in your webpage. Today’s video hosting landscape is more like a food court at the airport; Do I want some cheap fast food? Or some cheap fast food posing as cheap healthy food because its on flatbread? Or do I want to spring for that place that looks all dark and leathery with lots of TVs and the $18 hamburger? There are plenty of choices out there, but making the choice of who to go with is not always so cut and dry.

We’ve tried out more than our share of hosts these past few years. All have had their pros and cons, their sweet spots and their misgivings. But this year we’ve moved our content to a new home that looks finally like a place to set down some roots. And that place is Wistia.

Along with a long list of the necessary fundamentals, such as solid service and performance, good support, and an easy workflow, Wistia provides some fun and helpful performance metrics that help us know how our videos are performing, and where there may be room for improvement.

One of the minor miracles of the internet and the video hosting revolution is that you have access to an abundance of statistics that can show you, down to the second, what your viewing audience is reacting to, and how. If you aren’t convinced that this is truly miraculous just do a little reading about the complexity and cost of the Nielson rating system for TV shows (viewer diaries, “Home Units” and “people meters”!), then realize that with the internets we get at least the same amount of information as they do for a minute fraction of what that system cost in terms of time, money, and effort.

Recently we sent an email campaign to 1.2 million users that announced a new service called Wavelength. In that email, we linked to a video hosted on Wistia, which meant we could go in after the fact to see how it performed. With Wistia’s metrics, not only can we see the normal stuff like total loads, total views, and average engagement,

The basic video statistic summary.

but we also get to see these nifty little “heat maps” that show each viewers engagement in a neat new way. They also show where in the world the view is from, which is always pretty cool.

Some Wistia heat maps.

The heat maps display a hotter color within the timeline of your video as people scrub or rewind to rewatch any portion of the video. So in a loose sense, we can look for patterns that may tell us what particular points in the video people needed, or wanted to see again. We can also see gaps in the timeline if they skipped sections. Of course interpreting these graphs is a fuzzy science, but if there are similar spots across the viewing audience that see more heat on the map, we can look at that point in the video and consider what was either extra attention grabbing, or maybe extra confusing, our maybe something so incredibly cute that people just couldn’t help but to watch it over and over again.

In this case, there wasn’t a strong pattern of viewing a particular point over and over again, but there was a telltale pattern of fall-off around the 20 second mark. After watching the video again I can see that in the first 20 seconds or so we define what Wavelength does in general terms. After that we launch into more detail. So, many people watched the first twenty seconds and got the gist of it, then switched off.

Statistics showed that 82% of the video was watched on average, which is actually pretty darn good for a web video that is 1:30 in length. If that number was significantly lower, I would be more concerned about that dropoff pattern 20 seconds in. I would be inclined to go back and rework the script or the treatment to encourage viewers not to leave. How would I do it? Maybe have the narration hint at something coming up later in the video, or possibly add a surprising or entertaining moment which may rekindle interest and buy us a little more time with our viewer. As more people are used to seeing and watching video on the web, convincing them to click the play button is getting easier. Convincing them to stick with the video, however, is actually getting harder imho.

All these cool metrics can really help us do just that. It’s simple enough these days to go back into the video and retool it as needed, then export a new version and swap out the last one. This way we can continue to iterate, update, and improve our content as needed. And in my experience, it’s rare that something that is ultimately a subjective piece of creativity, such as a video, gets so much direct objective feedback from a broad audience. So I’ve really found these stats to be a huge help as I’ve continued to create and shape the videos we produce. They’ve also thickened my skin a good bit.

Another nice thing about Wistia is how we also get a lot of control over the look and features of the player.

Simple player customization tools.

Many hosts allow you only limited control over what color your frame and buttons are, and what controls you can include. It’s nice to finally have an easy way to make the player look as minimal as we want it to and to be able to color it to match the palette of the page it will live in. It would have been a big bummer to have a bunch of big, off-color controls covering up the eyes and our pretty new logo in the poster frame of the Wavelength video.

As it so happens, we first learned about Wistia because they contacted us a few years ago when developing their own API thingy between MailChimp and Wistia. It allows you to integrate your video with your email campaign, which is pretty cool . And MailChimp has a Wistia merge tag which allows you to integrate a Wistia video of your own into your email newsletter and take advantage of the awesome statistics. Read about it here.  Ben also just wrote a blogpost about how we allow you to customize and automate your video merge tags.  Pretty simple stuff to do, but as you can see below, it may make waves if you actually use it:

Clickmap of an email newsletter.

This is a MailChimp click map of the email Ben sent out announcing Wavelength. As you can see, click rates on the text links averaged around 4-8 %, but that video staring atcha there got a whopping 62.8% of all the clicks. Maybe it’s that hypnotic eye power getting people to watch (I have a proprietary “hypnotic eye power” filter; merge tag coming soon!), or maybe it’s people’s inclination these days to prefer watching a quick video instead of, or in addition to, reading about something. Whatever it is, it’s these insightful statistics that help prove this video thing is worth keeping our eyes on.

First up is a look at the newest templates in our library: Christmas-themed templates from MailChimp-certified Experts, Creative Media Farm. This month these fine folks delivered quite a selection, with styles ranging from modern:

To designs like this one, which veers in a more traditional direction:

Overall, the folks at Creative Media Farm made sure that there plenty of templates for you to choose from:

The Christmas templates above are only part of the number of holiday designs we’ve got within the pre-designed library. You can also find various designs from MailChimp itself, with a number of designs that are whimsical:

Or more traditional:

And it’s not just Christmas that we cover. You can also find a few Hanukkah templates. And if those designs don’t pique your interest, the majority of our ‘holiday’ templates are flexible in their use, and could work well for Festivus, Saturnalia (if you happen to be an ancient Roman), or whatever it is you happen to celebrate.

As always, these and any other pre-designed templates can be found once you create an email campaign and, on step 3 of campaign creation (template selection), navigate to the ‘pre-designed’ template category. You’ll find Christmas, Hanukkah, and the rest of our holiday-themed templates within the ‘Holiday’ subcategory. Just pick your desired template and edit away: many are quite flexible in their designs, and allow for a high degree of customization through our template style editor.

Enjoy. Merry Christmas and happy holidays!

In preparation, I’ll take a moment to highlight some templates and tools that can help you capitalize on the biggest consumer day of the year, and I’ll start with some templates.

First, a template styled specifically to this task:

You can find this template when you create a campaign and, on step 3 (template selection), navigating to ‘pre-designed’, then to ‘ecommerce’, where you’ll find the ‘Black Friday Sale’ template. You can then use the style editor to tweak the design to suit your needs, or just drop in your content and send away.

Maybe your users need a little more than just a product highlight, however. You can always sweeten the deal by sending out some coupons, using our selection of coupon templates:

You can find these guys in the same way: on step 3 of campaign creation, just navigate to ‘pre-designed’, and then selection ‘coupons’. You can use the style editor to customize the design however you’d like, and each coupon template also includes an example of our QR Code merge tag, which you can include to give users a simple way to redeem the coupon’s value using the Pyow! app.

Perhaps you’re looking for a template that’s a little more ‘seasonal’. If that’s the case, we’ve got you covered with our tons of holiday-themed templates:

The holiday season is ramping up right now (or it’s running full-bore, if my local Target’s decorations are any indication), and we have lots of template choices available. We’ve also got a great selection of Christmas templates on the way, courtesy of our friends (and certified MailChimp Experts) at Creative Media Farm. Here’s a taste of what we’ve got coming from them:

Selling stockings from your shop on Etsy? A book on Amazon? Maybe your band has released its latest album of death metal covers of classic Christmas carols on iTunes, perhaps? You can use our Autoconnect templates, which automatically pull your data from these services, saving you some work and letting you send campaigns quickly and easily.

Armed with this arsenal, you can take advantage of the Black Friday frenzy, but be sure you’ve set up adequate defenses. Sandbag walls, trenches, and an anti-aircraft gun or two usually does the trick. You know how people can get.

When Aarron first introduced OnStage, he ended the announcement with this warning:

We built OnStage quickly and rather than letting it languish in a state of perpetual polishing, we’re launching it today, rough edges and all.

We spent the last few weeks working on OnStage to get rid of those rough edges and introduce a few neat features in the process.

API Keys, no more!

Having to enter your API key every time you wanted to use OnStage was a pain. With our shiny new implementation of Oauth2, you’ll be logging into OnStage with your MailChimp credentials instead. Not only is this much more secure, but it’s so much easier for folks that are constantly using OnStage.

You should find all your previous campaigns, todos, comments, and revisions just like you left them. If you encounter any monkey business, please let us know!

As an added bonus, you should not see as many errors regarding emails already being used for OnStage accounts. We’ve done some reworking of the code to make sure that anyone with any email can collaborate with someone else with OnStage.

Oooh, preetty!

We have a top-notch team of designers and front-end guys. We grabbed a few of them, stuck them in a dark room, and didn’t let them out until we had a beautiful new skin for OnStage. The result is something that is much easier on the eyes, but also contains lots of bug fixes for all the poor souls out there using Internet Explorer.

A few goodies we snuck in there

A broken link in an email campaign is like leaving “sale” advertisements from the month before plastered on the walls of  your store. We’ve now added an easy way to check your links from OnStage just by hovering over a link. You’ll get a nice tooltip that shows you the URL, which you can conveniently click to open that link in a new window.

A lot of you also were interested in knowing who created each todo. You can now hover over each todo entry to show the name of the creator. For all you interns out there that were getting clever on your todos, your brief period of enjoying the first amendment is now over.

Lastly, we figured it would be useful to be able to see the current password for the campaign without having to click on the email link. Hover over the “Invite People” menu to reveal the current password. If you click on the link, the password will be selected for you, ready for a quick CMD + C (or CTRL + C for you Windows people).

We’ve got plenty of  ideas on how to make OnStage great, but we can’t do it without your help and feedback. Let us know what you love, what you hate, and what’s missing so that we can continue to make OnStage better. We hope it makes your email-sending-world-domination plan just a bit easier on you.

Check out OnStage

Here’s what we’ve got for you:

• Newsletter: 12
• Non-profit: 9

While we’ve added another healthy batch of general-use newsletter templates, I think the big blip on the radar here is the expansion of our non-profit category, with easier-to-use, more stable templates.

You’ll find 3 different designs with 3 variations each, but they’ve all got one focus: getting the word out about your cause, and compelling others to help. To that end, each design features prominent donation buttons and social sharing toolbars. Depending on what your message is, you can either be dramatic in style…

…or you can serve up a more muted tone:

Or you can ignore the designs altogether and use your own style; as always, the templates are fully customizable.

That customization is handy, but sometimes you just need to send out content without playing the part of graphic designer. That’s why we continue to expand the ‘Newsletter’ category with a variety of different template options. Need to send a quick note to your subscribers, and want to stay classy? You can use this elegant template:

Maybe you want to send something a little more attention-grabbing in addition to your usual content, like a coupon. We’ve got you covered:

Combined with last month’s batch of 42 templates, and the month prior’s 33 templates, this month’s 21 templates bring us to a nice 3-month total of 95 new email templates. Not too shabby.

We’re already working on next month’s batch, with more non-profit templates, templates tailored for photographers, some that’ll work well for real estate listings, some new Halloween and fall-themed templates, and more coming down the pipe. Keep an eye out.

To personalize an image, Visage generates a custom graphic for each name (or other field) on the MailChimp list that you select—now each reader’s image will have his or her own name magically embedded in the actual image. Neat!

To use Visage, just sign up (you’ll need your MailChimp API key), and you’ll be able to get started right away. Currently there are 12 different templates available, ranging from an authentic shake-cam effect road sign to a band flyer posted on a light pole. Here are some examples of what you can make:

Visage is currently free of charge, and it allows you to generate 1000 custom images per campaign.

Check out Visage

Here’s what we’re adding to the library:

• RSS-to-email: 9
• Fitness: 6
• Technology (iPhone & Android Showcase): 12
• Restaurant: 15

For this release, our focus was on creating some template variations for a category we felt was very under-represented within the library: restaurants. To that end, five designs were created and three variations for each of those designs were built, for a grand total of 15 templates.

These templates allow quite a bit of design leeway to make it easy for you to match your branding, whether you own a coffee shop or a burger bar. While we’re on the subject of entrepreneurship, let’s talk about the new iPhone and Android templates:

Using these guys, you can quickly get a campaign for your new app up and running, using a simple and elegant template design that puts your work up-front and center-stage without you having to expend too much effort.

Maybe you run a small gym or hold yoga classes. If so, boy, are you in luck! We’ve added a new pre-designed category, fitness, and its first batch of templates. You’ll find six templates that let you send out class schedules, news, and featured content to your subscribers:

Each template can be easily changed to fit your branding needs while still retaining a nice, clean design that will hold together across email clients.

For those of you who publish RSS content straight into an email campaign, we’ve added a collection of RRS-to-email templates that are easy to style and are pre-filled with the all of the merge tags you need for a solid RSS-based campaign:

We’ve also moved our Designer Templates – emails designed by web design titans like Veerle Pieters, Mike Kus, and Matthew Smith – out of their “Premium” section, making them available to everyone for free within the pre-designed library.

Finally, we’ve created an expanded look at our email template gallery, showcasing the hundreds of customizable email templates available within the application, made for everyone from beginners to veterans of HTML email.

Spin those campaigns up and keep an eye out as more templates keep streaming in – we’re not done by a longshot.

Here’s a quick breakdown of the templates you’ll find in the latest release:

• Stationery: 6
• Coupons: 12
• Inspirational: 6
• Newsletter: 3
• Eventbrite: 3
• SurveyMonkey: 3

Use the new stationery templates to send professional letters from the head honcho or quick updates to your subscribers on projects in the works (figure 2). If you run a retail store or an ecommerce site, the new coupon templates are going to be really handy as we approach back to school and the holiday season (figure 4). These puppies have QR Code merge tags built in so you can create a discount, then use our Pyow iPhone app to handle the redemption at your store.

The color field newsletter templates are easily customized using color themes (figure 1). Pop a photo into the header and you’ve got an elegant template with very little time invested.

We’ve also updated the Eventbrite templates (figure 5). If you’re promoting events through Eventbrite, you can connect your MailChimp account to send custom emails to attendees.

Simian powers unite with this release as we’ve introduced three new autoconnect templates that let you connect your SurveyMonkey surveys to MailChimp to send fancy invitations to your surveys (figure 5). You can learn a little more about our SurveyMonkey integration over here.

We have a lot more templates in the works too. This is just the beginning. If you’re into designing and coding your own templates, don’t forget to check out our Email Blueprint project over on Github, which contains 35 layouts (including some mobile friendly templates) that have been tested in all major email clients.

Starting with Mail Designer 1.1, you can now export the emails that you author to a MailChimp template with just a couple of clicks!

We are really excited that Mail Designer now works with MailChimp. It looks to be a great option for our customers that don’t enjoy coding HTML or would like an alternative to the MailChimp campaign editor.

The best part of this integration is that the text from the campaigns you export from Mail Designer are fully editable in the MailChimp campaign editor. Just in case you need to make last-minute changes.

Learn more about Mail Designer