Campaign Monitor Blog & Gallery

Dropmark

Greg Strutton — 2012-05-16T19:17:06+00:00

Thanking your beta testers is important! They are the people that helped you get your application to a point where it's ready to be unleashed to the world. How better to reward them then by sending a little treat via a simple, yet fantastic looking email.

This campaign for the Dropmark collaboration app by oak is split into five different sections, two of which are the obligatory header and footer areas, just as you would expect. The first main content area is short, sweet and very succinct, thanking testers and giving the opportunity to upgrade. Then we have a little section showing what's new, including screen shots. Nice touch as the tester may not have seen these updates. Finally, there is a section which provides information about what Dropmark is, which is handy for those recipients that may have been forwarded the email... Or if you're absent minded, like me.

Why hold email to a higher standard?

Ros Hodgekiss — 2012-05-15T04:55:30+00:00

The other day, Laura at Word to the Wise got me thinking with her post, 'Email is different'. To loosely recap, the post answered a question which likely echoed the sentiments of many towards issues like anti-spam legislation and permission, being:

'Why do so many feel that email should be somehow held to a higher standard than other direct marketing channels?'

In comparing TV and radio segments to email, Laura made some clear distinctions - the former two have been marketing channels from the beginning. They're broadcast mediums. They've been created by marketers, are wholly paid for by owned by marketers and therefore marketers are entitled to pester each and all who choose to tune in with marketing messages.

Email is different because it's not solely a marketing channel. The cost of spam isn't borne simply by the sender, but by hosts, ISPs, recipients and everyone in-between.

Nonetheless, it must seem strange to those with limited email experience that it's not okay to purchase an email list, while the practice of buying and selling personal information remains widespread amongst telemarketers and direct mailers. Why should email be put on a pedestal? After all, consumers don't pay phone line rental in order to receive unsolicited calls at dinnertime... But they still happen, without consequence to the call center, or their clients.

I'm sure a lot of designers, perhaps you included, have had conversations along these lines. Personally, I think senders of unsolicited email should be held accountable because they cost ISPs and ESPs a supreme amount of development time - all those super-intelligent engineers working on spam detection and filtering tools could really be off making the world a better place in other ways. Senders can create worldwide, widespread inconvenience, with very little time and effort. They should also be held accountable because it's technically possible to do so.

However, this is a can of worms I wanted to share with you. When your clients ask why they can't purchase lists and send unsolicited email, what do you say? We're looking forward to your opinions in the comments below.

Workfu

Greg Strutton — 2012-05-10T01:19:17+00:00

We're really pleased to introduce... This neat little notification email from WorkFu!

When it comes to letting your users know that you have made changes to your application, it can be easy to over do things a little. Here however, is a great example in getting the details out in a simple and efficient way. Even though it hasn't been optimised for mobile devices, it still reads really well on my iPhone. The customised Twitter button, inviting current users to share with friends is a fine touch.

It's great to see Mike Kus and team keeping their users so keenly up to date during the beta of their up-and-coming job site, especially as communications like this are so often just an after-thought amidst all the development and design busyness that leads up to a launch.

Really simple, but really effective!

Mobile set to surpass desktop and webmail email client usage by July

Ros Hodgekiss — 2012-05-08T00:14:09+00:00

Use of mobile email clients is set to surpass desktop and webmail client usage by July, according to the results of a recent study by our friends at Return Path. After examining data from over 90 email clients, amounting for more than 130 million data points over a 6 month period, Return Path found that while webmail clients overall are on a slow decline, mobile views increased by 82.4% over the same period (March '11 – March '12). Mobile devices currently claim 16% of overall email client market share, with 85% of mobile email opens occurring on an Apple iOS device. This is comparable to our earlier findings.

Return Path also found that there is an uptick in mobile email readership during the weekend, which can be attributed to email recipients switching from the desktop to a smartphone outside of office hours. Conversely, it's at its lowest on a Wednesday, when presumably folks are at their most busy tackling their Outlook, or OSX Mail inboxes.

The implications for email senders like you and I are fairly clear. As Tom at Return Path states in his summary:

"... those that aren’t tracking which device their subscribers are reading their emails on, or optimizing their emails or websites for mobile devices stand to lose out. A poor user experience could mean no response, no action, or plainly put, no ROI."

