We’re in the process of launching some cool new features in MailChimp v7.2.  The theme for this release is “mobile.” The features are currently propagating across all our data centers, and all users should see them live in a day or two. Here’s what’s new:

1. Mobile-friendly (responsive) email templates
2. A new “mobile styles” tab in our campaign editor that lets you easily tweak media query settings
3. New mobile email testing tools

Let’s get into the details:

 

1. Mobile-friendly email templates

A little while back, Fabio wrote up some nice coding tips for making your email templates more “readable” on mobile devices. The basic  concept is to design your emails with some special code that makes your text nice and big when it’s on a smartphone, then it all scales back to normal size when viewed on a desktop. For the non-techies, we went ahead and created some responsive, mobile-friendly templates for you:

(yes, more are in the works)

 

2. Mobile style editor

The media-query code that magically resizes your text and images is baked right in to those new templates. And if you want to adjust the media query settings, we’ve added a “Mobile Styles” tab to our template editor:

 

This also means that designers can upload their own custom-coded responsive email templates, and this tab will allow their customers to adjust scaling for mobile devices. Just setup your CSS editable blocks with appropriate tags (details coming soon from Fabio).

 

3. Mobile email preview tools

When you choose one of those responsive email templates (or code your own), you’ll want to see how it scales up and down as your users move from mobile to desktop and back.

Mobile Preview

So we added a new “mobile screen” option to our pop-up preview window:

And if you’ve read our Mobile Research Guide, you know that most people “zoom” the content on their phones by rotating them to landscape view. So we figured we should add a “rotate” option:

It’s also worth noting that when you’re editing a template’s mobile styles (using the tab described above) the content inside our mobile preview updates instantly, so you don’t have to click the pop-up preview button. And you can rotate the phone there as well:

The pop-up preview tool is meant for speed. When you’re testing your email design’s responsiveness, you just want to see what happens to your text and images as they scale up and down, or as they wrap around on smaller screens. But the pop-up preview is not a pixel-perfect accurate view of your email.

To get perfection, you need to send test emails to your smartphone.

And for those of you who have gone through this process, you know how that goes. You code a little, then send a test to your Gmail. Code a little, send test to Gmail. Code a little–hey, where’s my test? C’mon. Is MailChimp down? Is Gmail acting up? Did it get junked by my spam filter? Oh wait, there it is. Code a little… You get the gist: waiting for that email to make its way through the intertubes, past firewalls, and around spam filters can be unbearable sometimes.

Push To MailChimp Mobile

So in addition to the pop-up preview, we created a “push to MailChimp Mobile” option:

If you have the MailChimp Mobile app for iPhone or Android, you can use this option to push an instant preview to your phone:

The app will tell you that it’s received your preview, and when you click “View” you can test the responsive bits of the email:

This way, you don’t have to keep hitting “refresh” on your smartphone’s inbox, and wait for your test emails to arrive.

Obviously the only true way to test is to actually send the email to your inbox (you’ll get the best representation of the email, and you’ll see if your content will pass spam filters). But when you’re just checking your design, you want instant gratification. Push to MailChimp Mobile is a nice way to get instant previews in a real mobile environment. By the way, this feature opens the door for a lot more instant interaction between the MailChimp web app and the MailChimp Mobile app. Exciting times.

Litmus Testing

You probably don’t have a mobile lab with a bunch of different phones to test on.  So it’s a good thing we have the Inbox Inspector (even cooler that it’s free now). We thought it would make sense to bundle the Inbox Inspector into a new “preview/test” button:

 

From there, you can test on the typical desktop email apps, or choose from a bunch of mobile email app options:

 

that will generate 18 different mobile previews:

 

 

We ran out of time, so we couldn’t squeeze all the mobile enhancements we wanted into v7.2. So there will be even more coming around in v7.3 near the end of June.  There are other slightly-less-mobile features we still need to announce, but those will need to wait until tomorrow, when we’ve finished propagating v7.2 to all our user accounts.

 

 

In Case You Missed It…

This is a good time to mention some other mobile features built into MailChimp:

 

1. Segment your list and target the mobile users

Our user-agent stats can help you target mobile device users:

 

2. Signup QR codes

All signup forms have built-in QR codes for faster mobile subscriptions:

 

3. Mobile-optimized signup forms

In 2010, we quietly added some code to all MailChimp-hosted signup forms that automatically zoomed them in on mobile screens. Tapping into the email field also changes the user’s smartphone keyboard to make email input a little more convenient (note the “@” key):

 

Also See:

• Download our free Email On Mobile Devices research guide.
• Don’t want to use a native app on your smartphone? We’ve also built a mobile web app that you can access through your browser.
• Case study: Schecter Guitars takes our iPad app, Chimpadeedoo, on tour
• Our Mobile Lab has built quite a few apps, plus some handy toolkits for mobile developers