Copy
Email coding tips for mobile, design ideas, weird customers, Instagram integration, and an Air Guitar champion.

MonkeyWrench

In This Issue:

MailChimp's Mobile Email Study
Add Instapaper "Read Later" Buttons to Your Campaigns
Design Your Emails for Mobile
Optimizing Images for High-Density Displays

How Do People Read Email on Mobile Devices?

We conducted a study to find out.

You probably heard that smartphones outsold PCs early last year. Mobile email usage is obviously skyrocketing, so our UX Researcher Jenn studied how people read email on their smartphones.



The result is this 20-page research document that doesn't just share coding tips for email render ability–it reveals how people are consuming email differently, and how you can adapt:
  • 72% of the people we tested read their emails in bed, first thing in the morning. So maybe you want to hold off on that fluorescent yellow graphic?
  • People spend a lot of time filtering and prioritizing the emails on their phones. Why not help them with some strategically placed "read later" buttons?
And there's a lot more where that came from. Check out the study in our Resources section.

Speaking of Strategically Placed "Read Later" Buttons...

Add Instapaper buttons to your email campaigns.

After the clever folks at The Do Lectures showed us how to add a "Read Later" link to a newsletter, we couldn't help but "just make it a button." The Instapaper merge tag lets you add automatic "Read Later" buttons to your RSS-to-email and normal newsletters. This is particularly handy if you're posting lengthy articles in your newsletters (like we tend to do), since your subscribers might want the option to save that content for later. Here's how you can add an Instapaper button to your MailChimp campaigns.

Don't have time to read it now? Click this button to save it for later:

Read later on Instapaper

See what we did there?
Instapaper button in emails

Responsive Email Design

Improve readability with mobile styles.

Over at Clickz, Mike Hotz has written a really nice overview of responsive email design: Every Email Version Is Your "Mobile Version". They've got a great visual explaining how a responsively designed email adapts when you view it on large displays vs. tiny smartphone screens:

Clickz - Responsive email design post by Mike Hotz

If you're into this kinda thing, you should also check out StyleCampaign's (insanely detailed) work in this area.

In case you missed it, our resident email-design expert Fabio wrote up a nice case study on how he designed an email template with media queries to be more readable on mobile devices, and responsive in web browsers.

In typical MailChimp fashion, we decided to "just go ahead and make that a button." We've added some mobile email features in MailChimp that'll help you test your media-query code and email responsiveness...and fast.

Mobile Email Testing Tools

The mobile preview allows you to instantly test how responsive your code is on mobile devices, in portrait or lanscape mode.




We've even included a handy "push to my smartphone" feature to save you from the agonizing "send-test-refresh-inbox-then-repeat-a-thousand-times" routine:




This feature will "push" your test email to your mobile device (via the MailChimp Mobile app) so you can get instant previews of your email on a tiny screen. It's a great, quick way to test responsiveness.

If you work for an agency and your clients need the option to tweak mobile styles, you'll like our new Mobile Styles tab.

 

and we've totally redesigned all email archive toolbars to be optimized for mobile:

Mobile Archive bar

Tip: Optimizing Images for High-Density Displays


Don't let Retina displays make your emails look ugly.

High-pixel density displays are becoming more and more common, but an increase in pixels per inch can make small images look fuzzy and unfocused. Fabio has a simple way to avoid using ugly images in emails:

Double the size of the image, and then constrain its width with either CSS or the width attribute on the img tag. The result is an image that maintains its sharpness on new device screens and works across many email clients.

Here's what our blog update header looks like with 24x24px icons and a 150x40px logo, viewed on a Retina display:

Here's the same header, with the image sizes doubled to 48x48 and 300x80, and constrained to their original sizes on the code side. Much clearer:

Keep Up With Us


Twitter

Facebook

63%
of Americans and 41% of Europeans

would either close or delete an email not optimized for mobile. More mobile stats from Return Path.

Even More Templates

We added a bunch of new email templates recently, including a music series designed by Rob Weychert:

Note the imaginary (or are they?) bands in the templates: Ambr, Middle Managers of Murder, Zoey., The Flat Tyrants, and M.C. Esh.

Rob has worked at Happy Cog, which is famous for… well, pretty much everything web, and Harmonix, famous for Rock Band. He moonlights as air-guitar champion Windhammer:
Windhammer - This man designed your email templates.
Yes. That is the man we hired to design these email templates. 

Wait, did somebody say "Rock Opera?"

 

Chimpadeedoo in Action

Chimpadeedoo makes it easy to collect email addresses with your iPad and import them into your MailChimp account later. It's an attention-grabber too, and we've gotten some pretty impressive success stories from users. IT consultant Armin Ghazi used the app to sign up 10,000 subscribers in just one year at a Monkey Joe's Parties & Play franchise. Meanwhile, Schecter Guitars took Chimpadeedoo on the road with the Uproar Festival, signing up 22,000 people in a month and a half. With results like these, maybe it won't be so hard to convince your boss to buy an iPad after all.

Customer Stories

Some really interesting people use MailChimp. Some might call them creative. Or eccentric. Or downright weird. We just know they're passionate, and they love what they do. So we've been sending our VideoLab director Josh around the world to document their stories

Don't worry: these don't talk about MailChimp much (if at all). They're not testimonials or case studies. They're stories about creative people who make things–just like you. For example below, John Webb, Prospector and Peddler at Raleigh Denim
Raleigh Denim

Email Design Ideas

Need a little email design inspiration? We're gathering the best we can find from MailChimp customers, and posting (or is it pinning?) them on our Pinterest page (or is it a pinboard?). Screw it. Just go look at the pretty, pretty emails here:
Email design inspiration

Instagram -> MailChimp

Know a business owner that's not so handy with computers (let alone MailChimp) but is a rock star at snapping pictures with their smartphone? Tell them to use Instagram. They can shoot pictures of the events they host, the cupcakes they bake, the clothes they design, the hot rods they build, the tattoos they–um, stabbed, or the furniture they–um, carpentrifated. 

Anyway, after that you can set them up with a MailChimp account, and just integrate it with Instagram. We'll send automatic emails to their customers every week or so, loaded with their pictures and captions. 

Boosh. Now it's super easy to send occasional newsletters to their customers. Do that thing you love, snap a photo of it, then get back to that thing you love to do. MailChimp does the rest automagically.
MailChimp's Instagram

Case Study: Improving Sales 57% By Tweaking Transactional Email Design

If you run an app (and who doesn't these days?), you send transactional emails (registration emails, receipts, password reminders, etc). Chances are, you don't think about them all that much. But tiny, seemingly obvious design tweaks in those emails can dramatically increase sales for you. So long as you're tracking your transactional email performance. Mandrill, a new service from MailChimp, helps you do that. Here's an example how.

Transactional email w/MailChimp
© 2001-2011 MailChimp. All Rights Reserved. Love what you do.
unsubscribe from this list   update subscription preferences   login to MailChimp