If you aren't already optimizing your emails for mobile, now is the time. To set you on the right path, we've got a practical primer on email design, not to mention a neat template builder which can whip together mobile-ready campaigns in a matter of minutes.

Out of curiosity, will Return Path's findings change the way you send campaigns? Let us know in the comments below.

TEDxBend

Davida Fernandez — 2012-05-07T01:47:51+00:00

Do you remember the day you discovered all those TED videos that were suddenly available to the common joe? It was like a whole new world opened up. This smart and visually stunning email by TBD captures the Ted brand so well with it’s modern art styling, dramatic colors, and that deceptively simple yet enticing graphic that is reminiscent of those static “moving” illusions.

A nice narrow layout ensures mobile friendliness and a clever use of layout space means that a lot of the important info gets above the proverbial fold. All around, an email that will grab attention when it arrives.

How can we improve? Let us know and score a t-shirt!

Ros Hodgekiss — 2012-05-03T06:55:30+00:00

Customer feedback shapes much of what Campaign Monitor is today, not to mention what it will become in the future. So we thought we'd reach out and see what one thing Campaign Monitor customers like you would like to see improved about our service.

In return, we've got a modest mountain of ultra-exclusive Campaign Monitor t-shirts to give away, one per customer. Apologies in advance if we run out of your size - you'll see what's available after submitting your feedback. If we've run out of shirts and closed the giveaway, don't worry - we'll have new swag and more giveaways in the coming months, so watch this space.

Fill out my online form.

Thank you so much for helping us improve - we'll be in touch if we make good on your suggestion. Now get some of that t-shirt action!

The Turtle Conservancy

Davida Fernandez — 2012-04-30T06:46:18+00:00

Hello, my name is Davida and I like Courier. I’ve always liked it, sometimes secretly, like when my colleagues would be bashing it’s name loudly from the desk next over. But I’ve always loved the way it gives a typewriter feel and when combined with the visual metaphor of paper, although commonly used, I really do think works well.

Adding to this design by The Turtle Conservancy are pleasing textures and adorable photos. The designers make nice use of white space to separate out the articles which helps bring attention to the ‘Read More’ link on the shortened articles. Generally, I would recommend against such a long email, but with such a specialized topic I’d be willing to bet that this audience is very engaged and would be happy to receive a lot of information on a topic dear to their hearts.

Email results in more shares, conversions… And is still good value

Ros Hodgekiss — 2012-04-25T23:13:07+00:00

When justifying the time and effort that goes into email marketing, it's always good to have a few stats on your side. It's likely you've heard some of the big reasons (like its return of $40.56 for every $1 invested in 2011), however in a world that's still social media mad, there's two stats that show that email is still on top, being sharing and conversion rates.

'Forward to a friend' the most common share method

"A food delivery service gets 70% of its shares through email and another 15% via Facebook."
- Social Sharing: Twitter has highest amplification rate, email has highest conversion rate

While Twitter and Facebook may be where many consider social sharing to be at, email dominates social referrals.

MarketingSherpa's blog reported on this in, 'Social Sharing: Twitter has highest amplification rate, email has highest conversion rate', which reflected on the experiences of a recent referral program by Extole, a consumer-to-consumer social marketing company. The study found that Extole customers who participated in the referral program shared with almost three and a half friends on average, with most of those shares occurring via email.

For us, this isn't unusual behavior. For example, here's a snippet from the social sharing reports following our most recent monthly newsletter, sent to over 130,000 subscribers:

Despite featuring equally prominent Twitter and Facebook share links, 83% of shares were via the 'Forward to a friend' link in the campaign. This means that subscribers were over six times more likely to share the campaign via email, versus Twitter and Facebook combined!

Email results in more conversions

