Today's digest of the latest articles posted to the MailChimp Blog.
forward this email
visit the MailChimp blog
Blog Update
In this update:

Keep high-density displays from uglifying your emails

share on Twitter Like Keep high-density displays from uglifying your emails on Facebook

High pixel density displays are becoming more and more common, with Apple’s Retina display available on the iPhone 4S, iPad 3, and now the MacBook Pro, and also showing up in devices such as the Samsung Galaxy Nexus. There’s no denying that these new-era displays are gorgeous, but they’re not without fault: high-density displays can make your email ugly.

The reason for that ugliness is an increase in PPI, or Pixels Per Inch, the measurement of the number of pixels spread across an inch of screen space. As displays get better and better, this number climbs higher. This increase has doubled the CSS pixel ratio of these displays from 1 to 2 (quirksmode explains here), so that a high-density display now has double the resolution of an older one; in the case of an iPhone 4s you go from a resolution of 480×320 to one of 960×640 instead, on the same 3.5 inches of screen.

The increased definition makes the small images we all use across the web — icons, logos, etc. — look fuzzy and unfocused. There are several solutions for websites, and a pretty simple one that works well for email.

By doubling the size of an image, then constraining its width with either CSS or the width attribute on the img tag, you can serve an image that maintains its sharpness when viewed on new device screens. This solution is simple, and it works consistently across multiple email clients. For an example of this technique, I’ll use our blog’s update email:

The MailChimp Blog email
The MailChimp Blog email

The email has six small images that get fuzzified. In the header, there’s the MailChimp logo along with the forward and blog icons; in the footer it’s the unsubscribe, forward, and blog icons. Icons in both sections are 24×24 pixels, and the logo is 150×40. At these sizes, and viewed on a Retina display, we get this:

Fuzzy images on a high-density display
Fuzzy images on a high-density display

Since the CSS pixel ratio of newer displays is doubled, we can double the size of the images to 48×48 and 300×80. On the code side, constrain the images to the original sizes used in the template, and that can be done using the width attribute on the img element:

 <img src="icon_header_blog_48x48.png" width="24" />

Simple enough. Apply this technique to each of the small images, and we end up with with a much clearer view:

Images optimized for high-density displays
Images optimized for high-density displays

We could be finished right here, but there’s one issue to be aware of: when you zoom in on the email, you’ll find the same blurring issue we started with, just less severe than it was at first. Depending on the level of zoom the device allows, you’ll see a bit of blurring on a wide variety of image sizes.

I found that the icons in our blog email blurred a bit all the way up to 256×256 pixels on the iPhone 4S Retina display. A 256×256 icon is pretty large, and the file size grows accordingly. That leads to the question of where to stop with the image size. While it’s nice to be able to get rid of the blurring across any display and at any zoom level, you’re adding more to the overall data load burden that your reader has to shoulder. File size may not necessarily matter when they’re at home, on cable internet, but it could be a concern if they’re on a low-tier data plan from their mobile carrier.

With an email that isn’t particularly image-heavy, you may want to chance going for a sharp image at deep zoom levels. If your email is like the MailChimp Blog update, however, you may want to stick to the bare minimum of doubling or tripling the image size, then using media queries to eliminate the need to zoom.

Peter Cooper Makes Money. By Not Talking About Himself.

share on Twitter Like Peter Cooper Makes Money. By Not Talking About Himself. on Facebook

We’ve said it before, but tweets about email marketing with big, fantastical numbers in them are like catnip to us—we can’t get enough of them. Tweets like this one, for instance:

We love supporting good content, too, so we reached out to Peter to get some more information. He wears many hats (developer, podcaster, blogger, author, entrepreneur), but he uses MailChimp to send three weekly newsletters (about Ruby, JavaScript, and HTML5, respectively) to thousands of engaged readers. In a recent 5by5 Founders Talk, Peter discussed how he prefers to link away to thoughtful content instead of promoting himself. Clearly, it’s working, so we asked him to expand on the idea.

Serving Your Readers

“The reader comes first,” Peter said. “Of course, there has to be a payback of some sort for me, but without happy and loyal readers, you have a weak publication, whether it’s a magazine, newspaper or an email list. Sadly, the majority of email newsletters are all about linking to a company’s own projects, products, and news. I think it’s pretty rare that they delight their readers. Though some pull it off!”

