Community manager, email mktg nerd, hipster.
Hot on the heels of the new Subscribe Button, today I'm happy to announce another simple tool that makes it easy to grow your audience with Campaign Monitor. As of today, every list in your account now has its very own Subscribe Page, a simple, customizable page that lets anyone join your list - no coding required.
Unlike the Subscribe button, or our copy/paste forms, which you need to integrate into your site and touch code, the Subscribe Page is just a simple, white label URL that you can easily share with anyone. Check out a real-world example of it in action.
We've made it easy to tweak everything on this page so you can keep it consistent with your own brand. Change the background color, choose from a range of font styles, or add your own logo.
Just like the subscribe button, you can also choose which fields you'd like to show, in what order, and even set certain fields as required. You can also customize the confirmation message when a new person joins your list.
By default, each subscribe page is hosted at a white label domain, but if you have a custom domain set up for you or a client, we'll default to that instead.
Just like our Subscribe Buttons, we made sure every Subscribe Page looks great on any mobile device but still stays true to any customizations you've made.
Subscribe Pages are live and available in all accounts now. You can find them in the Grow your audience section in the sidebar for each of your lists. We can't wait to see how you guys start using them.
When you hear the word 'deliverability', are the first things that come to mind your local pizza joint and a five-dollar tip? In our Landing in the Inbox guide, we've sought to demystify what happens between sending an email campaign and getting it opened by your subscribers. Along the way we'll teach you key terminology and practical tips on everything from getting past spam filters, to keeping your response rates high.
This may seem like a lot of chunky, technical stuff to cover in one short resource, but rest assured, we've tailored Landing in the Inbox to bring first-timers to email marketing up-to-speed, while including useful suggestions that experienced senders can benefit from. With chapters on how to improve your email content, keep your lists clean and get authenticated, there's lots of advice that you can apply to your campaigns, right now. Give it a skim - in minutes, you'll feel equipped to discuss email delivery with your tech team, colleagues, or even us!
To get into Landing in the Inbox, send yourself over to our Guides section, where you'll find a great selection of resources on mobile email design, campaign planning, permission and more.
Have a suggestion for a guide or can suggest some improvements? Be sure to let us know in the comments below.
Folks like us regularly trumpet on about featuring relevant or catchy copy, but sometimes, it takes a little bit more than just words to get subscribers to engage with your email newsletters. While offering incentives like guides and blog posts can be great for channelling extra clicks, how effective are they, really?
Our metrics-minded friends at Bluewire Media recently decided they'd take the uncertainty out of their content strategy, by running a series of marketing experiments on what kind of content generated the most click-throughs. The methodology was simple - each week, they sent a newsletter to over 6,300 subscribers, featuring a useful resource, like a template, e-books or blog post, alongside their regular news. Following each send, they collected and compared the results, to determine which resource had been deemed most valuable.
While it's hardly surprising, the offers that generated the most clicks were templates and eBooks, being items that helped their subscribers (mostly marketers and content creators) with their jobs. They observed:
Resources like templates and tools bring the house down compared to any other email offers. Our most popular downloads are the Editorial Calendar Template with a click through rate of 34.5% and the Content Marketing Checklist at 26.2%.
While a common source of newsletter content, blog posts only attracted half as many clicks as the downloads that Bluewire included in their tests, attracting a 5-14% click-through rate.
Of course, creating things like templates takes time, effort and expertise, so how do you justify such an investment? Potentially by having markedly better results than you would otherwise have, say if you were to put a just-passable amount of care into your campaigns. Again, from Bluewire:
"Industry-average click through rates are 4%... (our) click through rates range from 9.8% to 34.5% and typically average 20+%"
Receiving five times more clicks than other marketing-industry newsletters isn't too shabby a result, especially if lead generation is your thing. It's also worth keeping in mind that Bluewire's resources fit into a bigger inbound marketing strategy; by sharing their knowledge, Bluewire not only presents themselves as domain experts, but makes their site a must-visit destination for anyone who needs a helping hand with their own marketing. So in short, they're not only incentivizing engagement with their newsletters, but are also creating valuable resources for both keeping existing clients and roping in new ones.
Many thanks to cool customers Bluewire for sharing their results - if you're keen to find out exactly what content did and didn't work, check out their blog post. Finally, we're keen to hear about your content strategy - what offers, articles or giveaways have been successful in your newsletters? Let us know in the comments below.
People regularly ask us about the value in automatically sending email campaigns using RSS to Email. In addition to great site content, are regular email updates an effective way to reach out to customers and beneficial to the bottom line?
To find out, we got in touch with Scott Wickberg at Wick Creative, to find out how RSS to Email has helped his other project, SlyVinyl, drive return visits and create a community for music enthusiasts like himself. In this interview, we not only got our hands on his strategies and results, but as a bonus, some excellent recommendations for the audiophiles out there.
It's interesting because we started out with a weekly email, but our readers asked for bi-weekly so we switched. We were initially hesitant as our general rule is no more than one email a week to a single list, but they asked for it and we decided to give it a go.
Most sites have a "you come to us" mentality, this email switches the relationship to "let us come to you".The bi-weekly email has been so popular because it meets the casual website reader where they are. We've found this to be important as engagement levels are vastly different between readers - some readers find the bi-weekly email useless because they are on the site multiple times a day, but as the email isn't for them, they usually don't sign up for it. But for the casual reader, the bi-weekly email is 100% of the driver for their return visits. It allows us to switch the relationship. Most sites have a "you come to us" mentality, this email switches the relationship to "let us come to you". Our readers love this and therefore the emails have done so well.
While catering to casual users is important, the true benefit we've found is in how RSS to Email has impacted our new user vs. return user traffic percentage. We've seen a 10-15% change in our return visitor numbers since starting and now, return users account for 58% of visitors, which is exceptional. We have another client that is using RSS to Email and their return user percentage has also seen a boost.
We look at return users as the golden geese, and we like golden geese.For those not familiar with return user vs. new users stats, we focus on return users as they are 2 to 3 times more likely to convert than new users. We look at return users as the golden geese, and we like golden geese. That being said, SlyVinyl isn't eCommerce, it's a community, but the rule still applies. Communities aren't built upon new users and so RSS to Email has been key to SlyVinyl's continual growth.
I have to laugh when I get asked about marketing plans, as I truly have never made one. Don't get me wrong, they are great, but I personally just don't work that way on my own projects. In regards to SlyVinyl, no, it wasn't in the initial roll-out. The RSS to Email came about as I started hearing people say, "I love the site, I just don't get around to checking it, I'm so busy." I understand where they're at, I run 2 companies and feel that strain. Besides, why should they have to make the effort to visit the site consistently to stay up to date? As a result, I figured I'd give RSS to Email a go, and it's been a success. These readers can now see the stories in brief and if they are interested they go get more info, on their terms.
The growth of subscribers has been pretty consistent, I think it's now to around 30-40 new signups a week. For a site or company that's not even a year old, that's pretty impressive.
This has started us experimenting with all kinds of casual reader techniques, but nothing else we've tried has been near as successful. In half the time, email signups have outgrown our Twitter followers and are now double the number of Facebook likes we've received- very exciting stuff.
That's awesome. That Television record eluded me for quite sometime, but I finally got a sneaky repressed copy last year. It sounds so amazing on wax. That's definitely a gem. (Kudos! - Ros)
Hmm, fav record. You know I'd probably go with 'Live After Deaf' by Ryan Adams. This is somewhat cheating as it's a 15 LP box set, but it's gotta be this one for a few reasons.
Firstly, it's the record release that prompted me to start SlyVinyl. It was a super-limited release and sold out almost instantly; I had many friends that missed it and now the set goes for $600 - $1,000 on Discogs or eBay. Got me thinking about how much that sucked that they missed that opportunity, as they would have gotten one if they only had the information.
Secondly, Ryan Adams fights with The National and Sufjan Stevens as my favorite modern artist and I personally don't believe there is a better representation of his genius and raw talent than this set. It caught him at a tough time - being told his hearing might go, moving into his 30's and finally having settled down some. When recording this set, he played at small venues and laid it all out for fans and as a result, it's not only truly great music, but a snapshot of time and emotion for a truly great musician. It reminds me of Bob Dylan's Royal Albert Hall bootlegs - also one of my favorites. In Dylan's case, he almost died in a motorcycle accident, came back and brought a new sound. Similarly, 'Live After Deaf' captures a moment in history for one of my favorite artists and plays to the fact that I'm a sucker for a good story of triumph.
I wanted to personally say thanks again for all the innovation that Campaign Monitor continues to bring to the table. It helps us continue to bring smart and effective solutions to a multitude of clients with a variety of needs. It's a very valuable arrow in our quiver. Thanks again.
A huge thank you to Scott for the marketing know-how and helping us decide what to put on the turntable next. To get wise to the latest quality releases on wax, visit the SlyVinyl site, or signup for updates.
While much of Campaign Monitor's appearance and workflow have progressively changed, one thing that has remained constant is the header and elements therein. So, the time has finally come to give it a new, modern look, while not messing up any existing customizations.
By Tuesday, all accounts will have been switched over to display our new header. While it's a fairly subtle change, it's likely something you or your clients will notice when you next log into your accounts. Don't worry - the theme colors and branding in your account will remain the same, so you won't need to tinker with anything.
The changes to the app aren't strictly skin-deep - as part of this header update, we've also reworked the client drop-down menu to make it a touch more responsive. Buttons across the app have also been given a refresh for consistency and to make the workflow a little more intuitive.
If you sell email to your clients and use images from our app in your marketing materials, you can get a head-start on refreshing them with our up-to-date agency screenshots. If you haven't seen the new Agency Resources on our site yet, we've got white-label screenshots, guides, case-studies and more to rebranding just that little bit easier.
Overall, the idea behind this update was to revisit some of the elements in our header that were looking a bit dated and make them faster, cleaner and simpler to use in the process. Naturally, we'd be keen to hear your feedback when we roll out this new look, so feel free to let us know what you think in the comments below.
Sharing email campaigns and code has long been a tricky business. For example, lets say you receive an awesome newsletter, which you want to pass on to your team. Then, you notice it looks great on your smartphone, too. Do you take two screenshots? Dump the source code somewhere? Give up? If you use Scope, then the finicky work in capturing and sharing can be done in an instant.
Scope is the brainchild of our friends at Litmus, who are famously known for their top-notch email and browser testing tools. Faced with the issue of emails breaking when forwarded, not to mention the sheer akwardness of the earlier screenshot dance, they came up with this elegant service for bagging email campaigns with a single click of a bookmarklet. It's also totally free to use and you don't have to be a Litmus customer to give it a go. Here's a short video of Scope in action:
It goes without saying that we're excited to see folks like you use Scope. For example, lets say you've got our latest monthly newsletter in your Gmail account and are keen to see what responsive techniques we've tucked in. Using Scope, you can flick between desktop, mobile, text version and clean source code views. Then, you can share a link to the campaign with your loved ones, hopefully with some nice words about our newsletters. Or so we hope!
Scope works equally well with both preview and live campaigns, making it perfect for reviews.
Big love to Litmus for simplifying how we share our emails. They're currently giving away one of their plans in exchange for a shout-out, so find out more about that and Scope overall by swinging by the announcement on their blog.
Following the release of our subscribe button earlier this year, one of the most popular requests we received was the ability to customize both the button and the sign-up prompt, or modal. Well, Buzz on our team has come up with the goods, by creating a button that you can adapt for your own site.
To the code-savvy and curious, our subscribe button must seem tantalizing - a quick peek at the source code reveals that, for the sake of simplicity, most of the magic has been safely tucked away. While there's never been anything preventing folks like you and me from rolling our own subscribe forms, having a solid template or example to play is often what it takes to move a task from the 'too-hard basket' and into 'getting it done'.
An example subscribe button modal - give it a try for yourself.
For those who like getting things done with code, Buzz's customizable subscribe form button is where it's at. Bringing together Twitter's Bootstrap Modal and our AJAX Subscription Form code (as well as your own creativity), it pretty much has all the functionality of our subscribe button, but can be adjusted to taste in its entirety. Buzz has even provided two versions - Basic and Fancy - to get you off to a flying start. As a bonus, the Fancy version's modal has been optimized for mobile devices, giving you one less thing to mull over.
To see the customizable subscribe button in action and download the code, swing by GitHub. Should you have any feedback, or just want to give Buzz a well-earned pat on the back, we'd love to hear from you in the comments below.
If you regularly set up client accounts and find yourself repeating the same old tasks, MyCMSetup is a neat time-saver. Once you create a configuration with default client settings in the app, you can then create new clients, time and time again, without having to log into your Campaign Monitor account.
Developed by keen customer Jay Holtslander, MyCMSetup was designed to tackle a very real issue that he had when selling email marketing. As he explained:
"... I found that the process for adding new client accounts was far too time consuming for me. I wanted new clients to have a large variety of templates to start with and all of that uploading would take me 20-30 minutes every time, which could possibly be wasted time if the client never logged in again.... all that time adds up."
Knowing that our API could be used to automate common tasks like adding pre-built templates to an account, Jay got to work. However, once it became clear that other customers could benefit from having the account creation process automated, the focus shifted to creating an app that anyone could use - and thus, MyCMSetup was born.
MyCMSetup is a breeze to use, once you link the app with your Campaign Monitor account using your API key. In a few clicks, you can create a configuration, then upload a few default templates, ready to roll out across new client accounts:
New accounts can be tracked and deleted in MyCMSetup, which is great if you intend to create temporary demo accounts for say, client pitches. Enough explaining, here's a short video of MyCMSetup in action:
Pricing plans for MyCMSetup range from free, to $20 per month, scaled on how many clients you create per month. To find out more and start an account, visit their site.
While we have a pretty snappy builder for creating reusable and fairly flexible email templates, it doesn't hurt to have options like Mail Designer, a Mac OS X app that will likely appeal to the code-averse.
Given that adopting a swag of newsletters 'built' in Word is the recurring nightmare of many an email designer, it's not surprising that we should have our suspicions when it comes to WYSIWYG apps. However, we were pleasantly surprised by equinux's Mail Designer, which not only comes with a simple drag-and-drop editor, but produces pretty clean HTML code. But, here's the kicker - once you've built a template, it's possible to export it directly to the 'Templates' tab of your Campaign Monitor account, then use it time and time again for your campaigns. All you need is your account's API key to set this up.
Memorizing template tags can be a chore, so it's nice to have many of our template tags available in the app, ready to drop into your template prior to export. This includes the unsubscribe tag, which you will need to include in all campaigns. Note that the repeater tag is not yet supported, but if you're feeling confident, you can export templates from your account and add them to taste.
As a special reader of this blog, you can get $20 USD off until 2014 via this link. Alternately, for more information and to download a free trial, visit their site.
Over the last few months, we've really knuckled down to make Campaign Monitor as friendly as can be for agencies, designers and folks who are rebranding our service as their own. In the wake of our partner program, team management and a white-label iPad app, we're pleased to unveil our new Agency Resources page, featuring guides, screenshots and more.
Since making our app rebrandable all those many moons ago, we've stayed on the pulse of what folks like you have needed to successfully sell email marketing to your clients. Consequently, we've amassed a fair few handy bits, bobs and downloads, but they've been scattered around the place. Well, that's all changed as of now - the Agency Resources page is your new one-stop shop. Some of the goodies it includes are:
We'll be progressively adding more resources to this page, so be sure to bookmark it if selling email to clients is in your future. What we've got is by no means a comprehensive list, so if there's something we can rustle up, be sure to let us know in the comments below.
The other week, we reported that Yahoo! Mail had fixed a bug which caused stylesheets within media queries to be take precedence over any other CSS. But just when we thought this was well behind us, we found that the Windows 8 Mail app incorrectly resolves media queries... And won't be deterred by lousy attribute selectors.
While the Mail app that comes bundled with Windows 8 is a fairly fringe email client, having the 'mobile version' of an email display unintentionally was enough to warrant a forum thread and a couple of support tickets in fairly short order. Thankfully, there is a simple workaround, but it comes with a few quirks of its own.
It's no news to any of us that a lack of media query support outside of the default iOS and Android Mail clients is what's cramping the style of many an email designer. That said, the vast majority of opens originating from a mobile device are likely to come from WebKit-powered clients like the earlier two... Unless you're lucky enough to have an over-zealous client who is hung up on their ancient BlackBerry.
We mention this because the workaround to having media queries resolve incorrectly in Windows 8 Mail is to ensure only WebKit clients use them. This may raise hackles amongst the two fellows on your subscriber list using Windows Phone 7.5, but it may be a risk you're willing to take.
Now, onto the code. There isn't much to be done - simply replace/append your existing media query expression with and (-webkit-min-device-pixel-ratio: 1). For example:
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { … }
In short, the -webkit-min-device-pixel-ratio CSS property evaluates the display resolution on WebKit-powered mobile devices. As nothing has a device pixel ratio of
But wait, we haven't forgotten your over-zealous client here - now that BlackBerry Z10's email client uses WebKit, he or she will be able to test your responsive email designs, too.
A big thanks to everyone who brought this to our attention so diligently. We love tips like this, so if you've seen something unusual in your email newsletter tests, be a good sport and let us know.
If our recent Enlist apps have inspired you to make email marketing part of an upcoming Cocoa project, then we've got a sweet treat - an Objective-C wrapper is now available for our API and is free to use on GitHub.
While Cocoa developers have been doing things like adding email signup forms to apps for a while now, we've known that we could make life easier by releasing an official, well-documented Objective-C wrapper. Not only would one make our API simpler to work with, but we could ensure that the wrapper would continue to be supported and improved upon, for all time.
So, it's with great pleasure that we can now show you the nuts and bolts behind Enlist and white-label Enlist, so you can make full use of our API when building your own Mac OS X and iOS apps. With support for all our API methods and OAuth authentication, the wrapper is as up-to-date as it gets. Alongside comprehensive Readme docs, the Objective-C wrapper also comes with a sample iOS subscribe form app, so you can see how it can be implemented.
When asking users to join a email newsletter or announcements list from within an app, linking to a web-based subscribe form may seem like the simple thing to do. However, this does have a glaring downside - as soon as a browser window is opened, the user's focus and your intended workflow are disrupted, especially when toggling occurs between apps on an iOS device.
By making a subscribe form part of the app itself, you can not only avoid unnecessarily hopping between screens, but also take advantage of the platform's characteristics to extend the wealth of data that can be collected. For example, imagine using iOS's Core Location Framework to add location data to a subscriber's custom fields, then sending a personalized autoresponder immediately after they register for an account with your service (spooky). Or beyond forms, imagine pulling reports into an analytics app, so users can check up on their email campaigns, alongside other business metrics. These ideas barely scratching the surface of what can be done; honestly, we're very excited to see how our API is going to be put to work from here on in.
If we've got you interested here, be sure to check out our new Objective-C wrapper on GitHub. As always, you're more than welcome to fork and contribute to our projects. Last but not least, if you do come up with an interesting integration, be sure to let us know - apart from sating our curiosity, we may even give it a solid plug!
While the entire Campaign Monitor team puts a lot of time and care into providing great customer experiences, what shouldn't be overlooked is how much our customers support each other - via Twitter, Facebook, blog comments and most visibly, in our forums. To acknowledge our 'Community Champions', we'll be giving one of our star customers some well-earned recognition each month via a special Q&A. First in the spotlight: Brian Thies.
If you've ever tinkered with displaying background images in Outlook, conditional comments in email code, or even needed advice on rebranding the app, then its likely that Brian has lent you a hand. As a commanding presence in our forums and a tireless activist for email standards, Brian was a unanimous choice for our first Community Champion.
I think it’s a combination of the eagerness to solve problems, find better ways to execute the coding for a design, and overall help others overcome the adversities facing them when coding for compatibility. Since Campaign Monitor's forums have always been the leader in presenting the most up to date information on email marketing, I felt it was the best venue to provide coding assistance, as well as learning tricks of the trade from other coders.
I’d say I’m inspired by the need to develop perfectly compatible emails, as well as never accepting “no” or “can’t be done” for an answer. It’s also exciting to get to work on such a variety of projects for an unlimited number of end users, and the challenge each design presents keeps things fresh and always evolving. It also helps that I love my job!
Email marketing is definitely a full-time job.I provide freelance email coding to marketing agencies who are looking for the service of an in-house email coder without the added expense. With deadlines in advertising being so critical, many companies have turned to me when needing same- to next-day reliable service that they normally wouldn’t receive from their internal teams or from other email coding services.
Email marketing is definitely a full-time job. I code & test anywhere from 5-10 emails per day, with each taking an average of 1-2 hours, so it’s easy to put in 8-12 hours a day depending on workload. Working with clients from around the world, projects can run into the night as well as weekends to ensure client expectations and deadlines are being met.
I’d have to say the knowledge of the product, service or information being presented, the quality of the design itself, and the understanding of how the email will be built for desktop & mobile compatibility. If you’re missing any one of these, then you’re missing the opportunity to deliver top notch results.
Patience is also key, as a single email should never be viewed as the end-all for a good email campaign. Tweaking the layout, trying different font & image sizes, modifying colors, adjusting subject lines and deploying on various days/times - these are all things the pros use when trying to find the best possible combination to increase opens and click-through rates. Staying ahead of the game involves more than just the volume of emails you deploy. It’s all about trial and error.
Research, research, research. The number of resources available from Campaign Monitor provides plenty of details, examples, and just about everything you need to get started. Utilize the forums for answers you can’t find in the materials, and never be afraid to ask for assistance. If the learning curve is too much and time is an issue, working with a dedicated email marketer or email coder can make your life much easier. Campaign Monitor provides a forum full of the top companies to utilize when looking for a professional email marketing service.
Many thanks again to Brian for being true Community Champion material - we've got a special thank you gift headed his way. If you've been proactive in helping others, we may get in touch with you in the months ahead. However, if you'd like to nominate a fellow customer, be sure to get in touch with details, including how they've helped you.
Back in November last year we announced Enlist, an elegant little app that turns your iPad into a beautiful subscribe form. The response has been amazing, with close to 6,000 downloads and lots of great stories from customers who love it. However, since the launch, there has been one bit of functionality that's been requested more than anything else, which we're excited to finally make available to you.
While Enlist is perfect for anyone familiar with Campaign Monitor, it can be a tricky sell for our agency customers and resellers that might be pitching Campaign Monitor as their own app. Today we're happy to announce a sister product to Enlist that provides the same great functionality, but doesn't mention our service at all. You can also rest assured that we'll be keeping it updated behind-the-scenes.
While we've put a fair amount of energy into bringing you a white-label version to use, we haven't overlooked a couple of improvements that were worth making in the original app. In fact, this release coincides with a timely update of Enlist, in which we've made some noticeable changes... And more subtle ones, too. For example, offline syncing is now rock solid, so you can confidently collect new subscribers, regardless of whether you're connected to the Internet. When you get connected after being offline for a stint, a nice "Syncing" message will display when any subscribers you captured are synced back to your Campaign Monitor account:
We've also made the 'unlock' icon much more visible, especially for those of you using darker backgrounds. Plus, if you've set up an autoresponder for new subscribers, it will now be sent to anyone who subscribed while you were away from an Internet connection - that was our bad and we're glad we got it fixed.
Across the app, we've squished a fair few bugs and generally made the app more reliable and hopefully, a pleasure to use. Of course, if you see anything that's amiss or can suggest an improvement, be sure to let us know about it.
If you've already added Enlist to your iPad, be sure to get the recent update to take advantage of these changes. Otherwise, get it for free from the App Store and start collecting subscribers.
Thanks to everyone who wrote in requesting a white-label subscribe form app, or helped us improve Enlist. It's always an exciting moment for us when we let loose with useful updates; now we have apps for everyone, we hope that we can share some of this excitement with both you and your clients, too.
We usually blog about email clients when things start breaking in them. But today, we thought that we'd turn things on their head by reporting on a few improvements - in Yahoo! Mail's webmail client, no less.
But before we get to the beef, why even bother mentioning when things go right? While it's unlikely that many of you will rush out to remove existing workarounds in your HTML email templates and campaigns, those who are starting from scratch will likely save time (and a couple of kb's) by no longer having to code and test yet another 'email hack'. Secondly, we really want to encourage email client developers like Yahoo! to build the most user-friendly services they can - not just by knocking them when they miss the mark, but by recognizing their efforts when they touché. And last but not least, this is a sorely-needed glimmer of hope - Yahoo! Mail is a big player, with almost 10% market share - less than Outlook.com, but more than Gmail. When one of the biggies makes a move in the right direction, there's a chance that the rest will follow. So, without any further hesitation...
For years now, we've been advocating the use of the .yshortcuts hack to ensure your link colors aren't given the switcheroo by Yahoo! Mail. Well, it seems that .yshortcuts has taken a bow, at least for now. Brevity aside, leaving out .yshortcuts means one less strange class in your CSS styles to cringe about (and for your 'knows-enough-to-be-dangerous' clients to question).
Around this time two years ago, it became very apparent to folks who we tinkering with responsive design that the 'mobile version' of their message was displaying in Yahoo! Mail. The workaround - using attribute selectors - reeked of desperation (at least to me), however it indeed solved the problem with few downsides.
After some recent tests with more regular-looking, non selector-fied CSS stylesheets, Yahoo! Mail seems to be correctly resolving commonly-used expressions like:
@media only screen and (max-device-width: 480px) { … }
As a curious side-note, Yahoo! Mail does appear to still 'support' media queries, however using a catch-all expression like @media screen { … } (as done in our tests) is really the opposite of device-targeting - a whole array of other email clients are likely to trigger it, too.
Now, this is likely to be old news - Yahoo! Mail was updated in mid-December, however it's hard to say whether these fixes were applied by their team during, or after that big push. But what we do know is that not only has the Yahoo! Mail team been listening to our feedback, but countless newcomers to the email design game have been spared from the hair-tearing hackiness that supporting their client used to be.
A strong pat on the back goes out to everyone at Yahoo! Mail for patching up these quirks. Now, it's over to you - which email client would you like to see improve, and how? Let us know in the comments below.
Big news on the Campaign Monitor API front today. We're very happy to announce that we've overhauled our API authentication to support OAuth 2. This means a much simpler experience for customers when connecting anything to their Campaign Monitor account, plus a lot more flexibility for developers. We've also updated all our client libraries to support it, making it as easy as possible to work with.
OAuth 2 has quickly become the de-facto way to authenticate users against an API. If you're ever connected something to Twitter, Facebook, GitHub, etc, you'd be familiar with the simple workflow. Up until now, connecting any kind of integration with Campaign Monitor involved using an API key with Basic Authentication. Now you've got another great option - here's all the documentation you'll need to get started.
One of the biggest benefits of using OAuth 2 is a nicer experience for customers. They no longer need to mess with hunting down keys, and in many cases you don't even need to enter a username or password. A couple of simple clicks, and your account is safely and securely connected to another service.
What you see when you're connecting Enlist to your Campaign Monitor account.
Using the example above, if you're already logged into your Campaign Monitor account, you can complete the connection with a single click. If your session has expired or you're on a different machine, we'll quickly ask for your username and password and then you can instantly connect.
OAuth also makes it much safer for a customer using multiple integrations. If you no longer want to use an integration, you can simply revoke access for that individual app rather than having to generate a new API key and break any other integrations. Control over who can access a customer's account is now very much in their hands, and not the third parties they are handing a key over to.
Another big plus of oAuth is that you can set granular access scope for your integrations. Consistent with our current range of permissions for users within your account, you can easily set exactly which parts of their account your integration will have read or write access to. This is a great way to transparently say exactly what your integration can and can't do. The current permissions we support include:
The beautiful thing about this approach is that we'll look at the permissions anyone has in your account when they're trying to connect something. For example, if you have a person that can only create campaigns but not send them, they won't be able to connect an app to your account that will have the ability to send campaigns.
One thing that was very important to us was making sure it's as easy as possible for developers to work with our API. With that in mind, we managed to update our Ruby, Python, PHP, .NET, Java and Perl libraries to fully support OAuth from day one.
We're also very happy to announce a brand new Objective-C library for those developing for OS X and iOS. There are lots of nice surprises in that library which we'll be sharing more about in the coming days.
Another big benefit of using OAuth is that we'll now show you every single app that currently has permission to access your Campaign Monitor account. If you head into Account Settings and click on Manage connected apps, you'll see something like this:
This is an account-wide view of all the different external applications that have permission to access your account in one way or another. You can very easily see which clients are using that app, what permissions it has and importantly, revoke access altogether.
For developers, this section of your account also makes it easy to register your own applications with us. Here you can provide a description of your app, plus a web site and icon if one is available. Once registered we'll give you the private details you'll need to make an OAuth connection work.
We've put together some simple documentation on getting started with oAuth, and don't forget every one of our client libraries have been updated to make using OAuth as easy as possible.
DOCS See the docs for everything you need to know on authenticating with OAuth.Supporting OAuth is an important step in our plans with the API. As you can see from some of the screens above, we've got some more ideas on how we can make our API easier to work with, and also to encourage more developers to create apps for the Campaign Monitor platform. I'm looking forward to sharing more details on this soon. And of course, if you have a question about oAuth or anything API related, head over to our API Developers forum, or drop us a line.
Are you the business or brains behind an app? If email marketing is an integral part of your offering, then you may be interested to know how easy it is to invite Campaign Monitor to the party.
We consider ourselves very lucky to be the focus of a wide variety of integrations. The vast majority of these are developed and supported by app makers and keen customers, who see the value in leaving the email marketing side of things - from creating campaigns, to managing deliverability - to us. Since launching our API, we've listened to feedback from said devs on how we can make Campaign Monitor easier to work with and the ability to embed an account in a 3rd-party service has been a regular ask. We may have even heard it from you.
Off the bat this may sound a bit odd, but we reckon there are good reasons for making us part of your workflow. First of all, the app can be easily be rebranded as your own. You can even customize what's on display - from the entire interface (like you were viewing an account in your browser), to an interface with just tabs, or no navigation elements at all. Secondly, you can remove the need to toggle between apps to get tasks done (or share data) - with single sign-on, users no longer have to login to both apps separately.
To see this in action now, look no further than the Salesforce for Campaign Monitor integration, which allows users to manage all their marketing via a single interface:
All up, we think this is pretty exciting if you're working on CRM software, a CMS plugin, or even a white-label agency portal for clients. When our clients are also your clients, making work between web apps as frictionless as possible is simply good sense.
To embed our app into yours, what you'll need first is an IntegratorID. Simply get in touch with us and we'll run through the details.
With an IntegratorID in hand and a few extra details provided by us, you'll be able to embed our application in an iFrame and use our session method to skip the login process for end-users. If you have any questions along the way, our devs are always available to lend a hand, plus there's our API Developer forums for sharing notes and getting your pressing questions answered.
A big thanks to everyone who requested support for embedding Campaign Monitor into their own projects. We're really hoping we've made this process as straightforward as possible, but if there's something extra we can offer to make it easier to work with us, be sure to let us know, either by getting in touch or via the comments below.
While we've supported an account-wide custom domain for years now, the ability to set one on a per-client basis has been a popular request. Today we're happy to share that you can now set a different domain for each client in your account.
The great thing about setting a custom domain for a client is that it localizes everything for that client. This means they can login into their account at that domain. All the links in each campaign they send will use that domain for link tracking. If anyone shares their campaigns on social networks, that's the domain they'll see.
Head into Client Settings for a client you'd ike to enable this for, and on the right you'll notice a new option to "Set a custom domain". From there you simply follow the simple DNS instructions, we'll verify everything is set up correctly and you're good to go.
We've designed the new client-level domains to work in harmony with your account-wide domain. This means a client can still log in using your account domain, but we'll still use their client-level domain for any link tracking, etc.
This feature is live and available in your account now, and if you run into any issues setting one up, we're always here to help.
While many of the great resources we feature here are either created by, or inspired by our customers, the "Pocket Guide to HTML Email" by Five Simple Steps has really ratcheted things up a notch. Authored by cool customer Andy Croll, it's a great primer to email marketing, by someone who has used the tools, done the hard yards and now has plenty to share with all of us.
For those just dabbling with HTML email, or needing a few bite-sized lessons for the train ride to work, this Pocket Guide makes for easy, entertaining and concise reading, for about the same price as a cup of coffee (£2). As well as a lot of the stuff we like to wax lyrical about (eg. email design and code), the Pocket Guide also covers topics like transactional email and copywriting; if you're developing a comprehensive email and content strategy, this is a great place to start.
It's evident from reading both Andy's blog and the Pocket Guide that email campaigns, like the one we featured in our gallery for his company, ImpulseFlyer, are moving parts in a grander, more detailed marketing plan. That said, the Pocket Guide remains a high-level primer, the rendezvous point for a grand adventure ahead. If you enjoy where his whimsical narrative takes you, then there's plenty to further your email marketing knowledge in our free guides, including titles on planning email campaigns, optimizing for mobile devices and more.
The Pocket Guide to HTML Email is available as a digital download (PDF, EPUB & MOBI) from Five Simple Steps. To find out more about what's inside, swing by their site.
Displaying text and images exclusively in mobile email clients has long stumped email designers. It's an insidious issue - just when you're making progress in Outlook, Gmail just goes ahead and displays all your mobile content, like when that person you thought you'd spend forever with goes ahead and tips your vinyl collection up and down the whole darn street. But chin up, dear friend - it looks like those dog days are now over with this CSS fix.
To provide a bit of background, the central issue when hiding content is Gmail's lack of support for the display CSS property. Gmail strips out display: none; from HTML email code, thus resulting in today's trouble. So, while it's been possible to 'trick' this email client by using display: none !important;, this makes it impossible to use display to toggle an element's visibility in a media query for mobile devices. As Chris here puts it, !important is like the sledgehammer of CSS - use it with care, as nothing can stop it when it's swinging.
There are a couple of inventive reasons why you would want to do this, including:
Both use cases have been cause for lengthy speculation in our forums, so it was no surprise that the solution was to be found there, also.
After months of to-fro, we combined a couple of approaches to hiding content in mobile and desktop clients and finally came up with a fairly lightweight solution. Lightweight, until you realise that all this is to compensate for the lack of one lousy CSS property:
<style>
/* Media query for displaying content in mobile email clients */
@media only screen and (max-device-width: 480px) {
.hide { max-height: none !important; font-size: 12px !important; display: block !important; }
}
...
/* CSS for hiding content in desktop/webmail clients */
.hide { max-height: 0px; font-size: 0; display: none; }
</style>
<!-- Content to hide in desktop/webmail clients, display in mobile -->
<p class="hide">Download from the App Store</p>
Hiding images makes for a more interesting scenario. Applying the .hide class to the <img> tag isn't enough - you also have to surround the image with a <div> or <span> to ensure this technique plays along with both Gmail and Outlook. For example:
<!-- Image to hide in desktop/webmail clients, display in mobile -->
<div class="hide"><img src="..." class="hide" /></div>
Terrible. However, it does the job. There are two caveats, the first being that this technique does not work in Lotus Notes 6 & 7, however if you've been around the traps for long enough, you've likely realised that nothing CSS-related does. The second is that media query support is required in mobile email clients to make elements visible. So while this technique works in iOS Mail and Android Mail (which make up the vast majority of mobile opens), you likely won't have much luck in Gmail for iOS.
Finally, a big thanks to LandoCalrissian for getting the conversation started, jeremypeter for providing a great code example and everyone else who contributed to this fix. If you have any questions or observations, be sure to share them with us on the forums, or in the comments below. And hang on to your vinyl, okay?
If the waitlist for Mailbox taught us anything, it's that there's no shortcuts to success in this life. After languishing for weeks in their famous 'reservations' queue like everyone else, we finally got our chance to test out this new iOS email client for Gmail accounts. But, was the wait worth it?
The hype surrounding Mailbox has been impossible to escape. There's been breathless commentary on geek blogs. A six-figure waitlist. Numerous side-by-side comparisons with Gmail, which also has its own stripped-down mobile email app with push notifications. Even parodies, thanks to MailappApp. However, what's been missing from the conversation is how Mailbox is bound to impact HTML email designers and senders, like you and I. So, we took the first opportunity presented to run this mobile email client through our barrage of CSS support tests, to find out if it was as trouble-free for our crowd as it aims to be for email recipients.
Everyone, breathe - the great news is that Mailbox is going to be the least of your worries when designing email for mobile devices. What became immediately clear during our initial tests is that it's powered by WebKit - or some variation thereof. As a result, it breezed through our CSS2 and CSS3 tests, just as other major WebKit clients - iOS Mail and Android default Mail - have.
Likewise, Mailbox supports media queries, which opens this client up to the responsive email techniques that we know and love. Even Google Web Fonts get the nod. This is in stark contrast to Gmail for iOS, which suffers from CSS support that's on par with its parent webmail client, including no media query support. Mailbox also displays email messages wall-to-wall (at least, when the email hasn't been threaded in a conversation), which is in contrast to the weird padding Gmail adds to the sides of each and every message. I think you get the idea - from a sender's perspective, Mailbox and Gmail for iOS are in no way comparable.
For enquiring minds, it goes to show that it isn't something in Gmail's opaque cloud that's disabling incoming HTML emails, it's the Gmail client itself that's selectively stripping out CSS.
Other niceties that set Mailbox apart from other mobile email clients are no email truncation over a cellular connection and that images are displayed by default. See? We can all rest easy now.
A well-publicized part of Mailbox are the options it provides to 'snooze' or 'postpone' an email message (pictured above). It's a clever idea - often, not all of the messages in your inbox need to be responded to at once and having a seemingly-full inbox of 'things to-do later' can be an unwelcome mental overhead. What makes this idea particularly interesting to senders is that it undermines theories on the importance of send time to the success of an email campaign. While we've never considered send time to be a critical factor, to those who see the science behind sending at 9am on a Tuesday, the ability to postpone email must seem like a potential quandry. However, it's an unstoppable shift - now email clients have grown from being humble message buckets, into fully-fledged productivity and collaboration tools too, it's increasingly likely that email recipients will choose to read email on their terms, not when senders personally feel they have the best chance of getting their messages read.
Time will tell if we start seeing subscribers frequently opening their emails in the hours, or days following a send, especially if this idea gathers steam amongst other clients. More than ever, email creators should focus on generating engagement; on creating messages that are compelling enough to be responded to now, not filed away for later (or, forever).
We invited the Mailbox team to comment on the state of mobile email and how they hope to influence reading habits, so there may well be an update to this post in the days ahead. But in the interim, we'd love to hear your experiences with Mailbox.
Have you given this new mobile email client a try? Will it change how we read email? Let us know in the comments below.
Sure, many hands make light work. However, if you're using Enlist, our iPad app for adding new subscribers for your lists, many hands can cause a lot of mischief, too. If you fret at the idea of folks leaving the app or fiddling with buttons, then Guided Access is a godsend.
Simply, Guided Access is a great little feature that can be found in 'Settings' on devices running Apple iOS 6. Using Guided Access, you can limit your iPad to one app, disable buttons and have a passcode prompt display, should someone try to break out of the restrictions in place. This means you can start a Guided Access session, run Enlist, then leave the iPad on a counter to quietly do its thing. Or do the same and hand around your subscribe form at an event.
For the parents out there, we've also been told that GA works great as a "kids mode", preventing the littlies from firing jibberjabber emails to the boss. To find out more about what Guided Access can do and get started, check out Apple's walkthrough.
We've had a lot of passionate requests for a non-branded version of our iPad app since Enlist's release in November, particularly from our agency and reseller friends. Well, here's some good news for all of us - a whitelabel app is most certainly in the works. Like Enlist, it will hook up with subscriber lists seamlessly, but you'll be able to give it to your clients.
To be one of the first to find out when it's released, you can subscribe to this blog using our new Subscribe Button to the right. We really can't wait to get this app into your hands, your client's hands, plus new subscriber hands, too!
So, you've optimized your email campaigns for mobile. You've got media queries to the max, a clear call-to-action and catchy copy. But are your landing pages driving up bounce rates like a blow-up castle at a birthday party?
Now that mobile email clients account for over 40% of email opens, it's time we looked at what we're serving our subscribers, post-click. After all, if a campaign doesn't result in conversions due to a clunky mobile web experience, then there's likely not much point in sending it.
If you've got an attention span like mine when browsing email on your iPhone or Android handset (ie. a short one), you too likely have little patience when a non-mobile optimized site appears after you click through on a newsletter. While a good offer may get left in the inbox for re-visiting later, more often than not, anything that involves more than a little resistance in the mobile browser results in the page getting closed and initial email getting deleted.
Reducing resistance is vital to reducing landing page bounce rates. The first thing worth considering is whether the landing pages we're linking to from campaigns are provide an inviting mobile experience, for example, by using responsive techniques to display mobile-tailored content. As Google cited in an earlier study:
"...we found that 61% of users are unlikely to return to a mobile site that they had trouble accessing from their phone, and 40% go to a competitor’s."“Mobile”-ize your business with Google Sites, Google Mobile Ads Blog
If you don't have the resources to build and optimize campaign landing pages from scratch, don't give up. Our friends at Unbounce have an intuitive responsive site builder that makes creating, testing and hosting responsive pages a breeze - here are some examples of their handiwork. If your site is powered by a CMS like WordPress, you'll likely find that there are oodles of themes available that have been designed to adapt for mobile devices.
The second thing is site speed - and this doesn't just affect whether a mobile user makes it to the landing page, but how long they stay there. Subscribers are likely to give up on even the best-designed sites if they take more than a few seconds to load (and cellular data connections don't help). Using a load time test like Pingdom or even your browser inspector tools can help determine what could be holding up your pages.
As you can imagine, mobile browser bounce rates will almost always be higher than desktop browser rates, but the more you can do to close that gap, the more successful your campaigns will be at converting clicks into more page views, purchases, or whatever your end goal may be. If you still need convincing as to whether giving your landing pages some love is worth it, I recommend taking a look at a MarketingSherpa's case study in which an iPhone-optimized landing page was shown to increase conversions by 40%. That's a big leap.
Finally, do you test your landing pages on mobile devices? Have you had any big wins with mobile optimization? Share your experiences with us in the comments below.
Musician, maker or marketing maven? If you regularly publish video content and want to ensure it's as rewarding as possible to both you and your viewers, then Turnstile, Wistia's new email capture with Campaign Monitor integration, is one to watch.
If you haven't heard about Turnstile already, lets say it's pretty much what it sounds like - a prompt to give a little something, prior to going through with the show. In the context of Wistia's email marketing support, Turnstile allows you to display an email subscribe form at any point during the playback of a Wistia-hosted video, then have the resulting new signups automatically pushed to a Campaign Monitor subscriber list. It's an elegant way to collect subscribers, without having to fiddle with forms, popups, passwords and other obtrusive content gates.
For example, lets say you have a 10-minute presentation hosted with Wistia. What you can do is have the Turnstile subscribe form appear after a few minutes of play, prompting the viewer to sign up to your newsletter if they want more content like this. Alternately, you can just display the form at the end. This is what Wistia have done in their ever-excellent Turnstile demo video:
The love between Wistia and Campaign Monitor runs deep. Once you've uploaded a video, this integration can be set up within Wistia's SuperEmbed Builder, so you can start collecting new subscribers in a matter of moments. Then, with our autoresponders, you can hook up a 'thank you' email to be automatically sent to your viewers, featuring an introductory message and perhaps even links to other resources they may like.
As you can imagine, there's a bit of give and take with your viewers when using something like Turnstile to collect email addresses. Having a "We want your email!" message pop up mid-video is likely to annoy some folks, so instead, we recommend being a little more informative and customizing the subscribe message to state what they'll get as a subscriber. For example, something like "To receive more marketing tips like this, subscribe to our newsletter" and providing the option to skip the prompt will ensure that you're only collecting engaged and happy new signups.
Wistia already have a unique solution for tracking who watched a video after clicking through from your newsletters, so be sure to check that out, too.
Many thanks to Wistia's Turnstile for making content marketing even simpler for folks like you and me. To find out how you can stay in touch with your viewers via email, swing by their site.
We've been working hard at making it easier to grow and learn more about your audience. Following the recent release of Enlist and Subscriber Notifications, we'd like to introduce the Subscribe Button. The easiest way to add an elegant, unobtrusive subscribe form to any page on your site.
A Subscribe Button with optional subscriber count
We developed the Subscribe Button with a particular purpose in mind. Forms can be clunky things. They take up a lot of space on the page and can often be tricky to get looking great in all browsers. The Subscribe Button replaces that complexity with a simple, customizable button you can drop anywhere. It's especially perfect for your sidebar, footer or any page with limited screen real-estate.
Just copy and paste the code anywhere you like, and once it's pressed a simple subscribe form instantly appears. Here's a quick demo you can check out showing it in action.
An example of the customizable form that loads as soon as the button is pressed
We've put a lot of care into the polish of these buttons, which are available in two colors and sizes. You can use your own button text, and also choose to show or hide the number of subscribers in that list. Just like the number of Twitter followers or Facebook Likes, this is a nice way to promote the size of your list and encourage others to join.
We've also given you lots of control over the subscribe form. You can choose which fields you'd like to show, and in what order. We've also added the ability to set some fields as required, and you can add your own title and introduction at the top of the form to provide more context. If that's not necessary, simply delete it and the design of the form will automatically adjust to suit.
The Subscribe Button launched a few moments ago, and is now live in all accounts. You'll find it under a simplified sidebar for each subscriber list in your account. Just click on Grow your audience option to get started.
We're not done on the subscriber focus just yet. I'm also very excited to announce a private label version of Enlist is now under review at Apple, and we've also added lots of new features to both it and Enlist based on your feedback. We've also got some other ideas on ways to make it easier to attract more subscribers that I'll be sharing very soon.
The release of team management mid-last year was kind of a big deal. It was one of our most requested features, and the fact that more than 700,000 accounts have been created shows how well it's been received. Since it's release, there's been one request in particular we've been hearing a lot. Today I'm happy to share that it's been knocked off the list and is live in your account.
If you missed it, our team management update made it so you could add an unlimited number of people under each client, all with different levels of permission. You can also create an unlimited number of administrators, too. Here's how it looks:
Team management makes it easy to add multiple people to each client
The one big limitation of this new feature was that each person you added under a client had to be unique. So, if you added Ron Burgundy to the Eyewitness News client, you couldn't add him to the Evening News client as well (although, that would come with it's own set of problems).
This made it tricky when someone needed to access multiple clients, but couldn't make them an administrator because they'd have access to all clients, plus billing and other sensitive information.
As of today, you can now add the same person to as many clients as you need. Just follow the same workflow you always have, and be sure to use the same email address each time you add them. You can even give them different permissions for different clients if you need to be that granular.
Now, whenever that person logs in, they will have access to the switch-between-clients tool that an administrator sees. The only difference here is that it will only include the clients they have been given access to. Here's how that looks:
The client switcher is now available for people with access to multiple clients
So, no process changes or additional complexity. Just follow the same steps you always have when adding a person to a client, and we'll do the rest.
A person subscribing to your list is one of the greatest compliments a business can get. In many cases, it's more important than that person buying something from you. A purchase can be a fleeting, one-off event. Someone going out of their way to hand you their personal details and saying "I want to keep hearing from you" can be a much more meaningful commitment, and opportunity. Today we released an exciting new feature that helps you better connect with these important people.
Subscriber Notifications provide a beautiful, flexible new way to keep up with the people joining your subscriber lists. We've given you and every person in your account complete control over what details you'd like to know about and when.
If you're interested in learning everything you can about each person that joins your list, you're going to love our instant notifications. You can activate them on a list-by-list basis, and every time someone signs up, we'll send you something like this...
A sample instant notification with custom fields
Each email will include all the data they might have supplied when subscribing. Plus, we'll show you exactly where they subscribed from and if available, what they look like. It's amazing how quickly this turns them into a real person instead of just another email address. These notifications can be set on a list-by-list basis, so you're only updated instantly when you need to be.
As well as instant notifications, you can also choose a daily, weekly or monthly summary that gives an overview of all the new subscribers across every list. We'll show you where they're from, which lists they've been added to and even pull out a few friendly faces.
A sample monthly summary showing new subscribers across multiple lists
This feature is now live and available for all customers. You'll notice a new option in the sidebar of "Lists & Subscribers" like this...
From there you can select any lists you'd like instant updates for, and if you'd like to receive a daily, weekly or monthly summary across all of your lists.
Just like every email you send with Campaign Monitor, each notification will support a single click to turn notifications off, or change your preferences.
First things first, notifications will not be turned on by default for you or your existing clients. But, if your clients would find these notifications useful, they can easily activate them from their own accounts and we'll send them a version that respects any branding you've made to your own account. As always, there won't be any mention of Campaign Monitor.
Here's how it might look if your company is called ABC Widgets...
These notifications are set on a per-person basis. As long as a client has permission to manage their own subscribers, they can head into their notification preferences and choose the types of updates that suit them. Please also note that while notifications are off for all existing people in each client, any new people that are added in the future with "Manage Subscribers" permission will have a weekly summary turned on by default, which they can change at any time.
One final point worth mentioning, these notifications are all about organic subscribers joining your lists. This means we won't notify you about subscribers you manually import yourself, only those that join from your subscribe forms, an integration you might have set up, Enlist or the API.
We're really happy to get this one out the door, it's something we've seen a lot of requests for over the years. A big thanks to everyone who got in touch and requested this - your feedback is what fuels these kinds of improvements. We've got another exciting subscriber related announcement coming in the next couple of days, so stay tuned for all the details soon.
If email designers hold a single thing in common, it's a collective trepidation towards testing. This task can seem near-impossible when responsive techniques are thrown into the mix, given the variety in email-ready phones and tablets in use today. However, while multi-column layouts can break and images fail to load, there's one design element that never fails get the message across - type.
Now, we're not talking about devolving into sending plain-text email here - although as far as consistency goes, nothing can beat it. What we have in mind is a greater emphasis on creating reliable, responsive experiences by taking a type-first approach to email design.
This thinking can be attributed to a similar trend that's happening on the web, where designers are foregoing fancy layouts for simpler, more device-independent designs. As James Young observes in his post, "The responsive web will be 99.9% typography":
"Looking at a string of recent releases from individuals, startups and agency clients it feels like there’s an emerging aesthetic that is very stripped back, focused on typography and blocks of simple content that can be easily moved..."- "The responsive web will be 99.9% typography", WelcomeBrand.co.uk
This aesthetic shift isn't being driven by some fluffy love of minimalism, it's being driven by both necessity and results. Necessity, because complicated and media-rich designs mean more testing for designers to do. Results, because successful responsive designs, both email and web, result in happier readers and greater engagement.
While many HTML email methodologies have been long abandoned by the web (table-based layouts, anyone?), responsive design has resulted in the two disciplines sharing much in common as of late. Again, from James:
"We’re reaching the point already where there are more hacks... than there have ever been in order to make a site work on even a small range of devices. 12 months down the line, us, the designers of these sites will be maintaining an increasingly flaky set of templates and nested media queries to deal with screen sizes, retina displays and whatever appears on the device market next year.- "The responsive web will be 99.9% typography", WelcomeBrand.co.uk
More hacks... Flaky templates... Sound familiar? That's because email designers like us have had to put up with a lot of nonsense from email clients for a very long time now, as the hacks that fill our blog and forums will attest. As a result of this nonsense, we've had to design defensively for the sake of both current and new email clients - minimizing the use of CSS, while maximizing font-sizes and the use of 'bulletproof' HTML attributes. Now, instead of setting us free with reliable CSS support, mobile devices have forced us to ratchet this defensiveness up a notch, to cater for a myriad of display dimensions, too.
This email newsletter by Justin Veiga shows this text-first trend in action - it remains readable and beautiful in every client, at any zoom level.
Will the result of this defensiveness be a run towards big-type, only-type emails? For one, these require less hacks and less maintenance from designers, not to mention, less testing. Heck, emails like Justin Veiga's (above) don't even require media queries to look big on small screens. And you can forget about the injustices of image blocking altogether when images are secondary to the message in the text.
Then, for email recipients, there's the benefit of a clearer message, greater consistency between email clients and shorter load times. As they say, less is more.
Should email, like the web, become 99.9% typography? We'd love to hear your opinion, so please chime in with your text-only comments below.
Using data URIs to embed images in email has continued to attract a respectable amount of interest since our original post in 2008. While the results then were disappointing, we thought we'd give them a refresh to see if it's now a viable workaround for those who can't stand image blocking in email clients.
First, I personally have to admit that I've always approached image embedding with a sour dollop of skepticism, given this technique's track record of:
Nonetheless, its popularity has endured, generally because of the promise that embedding is a legitimate workaround to image blocking in email clients. But is this still true now?
Before we go elbows-deep into the results, it's worth mentioning that we're going to look at support for inline embedded images only. Unlike the aforementioned MIME Multipart/Related content method, this is something you can try at home, in your Campaign Monitor account, without having to source your own scripts or specialized tools. However, if you're comfortable with rolling-your-own multipart messages, you're more than welcome to share your experiences with us in the comments below.
To get testing, we base64 encoded a JPEG image, as per the recipe described here. The resulting text string looked something like this:
<img alt="Embedded Image" height="128" width="128" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD....snip..." />
Using this hot mess, we added the image to an email and tested away. Sadly, the results across the most popular email clients were almost as choppy as before:
| Email client | Embedded image displays? | Comments |
| iOS Mail | Yes | |
| Outlook 2003 | Yes | All images blocked by default |
| Outlook 2007+ | No | ALT text is replaced by 'Linked image cannot be displayed' in 2010+ All images blocked by default |
| Outlook.com (Hotmail) | No | Grey 'blocked image' placeholder displays, no ALT text All images blocked by default |
| Apple Mail | Yes | |
| Yahoo! Mail | No | Placeholder and ALT text display All images blocked by default |
| Gmail | No | Placeholder and ALT text display All images blocked by default |
| Android default | Yes | All images blocked by default |
The word is out - embedded images in email do not evade image blocking. In the case of 'the Outlooks'1 above, not only were the images blocked, but they largely remained blocked, even when the other images in a newsletter were downloaded. The majority of email clients which reliably display embedded images (being Apple and iOS Mail) don't block images by default, making this technique redundant.
Now, it's over to you - have you used encoded images successfully in your campaigns? Why? Examples and lively discussion are welcomed in the comments below.
1 By the way, 'The Outlooks' is my future indie-band name, hands off yuppies.
When designing email newsletters, everyone has something that they hold sacred. For some, it's ensuring the email looks great in Gmail. For others, it's having punchy copy. But the aspiration that regularly catches me short is the desire to have an newsletter look exactly the same across the gamut of email clients.
In my previous life as a full-time email designer, I had a big-name client who used to make all sorts of cross-client comparisons when reviewing email campaigns. Rounds of amends would commonly begin with, "Wow, the spacing between paragraphs is different between Hotmail and Outlook" and "Why doesn't the newsletter look the same in both Outlook and Lotus Notes?"
Of course, the client had the right to question inconsistencies like this, and if anything, we should have caught them first. So we'd explain that there were rendering differences between email clients, then do our best to rope these differences in (generally with the help of lots of tables). After all, we both had a style guide to live up to.
Situations like this used to make me wonder whether designers are too hard on themselves in regards to cross-email client consistency, especially when they're not answering to a corporate style guide. Just like it is in browser land, each email client has its quirks, its things it does and doesn't support, hard-coded in. Would it be healthier to accept this variation and design for an optimal experience in the most sophisticated clients, while ensuring any bells and whistles degrade gracefully for everyone else? After all, many of us are accustomed with the idea of a "mobile version" and a "desktop version" of an email newsletter - so why not an "Apple Mail version' and a 'Outlook version', too?
The argument for this is not just a fluffy matter of aesthetics - techniques like using web fonts instead of images for headings, or even animated GIFs can potentially have an impact on response rates. For example, making a call-to-action more appealing to 30% of your subscribers (and still decent for everyone else), is likely to result in more clicks than you would have had when aiming for a universally consistent design.
Secondly, unforseeable events like Outlook.com dropping margin and float support go to show that what may work one day, may totally be laid to waste another. When things like this happen, you can't be blamed for taking the defeatist line that 'consistency' is 'impossibility'.
Nonetheless, we can't be blamed for placing emphasis on consistency. In many aspects of our jobs, it's critical. However, given the rendering differences between email clients can be so great, perhaps it's worth occasionally thinking about how we can craft the best possible email experience, instead of levelling things simply to benefit those facing the worst.
Is consistency between email clients important to you and your colleagues? Why, or why not? Let us know in the comments below.
After Hotmail's butterfly-like re-emergence as Outlook.com last year, we were certain there would be changes. However, we didn't think they'd be as trivial, yet as utterly maddening as dropping support for the margin CSS property.
Naturally, it didn't take long for our email designer friends to notice that without margins, elements in their email newsletters were collapsing into each other like bros at a Twister party. Our forums almost immediately lit up with reports that spacing between paragraphs, images and articles had vanished with margin and its variants - margin-top, margin-right, margin-bottom and margin-left.
Our first response was 'well wait, there has to be a workaround'. So we proceeded to hack away with attribute selectors, !important and even the esoteric .ExternalClass. Every time, Outlook.com stripped all mentions of margin from our HTML email code, simply leaving tantalizing semi-colons, like prawn tails after a seafood dinner.
The ever-observant Email On Acid were quick to the scene, with an in-depth post on Outlook.com's lack of margin support. In the absence of a workaround, they provided a great nugget of advice:
Though it will never work in quite the same way as margin, the padding property can be used in many places where margin would have been ideal. Just remember that padding goes inside the border of an HTML element, whereas margin goes outside the border.'Emailology: Outlook.com Margin-alizes CSS Properties', Email on Acid
We also recommend going back to roots and using table cells and the cellpadding and cellspacing attributes where possible. These are the cornerstones to a truly bulletproof HTML email layout.
Although this will affect far less designs, it's worth mentioning that Outlook.com has also dropped support for the float CSS property. This has traditionally had fairly mediocre support in email clients anyway, so we've generally recommended using the align HTML attribute instead.
Finally, don't forget to test your existing email designs and templates again in Outlook.com/Hotmail. You may be in for a bit of extra work during what's generally a quiet part of the year! We'll be updating our CSS support in email guide very soon to reflect these changes.
Has Outlook.com's decision to drop margin affected you? Let us know in the comments below.
While it's possible to get background images to display in (almost) every email client, for many the techniques involved have always been considered 'too tricky' to code into email newsletters. However, our talented (and handsome) Stig has decided to change all that with two new code generators.
Like most of you, I'd rather undertake practical studies in Mayan torture than ever have to write a line of Microsoft's VML code. Same goes for testing background image support across finicky clients like Outlook, Gmail and Hotmail. So it's with much joy that we've embraced the latest from Stig's lab, a 'Bulletproof Email Background Images' code generator. And by joy, we mean the bitter memory of countless hours spent coding and testing by hand, when we could have been drinking PBR and swaying moodily to Ratatat. That's how I spend my free time, anyway.
As the techniques for applying background images to entire email campaigns vs. table cells are considerably different, there are options for generating code for both scenarios. A word of warning in regards to the former, though - Outlook 20xx has been known to crash when a background image has been deemed 'too big' (either in file size or dimensions), so make sure you test your campaign in a real, live copy of Outlook before going for gold.
Not satisfied with simply releasing one highly-useful piece of email kit, Stig has also come good with emailbtn.net, a code generator for creating bulletproof email buttons. These buttons are great for adding a call-to-action to your design (eg. Read More, Buy Now) and don't look shabby, either. Simply opt for plain-color buttons or use a hosted background image, tune up your styles and woosh, out comes the required HTML/VML code. If you have some HTML coding experience, you'll be adding bulletproof buttons to your email designs faster than a cat in freefall.
Hopefully you'll find these generators to be a big help when coding your next email campaign by hand. If you're a fan, why not give Stig a high-five in the comments below!
When it comes to link and button placement in email newsletters, most of the decision-making seems to revolve around 'where they can be seen'. However, given the popularity of mobile email clients, should we also consider 'where they can be tapped'?
Now that a large percentage of us are managing our email using inputs other than a mouse and keyboard, it's likely time that we considered the ergonomics of email design. Luke Wroblewski's recent post on responsive navigation got us thinking that the same concerns with link placement as it relates to adaptive design apply to email as they do the web.
From a usability point of view, two features that regularly differentiate emails viewed on touch devices from those opened by the keyboard-and-mouse set are:
If you browse your email on a mobile device, you've likely come across email newsletters that are near-impossible to read and navigate. In most cases, its a matter of a wide layout, or a lot of content forcing the mobile email client to zoom out as to fit it all on a small screen. The result - content and links that are too small to be usable. As Luke's post mentions:
"...while big touch targets can be comfortably used with a mouse, small mouse size targets can't be used easily with touch." 'Responsive Navigation: Optimizing for Touch Across Devices ', Luke Wroblewski
Then, there's the ergonomic factor. Unlike screens which can be quickly manipulated using a mouse's wide range of motion, touch interfaces tend to be more or less usable, depending on the posture you assume (eg. thumb typing, using the device with the hand you're holding it with, or resting it on a table). Again, over to Luke:
"These common patterns of posture create easy to hit and hard to reach touch areas. The area toward the bottom of the screen is easy, whereas the upper corners are a bit of stretch".'Responsive Navigation: Optimizing for Touch Across Devices', Luke Wroblewski
Pictured above is Luke's diagram of what are considered to be 'Hard', 'OK' and 'Easy' touch areas on a mobile device, when used by a right-handed person in a variety of postures. If on opening an email, your primary call-to-action is in an 'OK' or 'Hard' area, could this have implications for your response rates?
Now, it would be silly to radically alter a perfectly good email layout based on this touch area hypothesis alone. However, as we covered in a previous blog post on email usability, aligning your content to the left does already have a proven advantage - being seen. To recap:
"...readers of left-to-right languages (like English) are accustomed to scanning from the top-left first. Keep this in mind when designing two- or more column layouts."'Email usability: The science of keeping it short and sweet', Campaign Monitor
This scanning-from-the-left behavior continues as a reader scrolls down a screen, which means links placed in the 'Easy' zone are optimal for both reading and tapping.
In the 'Design techniques' chapter of our Guide to Responsive Email Design, we make a couple of additional recommendations regarding touch target size and placement, so we highly recommend giving this short chapter a read if you're interested in making the most of your links.
Finally, we'd like to hear your take on this crazy idea. Should we consider device ergonomics when designing newsletters? Do you struggle to navigate emails, because links are out of reach? How could this affect your response rates? Let us know in the comments below.
It goes without saying that it's been a big 12 months in Campaign Monitor land. However, before we get into thick of 2013, we'd like to share some of our milestones, then find out how we can make this year an even better one for you and your clients. After all, it was your feedback and support that made it all happen.
Let's start out with some of the things which we hope made things easier for designers and agencies. What comes to mind first is our team management and collaboration update, which gave designers the ability to provide multiple people with access to a client account, with permissions to do tasks like view reports, upload templates and more. This was something that had been heavily requested - and we were more than happy to get into your hands. After all, email marketing is a team effort, so making the app something that could be securely used by your client, your intern, your accounting guy and whoever else was a big step forward.
To sweeten the deal, we also rolled out new monthly plans and a 10% discount to our agency friends. It's all about offering a top-notch service to your clients at competitive rates.
Getting new signups into your subscriber lists as seamlessly as possible was a goal for this year, so it was with much pleasure that we rolled out Enlist, our very own app for transforming your Apple iPad into a subscribe form. Thousands of downloads later, it has proven itself to be a hit.
Just weeks previous, we also overhauled our subscriber import process. Alongside a new look and drag-and-drop interface, you can now also import Excel and compressed (.zip, .rar) files, watch how the import is progressing and weed out dud email addresses.
Like the team management and collaboration update, the ability to send RSS-to-email campaigns was another in-demand item we let loose this year. Being able to automatically convert blog content into email campaigns was a big win for many of our customers, especially in light of Feedburner's uncertain future.
Not wanting to stop there, we also made it possible to add RSS content to regular email campaigns via the email editor. We call it one-click content and hope it saves you time when composing campaigns.
Developers using our service may have noticed some of the new methods we added to our API last year (and updates to existing ones). Useful additions have included the the ability to create campaigns from templates and transfer email credits between clients - our official wrappers have also been kept in step with this new functionality, too. For the latest, it's well worth keeping an eye on our API announcements forum.
If there was anything more thrilling than taking the wrapping off our new site in June, it was receiving your feedback. It was so good to not only receive a lot of constructive stuff, but to top things off, gems like this:
The new @campaignmonitor redesign is beautifully done. I'm a huge fan of the new identity.
— Andy Smiff (@Andy_Smiff) June 25, 2012
The response to our new design and branding was overwhelmingly positive. As was the response to a swag of new guides and resources that we added for good measure. In particular, our Guide to Responsive Email Design is worth a read if you're keen to get your head around 2012's email marketing hot topic - mobile email.
Now, this is only the skinny of what kept us busy behind the scenes in 2013. We wish we could do the proud parent thing and mention all of the smaller changes, like the extra design and spam tests and countless UI tweaks, but we won't bore you with the details. Instead, we hope that they've improved your workday, even if they often go largely unnoticed (that's okay).
On the home front, our team grew by 18 people this year. Now, we're no mega-corp, so that's kind of a big deal to us. With all these extra hands on deck, we'll be bringing you faster replies to your support questions, more useful features and a rock-solid service into 2013 and beyond.
Last but not least, we wanted to hear your take on what one thing you'd like to see added or improved this year. Is there a feature you've always wanted, or a topic you would like to see covered in a guide? As always, we're listening, so please let us know all about it in the comments below. And don't forget that you can always chime in on our forums, or say hi to our team!
If we were to create a list of bad email design ideas, adding music to email would probably be up there with using one big image as your email content. However, there are instances when sound in email can not only be used, but used for good.
If you cut your teeth on coding the '90s web, you probably remember things like auto-playing MIDI files with some perverse affection. Ah, the good times, when having the 'X-Files Theme' forced on you was the tell-tale sign that you were indeed visiting a Geocities page.
Well, you'll be pleased to know that you can play (and autoplay) music in HTML email, using the HTML5 <audio> tag. While this technique is only fully supported in Apple and iOS Mail (mind you, that's almost 50% of recorded opens), the faily-reliable display of fallback content in other clients makes it a possible addition to any email campaign.
Putting sarcasm aside for a moment, there may be some pretty valid reasons why one would want to add recorded speech or music to an email newsletter. For example, lets say you're a musician and want to provide your loyal fans with a convenient way to listen to your latest single. Or a language teacher and like providing pronunciation tips to your students. For accessibility reasons, you may want to even feature a spoken version of your message, for those who can't see it.
Keep in mind that streaming music over a mobile data connection may end up being a costly exercise for those on metered plans, so this is certainly not a technique to use lightly.
Before we go headlong into the code, we'd like to point out that while the <audio> tag allows you to embed a media player into an email design, the audio isn't embedded in the email message. Instead, you will have to host and stream the file from your own server.
So lets say we have all this sorted out, adding a player is easy. Simply use the following code:
<audio controls="controls">
<source src="http://yourdomain.com/widgetwiggle.mp3">
<p>♫ Listen: <a href="http://yourdomain.com/widgetwiggle.mp3">Widget Wiggle</a> (mp3)</p>
</audio>
In Apple and iOS Mail, you should see an embedded player. Elsewhere, the fallback will be displayed:
The above snippet can be simply edited and pasted into the <source> view of any multiline editable region in our template editor, which makes things easy if you just want to add an audio file to an article.
While this technique is fairly benign in most email clients, issues arise in Hotmail, where the controls are disabled, just as they were in our previous HTML5 video tests. Sadly, the Safari browser doesn't let you use the 'right-click to play' trick that we outlined earlier and Firefox doesn't display the player at all.
Likewise, we found that Postbox strips out the <audio> tags and content altogether, perhaps pre-empting the chaos that audio in email could bring. For both clients, your best bet is perhaps to feature a secondary fallback, such as a link to the file in the email copy, so subscribers have something other than the HTML5 audio content to work with.
We've said it before - please don't use autoplay. Yes, it works - even in Hotmail, where a lack of player controls will cause nothing but grief... And unsubscribes. There was a reason why historical tags like <bgsound> were deprecated and that's because everyone strongly dislikes having things play that they can't control.
On a related note, you may be interested in how Facebook uses sound files to track their email campaigns. It's an interesting idea, but not one we'll likely recommend implementing any time soon.
Well, that's the skinny on audio and email. If you try this at home, please do so for the happiness and convenience of humankind. Not to force everyone into reliving the 90's by listening to the X-Files theme.
Is adding audio to email brilliant, or simply a bad idea? Let us know in the comments below.
Now that at least a handful of private beta invites are out in the wild, we got the opportunity to give AOL's new email client, Alto a go. While a lot of emphasis has been placed on how 'pretty' it is, or how email can be organized by type, we've decided to focus on (you guessed it) what's on the horizon for email designers.
For those who haven't seen, or heard of Alto previously, it is a whole-new webmail client by AOL and not simply a reskin of the long-running AOL Mail. Important to note is that Alto itself doesn't provide users with an email address - at least at this stage, you will need an existing Gmail, Yahoo Mail, AOL or iCloud account to use this service. So the idea is to provide a much more attractive email experience to existing webmail users, over the traditional approach of getting people to sign up for yet another email address.
To compliment the browser version, mobile Alto is in the pipeline, too.
As far as providing a nicer email experience goes, Alto isn't doing too badly. The right-hand side preview pane is large and very clean-looking, as are messages in the inbox - very much reminiscent of iPad Mail. Plus, this idea of creating 'stacks', or essentially, filters for organizing incoming messages is appealing. A lot of this extra screen real estate is largely thanks to the fact that Alto is entirely ad-free (for now) - we'll be curious to see if the usual banners and contextual advertising are something that creeps in over time.
One unusual bug-bear we had is how text flashes when you scroll to read a message in the Safari browser. It's like the font-weight changes momentarily and as they say, once you see, you cannot unsee. But on the upside, we think the ability to 'snooze' (ie. selectively hide) messages for a set period of time is pretty neat.
Credit goes to Alto's engineers and designers, given that their idea of a good email experience also includes pretty robust CSS support in HTML email. Like AOL Mail before it, Alto didn't throw up any real curlies, much to our relief. Commonly used properties like background-image and list-style-image are supported, as are margin, padding, border and width. There's even fairly good CSS3 support, with -webkit-border-radius and box-shadow making the cut.
Another few 'good to know' items is that Alto displays images by default - in fact, I don't think there's a way to disable them, should you want to. Anchor links also work, as do animated GIFs and web fonts.
As Alto comes out of private beta, we'll look at adding it to our guide to CSS support. Until then, you can rest assured that it's not going to give your campaigns too much hassle.
So, is Alto set to become a serious email client, any time after now? It's likely the skeptical will point to AOL Mail's tiny market share (and steady decline) when dismissing this email client, however we think there's a glimmer of possibility in it. For one, it does provide a friendly-looking, ad-free interface. It's also likely to appeal to both AOL's mom-and-pop userbase, as well as more sophisticated subscribers. We'll be sure to keen an eye on whether Alto gets steam after it goes public, so be sure to watch this space.
Finally, if you're lucky enough to have received an invite, we'd love to hear what you think about Alto. Is it to your taste? Do you find it makes it easier to say, work through your regular Gmail inbox? Let us know in the comments below.
Another month has swung around and with it have come some interesting changes to our API. Yes, we've added yet another handy new method, updated a couple of existing ones and given the Perl wrapper a real overhaul. Keeping busy, we are!
For resellers that use our API to automate client management tasks, the ability to transfer email credits should come in fairly handy. For example, you can now allocate email credits to clients, say, as a welcome gift upon signup or as a bonus. Plus, now that we've added email credit totals to the existing methods for getting a client's details and your billing details, it's also possible to keep an eye on credits consumed, or automatically top up a client's credits with your own when they start running low.
On that note, you can also use the transfer email credits method to set whether or not a client account can start using your credits or payment details when they run out of credits altogether. Hopefully these more flexible billing options will come in useful for folks taking advantage of PAYG pricing for themselves or their clients.
So, we've has a few requests to beef up the information returned when getting drafts, plus scheduled and sent campaigns. So, we've added details like From name, From email address, Reply-to email address and a link to the plain-text version to the mix. So now, you can grab URLs to both the HTML and text versions of a campaign, say, for accessibility purposes.
Finally, we've brought our Perl wrapper up with the times, so it supports all of our API's current functionality. It now lives in our collection of official API wrappers, which we diligently update whenever new methods like the transfer credits one come along.
A huge thanks to everyone who suggested these updates to our API - we hope that we've made things a little easier for you and your clients. As always, if you have any questions or just want to pipe up about our API, you'll always get a warm welcome on our API Developer forum.
If you've ever flirted with using web fonts in your email designs, it may be your lucky day. With the @import CSS at-rule, support for less-traditional typefaces is looking better than ever.
For those who are keen to style up their text, but aren't too fussy about using fallbacks in some clients, web fonts in email are a real win. For starters, using web fonts is by far preferable to say, using images for headings and other styled text, given that they'll display regardless of whether images are turned off in the inbox. They'll often look crisper than images, too. Secondly, if you would otherwise use images for textual content, web fonts can potentially reduce load times, as only one request for the hosted font file is required, regardless of how many instances you use the font in a design.
While there are quite a few providers of web fonts out there (like FontShop), we decided to use Google Web Fonts, given that their library is free to use and as a result, ideal for experimenting with. However, you can choose any vendor you like, as long as they support font embedding using @import or <link>.
Admittedly, the hardest part of the process is finding the right font for your design in Google's near-limitless library. But lets say you've chosen one called 'Merienda'. Once you've tracked it down, click 'Quick-use', then on the following page, scroll down to '3. Add this code to your website' and click on the '@import' tab. The following code should appear:
@import url(http://fonts.googleapis.com/css?family=Merienda);
Copy and paste this snippet to the CSS styles in the head of your HTML code, like so:
<style>
@import url(http://fonts.googleapis.com/css?family=Merienda);
/* All your usual CSS here */
</style>
Now, you can use 'Merienda' as if it were one of the usual fonts available to us when designing HTML email:
h4 {
font-family: Merienda, 'Times New Roman', serif;
color: #444444;
font-size: 24px;
}
And that's that. To double-check that all has gone to plan, preview your email design; here are the results in Apple Mail:
Alternately, you may see the fallback in some email clients, so lets move on to which clients support @import (and web fonts in general) and which don't.
Display of web fonts in email clients is far from universal. However, given that many major clients do support them (including Lotus Notes 8, surprisingly!) and the rest gracefully use any provided fallbacks instead, it's fairly safe to use. So without any further introduction, here's what web font support across the most popular email clients looks like today:
| Email client | Supports web fonts? |
| iOS Mail | Yes |
| Outlook | Info |
| Outlook.com | No |
| Apple Mail | Yes |
| Yahoo! Mail | No |
| Gmail | No |
| Android (default client) | Yes |
| Windows Live Mail | No |
| Thunderbird | Yes |
| AOL Mail | No |
At this point, you may be wondering why we've favored using @import over say, the traditional <link> method for importing fonts. Well, we tested both and found that support for @import was just slightly better - @import worked in the Android default client, while <link> did not. Comparatively, earlier tests of the comparable @font-face method were far less promising and we don't expect much has improved since.
So, should we be using web fonts in email? If you would like to style up your text without relying on images and are not too fussy about a fallback displaying, then there's no harm in using this technique. However, given the rather patchy support for @import, we'd suggest steering clear of their use when designing for brand-conscious clients, or when it's essential to maintain a consistent look under most conditions.
Gmail's release of its app for iOS was always sure to raise hopes amongst those crying out for a searchable inbox, or eyebrows amongst the skeptical and previously underwhelmed. But for designers, v2 was an opportunity for Gmail to up their game and provide a better email experience for subscribers overall.
Naturally, we were very keen to give it a test drive and see if the changes to this email client were more than skin deep. In this quick review, we'll look at how it supports CSS in HTML email and outline a couple of other notable features that are relevant to both designers and subscribers alike.
Well, we won't hold you in any further suspense here - Gmail for iOS's CSS support is just as variable as its peers and predecessors, both mobile and browser-based. After running our tests, we found that it's still very much comparable to browser-based Gmail, in that it still ignores styles in <head>, which rules out CSS selectors and yes, media queries. This means that those who have created responsive email designs may have little success in tailoring their layouts for this client, unless using fully fluid approach (which isn't always a bad idea).
To give you an idea of what impact a lack of media query support can have, here's a side-by-side comparison of our newsletter, in Mail and Gmail respectively:
While the newsletter content is easily readable in Mail from the get go, in Gmail you're forced to zoom to make head or tail of it. This can be a tad awkward, especially as tap-to-zoom isn't enabled, as is customary in native apps like Safari and Mail. It seems we're not alone in thinking this is pretty sub-par as far as email navigation goes.
Other things haven't changed, either. For one, images are still blocked by default, although you are prompted to display them, then consequently always display them on a per sender basis (pictured above). We found that these settings are synced across your Gmail account as a whole - if a recipient selects for images to display for a given sender on their iPhone, this will carry across to Gmail in the browser and vice versa. Pretty neat.
What you may also notice is that emails are truncated with a 'Download entire message' prompt. While this may be reminiscent of iOS Mail's truncation, it's woth making the distinction that this occurs even when the message is downloaded over a wifi connection. This seems to occur when a message exceeds 20kb in size.
That said, the app's clean look and yes, ability to rapidly search for messages your Gmail account does really make v2 an attractive email client for iOS; we'll be sure to keep an eye out to see if it becomes a popular choice amongst your subscribers. However, for email designers and those just wanting to make their email campaigns beautiful and readable, it's ultimately more of the same.
What do you think of Gmail v2 for iOS? We'd love to hear your opinion in the comments below.
We've completely reworked the pages your subscribers see when they forward on your email campaigns, or change their preferences. Now, they look just as elegant as your newsletters do, on any device.
The finishing touches have been applied to our new-look Preference Center and Forward to a Friend pages, ready to view via both new and existing email campaigns. If you've previously customized these pages, you'll find your logos and branding have been seamlessly carried over - you don't have to do anything in your account. But that's not all you can expect from this complete redesign.
If you remember how this page used to look, you may agree that it was high time it got an update. To double the good news, we didn't do things half-heartedly. After looking at how this page was being used, it was clear that most people forwarded campaigns to a single person only. So we compressed the form down to one recipient (with the option of adding up to another five), making the form much quicker to fill in and far less daunting. There's also an image of your newsletter, as a nice reminder of what the subscriber is passing on to their friends:
As part of this overall simplification, some of the more fiddly customization like the font or button colour are no longer available when customizing this page in your account. However, you can you can change the page background colour and add your own logo as before.
Like the Forward to a Friend page, we've cleaned up the Preference Center, to ensure the form is more intuitive to use and less error-prone. Your logo and colors can still be added to make this tidy design really yours:
It's no secret that an increasing number of people are reading - and sharing - email campaigns on their mobile devices. So as part of this update, we've also optimized both the Preference Center and Forward to a Friend pages for mobile devices. Here's the same Forward to a Friend page as the one we showed earlier, now tightened up and slimmed down for small screens (click to see a larger version). With luck, you'll see an uptick in shares as a result!
You'll see these changes now when you view your email campaigns, or visit the 'Client Settings' tab in your account. A huge thanks to everyone who nudged us gently for a refresh - as always, we'd love to hear what you think of these pages' new look.
Ever had your newsletters get cut off by the 'This message has only partially downloaded' prompt in iOS Mail? Preventing it from appearing may be a mix of keeping your message short and sweet, then simply trial and error.
If you test your email designs on an iOS device like the iPhone or iPad, you've likely seen the following message:
While having your messages temporarily truncated may appear to be a mild annoyance, it does bring with it a silent issue - unless the email is fully downloaded, the open may not be recorded. While Email on Acid wrote an authoritative article on this less than a year ago, it seems that conditions have changed since then.
From our tests, we were able to reliably trigger this message by:
As you can imagine, it's fairly easy to make the 'partially downloaded' message display - all that's required is a fairly-long newsletter with a comprehensive stylesheet for good measure. Unlike EoA's determination that only POP mailboxes are affected, we found that this could be reliably replicated in clients using IMAP, too.
In addition, we tested on iPhones running iOS 5 and iOS 6 and found that both truncated messages that exceeded 15kb and were accessed over cellular data.
What makes this issue so mysterious is that it's sometimes possible to send HTML file sizes that are larger than the prescribed 15kb limit without triggering this message. In one test, we were able to dismiss the message repeatedly by removing the opening <body> tag. However, when this fix was applied to another newsletter, the message appeared, much to our chagrin. While EoA suggests this can be remedied by ensuring that there are more than 1,019 characters before the closing </head> tag, in the case of our successful <body> tag tests, we were able to get away with far less.
To avoid this message, your safest bet is to keep all email newsletters short and sweet, thus steering well clear of the 15kb danger zone, wile keeping in mind that inlining your CSS may also bump up the file size. Removing line breaks using a tool like HTML Minifier can also help keep file sizes down, but it will also make your code relatively unmanageable, too.
But at the end of the day, if the upper portion of your email is engaging, it's likely that folks who come across this message will choose to download the rest of the newsletter. So if anything, the best remedy is to ensure your content is interesting and relevant enough to make readers want to read more.
Have you had your email newsletters truncated? Is there another workaround? Let us know in the comments below.
Following any send, you're likely to receive an automated reply or two that goes along the lines of: "I've changed my email address... Please update your address books". But does this really give you permission to update a subscription?
For such a common message, there's remarkably little guidance out there as to how to handle 'change my address' autoreplies. So while we're going to let you know our recommendation shortly, we'd love to open this up for discussion - you likely have a point of view that's just as salient as our own.
First of all, why do folks set up these autoreplies in the first place? Our top guesses are that:
The final point is the one that bothers us the most about updating a subscriber's email address manually. How about if they don't want to hear from anyone but their nearest and dearest? If they are really determined to receive your newsletter, they likely can subscribe again - why make that choice for them?
On the other hand, these autoreplies are, well, a request to do something. An "I'm abandoning my inbox, please help me", of sorts. However, as they aren't explicitly asking you to add their new address to a mailing list, doing so doesn't really hold water for us.
That said, there is the option of emailing the subscriber personally to confirm what their preferences are. But for most senders, these autoreplies, like hard bounces, are an inevitable and statistically insignificant part of the greater wonder that is email marketing.
Do 'my address has changed' emails give you permission to send? We'd love to hear your opinion, so lets get the party started in the comments below.
Running a business can be fabulous - think creative freedom, flexible hours, and... A metric tonne of accounting to do. So, which app do you rely on to keep both your books, not to mention your sanity, in order?
After a discussion on billing and 3rd-party apps got started in our forums, I thought we'd run a straw poll on what designers, developers and other online-focused folk are using to invoice their clients for services like email and web design...
Update: Poll is now closed, thank you for voting, everyone! Here are the results:
Don't forget that when clients send for themselves, we happily handle invoicing for you. But if you take a more hands-on approach to billing your clients for email marketing services, or charge for more than just email campaigns, then an invoicing app is likely to play a big part in running your business.
Why is this app your weapon of choice? We'd love to hear your thoughts, so let us know in the comments below.
Following last month's subscriber import makeover, there has been a lot of interest in returning the ability to fix invalid email addresses in the app when adding new subscribers to a list. We very quickly realised how important this was to our customers and have now given it a makeover, as well.
Mistakes happen. When you're collecting email addresses, say, through another app or a paper list, spaces and typos may not get caught until you try importing these details into a subscriber list in your account. So, immediately after you add new subscribers, you'll now find that any invalid addresses can be viewed and edited in place. Once fixed, addresses are marked as 'Updated' and automatically added to the list:
This is certainly a sure sight better than going back and editing your .csv file, before trying to import it again.
Last month, we were keen to get the new subscriber import process into your hands as quickly as possible, then find out what you liked and what could be improved. As it played out, quite a few of you regularly fixed email addresses inline and saved a lot of time doing so. So, a big thank you to everyone who commented, tweeted and emailed us to request this - not only for your passionate responses, but for working with us as we brought this up to speed with the rest of our new subscriber import process.
Finally, if there's anything we can do to improve the subscriber import process, please let us know below or get in touch with us - we're listening and doing our best to get things just right.
We've updated our highly-popular Guide to Responsive Email Design to show at a glance which email clients and devices support responsive design techniques.
Featuring results for 18 different email client/device combinations, our new 'Which mobile devices can you design for?' chart is the definitive resource for finding out whether your media queries are to be supported, or passed over by some of the most popular handsets and tablets on the market. Hopefully it will give you more confidence when testing your template builder creations, or a solid answer when a client asks if they can view the mobile version of a newsletter on their Blackberry. Jump into the guide to get in the know:
View the media query support chart
On the topic of tablets, whether emails should be optimized for displays exceeding 600px is a controversial topic, which we'll be covering in a blog post shortly.
Joining us in the fight for more mobile-friendly email newsletters is Anna Yeaman at Style Campaign, who laboriously tested many of the devices in the chart. We highly recommend checking out their blog for tips on providing a great experience for your mobile-weilding subscribers.
Have questions about support for a specific device? Throw us your biggest curveballs in the comments below.
If you regularly work on projects using our API, you may have seen a couple of changes in the last few weeks. Yes, we've been working through the wishlist, updating both our methods and wrappers so you can do much more with your data.
Since adding the email client usage report to the app, we've regularly received requests to make this data available via the API. Now, we've finally made it happen, with the introduction of a new method for returning email client usage for a campaign. In addition, when you retrieve a subscribers' details, the email client they last used will be returned, too.
The addition of email client usage data opens up some interesting possibilities when working with our API. For many, the big win will be the ability to graph this data in a dashboard, or add it to subscriber records in a CRM app. However, there's nothing stopping you from using it to create interesting segments, say, when sending campaigns specifically targeting iPhone users (iPhone app release, anyone?). Or perhaps someone could try cross-referencing email client usage with subscriber geolocation data as part of an interesting Maps mashup.
Another big-ticket item was the addition of a new method for returning unconfirmed subscribers. If you have confirmed opt-in lists, this ultimately allows you to add a count of these subscribers to a dashboard, or similar. On a related note, we've also now got a method for adding email addresses to a client's suppression list, which may come in useful if planning to exclude email addresses that may or may not be on any lists. Given that we also have an existing method for unsuppressing email addresses, this method may come in handy for tasks like pausing email subscriptions, excluding competitors and more.
Finally, it's now possible to access spam complaints for a given campaign via yet another new method; we've also added spam complaint stats to campaign summaries. Good times for those wanting to access more complete reports from outside of the Campaign Monitor app.
Alongside these updates, we've also tweaked our existing methods to allow campaign confirmation emails to be sent to multiple email addresses, plus, when creating a draft campaign, providing a plain-text version is now optional. Sometimes, the little things make all the difference.
Many thanks to Jimmy on our team for pushing through these changes - you can receive the latest news from him and the team by subscribing to our API Announcements forum. Rest assured that we've also updated our wrappers, so you can take advantage of our new methods straight away. As always, if there's something you would like added to our API (or improved), you can contact us directly or leave a comment below - we're keen to hear what you have to say!
Designing, coding and testing takes too long. I can't convince clients to pay more. Besides, who's going to appreciate all that hard work, anyway?
As someone who's worked in an agency setting (and not just an office that smells of rich mahogany), I and likely you have heard all of the above. Sometimes, it's just hard to justify the time and effort that goes into a responsive design, just as it's hard to justify refactoring an otherwise image-heavy design, or even spending an hour on testing.
However, after reading this recent blog post by Email Design Review, I felt compelled to chip in with a little pep talk, a word or two to say, yes, it's really worth it.
For starters, as EDR pointed out:
"I think that it’s a no-brainer to look at providing a better experience for those users opening your emails on a mobile device. In fact, personally I find it a bit weird that we need stats before we think about this, but there we go."'A note on Responsive Email Design', Email Design Review, October 22, 2012
Nonetheless, the questions remain - are enough people going to benefit from a 'better experience' to make amending our stylesheets worth our time? Secondly, does a better experience actually lead to tangible benefits?
If you saw our earlier blog post on email client market share, then it won't come as a surprise that mobile now dominates. Not only do we now see iOS devices accounting for 35% of client usage overall, but Android usage growth clocking an impressive 90% increase over the course of just over a year.
The bottom line - a lot of people will benefit from a responsive experience now and more will in the future. In addition, the most popular mobile devices have native mail applications that support media queries, so support for responsive techniques is close to a sure thing.
The earlier email client usage stats tell us two things - not only are mobile clients commonplace, but people are increasingly warming up to using them. Jakob Nielsen's recent mobile email usability study recently observed a number of benefits that mobile users reported enjoying, the biggest being:
Mobile reading... (adds) one more super-benefit: the newsletters are always available. Furthermore, on a phone, interaction mechanics are substantially easier for email messages than for websites: scrolling through a newsletter is less work than navigating a website to acquire the same information.'Mobile Email Newsletters ', Jakob Nielsen's Alertbox, October 22, 2012
Subscribers no longer have to wait until they return to their desks to get a message - regardless of your feelings on living in an 'always on' society, the pervasive feeling is that many people really like to read email anytime, anywhere. Providing a mobile-ready email newsletter multiplies this benefit, by providing an experience that requires 'less work than navigating a website to acquire the same information', by far.
Finally, I know what you're all thinking - despite EDR's earlier opinion, stats speak. So, here we go. According to Jay Schewedelson at Worldata, email newsletters that are not optimized for small screens suffer from a '28% lower conversion rate' than emails that have been designed with mobile in mind. This is because of increased 'tap errors', or accidental use of links. As he mentions:
"Nearly one-third of all mobile clickthroughs are accountable as tap errors, and this can dramatically change the ROI of your email campaigns."'Email Trends: The Importance of Tap Errors, Alt Tags and Mobile Design', Chief Marketer, October 16, 2012
The short of it - eliminating mistakes makes for more successful campaigns. But the most juicy, client-pleasing bite of all?
"87% of C-level executives check the majority of their email via mobile. This means that both B2B and B2C marketers must make their emails mobile friendly if they want to succeed."
If you're not thinking about responsive email design, then it's time to get up to speed. We have a template builder for creating mobile-friendly newsletters in minutes - or, if you prefer a more hands-on approach, our responsive email guide is for you.
Have you seen an uptick in clicks since optimizing your emails for mobile? Or are you yet to be convinced that mobile uptake makes a difference? Share your experiences with us in the comments below.
Earlier this week we pushed a small but very useful update to our RSS to Email feature. Instead of using the same static subject for each issue, you can now use the title from the most recent post in your RSS feed. You spend time crafting great titles for your blog posts, so why should your email subjects be any less polished?
This change is a big win for our frequent RSS senders, like those firing off daily updates whenever there are new posts on their site or blog. We think it's going to have a big impact on your open rates too. Here's how it looks in your account:
You'll see a new option in the first step of creating your RSS campaign
If you have an existing RSS campaign and you'd like to switch to using the title of your latest post for each subject, it only takes a couple of clicks. Head into the reports for your campaign,
Click "Edit this campaign" to change the subject for each RSS email
We often hear from customers using us for their regular newsletters and wondering if they should switch over to us for their RSS campaigns as well. Given the recent concern over the future of Feedburner, we've been hearing this a whole lot more of late. We even created a little landing page explaining some of the benefits of using us over the other options out there.
If you're interesting in moving across, we've put together a very simple switchers guide which walks you through the process of getting your existing subscribers into Campaign Monitor, switching your subscribe form over and then using our template builder to blow the socks off your old Feedburner design. They'll automatically look great on a mobile device too, which is pretty important these days. Plus, if you're already on a monthly plan throwing your RSS emails into the mix is almost always free of charge anyway.
This November, more than a third of the Campaign Monitor team are putting their razors and social acceptability aside to raise money for men’s health. That's right, it's Movember time at Campaign Mo'nitor.
All said, we're hoping to raise more than $10,000, specifically for prostate cancer and male mental health. We'd love everyone to donate, so head on over to our Movember page to see who's getting involved, track our progress and get behind a great cause.
A couple of hours ago we launched Enlist, an app that turns your iPad into a beautiful subscribe form. It's perfect for the counter at your store, an event you might be hosting, or anywhere else where people might like to join your list when they're not in front of their computer. It's totally free and available now.
When we built Enlist, the most important thing was that it could be completely customized to match your own look and feel. When it's sitting at the counter in your store, it should look like it was built just for you.
We've included 10 great looking themes to make it easy to get started, but you can throw in your own logo and background image, change the copy to suit, the button label, the fonts, text sizes and plenty more. To make this easy, we've gone for a live preview approach so you can see exactly how your form will look as you make changes.
Once you've designed your form, you can easily secure it by setting a passcode, ready for people to start subscribing. This means anyone can join your list, but they can't make any changes to the form or your settings. If you want to make any tweaks, just enter your passcode and you're good to go.
Let's say you sell handmade goods each weekend at the local fair. Now you can take your Wifi only iPad with Enlist installed, set it up on the tabletop and hundreds of people can sign up to your weekly newsletter, all without an Internet connection.
After a successful day of selling, Enlist will automatically sync all your new subscribers straight into your Campaign Monitor account the moment it's connected to the web. This all happens seamlessly behind the scenes without you lifting a finger.
As well as looking great, we made sure Enlist was as easy to use as possible for your subscribers. We designed stunning custom form controls that looks awesome on a retina display. We also give you control over which fields to show, and what order they should be displayed.
You can also set certain fields as required, and we'll handle error checking for your subscribers to let them know if they missed something.
Enlist launched in the App Store a few hours ago. It's free to download, all you need is a Campaign Monitor account. When you first run the app you can choose which list you'd like to connect it to, but you can easily change this to any other list at a later date.
We're really excited about getting our first dedicated app out there. We've got plans for more improvements down the line, so please give it a try and let us know what you think.
Our customer service team is the backbone of what we do. They’re our face and voice to customers. They drive the direction of our software by channeling customer feedback and ideas. So, as our customer numbers and support team grows we want to make sure we’re maintaining our high standards of quality.
Any time a current or potential customer chats with our team, a reply will include a small link in the footer where they have the opportunity to give us feedback on that experience. It’s a simple, unobtrusive and totally optional way to get that feedback from customers who want to provide it. Here’s what appears in the footer, which is automatically inserted by our help desk software:
PS. Was I helpful today? Could you please leave some feedback here, it will only take a moment [link]
When the link is clicked, we show the following feedback form. Here they can select a positive, neutral or negative rating and leave a message about their experience.
We’d been using an out-of-the-box Nicereply page for a while. It did a reasonable job by displaying faces for moods and encouraging a message with a large text input area. However, the copy needed some work as did the colour and styling. The time had come for a redesign.
As a new member of the Campaign Monitor design team, one of my first jobs was to rethink this workflow. Our Design Director Buzz put together a design brief and we ran through the usual questions a designer might have:
For this particular task, the goal was to make small improvements to the usability and copy in order to increase conversion. We also wanted to re-design the existing user feedback form to be more inline with our new branding.
When we make something at Campaign Monitor we always try to include a bit “personality” - adding that little something that makes the user's experience more human.
My first sketch had a focus on the support member who answered the ticket. It would include the support members profile and location in the centre with emotions floating around them. A user would select the emotion that corresponded to their dealings with the support member. This solution was focusing on the support member a bit too much – and might result in feedback becoming too personal and mask the real problem at hand. We needed to change focus so I looked at another sketch.
My second sketch borrowed a similar, top-down layout but fell back to a more simple UI pattern. The user would scan a list of responses and select an option that fits. There would be some feedback to show the toggle was selected and they can fill out a message or be on their way. The straight-forward nature of the large hit-areas started to make more sense. This design would also be leaner in size (and interaction) so it would be a win for all parties involved. This was the direction I settled on and would start to explore in more detail.
My first user interface design closely followed the look and feel of the existing page.
I found I was holding onto too much of the existing design here. Trying to match it closely to our website was also holding me back. Buzz encouraged me to move away from this entirely and try something new.
A quick search on Dribbble allowed me to hand-pick some dark-themed inspiration. I sold the team on this darker direction and moved onto laying out a new UI.
I started the design by trying to work in faces for moods. On review, we felt the titles of the responses should receive the primary focus and the faces were just distracting from that. In the second iteration, I replaced the faces with crosses – as if you were filling out a form with pen on paper. Presented this way, the crosses felt a bit too negative.
The third iteration replaced the crosses with a tick. This felt more positive than the last version, and would be visually more interesting than just using a radio button. I put it to the team that this is how our toggle should look.
The team were happy, but there was some discussion around whether or not having a positive icon for a negative option (in the third row) made any sense. We concluded the tick is for making a selection (regardless of the case) and it was decided we would run with it.
At this point, Dave also had the idea to customise the follow up question depending on which option a user selects. Theoretically, this would encourage a more targeted response than the standard “Do you have any additional feedback?” line. Here's what we went with:
| Choice | Question |
| Positive | "Thanks. Anything else you'd like to add?" |
| Neutral | "What could we have changed to make it even better?" |
| Negative | "Sorry to hear that. How can we improve?" |
I made further tweaks to the order, size and layout of elements. Here's the final design:
The new feedback form was plugged in and and went live a couple of weeks ago. We've already had a 65% increase in users completing the feedback form which has blown us away! Taking the time to make the feedback process easier and more consistent with our tone is already paying dividends.
I hope you enjoyed this behind the scenes blog post. We’ll try and do a few more of these as we see fit. I've also been tasked with presenting this feedback data internally in a very exciting way, but I'll share more about that next time.
Since the very first day we launched Campaign Monitor, our focus has been on building the best email marketing tool out there for creative people - from a freelancer sending for a couple of clients to large agencies managing hundreds of them. Today I'm excited to announce a new program built exclusively for all the creative agencies using Campaign Monitor.
We talk to a lot of creative professionals using Campaign Monitor for their clients, and in those conversations there were two pain points that seemed to come up the most. The first was that it was frustrating when we'd release new features and their clients would find out about them before they did. The second was that it felt unfair we were offering them the same rates their clients could get by signing up and using Campaign Monitor directly.
That all changes today, with the release of our brand new Agency Partner program, built exclusively for creative professionals using Campaign Monitor for themselves and their clients. Once approved, you'll get an instant 10% discount on all our prices, plus access to early announcements of new features before they are released to the public.
In the past we've been hesitant to share any kind of product roadmap with customers. There are a lot of reasons for this - dates slip, features can change at the last minute. At the same time, it can be frustrating when a client asks about a big new feature in their account that you haven't even heard of.
As part of the Agency Partner program, we'll now be providing advance notice about any significant updates or new features before they are released and shared with the public. In some cases this might be weeks before, and in other cases days before, but we'll be doing our best to try and give as much notice as possible when we can.
We've been very careful to give you complete control over how the discount should be handled once you're accepted into the program. Depending on the billing settings you have in place for each client, you decide how the discount should be handled.
Here's an example of what you'd see the first time you logged into your account if you have clients paying for their own campaigns at our base rates:
No matter how your account is set up, you choose the approach that suits you best. You can pass the discount on to your clients, or automatically earn a profit. Either way, you win.
This is a very targeted program built specifically for creative professionals using Campaign Monitor for their clients. You might be sending campaigns for them or they might be sending their own based on a template you've built. If that's you, we'd love you to apply.
We'll have a quick look at your account and web site to make sure you fit the bill before you're accepted. We're expecting a lot of applications over the coming days, so please be patient with us as we work through them.
Apply for the Agency Partner programWith the announcement of the iPad Mini yesterday, many of you are likely wondering if it's necessary to edit your responsive designs to accommodate its' small display.
First, the good news - it's very likely that you don't have to change a thing. As the iPad Mini has the same display dimensions as the iPad 1 and 2 (1024px x 768px), there's no need to adjust your existing media queries if you're already targeting these devices... Unless you're using device-pixel-ratio for really selective targeting (which we generally don't recommend).
But should you be targeting the iPad when creating a responsive email design? We'd like to argue, no - the 768px device width in portrait mode is likely enough to comfortably view most email designs in their regular, non-mobile state. If anything, iPad shares more in common with desktop clients like Apple Mail, than mobile clients from an email design perspective. So it's generally not worth narrowing down your designs as you would for iPhone or Android handsets.
For more design guidelines for the iPad Mini (and iPads in general), I recommend reading this post by Mobify. While it doesn't specifically cover coding for email, it's full of practical adaptive design tips and considerations that you can apply when designing with mobile devices in mind.
If retail coupons mean business to either you or your clients, then Apple's digital wallet app, Passbook, has more than likely caused a little commotion. Being able do away with printed scraps of paper is one thing, but having offers that are both time and location aware may really change the game.
We'll take a look at how you can use PassKit's Pass Designer to create a simple coupon that can be delivered by email and saved to a recipient's iOS device. Now that over 35% of email opens occur on an iOS device, Passbook may well be the next big thing in retail and email marketing.
Lets say that you run a local restaurant called ABC Burgers. You have an active subscriber list of in-store signups, who love receiving special offers and discounts via email. You've also noticed that many of these savvy customers don't like bringing in printed coupons and clippings as much as they like using their iPhones.
When Apple released Passbook, they also released a great opportunity to not only reduce the amount of paper waste that coupons were creating, but market to customers in unique ways, with location-aware, limited-time offers.
The end goal - a coupon that can be emailed to customers, then brought in-store to redeem a 2-for-1 burger deal. You don't mind if your coupons are distributed freely as passes, so there's no need to lock them down with serial numbers or passwords. Imagine, after hitting send on your next newsletter, the queues for burgers will be wrapping around the block in minutes.
So first of all, what is a pass? The skinny is that it's a 'virtual card' that can be used to replace conventional loyalty, rewards and membership cards, coupons, tickets (like Eventbrite does) and more. The idea is that designers and developers like yourself can create these passes, then distribute them amongst users with Apple devices running iOS 6 or higher. Unlike physical cards, you can also update and manage passes remotely. For example, you can automatically revoke passes from all devices, or update them as your terms and conditions change.
Passes are double-sided - on the front, you can add important details, like a promotion summary, customer name, or membership number. On the back, a physical business address is mandatory, but there's plenty of space for terms and conditions and any other legal mumbo jumbo.
The great news is that there are already services like PassKit or PassSource that do not require special development or design skills to whip together a simple, static coupon (although these always help). Both services allow you create free, highly customizable passes from your browser.
We'll be using PassKit's Pass Designer, as it makes understanding and editing Passbook passes just a little easier for first-timers like ourselves. This is just a demo - if you want to issue passes commercially, you will need purchase a certificate via an Apple developer account ($99 per year).
First, a caveat - PassKit is undergoing heavy development, so a lot of what we're about to mention here is likely to change. But given that their Pass Designer is fairly straightforward, you'll probably find your way through just fine. So, back to the story - we have a pass to create for our 2-for-1 burger deal. Before we get started, we'll need:
With this in hand, it's time to visit Passk.it and follow the prompt to create Passbook passes. The editor will load and first ask you what kind of pass you wish to create. Select 'Coupon', fill in a meaningful name for your pass and a description (eg. '2-for-1 burgers'). Leave the serial number settings as-is - we won't be using the barcode, anyway. Finally, you can also opt to have the pass display on the lock screen at a set date and time - we'll cover how to trigger these notifications when the device is close to a specific location in just a moment.
Now, on to the 'Colors and Images' step, where we'll upload all the images specified earlier and set a color scheme. Here's what this looks like:
Once satisfied, we can move on to the 'Front Content' tab. Here, you can add some text for the front-side of your pass, like '2-for-1 Burger Deal', expiry dates and more. If you add any items, make sure they're set as 'Static', so they can't be changed by users. Keep in mind that the logo and any text at the top will be what's displayed when the pass is displayed in a deck of multiple passes in Passbook.
On the 'Back Content' step, the only mandatory item is a physical business address (as we mentioned earlier). However, if you have terms and conditions, this is the place to add them.
Things get more interesting on the 'Locations' step. Once you enter an address and find the corresponding latitude/longitude, you can create a short notification which will appear when a device with the pass is in range. A message like '2-for-1 burgers - come in now!' will do.
If you are creating a pass in English only, you can skip the 'Language' step. Otherwise, you can provide translated text and graphics for dozens of languages.
On the final 'Distribution' step, you can select to issue a finite number of passes, ensure they stop getting distributed after a certain date and most importantly, get the Pass URL for our email. Remember to hit the 'Save Pass' button before moving onto sharing this link around.
If all has gone well, your Pass URL should go to a pass like this one. Try downloading it to your iOS device and viewing it in the Passbook app - good times. You can update the pass in the editor and the share link will remain the same.
So, you're happy with your pass and have a Pass URL handy. Now all you have to do is pop it in an email newsletter.
The Pass URL is no different to any other link, so you can add it to text or an image in our template builder, to your HTML code, or to an autoresponder. Once done, test and send as you would a regular email campaign. With the coupon out in the wild, you can visit your PassKit account to view basic reports, or simply arm yourself with a burger flipper and brace yourself for the hungry hoardes!
Well, this has been a simple account of what goes into creating a basic coupon for Passbook - to go large, you may still require a designer and you most certainly will need an Apple developer account. But if you think about it, we've covered a lot of ground here - not only have we created a coupon that can be sent to countless subscribers, but we've made it location-aware and easy to update at any time. With a taste for the creative opportunities that Passbook and email deliver together, we hope you're inspired to bring your own sophisticated campaigns to the table.
How are you or your clients planning to use Passbook? We'd love to hear about your ideas in the comments below.
Mobile email has been this year's hot topic. Optimizing campaigns for the small screen has gone from maybe to mandatory, resulting in countless new templates, not to mention, our responsive email guide. But do the numbers match the hype?
To answer this question, we recently refreshed our popular email client popularity report by analyzing a sample totalling more than 7 billion emails to find out which mobile email clients had amassed market share in the past year, which clients we should keep an eye on and well, any other trends and trivia we could find along the way.
Earlier this year, our friends at Return Path predicted that mobile was to surpass web and desktop client usage by July, 2012. We found that this event happened as early as February, when mobile overtook webmail client usage. In April, desktop clients lost their top spot - and mobile has shown no signs of slowing down since. In the following graph, you can see how mobile market share has increased since we last updated our report in May, 2011, while desktop and web client market share has continued its shallow decline.
To clear up any misunderstandings here, both webmail and desktop email clients are far from dead. For example, over the same period, we recorded a 25% increase in opens originating from Outlook desktop clients. However, relative to both mobile clients and overall send volumes (which increased also), Outlook and company are becoming less significant.
Given our earlier results in 2011, it came as no surprise that iOS devices had retained their clear lead as the mobile email client of choice amongst subscribers, accounting for almost 88% of opens recorded across all the mobile email clients we were tracking. In comparison, Android devices represented 11.7% of mobile opens, with all other major handset manufacturers playing a minor part in the results.
Before we ignore all but iPhone and iPad users, it should be noted that Android email client market share shot up from 2.49% in June 2011 to 4.74% by September, 2012. This impressive 90% increase makes it one of the fastest-growing platforms and definitely one to watch in 2013. Unfortunately, we couldn't distinguish between default Mail and other popular Android email clients (like Gmail), which have considerably different rendering capabilities.
At this point we'd like to address the elephant in the room, being underreporting amongst clients that do not display images by default - we'll touch on the technical significance of this shortly. As iPhone Mail downloads images without being prompted to, while Android Mail does not, the figures we've presented here will be inevitably skewed towards the former device. Later in the year, we are hoping to address this issue by comparing opens to other activity in order to address this bias, so please stay tuned to this blog.
Our methodology is pretty straightforward. As you may know, every time one of your subscribers opens an email you’ve sent or clicks a link, we record which email client they are using. However, if a link isn't clicked an open can only be recorded when images load in the email client. This means that clients that don't display images by default are likely underreported, while clients that don't display HTML email at all (like older Blackberry handsets) cannot be tracked.
While factors such as image blocking by default can affect usage stats, it doesn't impact market share change over time. So the skinny is that while email client usage / open rate figures may not be exact, the growth of individual clients is not in dispute.
With that out of the way, we looked across a sample of more than 7 billion emails including close to 1.3 billion opens, recorded between June 2011 and September 2012. One quirk we were quick to notice is that our email client market share percentages totalled over 100%, which suggests to us that subscribers are reading the same emails on multiple devices, say, on an iPhone while commuting to work, then later using their desktop email client. This is becoming increasingly frequent occurrence and is likely driven by the increased use of email-friendly mobile clients.
To get the scoop on which email clients you're likely to hear about in the year ahead, we recommend you check out our updated email client popularity guide. But don't let us tell you which clients to design for - you can find out what your subscribers are using in your reports.
Naturally, if you have any questions about the data above, or would like us to measure a specific something in the future, let us know in the comments below.
Over the last couple of months we've been hard at work building a seriously talented design team at Campaign Monitor. We're big fans of closed offices around here, but just as importantly we think that needs to be balanced with great spaces outside those offices.
So with the recent addition of James, Tim and Adham alongside Buzz and Matt, we wanted to create a new area where this team could work together in a common and open space. Fortunately we had the ideal spot right next to their offices, but it was the definition of uninspiring.
To fix that, we approached Beastman, one of the most distinctive emerging street artists in Sydney to transform a boring white wall into the complete opposite. The result was a stunning interpretation of our new identity in characteristic Beastman style. We put together a quick time-lapse of his handiwork below.
The crazy thing here is that the entire mural was done with nothing but aerosol cans and a steady hand, all in a single afternoon. We're absolutely loving the new space and are planning on doing more of this in other parts of the office down the track.
Yesterday we pushed a highly requested update to our API allowing you to create a campaign using an existing template, and then populate that template with any content you desire. Whether you're updating a single chunk of content or an entire email filled with complex repeaters, the entire process can now be fully automated.
If you're not already familiar with our template language, it lets you turn any HTML email design into a re-usable template by adding a few simple tags. Now that you can create campaigns using template via the API, all you need to worry about is supplying the content and we'll do the rest.
VIEW THE DOCS We've put together everything you need to get started
On top of the template update, we've also just added support for unsuppressing an email address via the API. This means you can easily remove an address from any client-wide suppression list if, for example, that subscriber now wants to hear from you again, or was suppressed by mistake.
To support these new updates, all our wrappers have also been updated. This includes Ruby, Python, PHP, .NET and Java so it's a piece of cake to start using these features in your own solutions.
We get loads of interest from customers about how they can best connect their Campaign Monitor account with Salesforce. Today we're happy to announce another great Salesforce integration that offers loads of highly requested features, is free to try and if you have less than 500 contacts is free for life.
Built in collaboration with our friends at Beaufort 12 and available in AppExchange right now, this is a truly deep integration that brings a lot of the strengths of Campaign Monitor right into Salesforce.
Now you can access all your campaign reports, including Worldview without ever leaving Salesforce. This also includes comparing the results of multiple campaigns at once.
This is a great one. Automatically add or remove contacts and leads from a Campaign Monitor subscriber list based on custom criteria you set. This might be the amount they've spent with you, their location, where they are in your sales process, it's up to you. There is no limit on the amount of subscribers you can sync and it all happens seamlessly behind the scenes.
Drill down to a personal level and see your complete sending history with a subscriber without leaving Salesforce. This includes Campaign Monitor specific details like their location, their sharing history on Twitter and Facebook, and much more.
Take any field from a Lead or a Contact in Salesforce and map it directly to a custom field in Campaign M6onitor, making it very easy to personalize campaigns with Salesforce content.
From Salesforce you can use a list view or a report to add as many contacts as you want to your lists in Campaign Monitor.
On top of these handy features, Salesforce for Campaign Monitor also supports:
Salesforce for Campaign Monitor is available on AppExchange today and includes a 14 day free trial. If you sync less than 500 subscribers it's free of charge, after that prices start at just $8/month.
| Subscribers | Price (USD) |
| 0 to 500 | FREE |
| 501 to 2,500 | $8 |
| 2,501 to 5,000 | $15 |
| 5,001 to 10,000 | $25 |
| 10,001 to 15,000 | $40 |
| 15,001 to 25,000 | $65 |
| 25,001 to 50,000 | $100 |
| 50,000 | Get in touch |
Feel like you've got better things to do when importing email addresses into the app? We know the feeling. So just recently, we overhauled the process of adding new subscribers to lists and campaigns, so it's now quicker, easier and a lot less fussy than before.
Given that adding new subscribers to a list is a fairly fundamental part of everyone's workflow, it was really time for us to step our game up. For starters, one of the top requests we received from customers was to be more specific about why individual subscribers weren't imported into a list - either because they're invalid, in duplicate, already exist, or have been previously suppressed. So, we've introduced import reports, which allow you to download the email addresses that couldn't be imported, alongside the reasons why. It sure beats being left guessing and may really come in handy when cleaning and consolidating your lists.
While the new import reports are kind of a big deal, what will probably be most apparent when you next add subscribers is our new import screen, which allows you to not only drag-and-drop files, but copy-and-paste new names, email addresses and now, custom field values.
We didn't want to stop short on the files thing, so now, it's possible to upload both Excel (.xls and .xlsx) documents and compressed files (.zip, .rar, .7z and more). In fact, a zipped file is typically about 90% smaller than an uncompressed version, so uploading just got much faster too.
While we're on the topic of large imports, one aspect of this task that previously caused confusion was whether or not things were going to plan when subscribers were being imported. So, we've now added progress bars to both the upload and processing stages, so you can make sure your import is ticking along. We've made lots of changes under the hood so now you can import much larger lists. Once you see the 'Processing your subscribers...' screen, you can even queue up another import, or even close your browser - behind the scenes, importing will continue without you having to stay focused on it.
During the 'Processing...' stage, you can also watch as new subscribers get added on the list details page. Especially with big lists, it's always reassuring to know that the task is getting done.
Finally, we found that issues were commonly arising when subscriber names in a file were split across two columns. Previously, as the app required a single name column, the only choice folks had was to to jump into Excel and combine names manually. This not only took a bit of effort, but spreadsheet know-how as well.
Now, when the app sees two name fields, it will give you the option of mapping them to the default 'First name' and 'Last name' fields and we'll combine them for you behind the scenes. It's a small time saver that we hope you find to be useful.
If you're sending a campaign to a new group of subscribers, you no longer need to import them first before working on your campaign. We've moved all of these nice improvements right into the create/send workflow so you can import them without ever jumping out of that process.
We pushed these updates a couple of hours back, so they're available and ready to use in your account. As always, we're keen to find out how we can make tasks like this better for both you and your clients, so leave us a comment or get in touch if there's a little something we could be doing better.
The other day, our friends at 'Word to the Wise' shared a simple, yet sturdy tip - name your subscriber lists like everyone can see them.
While this is a great idea from the perspective that your subscribers may at some point see the names of lists they're subscribed to, there are other, equally important reasons why you should adopt a subscriber list naming convention, or at least give these names a bit of thought. For starters, with the recent introduction of team management to the app, it's more likely than ever that folks other than yourself will be performing tasks in your account. What will these folks make of lists labelled 'Survey', 'Opt-outs', or simply 'Subscriber list'?
What's often forgotten is that subscriber list names can provide context as to where subscribers are signing up from, as well as keep things organized. For example, lets say you give a colleague admin rights to a client account while you're on vacation. During that time, there's a real uptick in overall signups and the client wants to know where they're coming from. If this colleague isn't familiar with the account, then having lists named 'Client site's Newsletter page' and 'Oct webinar signups' has a lot less confusion-causing potential than say, 'Web subscribers' and 'Events'.
On a similar note, there's the permission side of things. Say someone on your team gives you a list of recipients to include in a monthly newsletter send. Immediately after this campaign goes out, a subscriber replies, wondering how they got on the list (it happens). Being able to look at the list name and respond with, 'It looks like you joined via our in-store signup form' is far more sound from a permission perspective than, 'Oh, but you're on a list called 'September signups'!'
Of course, this is all fairly non-technical stuff and it's likely that both you, your colleagues and clients consistently put effort into ensuring that list names accurately describe what's in the tin. But as is often the case in email marketing, it's the little things that can make a big difference.
Do you have a special approach, or convention to naming your subscriber lists? Share it with us in the comments below.
We love hanging out with both designers and agencies that rebrand our app - each has a different story to tell. So today, we're sharing Pronto Marketing's true tale - of how focusing on a known vertical, combined with good processes and top-notch customer service allowed their design and marketing company to scale up to roughly 750 paying clients in the space of 4 years. Needless to say, we're thrilled to have played a part in their success story.
"Customer loyalty comes from service, not price. We know value is important, but service is what really matters" Just the other week, we took time out of founder Derek Brown's schedule to find out what has made them so successful amongst small-to-medium business (SMB) clients. After all, most would expect this would be a tough sector to crack - SMBs generally have smaller marketing budgets and greater price-sensitivity. But as Pronto explained, price isn't all. Offering a comprehensive range of services, high-quality work and a customer service team that cares by far makes them a more appealing provider than being the cheapest design shop on the block.
There are some great pearls of wisdom in what Pronto has to say, regardless of whether you're just getting started as a freelancer, or have been steadily building your business for a while. For the full story, swing on by the Case Studies section of our site, where you can read the Pronto Marketing interview, as well as conversations with Airbnb, Cameron Moll, FontShop and more.
If you've got an email subscribe form on your site, you've likely put some thought into how to protect it from spambots and other automated nasties that sign up using bogus information. Sure, you can make your list confirmed/double opt-in or add a captcha, but these aren't always to everyone's taste.
But before we go into the specifics of defending your subscriber lists, here's a little background on what spambots can do. On one end of the scale, they can be merely annoying - you may get a couple of fake subscribers from time to time, no biggie. But on the other, less fortunate end, there's the possibility of having your forms bombarded, or having spamtrap email addresses added to your lists. We've got built-in defenses to protect accounts from both possibilities, but whether you're building a subscribe form, contact form or an online survey, it's worth getting wise to home-grown remedies, too.
First, I have to tell you that I have a severe dislike of machine-generated image captchas - and I don't think I'm the only one. For starters, they penalize innocent folks who simply want to fill out a form as quickly as possible. Penalties mean less signups. Really, who wants to give away their personal details, then be forced to complete a task like this?
Ok, so I chose an extreme example there. But the point is, captchas can be hard work, even if you have perfect vision, no history of dyslexia or colorblindness and are fluent in English. For folks with mental and physical traits on the other end of the spectrum, captchas are often impossible to complete.
In short, we don't recommend that you use a traditional captcha. Instead, here are two friendlier alternatives.
A common solution to spambot woes is to add a 'I am not a spambot' checkbox to forms, which must be checked for the form to be submitted. Called a 'checkbox captcha', it uses a checkbox generated using client-side Javascript, thus making it invisible (and uncheckable) to spambots. You can see a good example in this very instructive post on 'Captchas vs. Spambots'.
While checkbox captcha is a very elegant solution, the downside is that not all humans have Javascript enabled in their browsers. As a result, it comes with the risk of making subscribe forms unusable for these people.
Another approach is to use a 'honeypot captcha', which works by including a form input that only spambots are tempted to fill in. This checkbox or text field is hidden using CSS, meaning that while most users won't see it, spambots will. To stop folks with screen readers from falling into the trap, a label like "If you're human, leave me blank", or something equally instructive can be added. In a recent post, Paul Boag outlined why it's his weapon of choice:
Personally, I like this approach, because it doesn't burden subscribers with extra fields. It's also easy to implement, doesn't necessarily require Javascript and allows you to easily identify and weed out dud email addresses. It likely won't stop all spambots, but it won't annoy all users like traditional captchas do.
We'd love to hear your story - do you protect your forms using double opt-in, or the methods listed above? Why did you make this choice? Let us know in the comments below.
If you thought designing email for your subscribers' ultra-short attention spans was limiting, then usability stalwart Jakob Nielsen has some more bad news for you. Not only do you have just mere seconds to convey your message, but your readers are likely to 'overlook things outside their area of interest'.
As Jakob explains in his recent Alertbox, selective attention is a common problem. Simply put:
"Users don't look around much. They often stay highly focused on the screen section that they're engaging with or that they assume contains the answer to their problem."'Tunnel Vision and Selective Attention', Jakob Nielsen's Alertbox, August 27, 2012
For email designers, the challenge is in creating campaigns that are as 'highly focused' as the subscribers that read them. For example, if you're announcing the launch of a new site, your best bet is to stick to focus on providing obvious links and buttons to the site itself. At best, secondary content like mission statements and special offers will be ignored. At worst, they could draw attention from what really matters.
Example of a brief, focused message for Vtalk, by Zero Hour and Co.
In a similar vein, Mr Nielsen warns that separating related information or design elements can result in vital parts of your message being misunderstood, or missed. While the closeness gestalt principle is generally applied to user interface design, it's relevant to email copy, too. For example, try skim-reading the following two paragraphs:
Now, if a subscriber is strictly fixating on prominent links like you probably did, are they more likely to realize that they will receive a discount in Example 1, where this information is aside from the link, or in Example 2? Likewise, if a product description is placed away from an attention-grabbing image, will it be read at all?
Jakob Nielsen ends his Alertbox with this little pearl:
It's only human: focus on a few things and ignore the rest... designers don't have the same problem. They know which information is important — in our example, the year — and thus focus on it when analyzing the layout. This is why you should test with real users.
By real users, Jakob doesn't mean that you should recruit your barista or best friend to provide their opinions on your email design prior to sending - although you're more than welcome to. Running A/B tests on your email content can reveal which of two designs has a more focused message. Plunk can be used to observe how people respond to simple tasks when your email is viewed on a mobile device. Finally, previous email overlay reports can be mined to see what people are really clicking on in your newsletters - it may not be what you think.
Do you subscribe to, or have you designed a newsletter that clearly commands your attention? Kindly share it with us below - we'd love to take a look!
Since HTML's humble beginnings, the 'click here' link has been ubiquitous in both email and web copy. So common is it, that 'click here' has lost its meaning, in more ways in one. And that's exactly the problem with using it in email campaigns.
For the most part, we can't be blamed for using 'click here' liberally. At first impression, it seems like an unambiguous call-to-action (CTA), a direct request to do a good thing for our campaign's goals. However, if you're conscientious about keeping your copy as short and as punchy as possible, it may have become apparent that 'click here' are two words that you can almost always omit. For example, compare the following links:
1. To find out more about ABC Widgets' range, click here. 2. Find out more about ABC Widgets' range.
Which sentence is shorter? Which is really the more instructive CTA to you?
The redundancy of 'click here' is a side-issue for those using assitive technologies like screen readers - for the sight-impaired, having meaningful links is a priority. I recently trialled reading my email using the iPhone's 'VoiceOver' accessibility feature (Settings > General > Accessibility > VoiceOver) and found that it read out link text in isolation when a link is tapped. In this context, having 'Find out more about ABC Widgets...' spoken to you is by far preferable to 'click here'.
Designing accessible emails is more important than you may think - blindness affects over 25.5 million people in the US alone.
Earlier, you may have noticed that we referred to 'tapping' on links in iPhone Mail, instead of clicking. If you consider the variety of settings in which online content is consumed, the assumption that we should only be clicking is a silly one. Tim Berners-Lee understood this all too well when he wrote the cornerstone document, 'Style Guide for Online Hypertext', where he recommended that we should:
Try to avoid references in the text to online aspects. "See the section on device independence" is better than "For more on device independence, click here". In fact, we are talking about a form of device independence.
Back in those days, 'device independence' largely meant creating content that was just as relevant to the reader on-paper as it is on-screen. Now, when emails are routinely read on devices that are navigated using taps, voice commands, shakes, swipes and styluses, 'click here' seems increasingly outdated.
Finally, if there's one thing that affects nearly all of us, it's a tendency to skim through email messages. Now, if you think of what's likely to stand out in a hastily-read paragraph of text, it's... You guessed it, the links.
When scanning for important tidbits, links like "View more cats!" are sure to have more appeal than, "For more cats, click here" (regardless of your feelings about cats). Jakob Neilsen's research has shown that eyes naturally fixate on links, so making them as meaningful as possible is sure to have a positive impact on campaign results.
None of the above is 'new' news - the call to cull 'click here' links has been going strong for over a decade now. Some really great reasons for avoiding its usage were brought together in the 2002 post, 'Why "Click here" is bad linking practice' - that's 5 years before the iPhone changed how many of us navigate emails. Nonetheless, 'click here' remains a mainstay in email copy.
So, next time you see a client asking subscribers to click here or there, are you going to call them out for it?
In the wake of the Apple iPhone 5 announcement yesterday, at least a few of you are probably wondering how this new device's larger display is going to affect both email designs and designers alike. While for many who have incorporated responsive techniques into both their templates (and undoubtedly, web sites), these changes won't have a considerable impact, its likely that others may wake up to find their media queries falling over in some circumstances.
Pretty much everyone who's dabbled with mobile design has used @media only screen and (max-device-width: 480px) { ... } as the starting point for their stylesheets. This has been sufficient when targeting earlier iOS devices (and a variety of other vendor handsets, for that matter), however the iPhone 5's 1136 x 640 pixel resolution has moved the goalposts somewhat.
Like previous Retina and high-resolution displays, the iPhone 5 screen has a device pixel ratio of 2, which bluntly means that every 2 physical pixels on the display equals 1 device-independent pixel (or 'dip') to software. If you're unfamiliar with this concept, QuirksMode explains it really well.
So while the iPhone 5 has a physical pixel resolution of 1136 x 640, the dip/device-width resolution is 568 x 320. Thus, to target iPhone 5's specifically, the declaration would look like this:
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
/* iPhone 5 CSS styles */
}
The good news is that in the portrait orientation, all iOS devices (with the exception of the iPad) still have a device-width within this range. However, things get interesting in landscape mode, where the 568px width is in excess of the max-device-width: 480px commonly used across web and email CSS stylesheets alike.
If you've used max-device-width: 480px as the basis for your mobile stylesheet and view your design on the iPhone 5 in landscape orientation, the email will revert back to how it displays in desktop and webmail email clients (ie. the media query won't be applied). In most cases, this won't be such a bad thing - the iPhone 5's 568px-wide display is not too far off the 600 - 650px widths that most folks use for their email layouts, so a little zooming will be in order. However, for those sensitive about having the mobile version display in any orientation, there are three options:
If you've used the viewport meta tag with user-scalable = no to tame the zoom in mobile email clients, don't. Preventing users from freely zooming is a usability issue in itself. After all, mobile display resolutions outside of 480 x 320px have existed well before the iPhone 5 came along, but having zoom disabled is sure to become more of a problem with the iPhone 5's new display dimensions and inevitable popularity.
If you're new to mobile email design, or are unsure about any of the above, I highly recommend you check out our guide on Responsive Email Design. Packed with all sorts of useful tidbits, it will get you confidently coding mobile-friendly emails, subscribe forms and more in 8 simple chapters.
We'll be keenly testing email campaigns in iOS 6 Mail on the iPhone 5 in the coming weeks and will be sure to update our resources, based on the results. As always, keep an eye on this blog, where we'll be posting what's new in mobile email design.
For a lot of our customers, sending to multilingual subscribers is kind of a big deal. While we've recently updated our template builder to make it easy to send localized campaigns, wouldn't it be nice if your subscribers could not only receive newsletters in your language, but the one they prefer?
In this post, we'll take a look at how you can link to translated version of your email campaign, by using a special URL that passes your webversion to Google Translate. While Google's automated translations aren't necessarily spot-on, featuring a 'translate this' link may mean the difference between a reader understanding, or trashing an important message.
Lets say that you're sending an email announcement to a list of English and Spanish speakers. While the most desirable approach would be to provide content in both languages (as our European customers often do), that's often easier said than done.
Thankfully, Google has made it very easy to pass a URL (or in this case, a webversion link) to their service for translation. Their link format is as follows:
http://translate.google.com/translate?js=n&sl=auto&tl=[language-to-translate-into]&u=[webversion]
... where [language-to-translate-into] is one of these language codes (eg. 'es' for Spanish). So, to add a link for translating an English newsletter into Spanish, you would add:
<a href="http://translate.google.com/translate?js=n&sl=auto&tl=es&u=[webversion]">Leer esto en Español</a>
The result looks something like this:
Leer esto en EspañolOne drawback is that you have to specify which language you want your email translated into, ie. you can't leave out a language code. However, you can link to as many languages as you please:
SpanishGermanFrenchNow, you've got automated translations on your side! Of course, it will always be better to provide a translation provided by a native speaker (and allow new subscribers to select their language on signup, as well), but if you're stuck for words, this may be just the solution you need.
Do you send multilingual campaigns? What is your strategy for ensuring your subscribers hear from you in their language? Share your tips and tactics with us in the comments below.
Ever get the feeling that you need another set of eyes to look at your email designs? Or twenty? Well, our friends at ZURB have a nifty service called Plunk for crowdsourcing UI testing on responsive designs.
The concept behind Plunk is simple - as a designer, you can upload a screenshot of a mobile screen, set a simple test (like 'Tap the 8 easy chapters link', pictured), then let the crowd get to work on completing it. During the test, you can view the results, including the success rate and average amount of time it takes for the test to be completed. It's a great way to determine how persuasive visual elements are, how long it takes to find specific information in copy, or which links appeal to readers the most.
While Plunk is largely geared towards testing mobile app interfaces and websites, there's nothing stopping you or I from uploading a screenshot of a responsive email (like one minted in our template builder) and letting the world determine whether a 'Buy now!' button is obvious to subscribers. You can even set rather subjective tests, like 'tap on the most interesting headline' and see whether Plunk's results match those in your email campaign reports. Big thanks go to our own Stig for uncovering this gem of a testing tool.
Do you have a Plunk test for us to try? Post it in the comments below - we'd love to take a peek at your responsive emails!
For someone that dreams about, debugs and discusses email all day, I'm a total dunce when it comes to keeping my inbox tidy.
As it turns out, I'm not the only one - it seems like pretty much has a problem with their inbox workflow. As a result, a slew of email clients and services have turned up on the scene in an effort to better integrate email with our day-to-day work. For example, .Mail promises to help prioritize 'action items' and handle attachments, while cool customers Postbox are focused on conversation management (pictured), clever searching and integrating with social media. Then there's Facebook Messages which suggested that we free ourselves of email as we know it by converging all messages in one place.
The issue is, how each of us deals with email is as unique as the clients above. Personally, I use my inbox (Apple Mail, if you're curious) as a running 'to-do' list, with each email representing a task to tick off the list. Only after something is done, is it deleted or filed. While everyone gets a reply within a day, emails relating to a future event are often kept like a post-it note on the fridge, until said event happens.
In comparison, Harvard Business Review suggests a more disciplined approach, with scheduled 'email sessions' throughout the day. Each session consists of 5 steps, in which email is dealt with and the inbox is left empty every time. It's not that different from the famous 'Inbox Zero' approach which made the moniker famous.
Now, it's over to you. What's your email workflow? Do you have a tip for avoiding inbox bloat? Let us know in the comments below.
Wish you could admire your responsive email designs in the Android's default email client? Well, it's time you got your just desserts, with the addition of Mail in Gingerbread (2.3) and Ice Cream Sandwich (4.0), plus Outlook.com and Outlook 2013 to our design and spam testing tool. Here's what to expect when you next run a test.
While Outlook.com remains functionally identical to Hotmail for now, Outlook 2013 is starting to define itself from its predecessors - for the most part, due to its quirks. As both email clients continue to evolve, it will become vital for designers to leave any 'oh, it will work just like Hotmail / Outlook 2010' assumptions at the door and pay particular attention to these email clients.
Regarding the new mobile email clients, you'll find the HTC Wildfire and Nexus Galaxy handsets (pictured), under 'Android 2.3' and 'Android 4' respectively in your design and spam tests. Both are running Android's default client, Mail. Given Mail's superior CSS support, these mobile clients are ideal for testing responsive email designs, as well as other CSS tricks and techniques.
In case you missed the news earlier this week, our new Unlimited monthly plans now feature free, unlimited design and spam tests as part of the deal. Imagine, testing your campaigns in the new Android clients, as freely as you would on your own phones. Or discovering your own Outlook 2013 email hacks like a pro.
The addition of these extra clients won't impact the cost of tests for Basic monthly plan and pay per campaign customers. At $5 a test, we hope you'll find our inbox previews featuring 20+ email clients even better value than before.
We really hope you enjoy these new tests, available now in your account. Of course, if there's an email client you would like to see added, or an improvement made to our current suite of tests, let us know in the comments below.
Along with dropping all our monthly prices today, we have another exciting update to share. Sitting alongside our basic monthly plan is the all new Unlimited plan, which allows you to send an unlimited number of emails every month for a fixed, low price. It's perfect for anyone that sends a lot of email.
On top of regular campaigns, the plan also includes unlimited autoresponders, RSS to email, A/B testing and one-off emails triggered via the API. Whether you send 10,000 emails in a month or 10 million, you'll still pay the same low price.
For those with smaller lists, our prices start at just $29/month. If you have more than 50,000 subscribers, check out our high volume prices for the Unlimited plan. If you're a daily or very frequent sender, the unlimited plan offers better value for money than anything we've ever offered before.
As an added bonus, our Unlimited plan also gives you access to free and unlimited inbox previews and spam testing. Normally $5 each, unlimited customers can now run as many tests as they need to get their designs pixel perfect without spending a cent extra. Each test shows exactly how your email design looks in more than 20 email clients and runs your email through popular spam filters to flag any potential problems before you send.
To compliment our lower monthly prices and the arrival of the Unlimited plan, we've also redesigned the billing settings in your account. Just head into "Client Settings" and then click on "Change Billing details" to switch to the Unlimited plan with a single click.
For our resellers out there, we've also made it very easy to offer the Unlimited plan to any of your clients. Just like our basic monthly plan, you can also mark the prices up and automatically earn a profit every month.
We've been trialling the unlimited plan with a number of bigger customers since the start of the year, and it's been very popular with our frequent senders. No more hitting send limits or getting bumped up to a higher tier for the month. Just one low price no matter how much you send. We're really excited to see how it's received now that it's available to everyone.
When we launched Campaign Monitor 8 years ago, we started with the simplest pricing in the industry. Just one cent for each recipient plus a $5 delivery fee. This was great for those that didn't send all that often, but not so good for our customers who send a lot of email. So in late 2010, we introduced monthly pricing, where you can send a lot more emails for a low monthly price.
I'm very proud of the fact that in the eight years since we launched, we've never raised these prices. And today, we're doing just the opposite.
We've lowered the price for every single tier, and added two new tiers to help drive our prices even lower. Here's a quick overview of the changes:
| Subscribers | Old Price | New Price | You Save |
| 0 to 500 | $15 | $9 | $6 |
| 501 to 2,500 | $30 | $29 | $1 |
| 2,501 to 5,000 | $55 | $49 | $6 |
| 5,001 to 10,000 | $100 | $89 | $11 |
| 10,001 to 15,000 | $250 | $129 | $121 |
| 15,001 to 25,000 | $250 | $199 | $51 |
| 25,001 to 50,000 | $500 | $299 | $201 |
| 50,001 to 75,000 | $700 | $449 | $251 |
| 75,001 to 100,000 | $900 | $599 | $301 |
| 100,001 to 150,000 | $1,250 | $759 | $491 |
We've automatically applied the lower prices to your account, so you'll start saving from your next monthly charge on.
We've seen a lot of requests from customers who had trouble justifying the price increase from $100/month to $250/month when their list grew past 10,000 subscribers. The last thing we want to do is discourage you from growing your audience, so we've split up the old 10,000 to 25,000 tier into two new tiers.
If you have between 10,000 and 15,000 subscribers, your monthly price just dropped $121 on the spot. If you have between 15,000 and 25,000 subscribers, you'll also save more than $50/month.
If you have clients that are paying for their own campaigns, you'll be pleased to know we put a lot of thought into how these price reductions will impact these clients.
I'm marking up my clients prices, how does this impact them?
In a nutshell, it won't. We've kept the prices your clients are paying exactly as they were, only now you're automatically earning more profit. You can decide if you want to pass on the saving to your clients, or enjoy a healthier margin.
I'm not marking up clients, how does it impact them?
If you're not marking a client up, they'll automatically get access to the new lower prices from their next charge onwards. Alternatively, you could jump in and mark their prices up to what they used to pay, and earn a profit automatically. It's your call, but by default they'll be paying less from now on.
On top of the lower monthly prices, we've made another change that may impact a small number of customers. Previously all our monthly tiers below 50,000 subscribers didn't have a send limit. A send limit basically puts a cap on how many emails you can send each month before we bump you up to the next tier. With the new lower prices and the introduction of our new unlimited plan, all our basic monthly plans now have a monthly send limit that's 5 times the maximum number of subscribers for that tier. This means you can still send 5 or 6 campaigns each month for no additional cost.
Only a small number of customers on our low volume tiers typically send more than 5 or 6 emails each month, so this change will largely go unnoticed. Having said that, we've been sure to grandfather all our current customers who historically send lots of emails each month, so they will continue to have no send limit.
On top of these big price reductions, we also just launched a completely new type of monthly plan for our customers that send a lot of email. The Unlimited Plan is just that, unlimited emails every month all for a low fixed price, with plans starting at just $29/month.
This means that if you send 10,000 or 10 million emails in a given month, you'll pay the same low price. It covers regular campaigns, autoresponders, recurring RSS to email campaigns, one off emails triggered via our API. Everything we offer is included and unlimited. On top of this, all customers on our unlimited plans get free design and spam testing too. Run as many tests as you like and don't pay us a cent extra.
We've been trialling a number of high volume customers on this plan for the last few months, and it's been super popular. We can't wait to see how it goes now that it's available to everyone. I'll be sharing more details about the new plan in a follow up post shortly. In the mean time, enjoy the new prices.
A few years ago, we made the recommendation that plain-text emails include a line break at every 60 characters or so. Since then, the email client landscape has changed dramatically, with not only the emergence of mobile clients, but far less people using legacy platforms, too. As a result, it's time to switch into reverse gear.
Our new recommendation is simple - when designing plain text emails, let text wrap naturally, instead of manually inserting line breaks into paragraphs. The reasons for this are:
We've also updated our guide, 'Designing for the Inbox', to reflect our new recommendation. There's other timely tips on creating plain-text emails in Chapter 2, 'Designing Plain Text Email', so scoot on over for a good refresher.
If you've recently composed a plain-text email, or edited the plain-text version of a campaign in the app, you may have noticed that we've removed the red guideline at the 60-character mark in the editing window. We're also removing line breaks from the automatically-generated plain-text version, for the benefit of mobile email clients. Here's what editing text content used to look like:
Now, the red 'recommended width' line is gone, as are the forced breaks. Of course, this may not be to everyone's taste, so you're welcome to still add line breaks. But for the majority of modern, mobile-toting subscribers, having text wrap in their email client should either not make a difference, or make your content substantially more readable than before.
If you're already testing your email newsletters in Outlook 2013 Preview, then you may have noticed a little more whitespace than expected.
While Outlook 2013 may have much in common with its predecessors, Outlook 2010 and 2007, the differences are starting to appear. In this case, empty table cells (or cells containing a & nbsp;) now have a minimum height of roughly 15px, regardless of what you've set a cell's height attribute to be.
This can be particularly irritating if you've used empty table cells to create margins/padding between paragraphs of text and around images (for clients that do not support these CSS properties), or when creating 'bulletproof' horizontal rules. However, there is a rather strange solution. For example, say you have an empty cell with height="1" like this:
<td height="1" bgcolor="#cccccc"></td>
Unfortunately, Outlook 2013 will give this cell a height of 15px or so by default, unless you add... You guessed it, style="font-size: 1px; line-height: 1px;" (where 1px is the cell height you're after).
Yes, adding a font size to your inline CSS styles fixes this bug. Here's the updated code:
<td height="1" bgcolor="#cccccc" style="font-size: 1px; line-height: 1px;"> </td>
Unfortunately, you'll need to add this inline style to all empty cells individually, as elegant CSS workarounds like td[height="1"] { font-size: 1px; line-height: 1px;} are not supported in Outlook 2013 Preview.
Another quirk we discovered during our testing is that Outlook 2013 only supports 6-character hexidecimal codes in the bgcolor="" attribute, not 3-character shorthand or rgb(). Background colors will not display if anything other than a 6-character hex code is used.
Many thanks to the lovely Wilbert Heinen for refining this fix in the forums. As Outlook 2013 catches on in the real world, we can guarantee that adding this fix to current and future email designs and templates will save you both time and effort well into the future. If you come across more quirks like this in your travels, please get in touch - we'd love to hear about them!
One of the more popular features of Campaign Monitor for our agency customers is the ability to let their clients send their own campaigns at prices the agency sets. Every time one of their clients sends a campaign, they automatically earn a profit.
Last year I was super excited to share that we’d passed the $5 million mark. Today, only one year later I’m even more excited to share that we’ve now passed $12 million in profit being paid directly to designers.
On a personal note, this number is very humbling. When we started Campaign Monitor back in 2004, we wanted to build something that made sending newsletters easier for designers. These days I get to speak to lots of customers who rely on Campaign Monitor for a big part of their earnings. In some truly awesome cases we have customers who have built entire businesses on our platform alone. That still blows me away.
We actually launched the ability to set your own prices back in 2007, but it took more than two years to reach the $1 million mark. A year later we hit $3 million, and 9 months later we broke $5 million. Here we are, one year on and we’ve smashed the $12 million mark.
A monster thanks to everyone who has enjoyed and help spread the word about this part of Campaign Monitor. We're hard at work on a number of nice improvements around reseller pricing, and I can’t wait to share the details in the coming months.
In print and web design, optimizing the content that appears above 'the fold' (ie. the part that appears to a viewer first, without scrolling/opening) is given serious consideration. But is designing with the fold in mind just as relevant to email?
There are strong 'for' and 'against' arguments when it comes to putting special effort into the upper portion of an email design. In a world where the average email is read for only 51 seconds, a lot can be said for making a special first impression. However, can this mindset be obstructive to our overall design goals?
In the 'for' camp would be our good friend Paul Boag, whose recent post, 'User experience: Does the fold matter?' features a video that is just as relevant to email as it is the web:
After explaining the concept of 'the fold', Paul argues that designing with it in mind makes designers consider visual hierarchy. Plus, by presenting suitable content above the fold, readers are given suitable incentive to scroll to view the rest of the content.
"Whilst it’s important to make sure your campaigns are engaging, I think we worry too much about getting all of our content in the preview pane area." However, this is countered by Email Design Review, whose post, 'The Fold and Email', states that the digital fold is unimportant - scrolling is easy, so we shouldn't be applying antiquated print concepts to the web or email. Secondly, the 'put everything above the fold' mentality only encourages designers to cram content into a space that's undefinably dimensioned - while the fold could be the first 600px of a design in a desktop email client, it's usually much less than that in webmail and mobile clients.
Finally, instead of passing a hard-and-fast recommendation on this polarizing topic, we'd like to hear your opinion. Does the fold matter to you when designing for email? Let us know in the comments below.
When sending localized email newsletters, the details do matter. So in a recent update, we made it possible to select the language of Forward to a Friend and Preference Center pages by updating the template tags in your campaigns.
Giving designers the option to set the language of default pages from within campaigns has been a big item on our wishlist. Previously, these language preferences applied to client accounts overall, which meant that folks would commonly create a client account for each language they wished to send in. For our European friends especially (who often send in 2 or more languages), this was awkward enough. Then when team management arrived, it became evident that there had to be a better way to manage multilingual campaigns.
As of now, it's possible to link to Forward to a Friend and Preference Center pages, translated into one of 30 languages. You can select a language by adding the new lang attribute and a language code to your regular template tags. For example, to link to a Forward to a Friend page in Spanish (es-MX) in your HTML email code, you would use:
<forwardtoafriend lang="es-MX">...</forwardtoafriend>
If you don't add a language code to a tag, the resulting page will default to the language you have set for that client in 'Client Settings'. What's more, it's incorporated into the template builder, so if you pick 'Spanish' when creating a template, then the resulting Forward to a Friend and Preference Center links will point to the Spanish version of those pages. For more examples and usage notes, visit our docs:
View the language codes and updated template tagsFinally, a huge thanks to everyone who requested localized pages, made suggestions or most notably, contributed a translation - we really couldn't have done it without you. If you would like to suggest an additional language or improvement to these pages, feel free to pop us a note below. Otherwise... ¡Vaya! Enviar los e-mails (send those emails)!
If you've been reading up on responsive email design, you may have cottoned on to a recurring theme - every tutorial and 'how to' is specifically about making newsletters look great on Apple iPhones. How how about if you want to create iPad-friendly layouts, or target Android devices instead?
The process of taking media queries to other devices is something we've wanted to share with the wider world for a while now. So we're pleased to announce that we've added a new chapter on 'Targeting devices with media queries' to our Guide to Responsive Email Design, so you too can specialize your email designs for a variety of viewports. Inside, we look at the pros and cons of adding device-specific styles, then touch on how fluid widths can be used to create highly flexible layouts. If this sort of thing is up your alley, why not be one of the first to check out our new chapter?
Read Chapter 5: Targeting devices with media queriesIf you've been one of the thousands of readers that the Guide to Responsive Email Design has helped out so far, thank you. Rest assured that it isn't set in stone. We'll be updating it regularly as email clients change, or as we have more to tips and techniques to add (like this one). If there's something you would like to see covered or clarified, be sure to let us know in the comments.
When it comes to email, code like it's 1999. Design like it's 2012.
I was looking at Spyrestudio's recent round-up of '27 Responsive Website Designs for Mobile Safari' and was struck by a strange, familiar feeling. 'Heck,' I thought, 'a lot of these sites look like email newsletters!'
Indeed, many of them did resemble the newsletters we feature in our email design gallery. Not just the modern aesthetic, but also the placement of design elements, the emphasis on branding, the one-column layouts. Even our revamped, responsive blog looks like a fine email newsletter (pictured).
Then it occurred to me that there's a lot of commonality in the processes used to design a mobile version of a website and design an email newsletter. Both present interesting usability challenges, aren't suitable mediums for conveying lots of text and place large emphasis on visible links and clear calls to action. Both absolutely must cater for short attention spans and fidgety readers. So, perhaps for as long as we have been recommending that designers look to the past when building HTML emails, we should have been prompting them to look towards the now.
In this post, we'll look at some of the common features that appear in both successful responsive mobile and email designs. If you're keen on combining responsive techniques and email afterwards, we have a great guide on Mobile Email Design to help get you started.
The first thing that's evident when you view a thoughtfully-created responsive site is how much effort has been put into refining a message and making it immediately visible. This is because reading and scrolling takes effort, which affects already-limited attention spans. All of this diminishes the likelihood that any block of text is going to get read from start to finish.
Solo's site is a great example of this thinking in action - at a glance, you can see what this web app does, how much it costs and even find out about their 1-year promotional offer. With a strong call-to-action, it could easily be reworked into an email design (and a responsive one, to boot!).
Commonly, folks fall into the temptation of treating marketing communications as a dumping ground for content. In reality, unless you're a Louis CK fan, you're not going to sit around as an email recipient for the punchline (or 'Buy Now!' button) at the end of a long-winded speel. Or in essence, an important part of prioritizing content is prioritizing only some of the content.
Last year, we covered some important research that our old friend Jakob Nielsen had done on usability and email newsletters. In his words:
“…the average time allocated to a newsletter after opening it was only 51 seconds. “Reading” is not even the right word, since participants fully read only 19% of newsletters. The predominant user behavior was scanning. Often, users didn’t even scan the entire newsletter: 35% of the time, participants only skimmed a small part of the newsletter or glanced at the content.” Jakob Nielsen, Email Newsletters: Surviving Inbox Congestion
In a similar vein, Web Performance Today found that iPhone and Android users spend less time on sites, view fewer pages and bounce more than regular web users. If you're designing for folks that aren't going to dedicate much time or patience to your message, then you're on the right track to building ultra-short, ultra-usable email newsletters.
While selecting breakpoints, or popular viewport dimensions is a big (and sometimes controversial) deal when designing for the mobile web, email designers don't talk about them much in the context of email. Perhaps this is because the majority of folks use 550-650px as a hard-and-fast static width for email and then simply assume that an email's width and depth are going to be seen in its entirety. If anything, I'm very much guilty of this.
However, in desktop and webmail email client preview panes, or in mobile clients that don't support media queries, what's visible at reduced widths and depths is important. If you have a 'Download now!' button on the right-hand side of a design, will it still be easy to find when only 500px of a design is visible? Or if its fallen 'below the fold'?
Viewing your email at less-than-ideal dimensions can really help with prioritizing content and creating easy-to read designs. As an aside, those in the mobile web design world who disavow creating static versions of a page around set breakpoints often suggest using fluid layouts instead. If you're feeling adventurous, you can do the same with email.
You've probably noticed that Spyrestudios' round-up consists solely of one-column designs. This is because one-column is super easy to read and devoid of visual distraction, making it ideal for mobile devices... And inboxes, for that matter. We've seen email newsletters that look great in small viewports, even without media queries, by virtue of them having large text, a reasonable width and perhaps most importantly, only one column of content - this email for Chef Anahita (pictured) is a neat example.
If your newsletters are geared towards generating click-throughs to your site (and presumably, getting folks to do something after that), then it makes loads of sense to add a big, bold call to action, in the same way as you see designs with large buttons / target areas on mobile sites. Here's a great example from Clean Air Works. Too commonly we see tiny links being used - if you would have trouble tapping it on a mobile screen, then it's likely it's going to be ignored amongst your email content, too.
Finally, we'd like to see more designers look at email in new, creative ways. While they may never be as flexible from a code perspective as mobile sites (at least, not in lumbering clients like Outlook), that doesn't mean there's no place for modern techniques and methodologies. If you've seen our previous tutorial on progressive disclosure, you'll see there are big advantages to thinking about email from the perspective of a modern designer, instead of caving into the table-based ways of times past.
Do you have a favorite site that looks great on both big and small screens alike? Could it be transformed into a great newsletter, or no? Share it with us in the comments below.
Barely two weeks after the release of Outlook 2013 Preview and Outlook 365, Microsoft have further unified their email clients by rebranding the Windows Live Hotmail as Outlook. But the question on the minds of all email designers is: does the retirement of Hotmail mean the renewal of an old webmail client, or is Outlook just more of the same?
It's not hard to feel just a little nostalgic about the Hotmail brand. Launched in July 1996, then acquired by Microsoft in 1997, it was the startup success story of the '90's dot com boom. Outside of the tech scene, Hotmail made webmail mainstream - for millions, it was a first email address, a new way to view email anywhere via a browser.
However, today's transition of all Hotmail accounts to Outlook has closed the door on that. Along with a change of domain, Outlook has completely overhauled the Hotmail interface, bringing it in line with Microsoft's Metro family of apps:
Appealing to either the enthusiasm or sheer apathy of email designers, Outlook's CSS support remains identical to that of Windows Live Hotmail. But before the transition to Outlook simply gets written off as a coat of makeup on an aging email client, it's worth keeping in mind that more has changed than the cull of a couple of gradients.
Points of note for email folks is that image blocking has remained the default, except for emails that are manually marked as originating from 'trusted senders'. Also, the default font for h1, h2 and h3 headings is 'Segoe UI', unless you explicitly state otherwise in your CSS styles.
In what may become the latest online land grab, Outlook has made it exceptionally easy for Hotmail users to claim 'aliases', or @outlook.com and @live.com email addresses (plus some localized variants). All mail to these addresses are routed to the original Hotmail/Outlook inbox. The upside to this for senders is a near-unlimited supply of email addresses for testing email campaigns. For recipients, it's an easy way to transition from a daggy @hotmail.com address to a more professional-sounding @outlook.com email address. It's likely that we'll see more of the latter and less of the former in our campaign reports shortly.
While Outlook continues to use SmartScreen to separate interesting email from spam and other undesirable messages, the big change is in how unsubscribes are handled. As CNN.com reports:
The service automatically detects and labels newsletters and promotional offers from stores. For emails that Outlook recognizes as an ad, it will add a universal unsubscribe button to the message. Click it, and Microsoft will not only unsubscribe via the retailer, but will automatically filter any future promotions into the trash if that unsubscribe gets ignored.
How this will affect subscribers who unsubscribe in error, or resubscribe a while later is yet to be determined. We hope Outlook will honor incoming newsletters after subscribers rejoin lists and will be sure to let our readers know when we have an answer on this one.
Outlook represents a coming of age - it's as if Hotmail has been deemed mature enough to claim its place alongside Microsoft's family of home-grown email clients. It's also grown up to embrace the variety of ways we communicate today, by pulling in content from social networks, as well as instant messages. But for designers, it may feel like more of the same... Depending on your sentiment towards the Metro look and feel, of course.
What do you think of Hotmail's transition to Outlook? Is it simply a minimalist reskin of their UI, or something more profound than that? Let us know in the comments below.
Want to convince new clients to use your email marketing service, but feel that your word isn't enough to sway them? With our new team management update, you can now create demo accounts for one and all to use.
In times past, a means to swiftly create demo accounts has been popularly requested amongst agencies, designers and other rebranders of our app. However, sharing login credentials and having attractive features locked down (like the ability to add templates) made this all a bit testy... Until team management came along.
Now, you can safely provide new clients with access to an account, by adding them as people with special permissions. Here's an example:
As you can see, we're creating a new person who can do pretty much everything except send campaigns, run design and spam tests and manage lists. However, if you send a couple of demo campaigns via the account first, they'll be able to view anonymized campaign reports and get a solid feel for the app in action, without the risk of unintentionally firing off email campaigns.
Previously, we've seen resellers create separate client accounts, each and every time they've wanted to demo their service to someone. This tends to get fairly messy in designer accounts, not to mention, copying templates from one account to the next can be a real drag.
Now, it's simply a matter of inviting new people into an existing client account. You can even automate this process using our API, as we've also rolled out all the methods you need to add, view and update people, including change their permissions/access levels. Et voilà! A new weapon in your arsenal when selling email marketing.
Finally, thank you for all your feedback since we released team management - its been immensely useful for helping us focus on changes that rebranders in particular can benefit from. If there's an improvement you would like to see made, or a scenario (like creating demo accounts) that we should cater for, be sure to let us know in the comments below.
If you, or your clients send email into Canada, it's high time you oriented yourself with Canada's Anti-Spam Legislation (CASL), due to come into effect in 2013. With fines of up to $10 million CAD in place for non-compliance, it's also a very costly law to get on the wrong side of.
The good news is that if you already abide by Campaign Monitor's anti-spam policy, you're most probably already in the clear. However, it's worth taking the opportunity to review your subscribe forms and other channels by which you allow subscribers to opt-in to your lists, to make sure they abide by CASL's requirements.
Before you say, 'well, this doesn't apply to me', an interesting thing to note is that CASL can come into effect even if the end recipient isn't based in Canada. If an email message is routed in Canadian territory (such as by an ISP's mail server), then it's expected to abide by the legislation. Given the distributed nature of the Internet, its unwise to make any assumptions about how email travels from our mail servers (which are based in the US, mind) to their final destinations.
The CASL requirements most likely to affect email senders are in regards to 'express consent', or how senders gain permission to email subscribers. Under the law, a sender must state:
What this means is that subscribe forms in particular have to carefully state why email addresses are being collected and who is collecting them. This can be as simple as a message like:
Sign up for ABC Widgets' weekly email newsletter. We'll be sending you offers and information about our products - don't worry, we won't share your email with anyone and you can unsubscribe at any time.
If this seems a little wordy, it's because we're covering all bases - for one, CASL requires that email campaigns feature an unsubscribe mechanism, which is something we want to inform subscribers of prior to opting-in. If you send using Campaign Monitor, an unsubscribe link is a standard part of your campaigns.
On a related note, the CASL unsubscribe requirement also applies to transactional email - Word to the Wise wrote a strong argument for featuring unsubscribe links in both recurring and one-off sends.
The second big requirement is that email campaigns include information that personally identifies the sender. This information must be correct for at least 60 days after the message is sent. Contact information should include a name or company name, a postal address, or phone number that you or your client can be contacted on. Our template builder creates templates with an editable space in the footer for including contact information.
Finally, the From: address in your campaigns should be real and regularly-monitored - here's why a no-reply address is an email marketing no-no.
These changes in the law are also a solid prompt to check your permission reminders. While not a requirement, permission reminders do help keep spam complaints to a minimum. Even a short message like...
You are receiving this email because you signed up for ABC Widgets' weekly newsletter on our site
... can make all the difference. Subscribers may forget that they've signed up for a list and at first glance, assume a message is spam. Sometimes a little prompting like this can be all it takes to jog the memory.
This new Canadian law may have been dubbed 'the toughest anti-spam law the world has ever seen', but in reality, it's fairly easy for legitimate senders to abide by. Secondly, it's for the good of all - similar anti-spam legislation in Australia resulted in a measurable decrease in spam traffic following its introduction in 2003. We think the Canadian approach is a step in the right direction when it comes to distinguishing the awesome campaigns we send from email spam and security threats - hopefully it will prove to be a great model for other countries to follow.
Do you think that Canada's Anti-Spam Legislation is a good thing for email senders? Do similar laws exist in your country? Let us know in the comments below.
I know what you're thinking - nothing good can come from featuring symbols or emoji in email subject lines. It's hokey. It's tacky. And it may just be the next big thing.
Featuring symbols in email isn't a new concept. In fact, we first touched on it in early 2010, with mixed results. So what's changed and why subject lines? First up, many of us have emoji-friendly mobile devices. Secondly, a lot of us are using them to read our email. Regularly. Thirdly, inboxes are busy places, so our emails need every attention-grabbing advantage they can get.
As a result, we've tested a variety of symbols out to see how they display across the most popular email clients for a new resource on 'Adding symbols to subject lines' in the 'Will it work?' section of our site. To find out about the risks and rewards of using symbols in subject lines (plus how to get them working), scoot over to our new resource.
View 'Will it Work? Adding symbols to subject lines'Do you add symbols to your subject lines? Have you had any success, or do you think they're a bit silly? Let us know in the comments below.
Have you been designing for the responsive web and want to make that leap to doing the same for email campaigns? Or do you simply want to get your head around some of the techniques used to create more readable designs for the small screen?
We've just launched a guide to Responsive Email Design to take savvy designers and coders like you from sufficient to proficient in a few short chapters. Included are tips and techniques both old and new, from how to design links and buttons that are easily tappable, to adapting two-column email newsletters for single-column display. Don't worry, we also cover the fundamentals of using media queries and mobile stylesheets, too.
Not wanting to stop at designing newsletters, we've even added a chapter on optimizing email subscribe forms. There's even added a real-world case study so you can see some of our techniques in action. All up, Responsive Email Design is a holistic view of mobile email, in an easy-to-digest format.
Don't just sit there, check out Responsive Email Design, or one of the other 6 email marketing publications in our newly-minted Guides section.
Have a suggestion for a guide? Be sure to let us know in the comments below.
Our template builder has been crazy popular since we announced it back in October last year. Since then you guys have crafted more than 100,000 custom templates and sent them to more than 150 million people. Today we've rolled out a few highly requested tweaks to give you a little more flexibility with your designs.
While we make it easy to customize almost every part of your design and content, there were still a few English-only items that you couldn't tweak. Things like the wording for unsubscribing, sharing the email on Twitter or Facebook, and updating your preferences. This meant a lot of you had to export the template, make these changes locally and then import the template again. That's not fun.
That all changed today. If you're sending campaigns in a language other than English, you can now choose the language you'd like to use in a new drop down on the "Basics" pane.
This will instantly translate all of these non-English terms into the language of your choice. Of course, the change is also reflected in the mobile optimized version of your template that we build for you automatically. The instant mobile preview is still a favourite feature of mine.
On top of these extra languages, we've also added the much requested ability to make your header a link. Whether your header is a custom image you imported yourself or plain text, you'll find a new option under the "Header" pane that lets you set the URL.
We automatically make this link and image/text editable in the editor, in case you'd like to keep it unique for each campaign you send while still re-using a single template.
At its unveiling during a Microsoft press event yesterday, the preview of Outlook 2013 was poised as a new, forward thinking email client. For one, it's adopted the same aesthetic as Mail on Windows 7 phones. It's touchscreen ready. But is it a step in the right direction for email standards?
We didn't waste a moment setting up the customer preview of the new Office on Windows 7, plus the web-based Office 365 service that it's tightly-coupled with. While Outlook 2013 provides the desktop app experience that you know and perhaps even love, Outlook in Office 365 is a webmail client that seems more like Hotmail, than its previous incarnation, Outlook Web App. Here's what email designers can expect from both.
Once you've jumped through the hoops of setting up Outlook, the first thing you'll notice is, well, how monochromatic it is. Gone are the golden gradients, the bevelled buttons, the ribbony ribbon. However, once you get past the limited palette and plain preview-pane, it's pretty much Outlook 2010, just reskinned.
The similarities don't stop there. We ran our CSS tests and found that CSS support is identical to Outlook 2007 and Outlook 2010. This means that it's once more using the Word rendering engine to display HTML email. It goes without saying how disappointing this is, especially given that Outlook/Word's legacy of dodgy CSS support has made them many enemies amongst HTML email designers. More on that in a moment.
We've updated our longstanding Guide to CSS Support guide to include Outlook 2013 Preview - you can view the results for this client as well as 20 other webmail, desktop and mobile clients.
One curiosity is that some email newsletters are preceded by a link to the web version of the email, except that it's not the version we host on our domain. Instead, the HTML email document is downloaded and viewed locally in Internet Explorer. We're not entirely sure what triggers this message (as it only appears sometimes), but we'll be sure to look into it further.
Oh, we should mention too that images are turned off by default, just like in Outlook 2007/2010.
If you have your hopes up about Office 365 being leaps and bounds ahead of OWA in terms of CSS support, then we've got mixed news for you. Yes, it certainly is an improvement - the basic CSS2 properties are mostly there (including margin, padding and even position), but then again, there's no background image support and absolutely zero love for CSS3.
This wouldn't be all bad if it wasn't for the appearance of links in HTML emails - some turn an ugly blue color for seemingly no reason, while the lack of support for the text-decoration CSS property makes everything look messier.
Nonetheless, the resemblance to the Mail app on Windows 7 phones is soothing. Like Outlook 2013, Office 365 has been optimized for tablet devices, with no pop-up windows this time around. With Microsoft pushing the Surface tablet, could Office 365 be in line to become the next big mobile email client?
Finally, both clients present an opportunity to make the most of your preheaders. In the examples above, you can see how we've used the <tableofcontents> trick to add some meaningful content.
So, the bad news - both Outlook 2013 and it's cloud-y cousin, Office 365 mean that email designers like us will be coding for the lowest common denominator for years to come. This is despite thousands of folks voting with their tweets via Fix Outlook and the Email Standards Project for a better email experience. The response by the Corporate VP of Office back in 2009 was that "improvements and changes in this area are something that the team is definitely considering for the future", however, it seems these improvements and changes haven't extended to creating an HTML email client that doesn't require endless hacks, workarounds and compromises to work with.
If you're a Windows 7 user, we'd love for you to check out both clients and tell us what you think. How do you feel about Microsoft not showing any commitment to improving the state of email standards? Is the lack of change reassuring, given that we don't have to learn any new tricks? Or have Steve Ballmer and co pulled the rug out from beneath designers once more? Let us know in the comments below.
Like a lot of you here, I'm a huge fan of pretty much everything that Andy Clarke applies his hardboiled head to. So when he mentioned contributing to a post on navigation in narrow viewports the other day, I thought, "well, navigating emails on mobile devices could be a heck of a lot better, too".
Well, this post isn't all Andy's fault. Recently, I've been having a lot of trouble unsubscribing from newsletters received on my mobile - largely because these sort of links in the footer of emails are usually hair-tearingly tiny.
Ok, so most email footers aren't usually that bad on mobile devices. For the most part, we use inline lists of links, like the one pictured here. However, if you have fat fingers, less-than-reliable coordination skills or poor eyesight, these little target areas really aren't a joy to use.
After simplifying the 456 Berea St / Andy Clarke demo (including stripping back the non-email friendly code), we came up with a responsive email footer that's well, a bit iOS-like. Aesthetics aside, it's a neat technique for making lists of links both more usable and readable.
The first ingredient is the code for the above stock-standard inline list, which is what email subscribers using webmail and desktop clients will see. Nothing exciting here, just good 'ol HTML. Note that we're using Campaign Monitor template tags for three of the links, which automatically convert to links on import into the app.
<ul class="nav">
<li class="sel"><a href="#">Visit our site</a></li>
<li><forwardtoafriend>Forward to a friend</forwardtoafriend></li>
<li><preferences>Newsletter preferences</preferences></li>
<li><unsubscribe>Unsubscribe</unsubscribe></li>
</ul>
And a little simplified CSS to make list items sit inline...
.nav li {
float:left;
border-right: 1px solid #eee;
}
.nav li:last-child {
border-right: none;
}
.nav a, unsubscribe, forwardtoafriend, preferences {
display:block;
text-decoration:none;
}
If these code snippets haven't lifted your heart rate too much, lets roll on.
Now we've got something to work with, lets look at adding a media query to style up the list:
@media only screen and (max-width:480px) {
ul[class=nav] li {
display:block;
width:100% !important;
float:none;
background-image:url(bg-grey-inactive.jpg);
background-repeat:repeat-x;
border-left: 5px solid #F7BA6A;
}
ul[class=nav] li.sel {
background-image:url(bg-grey-active.jpg);
background-repeat:repeat-x;
border-left: 5px solid #F3A01E;
}
/* Add a symbol to the links to clarify their purpose */
span[class=mobile-nav-play] {
display: inline !important;
float: right;
}
}
Before everyone jumps up and down about the use of unsupported CSS in email clients, remember that only mobile email clients will be using the above stylesheet and these are usually pretty good as far as email rendering goes. Second, we're using attribute selectors to avoid a longstanding Yahoo! Mail bug.
NoteSean Vieira has suggested using the :after selector instead of .mobile-nav-play for brevity - check out the comments. Thanks, Sean!Now, the final thing to do is to add a little symbol to our HTML code, as to make the navigation a little more obvious. This is hidden from webmail and desktop clients:
<ul class="nav">
<li class="sel"><a href="#">Visit our site<span class="mobile-nav-play">»</span></a></li>
Once we've put these pieces in place, it's time to admire our handiwork.
As you can see, each link now enjoys a larger, more distinct target area, which means less chance of accidentally tapping 'Unsubscribe' instead of 'Newsletter preferences'. Secondly, it just lends the campaign a look that's visually consistent with other mobile interfaces.
I hope you enjoyed this express tutorial on styling up footers and lists in email. So you can give this technique a shot in your own campaigns, we've bundled up the complete HTML email and images for you to tinker with:
Designing footers may not seem like a big deal, but when it comes to email, little improvements can make a lot of difference to your subscribers... Especially those on mobile devices. If you had fun with this and would like to try your hand at a similar technique, we recommend checking out our progressive disclosure demo, too. Of course, if you have any questions (or likely, corrections), pop them in the comments below.
If you work as part of a team or manage campaigns for more than one client, you're going to love this one. Campaign Monitor now supports full team management with more flexible permissions and workflow control, making it easy for teams large and small to collaborate on their email marketing.
Better team management has been at the top of our customer request pile for a long time now, and we poured over every last bit of your feedback in shaping this release. We have lots of different people using Campaign Monitor in different ways, so flexibility was a big part of the brief. As usual, this had to be balanced with an elegant, easy to use interface that made it simple to manage. We're really happy with how it all came together. Here are some of the highlights:
It's now easy to add multiple people to each client with total control over exactly what they can and can't manage for that client. This opens up a whole world of possibilities depending on how you use Campaign Monitor. Here's how it looks in your account:
Add multiple people to each client with custom permissions
We've also been sure to migrate any of your existing clients and their permissions across to this new multi-person model behind the scenes, so there's nothing you need to change or update.
You might have noticed in the screenshot above that we've added a number of highly requested new permissions to give you more flexibility. Here are some of the highlights:
We've had loads of requests for this one. You can now set up more flexible workflow restrictions for people within a client. For example, a person can now import their own designs, create campaigns and run tests to make sure everything looks great, but can't actually send the campaign. Another person on the team can then jump in, review the pending campaign and then approve it for delivery.
We have a lot of designers that have other designers as clients. Previously you had to do all the design work and template management for them. The new "build or import their own templates" permission means they can now manage their own templates and use our popular template builder to roll their own designs. The template builder is even a great option for those less savvy clients that still want to take more control of their template designs.
If you're doing work for a larger client with lots of stakeholders, it can be a big time waster to have to constantly manage their account access on that client's behalf. Now you can hand the account management keys over to a person at that client who can easily add and remove new team members, including managing their permissions.
Ever want to give someone access to view reports, but not expose private information like your subscriber's email addresses, or even more sensitive data. Privacy mode is perfect for providing account access to contractors, third parties or team members that are on a need-to-know basis.
Simple uncheck the "showing subscriber details" option, and we'll show a higher level version of your campaign reports that prevents that person from drilling down and looking at individual subscriber actions or data.
Previously, Campaign Monitor only supported a single main account holder. This often forced you to share a single username and password across multiple people in your team, an obvious security no-no and plain old bad experience.
As part of this update, you can have multiple administrators that can access every corner of your account, from all clients, billing and subscriber details. It's for the members of your team that need to see it all.
Add as many administrators as you need and set a primary contact
Now that we support multiple administrators, we needed to tweak a few things around who gets certain emails (like campaign sent confirmations, invoices, etc). You can now nominate one of your administrators to be the primary contact for your account, indicated by the small mail icon next to their name.
We built the entire team management system on top of a simple, secure invite system which makes it easy to add new team members without ever ever exposing passwords. Each team member can set and change their own password at any time, and an administrator (or person with the right permissions) can revoke access with a single click.
Simple invite system lets people set their own passwords.
Of course, the entire process is totally private label, so you can easily invite people to use your software and we'll use your own name and branding throughout.
You might also notice we've dropped usernames altogether, and everyone can now login using their email address and password. Your old usernames will also continue to work, but they are no longer required for any new people you add to your account. We're also enforcing slightly stricter password requirements from now on.
We've extended all our new team management functionality across to our API. This means it's easy to trigger invitations for new team members, set their permissions, choose a primary contact and much more, all from your own applications and integrations. Here's the latest documentation on working with people within clients as well as administrators.
We've also updated all of our official wrappers in Ruby, Python, PHP, .NET and Java to cover this new functionality, so it's a piece of cake to work with. And as you'd expect, any deprecated methods will still continue to work as they always have, so you don't need to make any changes to any existing code you might already have written.
Like I mentioned earlier, every aspect of this update was based on thoughtful requests and feedback from customers just like you. You've probably heard me mention it a few times, but it bears repeating—we keep track of every single piece of feedback that lands our way, and are always listening. We'd love to hear what you think of this big update in the comments below, and if you've got any other ideas on what we can improve, no matter how trivial, we're all ears.
When you think 'email' and 'comedy', what probably first comes to mind are bad-taste office forwards. However, for US comedian Louis CK, email isn't only a laugh-a-minute pastime, but big business, as well.
Louis CK. Photo by wwwesb
Louis CK is a tireless self-promoter, but not in a flossy, reality TV kind of way. While other comedians have attention-grabbing sidelines like collecting cars, Louis is known for making business and marketing decisions that are as pragmatic as his brand of humor - from hand-picking venues, to selling all tickets via his site.
We recently listened to an interview with Louis on ESPN's The B.S. Report and found that his savvy extends to email. If you've followed his work, you may have remembered how he sold his show, 'Live at the Beacon Theater' at $5 for a digital download and grossed $1.1m in the process. Well, as it turns out, each time the video was purchased, buyers were given the option of signing up for email updates. The result was 220,000 new subscribers on his list.
"Bypassing the middleman is totally possible in 2012.
It totally works."Louis CK and Bill Simmons, The B.S. Report
According to the B.S. Report piece, this newly-expanded list made itself useful when Louis announced an epic, 4 month tour across the US. Instead of appearing on talk shows or fashionably dropping hints on Twitter, Louis announced his tour via Campaign Monitor. While the campaign itself was quite wordy, it sure worked - 15 of the 30 initial US shows sold out in less than a day, amounting to 75,000 tickets. It goes without saying that when you're filling major venues at $45 a seat, twice each night, you're doing pretty well with "no advertising whatsoever" (his words).
You can listen to the B.S. Report here - the email marketing bits are 56mins in. And before you ask, tickets were already sold out at my local venue before I could even pull out my wallet. Louis CK, if you're reading this, could you kindly announce another tour?
If you launched straight into Panic's Coda 2 like we did, then one of the first things that probably came to mind after giving it a spin was, 'well, this is swell, but when is someone going to release an updated Coda clip for email templates?'
Thankfully, our support extraordinaire Carissa has amazing psychic abilities and duly whipped together a Coda clip featuring all the goodness the Campaign Monitor email editor has to offer. Featuring all the latest template tags for our email editor, you'll find sweet shortcuts for everything from our social sharing, to RSS-in-email tags. Examples include:
cm-webversion = <webversion>your content here</webversion>
cm-tweet = <tweet via="buzzusborne" recommend="campaignmonitor">
<img src="http://abcwidgets.com/twitter-custom.gif" />
cm-rsstitle = <rsstitle tocitem />
For installation and usage instructions, check out our download page.
A huge thanks to Carissa for coming to the party on this one. Here's the clip, ready for you to cherish for time eternal:
If you can suggest any improvements too, be sure to get in touch!
Sending files via email has always been a bit of a bug bear. While actually attaching files to email campaigns is a no-no for security and bandwidth reasons, wrangling your own hosting and securely serving downloads isn't always an easy task, either.
Thankfully, the good folks at Digioh have heard our cries into the wilderness and have come up with a nifty service for sharing files, specifically for emailers like you and I. If someone not already on your list gets forwarded an email with a link to a hosted file, Digioh can provide them with a link via email to access it. Who's downloading your files and referring them to others is tracked, allowing you to follow up specifically with say, folks who downloaded your band's latest single. It's incredibly powerful stuff and thanks to their new Campaign Monitor integration, it takes no time at all to get your files into the wild.
Once you've started a trial Digioh account, one of the first things you'll probably notice is how it gets you into the thick of the action. In a couple of clicks, you can upload a file, customize a download page, then receive the download button code for your email.
From here, it's simply a matter of adding this code to your HTML email, or to a template in the email editor via the 'source' of any multiline region (pictured).
File downloads are trackable by email address by default, however things get even more interesting when you add your Campaign Monitor API key to the 'Sync' tab of the app. If someone not on your subscriber list clicks on a link to the file (say, via a forwarded campaign), they will be given the option to not only sign up to receive the file, but join your subscriber list, too! As you can imagine, this makes Digioh perfect for building your lists.
On the permission front, Digioh have ticked all the right boxes, by making the signup part of things optional. Non-subscribers can still receive the download without joining your subscriber list, which is the way things should be:
It goes without saying that this is a pretty clever play. If you have a valuable download like a new eBook, sending a campaign encouraging your subscribers to forward it to a friend, or share via Twitter and Facebook (and effectively asking others to subscribe to your list) is really like getting others to do your marketing for you. If you ask me, that's super-sweet.
There's a lot to dig about Digioh - from being able to rebrand download pages, to not requiring you to code up the download buttons yourself. Another nicety is that they're very affordable, too. While there's a free plan, for customization of their download pages and more you can choose between their Pro or Pro Plus selections, for $4.99 and $14.99 USD respectively. The latter includes very generous file hosting and bandwidth allowances, as well as phone support.
To find out more about Digioh and give them a go for free, swing by their site.
If you're a diligent reader of this blog, you may have remembered our earlier post, 'Twitter’s email notifications need a 5-minute mobile makeover'. In the aftermath, hundreds of folks like yourself lobbied Twitter to make their notifications more mobile friendly, using a simple fix we outlined.
As it turns out, they listened.
If you've viewed Twitter email notifications on a mobile device recently, you may have noticed that alongside their new branding, they've gone for a much more mobile-friendly format. Changes included upping the font size, hiding not-so-critical text and making the 'Reply to...' unmissable. They've even switched the orientation of their Twitter ribbon to make for a more balanced design - from left on the desktop, to right on small screens.
A huge thanks to the Twitter team for listening to what we all had to say, not to mention, working these changes so elegantly into their rebranded emails.
Now you're familiar with our new site, I'd like to take this opportunity to formally introduce the new Campaign Monitor brand and briefly explain the story behind it. It's been a massive team effort, and a project that I've worked on since joining the team last year… so hopefully I can give some insight into our process.
For years now, the old Campaign Monitor logo and website has done an amazing job at selling the software - but frankly, it was just a little bit too serious and corporate. Anyone who knows the Campaign Monitor team, or has had any interaction with support will know that we're anything but a bunch of serious corporate guys. We're a small and friendly team of passionate designers and developers making something we truly believe in – so it was about time our brand image reflected our personality!
That was our brief - to inject a bit of personality into our image… and we think the new logo does just that. It's friendly and more welcoming than the previous version… whilst at the same time reminding you that we're still the same ol' company you can rely on.
By now, you've already seen how the logo eventually turned out, so I thought I'd go into a little bit more detail about how we got here.
Technically, the logo comes in two parts - the 'wordmark' and the icon - two elements that work equally well as a set, or as individuals, and at any size. As you can imagine, both elements have been continually refined, re-designed and obsessed over for almost a year before arriving at what you see today.
For the wordmark, I worked closely with the extremely talented Anthony Lane who hand crafted the type you see below. He managed to take influence from our original logo (Gotham), and was able to throw in some softer, rounded elements to make it much friendlier. The beauty of the final product is that it scales to almost any size, and still maintains it's unique character.
The smaller circles (above) show how we maintained a consistent rate of curve, and the larger circles helped us keep the letter forms the exact same width. It's this level of detail that makes sure that the word scales up and down perfectly.
The icon was designed by myself to be a device that we can use alongside the wordmark, but also in the places where the full word isn't needed. You might already have seen it being used in our avatars, email footers and advertising (also here and here and here).
Much like the wordmark, the icon went through various revisions and re-designs before we found something that had exactly the right feel. There were a number of close contenders (below) - but nothing really stood out for us... we really liked the top left option, before realising that it totally looks like a fish.
What we ended up choosing and developing was an icon that could scale beautifully, was simple enough to have fun with, but also didn't try and say too much. Some people see it as an envelope, others the letter 'M', a graph, crown, folded paper… or something else entirely.
There are a number of other elements that accompany the two parts of the logo; the origami effect seen in the footer, the colour pallet, our tone of voice. But overall, the brand - along with the new website - represents the friendly and human side of Campaign Monitor... and is something that I look forward to developing over time.
As always, I'd love to hear what you think!
Today I couldn’t be more excited to see our new site and brand out in the wild. For the last six months our very own Buzz Usborne has been working like a crazy man to pull all of this together. As well as a totally new brand, which he’ll share more about soon, we’ve completely rethought the structure of the site to make things easier to find.
We’ve simplified our resources section with a fresh new design that makes it easy to find what you’re looking for. This includes an awesome new Will it Work section collating all our research on what does and doesn’t work in HTML email in one place.
We’ve converted our popular Sitepoint book on email marketing (which has sold more than 16,000 copies) into a set of 6 free guides on everything from planning an email campaign, designing, coding and even how designers can sell email marketing services to their clients. We've got a few more additions to this section in the pipeline right now.
Our email gallery is all about showcasing the amazing design talent of our customers. Over the last 8 years (scary but true) this has grown to include more than 650 inspiring examples of just how beautiful HTML emails can be. The new gallery is now a pleasure to browse as a grid of thumbnails with infinite scroll. You can even browse by type, such as newsletters or invitations and layout, such as single or two column.
Our new-look FAQ and customer forums make it easy to get your questions answered, but when you need to speak to someone, we now show you who is online and where they’re based in real-time. We pride ourselves on providing super fast 24 hour support from 10 different cities worldwide. Now you can see exactly who is available to help, and from where.
There really is too much good stuff to include in one post. From the mobile optimized blog, a better way to meet the team, to the best looking customer forums on the planet, there are improvements to just about every corner of the site. Take a look around, let us know if you spot anything that’s broken (it’s going to happen) and please, let Buzz know what you think of all his hard work in the comments.
Have you ever felt that web apps and services would be so much better… If only they talked to one another more? For example, if you could sell a product online, then have the customer’s details automatically added to your favorite CRM app? Or receive unique email notifications when say, your favorite blog gets updated?
Our friends at Zapier have thought long and hard over scenarios like these and come up with an amazing drag-and-drop interface for automatically pushing data between 35 popular apps or tasks… And counting. We’re truly humbled to be included in their initial line-up, which includes integrations between apps like…
That’s right, Highrise! Plus, perennial favorites like Capsule CRM, Desk, Freshbooks, Stripe and many more. Lets look at what Zapier can do for Campaign Monitor and you.
Thanks to Zapier, a variety of frequently-requested integrations with Campaign Monitor are now real. In many cases, this means you no longer have to manually export contacts from your CRM app, for example, prior to importing them into a subscriber list, or hire a developer to automate the task for you. If Zapier can ‘zap’ it, then you can pretty much set it up using our respective API keys and forget about it. You can also create zaps in each direction - say, to create a new contact in your CRM app when a subscriber is added, or vice versa.
Really, integration with Highrise. I’m still spinning.
While all the requests we’ve received have certainly made us consider adding new subscriber notifications to the app, it seems like Zapier have beaten us to the punch. You can now receive a customized plain-text email or SMS whenever a new subscriber is added to your list, by simply creating a zap:
It’s very elegant stuff - you don’t have to know how APIs work, or even what an API is. Simply drag the cute tiles, follow the instructions and have your apps really working for you in minutes.
Zapier is priced according to the number of zaps and synchronization frequency you need. Each plan comes with unlimited ‘actions’, or syncs, which means you can pretty much set and forget about your zaps - they’ll just silently continue to share data between apps in the background. You don’t need an account to start creating zaps, so for more information and to give it a try, zip over to Zapier.
It wasn’t so long ago that we discussed permission and purchasing lists on this blog, but ‘Word to the Wise’ presented an interesting point-of-view on the matter recently, from someone actually on a for-purchase marketing list. The company selling ‘leads’ had made their database searchable, so WttW’s Laura Atkins got to the task of finding out as much as she could about herself. The outcome? Not only was Laura listed multiple times, but:
“Not a single listing gets my contact information correct. Not a single listing gets my employer correct. Three of the listings identify me as working for different companies. I’ve never worked for any of those companies.”
There’s no mention of how exactly she got on their database (although it’s likely ‘compiled, crawled or crowd-sourced’), but from the sound of things, it really wasn’t worth anyone’s money. Or as Laura summarized:
“I’m actually surprised at just how totally inaccurate the data about me is. I’m not that hard to find.”
Compare this spotty database with an organically built subscriber list of real, interested people and you’ll see that purchasing lists, even ‘targeted’ lists, is just bad value. Don’t get us started on what happens when campaigns are sent to purchased lists, either…!
Many thanks to Laura for sharing her perspective here - hopefully she gets away, without being emailed as the CEO of non-existent companies. Have you been on the receiving end of ‘targeted’ marketing gone weird? Let us know in the comments below.
The other week, Stig, our resident support superability, responded to a curly ticket in regards to whether it was possible to add a unique QR code for each recipient. After a little research on his part, the answer was a yes, using Google’s Chart Tools. I’d never heard of Chart Tools, but once I’d started playing, I realized that many of you may find it useful when sending invitations, coupons and other printable things.
Now, QR codes have a bit of a bad reputation. That’s because they’re often used in rather ridiculous ways. So initially, I was a bit skeptical about writing a post, but then I came to realize that they can also be used for good, too. We’ll look at some examples in a bit.
Google has done a lot of things to improve the lot of humankind and providing dynamically-generated graphics is one of these things. In the case of QR codes, they have a ‘Infographics’ service - simply append a root URL with parameters, place this final URL in an <img> tag and voila! A static PNG will be returned to you. Here’s an example:
URL: http://www.campaignmonitor.com/blog
Code:
<img src="https://chart.googleapis.com/chart?chs=100x100&cht=qr&chl=http%3A%2F%2Fwww.campaignmonitor.com%2Fblog" />
Result:
The Infographics docs include parameters for specifying dimensions and data. Note that the data passed (eg. http://yourpage.com) doesn’t have to be a URL, but does have to be URL-encoded - you can use a URL Encoder to do this.
Once you have this final URL, you can simply add it to your HTML email code. Or, if you want to make it unique and personally identifiable (say, for tracking referrals), you can append it with a template tag:
<img src="https://chart.googleapis.com/chart?chs=100x100&cht=qr&chl=http%3A%2F%2Fwww.campaignmonitor.com%2Fblog%3Femail%3D[email]" />
We used [email] here, but you can use custom fields, instead.
Now we’re both QR code experts, lets look at some of their practical applications. First up, QR codes are near-useless on the web and in email clients, as links are by far preferable. But on printed messages, these codes are in their element. Some examples include:
Finally, I couldn’t wrap up this post without giving Australian artist Yiying Lu a hat-tip. Snapping the handpainted QR code in her artworks takes you through to this magnificent ‘making of’ video:
Do you, or your clients use QR codes in marketing campaigns? Are they a hassle to use, or hustlin’? Let us know in the comments below.
Not so long ago, Twitter started sending a new email to their users. If you're a Twitter user, you've probably seen the neat weekly summary of some of the topical things that have been tweeted by people you're following. To our delight, these notifications have been nicely optimized for mobile devices. But as for their regular notifications? The ones you most probably receive 200 times a day? Sadly, they're still unreadable on small screens (pictured).
Typically, we decided to do something about it. And we think Twitter's design team should take note.
In this mobile makeover, we're going to take the notifications you get when you receive a mention, or have a tweet favorited, then turn them into something tweet-worthy when viewed in iPhone or Android Mail, or any mobile email client that supports media queries.
First of all, we wanted to approach the most apparent issue with Twitter's notifications - tiny text. The reason why the text looks so small is because the 710px wide layout in use forces the email client on mobile devices to zoom out significantly to view the entire width of the message. Let's address this with a media query targeting small displays:
@media only screen and (max-width: 480px) { ... }
If you've read much on mobile email design, you may know that you add these declarations to your <style> tags - the stylesheets within can only be interpreted by HTML email clients that meet the @media only screen and (max-width: 480px) criteria. So lets put it to use on adapting the layout here. First up, there's two tables surrounding the body of the email message:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
We're going to bring them down to size by adding classes wrappertable, wrappercelland structure:
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable">
<tbody>
<tr>
<td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
Now we have something to target, lets get to work with these classes in our media query:
@media only screen and (max-device-width: 480px) {
body {
width: 320px !important;
}
table[class="wrappertable"] {
width: 320px !important;
}
table[class="structure"] {
width: 300px !important;
}
The widths used above are significant, as on the iPhone in particular, the display width is 320px in portrait orientation. By narrowing the email layout to 320px, it will be viewed at 100% zoom by default - are you following me, camera guy?
Now, the above technique would be all well and good if it wasn't for that infernally wide 'Twitter' header image. So we'll do something a bit crafty and split the header image into 3 images. Sections which don't need to be displayed in our new, narrow layout can simply be hidden. Here's the original code:
<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
And here it is, with the header image in 3 pieces:
<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
You may have noticed the class, logo on logo-left.png and logo-right.png. Hiding these bits is pretty straightforward - simply add the following to our existing media query:
img[class="logo"] { display: none !important; }
At last, we've got a header image and layout that's trimmed down to size on mobile screens.
Now, on top of the above refactors, we added some extra padding around elements and adjusted font sizes to taste. But ultimately, most of the major changes were achieved with a couple of lines of code and only a few minutes' work. The results speak for themselves:
Given that these are such easy optimizations with very little downside (except 5 minutes of time and effort on their part), we'd love to see Twitter do a good thing and make these fixes. After all, changes like we've just made on their behalf could potentially benefit millions of users, multiple times daily - why not help us pass on the message by sending a tweet?
Update Twitter have updated their notifications - view their updated email here. Thank you for helping us!Alternately, you could make a slightly smaller group of folks happy by applying these optimizations to your own HTML email designs. Here's the code, free for you to test out at adapt for your own campaigns:
Download the code (zip file, 22kb)If you have any questions, or can suggest other mobile-friendly techniques, let us know in the comments below.
It seems like optimizing our landing pages through A/B testing is something we’d all like to do at some point, if only we had the time, skills or energy to do so. Thankfully, Unbounce has felt our pain and come up with a great web app for creating, publishing and testing landing pages, backed up by solid reporting. You don’t have to be able to code or set up analytics yourself - Unbounce has made this part of the deal. Simply have something you want to achieve, like collecting email subscribers, or signing up folks for a trial of your service. Jump into Unbounce’s visual editor, create the landing page of your dreams and publish away - it’s really that easy.
Now, quite a few of you have requested Unbounce integration with Campaign Monitor and rightly so - they’re the easiest, bestest app on earth when it comes to building landing pages. We try our darndest to deliver the same when it comes to creating top-notch HTML email newsletters. They’ve got A/B testing in the bag. We offer it too with every campaign. Their support team is both helpful and good-looking. We’re… Yes, it’s all true. I’m looking at you, Mat.
Coming back to Unbounce after a little stint away was none too shabby an assignment. From the moment you sign up for a trial account, the app pretty much walks you through the process of getting setup and creating your first landing page. They have a set of professional-looking templates to get the ball rolling - some for doing things like signing up users for a trial, or importantly to us, templates specifically for collecting email subscribers. This is where their newly-launched Campaign Monitor integration comes into play - once you collect an email address on your Unbounce landing page, you can automatically shoot it through to a subscriber list in your account. All you need is your API key to set it up. But don’t just imagine it, check out the integration for yourself:
The number one benefit of having optimized pages funnel straight into your lists is of course, list growth. With A/B testing, there’s no second-guessing as to whether your email subscribe pages are doing the best that they can do. Second to that, you don’t have to manually export email addresses, then re-import them into Campaign Monitor - it’s all automatically done for you. Sweet!
Finally, it should be mentioned that Unbounce is not only great for gathering new subscribers, but or creating and hosting landing pages for your email campaigns. Get your subscribers to sign up for a special offer! Sign ‘em up to your newly-launched service! The possibilities are endless.
Look, I really wanted to sound more objective in this review, but I’m a marketing geek and this stuff gets me really excited. If you’re a marketing geek too and love fooling around with A/B tests, take a look at Unbounce. They’re generously offered Campaign Monitor customers 50% off rack rates for the first 3 months (following their free 30-day trial) with the discount code, “CampaignMonitorRocks”. Scoot on over to their site and stay classy!
You can love them or hate them, but email notifications play a big part in making social networks as compelling as they are. Even when you feel like you’re getting bombarded by updates, you stay opted-in because you don’t want to miss those birthday notifications, or simply love finding out when your tweets are getting favorited.
Check-in bigwigs Foursquare have gone one step further in the compelling stakes by adding a bit of an ‘easter egg’ in their account settings - you can select to have a cute puppy photo included in their weekly updates:
Given that it’s such a simple gag to pull off using custom fields and segments, or even a service like Daisy, I’m a bit surprised more folks aren’t sending ‘fun’ versions of their campaigns, or adding cute, catchy or downright intriguing content to their email newsletter, on demand. After all, who could possibly unsubscribe from the promise of cute puppies?
That said, when it comes to subscriber retention, nothing can beat cool customer Groupon’s ‘Punish Derrick’ unsubscribe page. It’s probably bad news for those contemplating a career on their email marketing team, but you have to love their chutzpah.
Do your email campaigns have a surprise or treat that keeps your subscribers holding on for more? Or do you receive a newsletter that you really can’t unsubscribe from? Tell us about it in the comments below. A big thanks to Zac for throwing us a bone by digging up puppy-related email news.
Got a party, webinar, or a VIP-only sale coming up? We often get asked about the best way to share calendar events via email, so subscribers can book them in and create alerts in desktop and web calendars like iCal, Outlook or Google Calendar. But with the variety of apps out there comes confusion as to what’s the best way to go about sharing an event - do you link to a file? A .vcs? How about Google Calendar?
The thing is, unless you’re using an event management app like Guestlist or Eventbrite to handle everything, sharing a calendar event with your subscribers via email can be a slightly tricky task.
Back in my agency days, we’d share calendar events on a regular basis - both via email and on our in-house event registration pages. We found that there is no one ‘silver bullet’ method that played nicely with all the calendar apps - some people preferred adding events to their desktop apps, others web. So we settled on providing subscribers with two methods: either download and add the event as an .ics, or add it to your Google Calendar. In most cases, our invitees were happy.
First up, it’s easy to mix up vCalendar’s .vcs with iCalendar’s .ics files. The skinny is that the iCalendar file format has largely superseded vCalendar and is supported across pretty much all the major calendar apps. So this is what we recommend you use. It’s also pretty easy to export events from calendar apps like iCal (pictured) and Outlook.
With that out of the way, the issue lies with hosting your .ics file on a server. Only servers that support the WebDAV protocol play nicely with the sharing of calendar files - if in doubt, ask your tech team. If your server doesn’t support WebDAV, all you will see is the raw text innards of the .ics file when you try to load it. Even when hosted on a server without WebDAV support, you can use the URL in your campaign and prompt your subscribers to ‘Download linked file…’ or ‘Save As…’ to grab the .ics from their email client, but this seems a little messy.
After reading about these file format and server config peculiarities, you’re probably getting an idea as to why Google Calendar is so popular.
What’s much easier is using Google’s ‘Event Publisher Guide’ to create standalone events that can be added to a Google Calendar in the browser. The code provided by Google can be copied and pasted straight into an HTML email, as it doesn’t require JavaScript. If you have a Google Calendar account, try clicking the ‘Add to Google Calendar’ button to see the glorious end result.
The downside, of course, is that not everyone has a Google Calendar account. That’s why also serving an .ics is a bit of a necessary evil. It’s also why web-based scheduling and event apps are a dime a dozen.
The bottom line when it comes to sharing and adding individual calendar events via email is that you need to provide at least two options - in our case, both an .ics hosted on server that supports WebDAV and a Google Calendar event. I’d love to hear how you get your subscribers to add your events to their calendars, so feel free to suggest alternative approaches in the comments below.
Tandem paragliding at Bukit Jugra, Malaysia. Located 1 1/2 hours from Kuala Lumpur and 45 mins from KLIA, Jugra is the very scenic launch point for Malaysia’s annual paragliding competition.
What a thrill! Remarkably, I didn’t feel any fear or vertigo. This may well become my sport of choice.
Thank you, Malaysia. This has been one of the most exceptional journeys I’ve ever experienced. You will always be close to my heart.
KL Sentral. High speed rail rocks, by the way. Sydney’s Cityrail blows in comparison to KL’s mass transit system. Trains that move at 160 km/h are rad!
Waiting at the terminal for a bus to Banting. What time does it arrive? Whenever it arrives.
I’m holed up tonight literally across the road from Kuala Lumpur’s Low Cost Carrier Terminal. In fact, I’m so bleedingly close that I can hear the unceasing jet whine and the low rumble during takeoff. My room is no larger than my office at work, yet includes a full bathroom and double bed. And yes, I’m loving it.
Here’s to the virtues of solo travel. Sure, I have Sandy the Proboscis in my bag, but for the first time in a while, I’m travelling for leisure, unaccompanied. It’s just amazing how folks open up to you and how much you see in return - I befriended another solo traveller from Shanghai at the airport and now I’m excited with the prospect of visiting Xian. We made it to the Tune together and whoo-ee! What a little gem this place is!
The Tune is the anti-thesis to the homogenous hotel experience. Apart from my Chinese friend, I’ve met British holidaymakers, smirked at cranky-looking Korean golf tourists, avoided frosty Germans and admired the serenity of an Indian mother, cradling her child in a doorway. There are Malaysian students sharing a wall with tired Australians and oh what a vibe, even after midnight! There’s cheap beer downstairs, to boot!
The Tune at KL LCCT is a modern-day tower of Babel. It’s a shrine to globalisation. And at around $20 a night, it’s my kinda hotel. Sweet dreams!
Here’s a good handful of my family - apart from my cousin and our helper, the rest live in the provinces. I don’t know how many nieces and nephews I have, but there are plenty!
You are both a rock
And my hard place; a sentence
Drawn across your face.
A full heart and yet
Still aggrieved; leaves still fall from
Perennial trees.
Suits and strollers, those
Things can wait - just let me dance
With my bunny mate.
Every strand of me
Will rise to fight you, but yet
Cannot resist you.
This place is reserved
By flowers, for the commons
You cannot sit here.
Night, I was so sleep
In stable static, deep with
Prussian mystery.
There are verbose dance
And dinner plans, but in short,
She means ‘I love you’.
Let me indulge with
A Southern standard; your eyes
Aglow, base disbanded.
Guts and whiskey, a
Stream of lights, the click of spools
Spinning through the night.
When chasing your ghost
I draw one curtain, to see
Air pass through the next.