What's important to many business owners is not so much how many clicks an email or tweet generates, but how many of these result in actual conversions, let they be a sale, an opt-in or a coupon redemption. Again, email rules. Based on the same Extole study, email shares resulted in a "21% open rate, 80% clickthrough and 17% conversion (the highest conversion rate of any channel), which breaks down to .17 clicks per share." This is impressive, considering that Facebook had a conversion rate of only 1.21% and the overall average clickthrough rate for social referral programs using Twitter, Facebook, personal URL and email combined was 42%. Or as Angela from Extole noted, "We’ve always known that word-of-mouth marketing was very powerful, and converted at an estimated three to five times higher rates than other channels".

 The great news is that it's easy to add social sharing to your email campaigns, let it be a 'Forward to a friend' link, or Like / Tweet button for Facebook and Twitter respectively. Here's our walkthrough on adding sharing to campaigns... Or you can add your own links on the fly to templates via the email editor.

Many thanks to MarketingSherpa for sharing their study with us. What have your experiences been with social sharing? Why do you think email trumps Facebook and Twitter? Let us know in the comments below.

The Bridal Photographer

Jarrod Taylor — 2012-04-23T23:48:44+00:00

This eye-capturing email campaign, designed by Matt Hackett, packs a lot of content well into a small area but remains uncrowded and easy to read. A peek at David Bostock’s stunning wedding photography portfolio is accompanied by testimonials, contact information, links and more.

The distinct separation of foreground and background colors is emphasized so simply by the subtle shadows around the top and bottom corners, assisting the photographs to leap from the screen to the viewer’s attention.

We particularly like the detailed permission reminder, which leaves no doubt in the reader’s mind as to why they’re receiving the email. Overall, this is a thoughtfully-designed email and a credit to Matt Hackett’s familiarity with the medium.

Hats off to Hotmail, for replacing symbols with oversized emoji

Ros Hodgekiss — 2012-04-19T23:25:51+00:00

This issue has been resolved by Hotmail - many thanks to everyone who contacted them with their emoji-related grievances!

This week, a rather obvious Hotmail quirk cropped up. By obvious, I mean that a garden-variety set of symbols like © ® and ™ are being replaced by , or 19px x 19px 'emoji' GIF images. Apparently Hotmail thought this would be a fun way to spice up HTML email newsletters, when in fact, it's an annoyance to designers, who don't want to have tiny footer text broken up by a © character that's the size of a fist.

Yes, the images are here to stay - there's a new bit of JavaScript code in Hotmail which ensures that no symbol goes by unmolested.

To make matters worse, if you have img { display: block; } in your email design's CSS code to prevent gaps in Gmail, each emoji will be followed by a line break (pictured).

Bringing emoji down to size

Thankfully, there's a fix - resizing the images so they're more in line with the surrounding text. After viewing a couple of the solutions being spun around, we took a crack at our own and found that adding the following CSS code to your stylesheet works a charm:

.ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; } 

In the above fix, we're using an attribute selector to say, 'if an image is assigned a class that starts with 'Emoji', make it 10px x 10px'. You can change the size to whatever suits the surrounding text. The display: inline !important; has been added to prevent the Gmail gap fix from forcing line breaks. Also, the addition of .ExternalClass prevents Hotmail from renaming the img[ ... ], as it does to 'unique' classes.

Alternately, if you were meaning to superscript symbols like ™, you can try:

.ExternalClass img[class^=Emoji] { width: 8px !important; height: 8px !important; vertical-align: super; display: inline !important; } 

While we're talking Hotmail quirks...

Stephen here recently brought to our attention that mailto: links have been disabled in Hotmail. As we've mentioned here before, using a contact form is preferable to using a mailto: when collecting responses - now Hotmail has made this more so.

Many thanks to Email Design Review for diligently reporting the issue and inspiring the above fix. There's a great discussion on Hotmail's emoji in our forums, so if you're more than welcome to join in and hang out with some of the smartest folk in email design.

St. Theresa Catholic School

Stig Morten Myre — 2012-04-19T23:12:37+00:00

This invitation email for St. Theresa Catholic School by Fervor Creative knows what its job is, and does it well. It’s simple use of three colours and subtle shades thereof, basic but effective imagery, plus short but informative content that makes this campaign a delight. The ample use of text ensures that most of the message can be read, even when images aren’t displaying in the inbox.

On that note, the only minor suggestion would be to have a text alternative for those buttons, to be sure they still have some context under these conditions. But overall, this is a great campaign that’s sure to captivate subscribers at any time of day or night.

Time Out, on sending successful newsletters in 4 minutes or less