Notice how, in the below screenshot from one of Peter’s Ruby Weekly emails, of the 10 links pictured, only one links to his work:

Peter’s email empire began with this newsletter, an offshoot of his Ruby Inside blog, which he started in 2006. He eventually thought his audience might appreciate this wealth of very specific information in email form, too. Turns out, he was right. His elegantly designed Ruby Weekly signup page includes personal touches (“Curated by Peter Cooper and not some big ole megacorp”) as well as testimonials from happy readers (“Peter does all the hard work of keeping up with the ruby world outside of my twitter feed… Means I can be lazy and not do it myself.”).

“The original goal was simply to have another option for readers of my Ruby site to keep up to date with the news I was already reporting on,” Peter said. “The point was that I could promote my training courses, screencasts, and, eventually, e-books to them. This is still a key part of the goal, but along the way, I’ve also played with display advertising, job ads, event promotion, etc., because it takes a longer time to build my own content to sell.”

The result is a bunch of smart, interested folks that love the aggregation work he does and are exposed to all his other projects. He’s got a captive audience that he can sell things to, but he does it in a subtle, non-sales-y way. He treats people like the humans they are—humans who want great content.

“I have a background in editorial and publishing, so I’ve brought all that experience into play here,” Peter said. “I like to think of myself as a publisher first, coder second.”

Choosing Links

His readers give back, too. Starting out, Peter “crawled the usual haunts” for links, places like Reddit, Hacker News, and so on, but his process is evolving with time.

“More recently, I’ve started to get a lot of email from readers giving me tips,” Peter said. “I even have contacts at companies, like Adobe, who send me weekly lists of content on their development sites.”

Based on the feedback he gets from subscribers and how well certain links perform in his MailChimp reports, Peter learns about what his readership wants, and can alter the kind of links he includes going forward. (One of the best ways to do this is to check out the Top Fives section on the left-hand side of your reports page, right under List Growth. There, you can see your campaigns with the best open and click rates, as well as your most-clicked links.) Sometimes, that means including more stories about dependably popular angles, but he likes to make sure that niche topics get their due as well.

“Links that always do well are to pieces of content like ’5 Rails Tricks You Didn’t Know,’” Peter said. “I like to maintain a little enforced diversity, though, so I often link to projects that I know won’t perform super well, but are novel or interesting enough to deserve some airtime. These are always the worst performers, but I think readers like knowing that I’ll give anything interesting a chance.”

Making Money

As far as making money from email is concerned, well… “It’s quite tricky,” Peter admitted. “There are various networks out there, like Launchbit, but if you’re in a very tight niche, as I am, it can be hard to find the most relevant advertisers unless you approach them directly. If you have a pretty targeted topic and, ideally, some idea of who your subscribers are, it’s worth approaching companies in that scene who clearly invest in advertising. Find the most popular blogs, other email lists, etc., and approach those companies with your statistics and demographic information in hand. It can take a long time to build a good relationship, and they may want to do some test mailings for cheap or even free, but if you can find the right company, you could establish something good for the long term.”

(Incidentally, we’ve created something that’s very helpful for finding this kind of stuff—it’s called Wavelength.)

Peter’s turning into a bit of a mogul in the “making money from email” game. Even if he humbly brushes off the suggestion that he’s a pioneer in a relatively new market, it’s clear from the rise of subsequent newsletters growing big lists out of specific topics that he’s motivating others to do the same. But despite some not-so-ideal situations that have sprung out of this, he doesn’t see the competition as a bad thing.

“Unfortunately, I’ve had a few people entirely rip off my landing page, and I’m not too keen on that,” Peter said. “But in most cases, people work on topics that are different from mine and either approach me first or cite my newsletter as an inspiration. I’m only aware of a few newcomers who are direct competition, but it has never hurt. Indeed, the more newsletters, the more the idea of email newsletters get validated in my typically distrustful geek market.”

Find out how each of MailChimp's social features can help you combine your email marketing with your social-media presence.
A look at strategies and tips for growing your blog and building an audience while using MailChimp email campaigns to deliver your content.
How to use MailChimp's powerful features and integrations, from our PayPal integration to our social sharing options, to benefit nonprofits.
© 2001-2012 MailChimp, All Rights Reserved.
512 Means St. • Suite 404 • Atlanta, GA 30318 USA
Love what you do.