Ros de Vries
Community manager, email mktg nerd, hipster.
Campaign Monitor Blog- @yarrcat on Twitter
- A slow boat to Cebu
- Where I've been
- Lomo photos
- New tunes
- Get in touch
-
Posts
- May 15, 12
The other day, Laura at Word to the Wise got me thinking with her post, 'Email is different'. To loosely recap, the post answered a question which likely echoed the sentiments of many towards issues like anti-spam legislation and permission, being:
'Why do so many feel that email should be somehow held to a higher standard than other direct marketing channels?'
In comparing TV and radio segments to email, Laura made some clear distinctions - the former two have been marketing channels from the beginning. They're broadcast mediums. They've been created by marketers, are wholly paid for by owned by marketers and therefore marketers are entitled to pester each and all who choose to tune in with marketing messages.
Email is different because it's not solely a marketing channel. The cost of spam isn't borne simply by the sender, but by hosts, ISPs, recipients and everyone in-between.
Nonetheless, it must seem strange to those with limited email experience that it's not okay to purchase an email list, while the practice of buying and selling personal information remains widespread amongst telemarketers and direct mailers. Why should email be put on a pedestal? After all, consumers don't pay phone line rental in order to receive unsolicited calls at dinnertime... But they still happen, without consequence to the call center, or their clients.
I'm sure a lot of designers, perhaps you included, have had conversations along these lines. Personally, I think senders of unsolicited email should be held accountable because they cost ISPs and ESPs a supreme amount of development time - all those super-intelligent engineers working on spam detection and filtering tools could really be off making the world a better place in other ways. Senders can create worldwide, widespread inconvenience, with very little time and effort. They should also be held accountable because it's technically possible to do so.
However, this is a can of worms I wanted to share with you. When your clients ask why they can't purchase lists and send unsolicited email, what do you say? We're looking forward to your opinions in the comments below.
- May 07, 12
Use of mobile email clients is set to surpass desktop and webmail client usage by July, according to the results of a recent study by our friends at Return Path. After examining data from over 90 email clients, amounting for more than 130 million data points over a 6 month period, Return Path found that while webmail clients overall are on a slow decline, mobile views increased by 82.4% over the same period (March '11 – March '12). Mobile devices currently claim 16% of overall email client market share, with 85% of mobile email opens occurring on an Apple iOS device. This is comparable to our earlier findings.
Return Path also found that there is an uptick in mobile email readership during the weekend, which can be attributed to email recipients switching from the desktop to a smartphone outside of office hours. Conversely, it's at its lowest on a Wednesday, when presumably folks are at their most busy tackling their Outlook, or OSX Mail inboxes.
The implications for email senders like you and I are fairly clear. As Tom at Return Path states in his summary:
"... those that aren’t tracking which device their subscribers are reading their emails on, or optimizing their emails or websites for mobile devices stand to lose out. A poor user experience could mean no response, no action, or plainly put, no ROI."
If you aren't already optimizing your emails for mobile, now is the time. To set you on the right path, we've got a practical primer on email design, not to mention a neat template builder which can whip together mobile-ready campaigns in a matter of minutes.
Out of curiosity, will Return Path's findings change the way you send campaigns? Let us know in the comments below.
- May 03, 12
Customer feedback shapes much of what Campaign Monitor is today, not to mention what it will become in the future. So we thought we'd reach out and see what one thing Campaign Monitor customers like you would like to see improved about our service.
In return, we've got a modest mountain of ultra-exclusive Campaign Monitor t-shirts to give away, one per customer. Apologies in advance if we run out of your size - you'll see what's available after submitting your feedback. If we've run out of shirts and closed the giveaway, don't worry - we'll have new swag and more giveaways in the coming months, so watch this space.
Fill out my online form.Thank you so much for helping us improve - we'll be in touch if we make good on your suggestion. Now get some of that t-shirt action!
- Apr 25, 12
When justifying the time and effort that goes into email marketing, it's always good to have a few stats on your side. It's likely you've heard some of the big reasons (like its return of $40.56 for every $1 invested in 2011), however in a world that's still social media mad, there's two stats that show that email is still on top, being sharing and conversion rates.
'Forward to a friend' the most common share method
"A food delivery service gets 70% of its shares through email and another 15% via Facebook."
- Social Sharing: Twitter has highest amplification rate, email has highest conversion rateWhile Twitter and Facebook may be where many consider social sharing to be at, email dominates social referrals.
MarketingSherpa's blog reported on this in, 'Social Sharing: Twitter has highest amplification rate, email has highest conversion rate', which reflected on the experiences of a recent referral program by Extole, a consumer-to-consumer social marketing company. The study found that Extole customers who participated in the referral program shared with almost three and a half friends on average, with most of those shares occurring via email.
For us, this isn't unusual behavior. For example, here's a snippet from the social sharing reports following our most recent monthly newsletter, sent to over 130,000 subscribers:
Despite featuring equally prominent Twitter and Facebook share links, 83% of shares were via the 'Forward to a friend' link in the campaign. This means that subscribers were over six times more likely to share the campaign via email, versus Twitter and Facebook combined!
Email results in more conversions
What's important to many business owners is not so much how many clicks an email or tweet generates, but how many of these result in actual conversions, let they be a sale, an opt-in or a coupon redemption. Again, email rules. Based on the same Extole study, email shares resulted in a "21% open rate, 80% clickthrough and 17% conversion (the highest conversion rate of any channel), which breaks down to .17 clicks per share." This is impressive, considering that Facebook had a conversion rate of only 1.21% and the overall average clickthrough rate for social referral programs using Twitter, Facebook, personal URL and email combined was 42%. Or as Angela from Extole noted, "We’ve always known that word-of-mouth marketing was very powerful, and converted at an estimated three to five times higher rates than other channels".
The great news is that it's easy to add social sharing to your email campaigns, let it be a 'Forward to a friend' link, or Like / Tweet button for Facebook and Twitter respectively. Here's our walkthrough on adding sharing to campaigns... Or you can add your own links on the fly to templates via the email editor.
Many thanks to MarketingSherpa for sharing their study with us. What have your experiences been with social sharing? Why do you think email trumps Facebook and Twitter? Let us know in the comments below.
- Apr 19, 12
This issue has been resolved by Hotmail - many thanks to everyone who contacted them with their emoji-related grievances!
This week, a rather obvious Hotmail quirk cropped up. By obvious, I mean that a garden-variety set of symbols like © ® and ™ are being replaced by , or 19px x 19px 'emoji' GIF images. Apparently Hotmail thought this would be a fun way to spice up HTML email newsletters, when in fact, it's an annoyance to designers, who don't want to have tiny footer text broken up by a © character that's the size of a fist.
Yes, the images are here to stay - there's a new bit of JavaScript code in Hotmail which ensures that no symbol goes by unmolested.
To make matters worse, if you have
img { display: block; }in your email design's CSS code to prevent gaps in Gmail, each emoji will be followed by a line break (pictured).Bringing emoji down to size
Thankfully, there's a fix - resizing the images so they're more in line with the surrounding text. After viewing a couple of the solutions being spun around, we took a crack at our own and found that adding the following CSS code to your stylesheet works a charm:
.ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; }In the above fix, we're using an attribute selector to say, 'if an image is assigned a class that starts with 'Emoji', make it 10px x 10px'. You can change the size to whatever suits the surrounding text. The
display: inline !important;has been added to prevent the Gmail gap fix from forcing line breaks. Also, the addition of.ExternalClassprevents Hotmail from renaming theimg[ ... ], as it does to 'unique' classes.Alternately, if you were meaning to superscript symbols like ™, you can try:
.ExternalClass img[class^=Emoji] { width: 8px !important; height: 8px !important; vertical-align: super; display: inline !important; }While we're talking Hotmail quirks...
Stephen here recently brought to our attention that
mailto:links have been disabled in Hotmail. As we've mentioned here before, using a contact form is preferable to using amailto:when collecting responses - now Hotmail has made this more so.Many thanks to Email Design Review for diligently reporting the issue and inspiring the above fix. There's a great discussion on Hotmail's emoji in our forums, so if you're more than welcome to join in and hang out with some of the smartest folk in email design.
- Apr 19, 12
Long before food bloggers and review sites came into being, there was Time Out, a publishing company that's spent the last 40 years guiding us on what to do and where to go in the world's most exciting cities. Given the long-lasting success of their monthly magazines and websites, it wasn't really a surprise to see their email campaigns kicking some serious goals, too. In our most recent case study, we got together with the Time Out Sydney and Time Out Melbourne teams to find out how email fits into their fast-paced publishing schedule and get a few tips on how to send compelling email newsletters.
"...we can design an email, send a test and schedule it within 4 minutes - no joke!"
If you've only dreamed of getting your newsletters out the door in minutes, as well as consistent click rates of 45-50%, then there's practical advice in here for you. Of course, it always helps to have a team of talented writers and photographers like Time Out does, but even those on a smaller budget than this content powerhouse will find a takeaway or two.
It also goes to show that 'old' and 'new' media are in no way incompatible. The idea that websites and email are somehow corroding the relevancy of print is at odds with the Time Out approach, which uses email to offer timely updates and bolster the brand in between their monthly magazine editions.
Read the full Time Out interview, or browse through our other case studies, including Q&A's with 37signals, Xero and more.
- Apr 16, 12
Selling something? For a refreshing store-building experience, check out Goodsie by HiiDef, popularly known as the makers of Flavors.me. Goodsie is quite simply, a stripped-down, yet full-flavored online retail service for creating branded storefronts, sans code. You can either create a stand-alone store with a custom domain, or embed your products into an existing site, like a Tumblr or WordPress blog. Of course, the 'must-haves' are all there, like payment gateway support, coupon management and detailed sales stats.
To add the icing on the cake, Goodsie now sends email campaigns and manages mailing lists using Campaign Monitor. Oh, did we mention that you can build really sexy storefronts? Check it out:
Email marketing in the express lane
As a fan of Flavors.me, I was excited to fire up a Goodsie Premium account and try building a store for myself. As it turns out, they've gone the whole hog with their email marketing service, which features a drag-and-drop email builder that automatically passes the completed HTML email to Campaign Monitor for delivery. You don't need to start a Campaign Monitor account, fiddle with API keys or pay additional fees to send as a Premium user - Goodsie handles all this for you behind-the-scenes. After sending, it also provides sales analytics so you can measure the impact of your email campaigns against your bottom line.
Another nicety is that mailing lists are handled for you in your Goodsie account - simply create a list and let the app's shopping cart and order database integration populate it with subscribers. Targeted email campaigns can be sent, based on customers' order history, purchase amount and geography.
Email marketing support is only available in Premium accounts, which are a flat $40/month. Considering that this includes email delivery and list management (alongside a growing list of extra features), Premium accounts make for bloody-good value.
The best of both apps
What I really like about the Goodsie / Campaign Monitor matching is how it cleverly draws the strengths of both services. Goodsie offers a stylish, streamlined, code-free store experience - building and managing a store feels effortless. We've worked towards offering a professional, white-label service to designers, backed up by robust infrastructure. Silently linking the two services via our API makes things almost too simple. When sending campaigns from within the app, I couldn't but help feel that I was missing a step or two - wasn't Goodsie going to prompt me to enter my details? Hold on, my newsletter is sending... Wow.
Overall, Goodsie gives us the good vibrations. You can trial a Premium account for free for 30 days, then continue for $40 a month, or step down to a Standard account for $15 USD a month. Find out more at their site.
- Apr 12, 12
Animated GIFs are going through a renaissance. In the last few months, we've seen them resurrected from the cringe-worthy virtual graveyard of 'Under Construction' banners and funny profile pics, to be redefined as fine art. This trend is particularly relevant to email design, where GIFs and CSS animations are the only way to add moving images, given the poor video support across the most popular email clients.
But why use them? As Paul Boag quotes in 'It’s time to look at animated gifs again':
"Animated gifs can breathe some much needed life into the imagery on your website. They grab the users attention and act as design delighters, making your site stand out from that of the competition."
The same can be said for email, in which the 'stand out' -ness of a button or call to action can make a considerable difference to campaign results. Anna Yeaman at Style Campaign demonstrated how an animated video preview lifted her campaign's click-rate by 26%... And there's no reason why you can't achieve the same.
Support for animated GIFs in email
The great news is that animated GIF support is pretty much universal across the major email clients... Except Outlook 2007 & 2010 (you guessed it). In Outlook, only the first frame displays - which means that if your animation contains any important information, it has to feature on the first frame or risk being lost. Here are the full results:
Desktop email clients Result Apple Mail GIF plays Lotus Notes 6, 7 and 8.5 GIF plays Outlook 2003, Express GIF plays Outlook 2007, 2010 First frame displays Outlook for Mac 2011 GIF plays Windows Live Mail 2011 GIF plays Web-based email clients Result AOL Web GIF plays Gmail GIF plays Hotmail GIF plays Yahoo! Mail GIF plays Mobile email clients Result Android (default) GIF plays Android (Gmail) GIF plays Blackberry GIF plays iPhone GIF plays Windows Mobile 7 First frame displays Support for animated GIFs is rock solid. Compare this to support for video or CSS3 animation and you'll see why the alternatives are seldom used.
Examples from our customers
We couldn't wrap up this post without a couple of great animated emails from folks like you. Click through on the images to see them animate:
iart interactive ag
Clarity Communications
Hungry Castle
Superbrothers
Style Campaign has a great selection of animated emails in this blog post, not to mention a solid tutorial so you can get started on your own animation creations!
We're really looking forward to seeing animated GIFs take off, both on the web and in email. So now, we'd like to hear from you - do you feature animated GIFs in your campaigns? Have any favorite examples? Share them with us in the comments below.
- Apr 04, 12
The other day, I came across a timely post on Smashing Magazine, titled 'Publish What You Learn'. Timely, because I was amidst writing our recent post on removing spacing from tables in Outlook, knowing that this newly-discovered tip would be sure to help other email designers. While Smashing's post was focused on the benefits of sharing your web development know-how, I felt that the 'publish what you learn' mantra was even more relevant to email design, where the quirks are many, but often, information on email rendering issues is very thin on the ground.
Previously, I've encouraged customers to contribute to blogs, or better, start their own. In one case, the response was, 'Oh, but no-one would read a blog by little old me', which in my impression was shrugging off a good opportunity. In reality:
- There are only a handful of email design blogs out there, such as Email Design Review, StyleCampaign, Email Fail and of course, this one. It's by no means an over-saturated field.
- There aren't that many email marketing 'celebrities', either. This is a field where you can produce great work and stand out.
- Blog posts on email design tend to get a lot of attention. In the last year, a single post on background images in email received over 62k hits from Google alone! That doesn't count all the reposting and tweeting that often occurs.
The bottom line is, if you're designing for email and you come across a good piece of advice or a fix to some Outlook quirk, just publish it. Sharing what you know will not only help countless other people, but it could really lift your profile, too.
- Apr 03, 12
Finally getting atop an annoying email rendering bug gives geeks like us near-endless, t-shirt removing satisfaction. Especially when it's plaguing our newsletters. In this instance, our adversary was 3px spacing to the left and right of tables with
align=""applied to them. The stage was Outlook 2007 and 2010. While this has been a long-running issue, things really came to a head when I was coding our latest email newsletter, only to find that two text boxes nested in a table would not sit alongside each other, thanks to said gaps:Using
align=""to float tables alongside each other is starting to be used as an easy way to convert a regular 2 column email design to a 'wrapped' 1 column on mobile devices. We'll cover how to do this in the blog shortly.Anyway, after an agonizing hour or so of trying to close the gaps with
paddingandmargin, I scheduled the campaign and walked away in defeat, knowing all too well that our Outlook-using subscribers would see the awkward gaps. Yes, I'd coaxed the boxes to sit beside each other, but it just wasn't perfect. And anyone who knows how I code email designs knows that not perfect is simply not good enough.Time passed and things settled down. That's until a customer contacted us on the forums about the same issue.
Going gap-free
Instantly, my primordial feelings, my white-knuckled combat response returned. "There's no workaround for this." I typed. It felt like one of those scenes where the righteous cop hands over his badge and gun, locked in an expression of both impotence and rage.
There was no workaround, until another customer chimed in.
Known only as dedra and slinging a line of Microsoft Office proprietary CSS, he had a near-solution - that is, using mso properties to control spacing between elements. The brain juices started flowing. I started googling around and found the answer tucked away on Emailology, a genuine Aladdin's cave of email design treasure. To remove the spacing, simply add the following to your CSS styles...
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }... or inline it like so...
<table align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> ... </table>... and the gaps will be no more. The end result is a great-looking email newsletter:
Many thanks to Emailology, the mysterious dedra and all our customers on the forums for this fix. We're now free to create responsive email designs with floating tables, that look just as lovely in Outlook 2007 and 2010, as in any other email client.
- Mar 28, 12
It's been just over a month since we announced RSS to Email support in Campaign Monitor. The response since then has been crazy positive, with more than 125,000 RSS campaigns already delivered and some stunning custom RSS template designs starting to surface (we'll feature some of these here soon).
The one catch when we launched last month was that RSS to Email was only available for customers on monthly plans. It was pretty clear from the day we launched that our PAYG customers were keen to get in on some RSS action too, and so we immediately started working on making the feature available to everyone. Today I'm happy to announce that RSS to Email is now available for our PAYG customers too.
Making sure your subscribers don't miss out
Like any complex feature, there are always lots of small gotchas we need to be aware of when it comes to billing. For example, what happens if we try and send today's recurring RSS campaign for you, but you got a little carried away with your Apple obsession and the funds aren't available on your credit card? There are lots of reasons a charge might not be approved, but we wanted to give you a quick way to resolve these issues without forcing your subscribers to miss out on your daily goodness.
So, if a payment fails for some reason when sending a recurring RSS campaign for PAYG customers, we'll let you know immediately and give you a grace period to get to the bottom of it. We'll send you an email explaining exactly what happened, and if you manage to get that issue resolved within a time period (2 hours for daily, 4 for weekly and 12 for monthly), we'll automatically send the email for you.
If for some reason you can't get it sorted in the grace period, the next campaign we send will include any new content, plus the older content your subscribers would have missed because of the failed charge. There are lots of other contingencies our engineering and QA team feverishly tracked down (they really are awesome) - rest assured we'll do our best to handle things in an elegant manner.
A quick refresher
If you happened to miss the full announcement last month, here's a quick demo video to give you an overview of what all the fuss is about...
This update is the perfect example of just how much we rely on your feedback to drive where we take Campaign Monitor. Feedback via blog comments, tweets and personal emails started rolling in as soon as we launched RSS support, which made it very easy to prioritise and get it out the door as quickly as possible. We're always listening, so please, keep it coming.
- Mar 27, 12
Amongst the moving and shaking that's come with Gmail's 'new look' have been a couple of changes to how this email client handles background colors and images. To some of you this may be old news, but for many it may change the way you design for this notoriously finicky client. So here goes.
Gmail now supports
background-imageAlthough it's but a small victory, it looks like Gmail has expanded its CSS support to encompass the
backgroundandbackground-imageproperties. This means that you can now define background images for elements like table cells and divs, leaving Hotmail, Outlook 2007+ and Lotus Notes as the only major clients that don't support what's a fairly fundamental CSS property. Thankfully, there's a hack for background images in Outlook 2007/2010, so it's up to you to make the call - do you design with background images in mind (and a fallback color)? Or play it safe?Note that
background-positionandbackground-repeatare still not supported - only images, for now.Background colors or images are now a must
With Gmail's new themes (which I have to admit, are very pretty), have been changes to how email newsletters appear in the preview pane. With themes activated, the preview pane is actually semi-transparent, allowing the theme to show through. The only way to fix this is to nest your design in a full-width table, for example
<table width="100%" bgcolor="#FFFFFF" ... >, thus providing an opaque background for your content. Pictured is an example of content inside and outside of a table with a background color, as seen in Gmail's themed inbox.Many thanks to Responsys for their post, 'Workaround for Gmail Background Translucency' and our keen customers who wrote in about background image support. If you've seen any news and notable changes in Gmail, or have your own tip for working with backgrounds, be sure to let us know in the comments below.
- Mar 22, 12
Just last week, our blog post on 'Improving the usability of email subscribe forms on mobile devices' gained quite a bit of interest. But what was particularly gratifying to us was seeing some of its lessons being put into action - by an upcoming Campaign Monitor rebrand, no less!
Cool customer Elliot Ross (of Email Design Review fame) recently took a responsive approach to designing the pre-launch page for Action Rocket, a new email design studio. What makes the page unique is how gracefully it adapts for use on mobile devices (pictured), courtesy of our little form template.
Email form validation with CSS3
Scaling for the small screen aside, this email subscribe form has two features that considerably improve its usability, both of which were achieved by using
input type="email"on the Email: field. First of all, using the attribute,type="email"results in the special, email address-specific keyboard being displayed on iOS devices. But secondly, it means that the:invalidCSS3 pseudo-class can be used to highlight the field if it doesn't validate properly. Here's a sample of the CSS code used:input:invalid, textarea:invalid { background-color: #f0dddd; }In times past, developers have long had to roll-their-own client-side validation using JavaScript, but with CSS3, all it takes is a snippet of code. Find out more about form validation on A List Apart's 'Forward Thinking Form Validation'.
Taking pre-launch pages to the next level
We've previously covered how to build basic pre-launch pages and add social sharing to them. With smart phones becoming increasingly ubiquitous, it makes a lot of sense to go the next step and make the email subscribe forms therein as mobile-friendly as they can be - we've even provided the code to help you get started.
Besides, what's a better way to show clients that you understand responsive design, than to create a responsive site?
Many thanks to Elliot and Action Rocket for sharing this great example with us. If you have a great tip or hack for improving the usability of your forms, be sure to let us know.
- Mar 20, 12
Since we introduced the template builder, our customers have used it to quickly whip up reusable designs with unbelievable gusto. Over 53,000 email templates have been created in the 5 months since we added it to all Campaign Monitor accounts, resulting in enough campaigns to span from here to the Voyager probe. Actually, I just made that one up, but you get the idea.
Sheer quantity of templates aside, the quality of email campaigns that have been built from template builder creations has really blown us away. So much so, that we'd like to share a few of our favorites with you. If these don't inspire you to get cracking on a full-blown design in half the time, then I don't know what will.
Jake Hamilton Music
Designer: MinistryPixel.com
This is a newsletter that won't be ignored. From the vibrant header image featuring the new Jake Hamilton website, to the passionate copy, there's a lot to like about this elegant, stripped-back newsletter. Ups to MinistryPixel.com for this uplifting design.
Antony Hare, P.I.
Designer: Antony Hare, P.I.
Private illustrator, designer and wordsmith Antony Hare has shown that saving time with the template builder doesn't mean cutting corners. Complimenting his work for major publications like the New York Times is this graphic (and oh-so-polite) email update... With just a touch of noir. For more of his charismatic illustrations, swing by his site!
Arkana
Designer: Pixeo
We see a disproportionate amount of great design come from Belgium and the Netherlands; this template from Pixeo and Emeka is a great example of this trend. Featuring a pleasing color scheme and a header image that adds a great dynamism to the one-column design, this is an attractive campaign in any language.
Image & Design Studio / 27Digital
Designer: Image & Design Studio
This newsletter gets our stamp of approval for a couple of reasons. The crisp, 3D-rendered header image, the use of color, the description of what's to come and the funny permission reminder roll together to make a thoroughly personal, fun and engaging campaign. It's official - the teams at Image & Design Studio / 27Digital really know how to leave their mark when it comes to email design!
The Hoopla Family
Designer: The Hoopla Family
Like a modern-day brag book, this 'Pool Room' email by The Hoopla Family contains the best of what this Australian design agency has to offer, or as they say, all killer and no filler. Showcasing the antics of a rather multidisciplinary bunch, it contains images that have been specially created for this newsletter, personable copy and a thick slather of Australiana - from the title (a nod to the classic Australian movie, 'The Castle') to a guest appearance by one of our more flamboyant footballers, Warwick Capper. Overall, this is a template builder original, through and through.
Thank you for checking out our template builder round up - we should do this again, sometime! Hopefully this has given you the inspiration to try your hand at creating a unique template for yourself or your clients. After all, they're automatically optimized for both big and small screens alike and are ready to use in fraction of the time it would take to build a similar template from scratch. So why not kick the tyres by rolling your own template?
- Mar 15, 12
Recently, we were asked for advice on how to make our email subscribe forms more mobile-friendly. The good news is that mobile devices like iPhone and Android handsets generally do a good job of making forms at least remotely usable these days, however there are a couple of things us designers and coders can do to make them as easy-to-use as possible. The obvious benefit to optimizing your forms is that they require less time and effort to fill in on a mobile device. To you, this means higher completion rates and more subscribers.
In this post, we'll cover a couple of pointers, plus feature a simple example you can use as a starting point for your own subscribe forms.
Top-align those labels
A common boo when it comes to using forms on a mobile device are having labels that reside out of sight when a form field is selected in a mobile browser. At the initial zoom-level, a left-aligned label like 'Enter your email address:' may be visible, but as soon as you start entering text, the viewport zooms-in and the label is flung out of sight.
The solution is to either use a top-aligned label, or add the form label as a text-field value. The latter requires less vertical real estate, but can be a little annoying if the field you've just started filling in was initially hidden by the phone's "Form Assistant" or keyboard.
Our subscribe forms come with top-aligned labels by default - which is a good thing.
Use input type="email"
Talking about form assistants, Kevin in the comments made a great suggestion - if you use
input type="email"on the email address form field, a special keyboard will display in iOS devices, featuring commonly used characters like @. David Walsh features a couple of added advantages to this method in his post on HTML5′s “email” and “url” Input Types. Thanks, Kevin!Narrow down your forms (if not the entire site)
We've spent a lot of posts talking about designing responsive layouts for email using CSS, but now we're talking about the web, it's possible to do away with the usual caveats on poor CSS support on Android devices and all that. A grand vista has opened up. We are free.
I'm sure I'm not the only one that takes great pleasure visiting Colly-style responsive sites on a mobile device. The good news is that the same techniques that are applied to sites can be used on individual forms, too. Adding mobile-specific CSS using
@mediaqueries to go narrow-gauge and remove visual clutter can really improve the usability of forms. After all, there's nothing more clunky than having half a text-input field disappear off the screen.Personally, I favor using fluid layouts for mobile devices, simply because you can't predict the viewport's dimensions or orientation. Simply making a text field's width say, 80% of the viewport width can massively improve the appearance and usability of our subscribe forms.
No love for lightboxes
I'm sure there are tasteful email subscribe form lightboxes that have been optimized for use on mobile devices. But 99% of the time, they make sites almost impossible to use on smaller screens. Make sure you test your lightboxes on a mobile device before you use them in this manner.
Be mindful of multi-option fields
While we're talking about narrow layouts, it's prudent to force all content to flow in a single column - particularly checkboxes. When inline form options wrap, things can get all kinds of hairy. Often drop-down lists are a better option over radio buttons and reduce the amount of scrolling required to navigate the form.
Take a stand on scale
Finally, a lot of these tips here haven't been specific to forms - more like web design in general. Included is the idea of setting the initial scale/zoom on a mobile device using a viewport meta tag, especially when building stand-alone forms. When applied, they can prevent the user accidentally zooming in unnecessarily and losing sight of most of the form. Here's what a typical viewport meta tag looks like in the head of an HTML page:
<meta name = "viewport" content = "width = device-width, user-scalable = no" />For a couple of variants on this, check out Mozilla's docs.
Check out our sample form
We decided to collect a couple of these tips and quickly mock up a simple CSS template that you can plonk our 'Basic formatting' subscribe form code into. You can view it in your browser and on your mobile device using this short link: bit.ly/cm-mob-form.
Feel free to repurpose the CSS, play with the
@mediaqueries and use it either as a stand-alone form, or on your pages. Thanks to Buzz for providing a starting-point for this form.Now, I'm a lazy coder and this is far from an exhaustive list of form usability tips.
Can you suggest some more ways to optimize subscribe forms for mobile devices? Share them with us below. - Mar 13, 12
Recently, one of our customers sent in a ream of despair, which essentially amounted to: "If I send a campaign to my entire list at once, my inbox is instantly swamped with bounce notifications and out-of-office replies. What do I do?"
Given that using a no-reply address is an email marketing no-no, it's essential that replies to your campaigns end up in a monitored mailbox. This means pointing the From: and Reply-to: email addresses in your campaigns to a real email address, read by real people. After all, even the most humble announcement can attract important emails, like sales leads, customer feedback and regularly, unsubscribe requests.
Dedicate an email address to replies
Of course, receiving a squillion replies and bounce-backs to your regular work address can be immensely frustrating, especially if they trickle in over a period of hours, or days. So setting up a new, From/Reply-to email address to handle replies (like info@yourdomain.com) is always a good idea. If you're already using Google Apps, this is dead-easy to do yourself - otherwise, ask your tech team for a hand.
Once you've set up an email account, you can set it up in your regular email client and sift away. Note that replies can go to either the From: or Reply-to: address (depending on the recipient's email client), so you can count on bounces, out-of-office replies and more going to either specified address.
Rules rule
Once you've got a unique email address for replies, it's time to separate the wheat from the chaff (or human from robot-generated email). Doing this manually can be a laborious (read: boring) process, so often the best thing to do is to create a folder in your newly-minted email account and siphon all automated 'robot replies' into it, leaving only the important emails in the inbox. This can be done using rules (or filters), which can be created in many of the major email clients, like Gmail, OSX Mail, Outlook and more. For example, you may create rules like...
IF email subject includes:- "Out of office"
- "Out of the office"
- autoreply
- "Delivery Status Notification"
- "message status - undeliverable"
OR email content includes:
- "no longer working at"
- "unattended mailbox"
THEN move the email to my 'Robot Replies' folder.
This isn't a definitive list and ultimately, you'll find yourself adding and refining rule criteria as you go along. Rules can also come in handy for highlighting or flagging important messages, such as those with "unsubscribe" in the subject line.
Make it a morning ritual
The final step is of course, regularly checking your reply address. Back when I was a hand at a marketing agency, we sent multiple campaigns / large email volumes every day and had a dedicated 'reply machine' for dealing with bounces. While with smaller sends you will most probably be able to deal with replies from the comfort of your desktop email client, you may want to take a more distant approach if you're a massive sender (as we were) and simply check in once or twice a day. Make it a routine, cup of coffee in hand, even if its been days after your last send. Sometimes relevant emails get filtered out too, so remember to give your 'Robot Replies' folder a skim before you hit 'Delete All'.
We'd like to know your approach to automated responses - do you have a killer tip for dealing with replies? Let us know in the comments below.
- Mar 06, 12
We're lucky enough to get a constant stream of feedback and feature requests from customers. We record every little piece of it, and this forms a crucial part of how we decide what features to add next to Campaign Monitor.
When we made the call to offer some kind of RSS to Email support, we sat down to review the hundreds of requests, some going back years. Personally, I was expecting everyone to ask for the traditional RSS to Email functionality—you update your site or blog, we send that new content to your subscribers on a recurring basis. To my surprise, this only accounted for around half of the votes. Of course, we still built this feature, which we announced a few days back. It turns out the other half were looking for something else.
Instead of automatically sending your content, many of you wanted an easy way to get that content into your existing newsletters. Nobody likes writing something twice. Maybe you want to include specific blog posts, or it's secondary content like a sidebar of upcoming events you'll be hosting. The important thing is, that content exists somewhere else and you want to use it in a campaign.
If that's you, you're going to love One-Click Content. Here's a quick video of it in action...
How it works
If you caught our recurring RSS announcement last week, you would have seen that we've added a new kind of repeater to our template language. Known as a
datarepeater, it lets you reference an external RSS feed and then display the content any way you see fit.The cool part is, you can actually add
datarepeater's to any regular email templates too. Just point thedatarepeaterto your blog or RSS feed, design how you want the content to appear in the email, and with a single click your content is imported into your campaign and ready to send. You can even have multipledatarepeaterand regularrepeatertags in a single template.Let's say, for example, that you publish a blog called Signal vs. Noise. You occasionally send a newsletter, and would like to include some of your blog content in each issue. Just add the following code to your template...
<datarepeater type="rss" src="http://www.37signals.com/svn/"> <rsstitle/> By <rssauthor/> <rssbody paragraphs="1"></rssbody> <rssitemlink>Read more...</rssitemlink> </datarepeater>In this code we're referencing our blog with the
srcattribute, and then displaying the title of each post, plus the author and the first paragraph of the post itself, followed by a "Read more" link that points to the full post on our site. There are lots of other content options, such as images, enclosures, dates, comments and more, which are all covered in our lovely new documentation. You can even use alternating designs for each item in the feed via ourlayouttag.What you'll see in the editor
Whenever you create a regular campaign and select this template, you'll see this nice blank slate in the editor. You can click the image for a larger version.
Click, Choose, Send
Clicking the the "Load posts" button will show the most recent posts from this RSS feed in the sidebar of the editor. You can also see an instant preview of how this content looks in my campaign.
You can then choose exactly which posts I'd like included, click "Done" and my campaign is good to go. Because of the ubiquity of RSS, there are so many ways you can use this feature. Here are a just a few quick examples of the sort of content you might want to automatically import:
- The last 4 posts from your blog
- Your upcoming events on Eventbrite
- Your 5 most recent tweets
Getting started is easy, and we've put together a sample template to help you get started even faster.
View the RSS template language and download a sample template
Leave your options open
If you're using One-Click Content for a client, we recommend making it crazy simple by specifying the address of their site or RSS feed in the
datarepeatertag. As I mentioned earlier, you do this via thesrcattribute, for example:<datarepeater type="rss" src="http://www.client.com/rss">
If you'd prefer to leave options open for yourself, or a more savvy client, you can leave out the optional
srcattribute. If you leave it blank, we'll let you choose an RSS feed right there in the editor. Here's the code:<datarepeater type="rss">
Because an
srchasn't been provided, clicking on the "Load posts" button will let you enter the web site or RSS feed you'd like the content to come from:As soon as you enter the web site, we'll grab the feed contents and let you select what you'd like included. Again, click the image for a larger version.
We're also working hard on supporting other data formats on top of RSS to open even more possibilities for importing your content into your campaigns. We've got big plans, and more details on this will be coming soon.
- Mar 06, 12
In a little under two weeks, we'll be making a subtle change to the way we handle email authentication in Campaign Monitor. For those of you new to the concept, email authentication tells your subscribers it's OK for our servers to send email on your behalf. It can help you avoid spam filters, and also proves your email isn't a forgery. All good things.
Right now, email authentication is an opt-in kind of thing. It's not on by default, but we've tried to make it as painless as possible to set up. The problem is, it's still pretty painful. For starters, you need to have access to the DNS records for your domain. In many cases that can rule this process out, or at the very least start your eyes glazing over.
The trouble is, this stuff is important. So, we're taking a different approach. Starting Monday, March 26 we'll be turning on email authentication for everyone.
A small change in Outlook
If you've already set up your own authentication, we're not changing a thing. For those of you that haven't, there's one small change that we want you to be aware of. Because we'll be authenticating on your behalf, we add a couple of new details to the header of any emails you send. To the vast majority of your subscribers, this won't change a thing. But, there is a subte change your Outlook subscribers may notice. Here's what they'll see:
It's the extra from address and on behalf of that I highlighted in yellow that's new here. Because we're authenticating for you, we need to include our own domain in your mal headers/ Outlook lets their users know this at the top of the email. It's also worth pointing out we'll only ever use our white label domains when sending on your behalf - there's never any mention of Campaign Monitor. It's also worth adding that this small snippet is something any Outlook user would already have seen at the top of countless emails in the past. We think it's a small price to pay to help avoid spam filters and ensure your email never appears to be a forgery.
Alternate options
If you're not crazy about the "on behalf of" snippet, we've made it nice and easy to opt-out of us authenticating for you. Remember, we won't start this until March 19, so you have some grace time. To change this setting, just head into "Client Settings" and click on the new "Authentication Settings" in the sidebar. Here's what you'll see (click for full-size):
By default, "Authenticate all emails for me" will be checked. If you'd like to opt-out, you have two options...
Set up your own authentication
Authentication is a great thing. If you don't want us to do it for you, we recommend you do it yourself. This is the same approach we've always supported, and it will mean your domains are authenticated and no "on behalf of" text will appear in Outlook or "via" snippet will be shown in Gmail. The only drawback is that you'll need to have access to the domain's DNS settings to complete the process.
Don't authenticate my emails (not recommended)
If you don't have access to your DNS settings and you really don't like the "on behalf of" text in Outlook, you can disable authentication entirely. It's not something we recommend, but it's the easiest way to avoid any Outlook subscribers noticing a change. This is the default for how we've been sending email for you to date, so you won't see any negative impacts, you just won't experience the positive impacts of letting us sign for you.
Update
After further testing, we've confirmed that the "via" text in Gmail isn't impacted by letting us authenticate your email for you. Even if you turn authentication off, the "via" text will still appear for all your Gmail subscribers. This is exactly what they would have see before this update, so nothing is actually changing here for your Gmail subscribers.
The only way to avoid this "via" snippet altogether is to set up your own authentication by following our step-by-step guide to updating your DNS.
- Mar 05, 12
After a few of our customers wrote in recently asking for tips on formatting both text-only campaigns and the text versions of HTML campaigns, we figured it was high time to revisit an oldie, but a goodie - how to make the humble plain-text email look something flash. Given that the app automatically generates a text version whenever you create an HTML email campaign, you can be forgiven for never giving this a second thought. For the die-hards out there that continue to send plain-text emails, formatting can be do-or-die.
But first, a little background. For those who are wondering why text versions are still relevant to HTML email campaigns, it's because we send all HTML messages as multipart. This means that if an email client doesn't know how to display an HTML message, it can conveniently fall back to displaying a provided text version of the campaign. Although most email clients can deal with HTML messages these days, there are those on older phones (notoriously the Blackberry), command-line clients and others on which image-free email is still alive and well. We'll be looking at how we can do our best to look after these subscribers. If you're sending plain-text only, this group is, well, everyone.
Text wrapping vs. adding line breaks
When it comes to formatting plain-text emails, there are two camps - those who add a line break every 60-65 characters to their message, then those who don't. Both have pros and cons, depending on which email client your message is viewed in.
Personally, I find the 60-65 character limit works best in desktop and webmail clients. You can view a few examples here. This is because there is effectively no limit to how wide paragraphs of text can run in most reading windows or preview panes. Paragraphs of text can become very much unreadable after 60 characters or so - traversing from the end of one long line to the beginning of another is just too much visual work for effective scanning.
This rule works well until emails that are formatted in this way are viewed on mobile devices. In iPhone Mail (see pictured), you can see how 65-character line breaks combined with wrapping text results in a very jagged message. It's arguably worse than reading an infinitely long line of text.
What should we use?
It's likely that if you're sending HTML email with a plain-text version containing line breaks, most mobile email clients won't ever have to fall back to viewing it. So it isn't quite time to undo the app's handiwork when it automatically creates a nicely formatted text-version of your HTML campaign. However, if you're sending plain-text campaigns only, then things are a little more complicated. Do you let email clients wrap your message text as they see fit? Or do you add your own line breaks for the benefit of desktop and web clients?
If you've sent a few HTML email campaigns in the past, it's worth having a look at your email client usage reports when deciding which way to go. If you're like us (with nearly 25% of our monthly newsletter subscribers reading it on iOS devices), then it may not be an appealing idea to add your own line breaks. Let your text run (and wrap) free! But in other instances, putting the time into formatting may be worth it. Unless sending HTML email takes your fancy instead, of course.
Do you send plain-text email campaigns? Does formatting matter to you? Let us know in the comments below.
- Feb 28, 12
Today at 10am London time (2am in San Francisco and 9pm in Sydney) the Campaign Monitor network was unavailable to all customers for approximately 50 minutes. Everything is back up and running smoothly now, but we wanted to give everyone an honest explanation of exactly what happened and what we're doing about it.
Here's what happened
First of all, any downtime is inexcusable. We're incredibly sorry for delaying that important campaign of yours or temporarily breaking a link in an email you recently sent.
We have multiple load balancers sitting in front of infrastructure at both our data centres that acts like a cop, directing traffic to the right places internally. We renewed our license key with the vendor that supplies this special hardware recently, and it turns out they made a mistake and gave us a key that expired much earlier than they should have. Because the same key is used at both data centres, this effectively crippled our platform the moment they stopped working.
This means that your account itself was unavailable, along with our tracking system and API for that time period. Which is inexcusable.
Here's what we did
The moment the app went down our operations team were on to it and instantly contacted the vendor. While we would have liked things to move faster at their end, it took some 20 minutes to generate and provide the new keys. The moment we had them in our hands our records were updated and the app was instantly available again.
Here's what we're going to do
It's extremely frustrating that this problem was ultimately due to a trivial error by a vendor we rely on, but we're not going to pass the buck. This one is on us. Our next steps will be to audit all our licensing across all devices that pose this kind of risk in both data centres to ensure this can never happen again.
I also wanted to say a huge thanks for everyone's understanding during the 50 mins or so we were unavailable. While the team was working feverishly to get everything back to normal, I can tell you that it's a big help when you have people letting you know they understand and passing on best wishes. We owe it to you guys to never let a simple thing like this have such an impact again.
-
Tweets
- Thank you, @jessedodds ! @ Sightglass Coffee http://t.co/a3mEu78X
- Wrapping up the night with a ride @ Powell St Cable Car Turnaround http://t.co/HJdViuVd
- Superb meats! Do this! (@ Southpaw BBQ w/ 2 others) http://t.co/VSLuf3ut
- Haven't quite worked out what's a good indie radio station to listen to in SF. Defaulted to @triplej for now. Suggestions?
- Got our first SF home inspection tomorrow night. A little Victorian place near Duboce Triangle. Fingers and toes crossed!
- Fog has been rolling into SF all day, only now it's followed by a helluva wind. Thank goodness I have a pot of chowder, tonight I'm indoors!
- Close to Sandbox Suites, free wifi, good coffee (@ Cumaica Coffee) http://t.co/T0JENc66
- Turns out that Lombard St is on my jogging route...! @ Steepest Hill in San Francisco (tie) http://t.co/oxIVbvPE
- BART station pretty much opens into the store. Amazing! Crazy busy here. (@ Apple Store w/ 8 others) http://t.co/4xwwMtFF
-
Posts
- [Flash 10 is required to watch video.]
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.
- The Tune Hotels.com LCCT
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!
-
Checkins
- zazzle bay to breakersstreets & hills of sf
- Pork Store Cafe1451 Haight St.
- Sightglass Coffee270 7th St
- Powell St Cable Car TurnaroundPowell St
- Southpaw BBQ2170 Mission St
- Cumaica Coffee1398 Mission St
- Apple StoreOne Stockton Street
- Mission StreetMission Street
- Doorhaus2431 Mission St
- Bread and Cocoa199 Sutter St.
- Sandbox Suites567 Sutter St
- Leopold's2400 Polk
- La Taqueria2889 Mission St
- Universal Cafe2814 19th St
- Coit Tower1 Telegraph Hill Blvd
- Sea Lions @ Pier 39PIER 39's West Marina
- T1 International TerminalSydney (Kingsford Smith) Airport (SYD)
- Tilbury Hotel12-18 Nicholson St.
-
Photos
-
Recent Tracks
- Spirit To The Bone by Leader Cheetah
- The Surface by The Aston Shuffle
- Bring It Back by The Aston Shuffle
- I Wanna See You by The Aston Shuffle
- Middle Aged Unicorn on Beach With Sunset by Aleks and the Ramps
- Finish by Aleks and the Ramps
- Here Comes Your Ghost by Aleks and the Ramps
- Bummer by Aleks and the Ramps
- Pray Tell by Aleks and the Ramps
- Friends With the Night by Aleks and the Ramps
Cut CopyHot ChipVampire WeekendThe PresetsBroken Social SceneMGMTSpoonSantigoldNew Young Pony ClubCakeBloc PartyBeckThe StrokesArcade FireCalvin HarrisMuseJunior BoysLCD SoundsystemRadioheadLadyhawkePnauThe ShinsMark RonsonMidnight JuggernautsPhoenixWhoMadeWhoChromeoInterpolDigitalismEmpire of the SunKings of LeonThe Whitest Boy AliveFischerspoonerSimian Mobile DiscoDatarockThe RaptureKlaxonsM83Fujiya & MiyagiMystery JetsKanye WestThe DrumsPassion PitGarbageItalians Do It BetterBeastie BoysHercules And Love AffairVan SheFriendly FiresCornershop- 49 plays
- 41 plays
- 40 plays
- 40 plays
- 38 plays
- 38 plays
- 36 plays
- Weekend Wars by MGMT33 plays
- 31 plays
- 31 plays
- 30 plays
- 30 plays
- 30 plays
- 30 plays
- 29 plays
- 29 plays
- 28 plays
- 28 plays
- 28 plays
- 27 plays
- 27 plays
- 27 plays
- 27 plays
- 27 plays
- Kim & Jessie by M8326 plays
- 26 plays
- 25 plays
- 25 plays
- 25 plays
- 25 plays
- 25 plays
- 24 plays
- 24 plays
- 24 plays
- 24 plays
- 23 plays
- 23 plays
- 23 plays
- 23 plays
- 23 plays
- 23 plays
- 22 plays
- 22 plays