Ros Hodgekiss — 2012-04-19T04:01:16+00:00

Long before food bloggers and review sites came into being, there was Time Out, a publishing company that's spent the last 40 years guiding us on what to do and where to go in the world's most exciting cities. Given the long-lasting success of their monthly magazines and websites, it wasn't really a surprise to see their email campaigns kicking some serious goals, too. In our most recent case study, we got together with the Time Out Sydney and Time Out Melbourne teams to find out how email fits into their fast-paced publishing schedule and get a few tips on how to send compelling email newsletters.

"...we can design an email, send a test and schedule it within 4 minutes - no joke!"

If you've only dreamed of getting your newsletters out the door in minutes, as well as consistent click rates of 45-50%, then there's practical advice in here for you. Of course, it always helps to have a team of talented writers and photographers like Time Out does, but even those on a smaller budget than this content powerhouse will find a takeaway or two.

It also goes to show that 'old' and 'new' media are in no way incompatible. The idea that websites and email are somehow corroding the relevancy of print is at odds with the Time Out approach, which uses email to offer timely updates and bolster the brand in between their monthly magazine editions.

Read the full Time Out interview, or browse through our other case studies, including Q&A's with 37signals, Xero and more.

The Ghostly Store

Jarrod Taylor — 2012-04-18T06:06:04+00:00

The Ghostly Store sells a variety of cool stuff like music, art and clothing - and we thought this campaign by Daniel Hunninghake looked pretty cool too!

The overall appearance is a very neat, lightweight design. The right balance of text and the variety of ways the products have been laid out make the email an interesting browse. Also achieving this balance are the call to action links, which are subtle, yet striking. The purple text mimics Ghostly’s logo and the light gray background and fine shadow give the links a tactile “button-like” feel.

We always like mobile-friendly layouts and this is one of them. For example, the links here have been set apart from the text (and each other), reducing the risk of accidentally tapping things that by accident.

Deliver the goods with Goodsie’s online storefronts and email editor

Ros Hodgekiss — 2012-04-17T01:30:34+00:00

Selling something? For a refreshing store-building experience, check out Goodsie by HiiDef, popularly known as the makers of Flavors.me. Goodsie is quite simply, a stripped-down, yet full-flavored online retail service for creating branded storefronts, sans code. You can either create a stand-alone store with a custom domain, or embed your products into an existing site, like a Tumblr or WordPress blog. Of course, the 'must-haves' are all there, like payment gateway support, coupon management and detailed sales stats.

To add the icing on the cake, Goodsie now sends email campaigns and manages mailing lists using Campaign Monitor. Oh, did we mention that you can build really sexy storefronts? Check it out:

Email marketing in the express lane

As a fan of Flavors.me, I was excited to fire up a Goodsie Premium account and try building a store for myself. As it turns out, they've gone the whole hog with their email marketing service, which features a drag-and-drop email builder that automatically passes the completed HTML email to Campaign Monitor for delivery. You don't need to start a Campaign Monitor account, fiddle with API keys or pay additional fees to send as a Premium user - Goodsie handles all this for you behind-the-scenes. After sending, it also provides sales analytics so you can measure the impact of your email campaigns against your bottom line.

Another nicety is that mailing lists are handled for you in your Goodsie account - simply create a list and let the app's shopping cart and order database integration populate it with subscribers. Targeted email campaigns can be sent, based on customers' order history, purchase amount and geography.

Email marketing support is only available in Premium accounts, which are a flat $40/month. Considering that this includes email delivery and list management (alongside a growing list of extra features), Premium accounts make for bloody-good value.

The best of both apps

What I really like about the Goodsie / Campaign Monitor matching is how it cleverly draws the strengths of both services. Goodsie offers a stylish, streamlined, code-free store experience - building and managing a store feels effortless. We've worked towards offering a professional, white-label service to designers, backed up by robust infrastructure. Silently linking the two services via our API makes things almost too simple. When sending campaigns from within the app, I couldn't but help feel that I was missing a step or two - wasn't Goodsie going to prompt me to enter my details? Hold on, my newsletter is sending... Wow.

Overall, Goodsie gives us the good vibrations. You can trial a Premium account for free for 30 days, then continue for $40 a month, or step down to a Standard account for $15 USD a month. Find out more at their site.

International Dance Festival Birmingham

Stig Morten Myre — 2012-04-16T00:29:51+00:00

The little sketches on this email produced by DanceXchange for the International Dance Festival Birmingham really bring it alive. The newsletter layout makes for an easy read in email clients - for example, the single column of text is likely to display nicely on a mobile device. Well done to designers Supercool for making it happen.

That said, we’d love the permission reminder in the footer to be more meaningful. Something like, “You’re receiving this email because you signed up for Home updates via …” would be appropriate. We’ve featured a couple of tips for writing effective permission reminders.

Overall, this is a carefully designed and visually interesting campaign, not to mention a great example for other organizations taking part in events leading up to the 2012 Olympic Games.

Animated GIFs in email: A new approach to an old format

Ros Hodgekiss — 2012-04-12T04:53:23+00:00

Animated GIFs are going through a renaissance. In the last few months, we've seen them resurrected from the cringe-worthy virtual graveyard of 'Under Construction' banners and funny profile pics, to be redefined as fine art. This trend is particularly relevant to email design, where GIFs and CSS animations are the only way to add moving images, given the poor video support across the most popular email clients.

But why use them? As Paul Boag quotes in 'It’s time to look at animated gifs again':

"Animated gifs can breathe some much needed life into the imagery on your website. They grab the users attention and act as design delighters, making your site stand out from that of the competition."

The same can be said for email, in which the 'stand out' -ness of a button or call to action can make a considerable difference to campaign results. Anna Yeaman at Style Campaign demonstrated how an animated video preview lifted her campaign's click-rate by 26%... And there's no reason why you can't achieve the same.

Support for animated GIFs in email

The great news is that animated GIF support is pretty much universal across the major email clients... Except Outlook 2007 & 2010 (you guessed it). In Outlook, only the first frame displays - which means that if your animation contains any important information, it has to feature on the first frame or risk being lost. Here are the full results:

Desktop email clients	Result
Apple Mail	GIF plays
Lotus Notes 6, 7 and 8.5	GIF plays
Outlook 2003, Express	GIF plays
Outlook 2007, 2010	First frame displays
Outlook for Mac 2011	GIF plays
Windows Live Mail 2011	GIF plays
Web-based email clients	Result
AOL Web	GIF plays
Gmail	GIF plays
Hotmail	GIF plays
Yahoo! Mail	GIF plays
Mobile email clients	Result
Android (default)	GIF plays
Android (Gmail)	GIF plays
Blackberry	GIF plays
iPhone	GIF plays
Windows Mobile 7	First frame displays

Support for animated GIFs is rock solid. Compare this to support for video or CSS3 animation and you'll see why the alternatives are seldom used.

Examples from our customers

We couldn't wrap up this post without a couple of great animated emails from folks like you. Click through on the images to see them animate:

iart interactive ag

Clarity Communications

Hungry Castle

Superbrothers

Style Campaign has a great selection of animated emails in this blog post, not to mention a solid tutorial so you can get started on your own animation creations!

We're really looking forward to seeing animated GIFs take off, both on the web and in email. So now, we'd like to hear from you - do you feature animated GIFs in your campaigns? Have any favorite examples? Share them with us in the comments below.

Enigma Marketing

Diana Potter — 2012-04-10T04:18:06+00:00

If Enigma's goal is to make 2012 "bigger, bright, better..." then they are definitely off to a great start with this email design. The colors absolutely leap off the screen in what could have been an overly bright cacophony of colors and images, but instead just work incredibly well and come across as a cheerful and exuberant tone.

We love their focus on mobile optimization, as shown by their use of media queries and a one-column layout. If you think this looks nice on the desktop monitor, it looks even better when viewed on your @media -supporting phone. If you're keen to do the same, why not take a look at their code, check out our blog post on mobile email design, or easier yet, use the template builder?

One suggestion would be that they increase the contrast between their text and background colors, though. Some areas with grey or white text weren't as easy to read as they could have been. But overall, this is a campaign that's worth cracking open the champagne for!

Email: Just write about it!

Ros Hodgekiss — 2012-04-04T07:13:13+00:00

The other day, I came across a timely post on Smashing Magazine, titled 'Publish What You Learn'. Timely, because I was amidst writing our recent post on removing spacing from tables in Outlook, knowing that this newly-discovered tip would be sure to help other email designers. While Smashing's post was focused on the benefits of sharing your web development know-how, I felt that the 'publish what you learn' mantra was even more relevant to email design, where the quirks are many, but often, information on email rendering issues is very thin on the ground.

Previously, I've encouraged customers to contribute to blogs, or better, start their own. In one case, the response was, 'Oh, but no-one would read a blog by little old me', which in my impression was shrugging off a good opportunity. In reality:

There are only a handful of email design blogs out there, such as Email Design Review, StyleCampaign, Email Fail and of course, this one. It's by no means an over-saturated field.
There aren't that many email marketing 'celebrities', either. This is a field where you can produce great work and stand out.
Blog posts on email design tend to get a lot of attention. In the last year, a single post on background images in email received over 62k hits from Google alone! That doesn't count all the reposting and tweeting that often occurs.

The bottom line is, if you're designing for email and you come across a good piece of advice or a fix to some Outlook quirk, just publish it. Sharing what you know will not only help countless other people, but it could really lift your profile, too.

TYPO San Francisco

Ros Hodgekiss — 2012-04-04T03:50:43+00:00

Just in time for TYPO San Francisco (5-6 April), we're featuring one of their beautiful email newsletters, by event organizer and cool customer, FontShop. As can be expected, its been designed by type nerds, for type nerds. A variety of typefaces have been used, mostly of the sans-serif variety, to create a modern, harmonious look. There's a lot of visual interest to be had, thanks to the use of their molecular model motif, bright colors and good-quality images. Before anyone goes on to say it's too image-heavy, it's to be noted that all the important stuff - registration details, speaker bios - are all in text, so the message is not lost when images are off. My only recommendation is that this announcement should feature a call-to-action and links that are not so buried in the text - my fear is that after a couple of seconds, a reader may not know how to respond. But all up, this is a great design that practices what TYPO preaches by placing typography in the fore. Tickets are still available for TYPO SF, so if you don't have one already, it's your last chance to register!

Removing spacing from around tables in Outlook 2007 and 2010

Ros Hodgekiss — 2012-04-03T06:03:45+00:00

Finally getting atop an annoying email rendering bug gives geeks like us near-endless, t-shirt removing satisfaction. Especially when it's plaguing our newsletters. In this instance, our adversary was 3px spacing to the left and right of tables with align="" applied to them. The stage was Outlook 2007 and 2010. While this has been a long-running issue, things really came to a head when I was coding our latest email newsletter, only to find that two text boxes nested in a table would not sit alongside each other, thanks to said gaps:

Using align="" to float tables alongside each other is starting to be used as an easy way to convert a regular 2 column email design to a 'wrapped' 1 column on mobile devices. We'll cover how to do this in the blog shortly.

Anyway, after an agonizing hour or so of trying to close the gaps with padding and margin, I scheduled the campaign and walked away in defeat, knowing all too well that our Outlook-using subscribers would see the awkward gaps. Yes, I'd coaxed the boxes to sit beside each other, but it just wasn't perfect. And anyone who knows how I code email designs knows that not perfect is simply not good enough.

Time passed and things settled down. That's until a customer contacted us on the forums about the same issue.

Going gap-free

Instantly, my primordial feelings, my white-knuckled combat response returned. "There's no workaround for this." I typed. It felt like one of those scenes where the righteous cop hands over his badge and gun, locked in an expression of both impotence and rage.

There was no workaround, until another customer chimed in.

Known only as dedra and slinging a line of Microsoft Office proprietary CSS, he had a near-solution - that is, using mso properties to control spacing between elements. The brain juices started flowing. I started googling around and found the answer tucked away on Emailology, a genuine Aladdin's cave of email design treasure. To remove the spacing, simply add the following to your CSS styles...

table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } 

... or inline it like so...

<table align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> ... </table> 

... and the gaps will be no more. The end result is a great-looking email newsletter:

Many thanks to Emailology, the mysterious dedra and all our customers on the forums for this fix. We're now free to create responsive email designs with floating tables, that look just as lovely in Outlook 2007 and 2010, as in any other email client.