Home Resources Blog

Blog Post

Making the Most of Your Unsubscribes

Yesterday we highlighted some great tips for welcoming new subscribers to your list, so today we thought we’d look at the flipside. Stefan Pollard just put together some great suggestions for getting the most out of anyone leaving your subscriber list. As you know, Campaign Monitor requires a single-click unsubscribe link to be included in every email you send. On top of this, we also let you set up a confirmation page to redirect the unsubscriber to, and this is where Stefan’s tips shine. He writes… Instead of letting unsubscribers go with just a thank-you note, give them the opportunity to tell you why they’re leaving. You can use that information to sharpen the focus of your e-mail program, redo your template or send schedule, improve personalization, or find other ways to become more valuable to subscribers or customers. We especially liked these 2 suggestions: Include a form giving that gives them an opportunity to let you know why they unsubscribed, such as no longer interested, was sent too frequently, etc. If you have other newsletters on different topics or sent less often, give them the opportunity to subscribe to them instead. Out of any subscribers in your list, it’s the people who are leaving that can offer the best advice on what needs improving.

Blog Post

9 Steps to Better Welcome Emails for New Subscribers

Mark Brownlow recently put together 9 common sense suggestions on ways we can all improve our automated welcome emails we send to new subscribers. As Mark explains… Somebody just felt interested and enthused enough about your products, services or publications to request regular emails from you. This is one of those precious marketing moments. You’ve got the prospect’s attention. You’ve got their interest. You’ve got their permission to send them email. And how do you communicate with them in this glorious, elusive moment? Unfortunately for many of us this is usually a pretty generic and boring confirmation email. Mark’s recommendations range from reminding them how often they’ll hear from you, giving an immediate feedback option and using conversational language. All great ideas. We’ve just updated the suggested text for the welcome emails in Campaign Monitor that embrace most of Mark’s suggestions. There are a few in there that you’ll need to add yourself though, like reminding them of the benefits of subscribing and rewarding them with some kind of treat. Check out the article and make the few simple changes to your welcome emails today.

Blog Post

Free HTML Email Templates

We often get asked by new customers if we have any sample email templates they can check out to get started. We’re psyched to say, of course, we do! These email templates cover everything from a simple announcement email to an email newsletter and much more.   If you’re looking for some further inspiration to get the creative juices flowing, our design gallery has now grown to 100 awesome examples of emails from some of the best-known companies on the planet. Plus, we’ve got a helpful post on the 4 ways email templates make your email marketing better.

Blog Post

Image Based Spam on the Rise

I’ve seen quite a few mentions about the growing problem of image based spam on the web and unfortunately in my inbox of late. I knew image-based spam was getting worse, but this statistic in a recent USA Today article blew me away: Image-based spam accounts for 21% of all spam, compared with just 1% in late 2005. It’s only a matter of time before spam content filters respond by coming down even harder on predominantly image based HTML emails. With the difficulties of coding a consistent design across all email environments, it’s little surprise that some designers are still opting for an image-heavy approach to their emails. With the continued popularity of email clients turning off remote images by default, and the continual tightening of content filtering rules, this just isn’t an option any more. This is another notch in the growing list of reasons why you should avoid heavy use of images in your HTML email designs.

Blog Post

Another Reason to Add a Text Version When You Send HTML Emails

Even when you’re sending a HTML email to your subscribers, it’s always a good idea to include a text version with the email. There are a few benefits to this approach, which I’ll highlight later, but I recently came across a great case study on MarketingSherpa that highlights another reason to always include a text version. As well as the standard preview pane window, Microsoft Outlook also includes an auto-preview feature that displays the first 3 lines of your email. This gives your recipients a chance to preview your email before deciding to open it. Here’s a screenshot of it in action. By default, the auto-preview will display the first few lines of your text email. If you don’t include a text version however, things can start to get ugly. Instead of seeing a nice intro to your email, your recipient will actually see the first few lines of your HTML version. Outlook still strips your HTML tags, so it’s not all bad, but most HTML newsletters begin with standard content like the name and date of the newsletter or “Having trouble viewing this email” kinds of messages. Not the optimal content to encourage your recipients to open your email. When you send a HTML email with Campaign Monitor and don’t include a text version, we still add a text version for you by default with a small message and a link to view your campaign in their web browser. Again, this works great if someone is having problems viewing your email, but not so hot in Outlook’s auto-preview area. Our recommendation Always include a text version of your email even if you’re only sending in HTML format. Try and provide an enticing summary of the contents of your email in the first sentence or two. This, combined with a good subject and a recognizable from name/address should have a big impact on anyone checking out your email using Outlook’s auto-preview feature. Other reasons to embrace a text alternative On top of the auto-preview benefits, sending both HTML and text in a single email means: Those recipients who have their email environment configured to display text only will still be able to read your email. You’re reducing the chances of your email being filtered as SPAM. Many popular spam filters like SpamAssassin will penalize you for not including a text-version. You’ll even lose points if your text version doesn’t contain similar content to your HTML version. Better formatting when your recipients forward your email. Many popular email environments such as Hotmail will display the HTML version of your message, but when you forward the email it will actually default to the text-version of the campaign instead of garbling the original HTML message. There you have it. A text alternative to your HTML email should increase the chances of your email being delivered AND being opened. Who can argue with that?

Blog Post

How to Create a Subscription Confirmation Email

The content below has been updated to reflect the current process. I recently helped a customer with a problem that we’ve heard a few times before, so I figured I might post the answer here as well. Here’s the question: “Many of my e-mail addresses have come from a store website (that I will continue to use) that has a simple single opt-in e-mail signup process. As I convert to Campaign Monitor, I want to move to a complete double opt-in process. I would also like to put my current list through a second round of opt-in. Is there a way with Campaign Monitor that I can import a list and then send an e-mail that gives the recipient a link to confirm their subscription to the list as well as unsubscribe if they no longer want to get messages from our store?” Because this technique is often used for older lists that haven’t been engaged with in a while, you should first make sure you have proper permission to contact the recipients. As we state in our anti-spam policy, you can not use Campaign Monitor to email any subscriber you haven’t contacted in the last year. Once you’ve verified that you have permission to contact the subscriber, choose the “Reconfirm a list” option within Campaign Monitor to create a one-click confirmation email. This will make it easy for your subscribers to stay engaged. There you have it! Give subscribers a few weeks to confirm their subscription. Moving forward, you should only send email to the new, confirmed list.

Blog Post

A CSS Solution to Image Blocking

I’ve written a couple articles about using web-standards markup in HTML emails and am even speaking on the topic at an upcoming conference. But one area which I’ve failed to address is image replacement. I have found, read and learned from a handful of good articles/tutorials on the web about this topic. However, I believe they are missing some key components in their construct. And that’s what I will illustrate herein. I approach website markup with a set of techniques which I believe offer the best possible experience for everyone: smart, fundamental markup for those with outdated, graphical browsing devices; appropriate visual-design for those with standards-based, graphical browsing devices; and absolute content accessibility for those with slow connections, non-graphical browsing devices and screen readers. With that said, an area where I admittedly fall down is image replacement. Seeing one’s own design render with CSS on and images off is quite painful when the markup is standards based and all core-design images are CSS backgrounds. Moreover, accessibility is achieved only through a game of hide-and-seek. But there are some magicians from whom we can learn to overcome this. Standing on the Shoulders of Giants Dave Shea posted the most comprehensive study I’ve seen on image replacement. This is where I discovered what I feel is the best technique for preparing HTML markup for the CSS on, images off scenario. His technique sparked the realization that any inline element could be absolute positioned to commandeer the aforementioned scenario. So the techniques I’ll outline herein aren’t a significant evolution of Dave’s technique; they simply buff out a few scratches. They will also exhibit how one might use his image-replacement technique to tightly interweave images with their surrounding elements. With that, let’s look at the techniques I used in an email I recently designed and built for Digital Web Magazine. Image Replacement for Part of a Title Before I construct a website or HTML email I carefully read the content to decide how to semantically mark it up. I consider how it will look and read with no presentation layer. The title of Digital Web’s eNewsletter reads fluently as a single phrase: “Digital Web Magazine Updates Mailing List.” But there is a logo to consider, which is part of that title. I used a single h1 to mark up the title. Then I used a presentation layer to pull out the logo from the rest of the title. The results are as follows: [CSS on, images on] [CSS off, images off] [CSS on, images off] Using Dave’s technique, I created a container for the HTML text (in this case an h1) and added a single, unobtrusive span to house the image and to position it over the text: <h1><a href="http://www.digital-web.com/" title="Digital Web Magazine"><span></span>Digital Web Magazine</a> Updates Mailing List: February 26, 2006</h1> The CSS behind the presentation looks like this: h1 { width: 186px; height: 42px; position: relative; } h1 a { position: relative; width: 186px; height: 42px; } h1 a span { position: absolute; top: 0px; left: 0px; width: 186px; height: 42px; background: url("https://www.campaignmonitor.com/assets/uploads/Logo.gif") no-repeat; } But I needed to position the latter part of the title so that it is not inadvertently masked by the logo. So I increased the total width of the h1, right-aligned the text, positioned the a tag to the left side of the h1 container and left-aligned the HTML text in the a tag which was to be hidden: h1 { width: 540px; height: 42px; text-align: right; position: relative; } h1 a { position: absolute; top: 0px; left: 0px; width: 186px; height: 42px; text-align: left; } All done, right? Almost. Something that Dave’s technique doesn’t account for is increased font sizes. This technique places an image on top of HTML text that’s technically still displayed on the page. So when the font size increases, the HTML text pops out from behind the image. Remember that I was considering a scenario wherein CSS is still on, so I could safely bring down the size of that text so it would be well hidden even with increased font sizes. I also added a little padding to the a tag to increase my breathing room: h1 { width: 540px; height: 42px; text-align: right; font-size: 12px; line-height: 13px; position: relative; } h1 a { position: absolute; top: 0px; left: 0px; width: 186px; height: 42px; padding-top: 23px; text-align: left; } With CSS on and images off the final result was a success, albeit less than satisfying from a visual-design perspective. This is because the hidden HTML text wasn’t formatted with the other content. If I was going to make this work with CSS on and images off, I wanted to go the full nine yards. So I added some color formatting to tie up the loose end: h1 { width: 540px; height: 42px; text-align: right; font-size: 12px; line-height: 13px; color: #999; background: #fff; position: relative; } With that, I had accounted for the presence and absence of graphics and CSS, and also for varying font sizes. Sweet! Relative/Absolute Positioning “What,” you ask, “is relative/absolute positioning?” Oh, it’s something really cool. And I found myself in a scenario that very much warranted use of this technique. I needed to break a single phrase into two lines as such: Powered by Campaign Monitor But I needed to mask the text on the second line with a logo without inadvertently masking the first line: With a simple evolution I could account for varying font sizes, which would otherwise destroy absolute positioning in this scenario. I started with the baseline setup (an h4 container with the extra span tag): <h4 class="Powered">Powered by <a href="https://www.campaignmonitor.com/" title="Campaign Monitor"><span></span>Campaign Monitor</a></h4> But this time I had to consider that the HTML text preceding the image could vary in size. So absolute positioning from the top would fail. Unless I used a relative increment. The following worked out great: h4 { position: relative; } h4 a { position: absolute; top: 1.5em; left: 0px; width: 121px; height: 15px; } h4 a span { position: absolute; top: 0px; left: 0px; width: 121px; height: 15px; background: url("https://www.campaignmonitor.com/assets/uploads/LogoCM.gif") no-repeat; } The key in this technique is the relative value of 1.5em for the top property in the positioning of the a tag. It is absolute positioned, relative to the font size. So the a container (and the image/text therein) will always reside a distance of one half of the height of the em size from the top of the parent container. This accounts for varying font sizes and adds a little padding between the preceding text and the image. Viola. Browser and Email-Client Rendering Aside from Yahoo Mail, most common email clients performed quite well using the aforementioned techniques. And all common web browsers also performed well. Following is a list of browsers and clients used in my tests: Email clients: AOL (webmail) EMail (Zaurus handheld) Eudora 6.2 (OS X, Win/XP) Gmail (webmail) Hotmail (webmail) .Mac (webmail) Mail 2.1 (OS X) Mozilla Thunderbird 1.5 (Linux, OS X, Win/XP) Outlook 2002 (Win/XP) VersaMail (Palm OS) Yahoo Mail (webmail) Web browsers: Blazer (Palm OS) Firefox 1.5 (OS X, Win/XP) IE 5.2 (OS X) IE 5.5/6.0 (Win/XP) Netscape 7.0 (OS X) Netscape 7.1 (Win/XP) OmniWeb 5.1 (OS X) Opera 7.0/8.0 (OS X, Win/XP) Safari 2.0 (OS X) The email clients with solid CSS rendering (Mail, Thunderbird, Outlook, etc.) properly rendered everything with images on and off. Those with poor CSS rendering (Hotmail, Gmail, etc.) displayed the masked text since they don’t display CSS background-images anyway. And the text-only clients successfully displayed the unformatted text. The only problematic email client is Yahoo Mail. This is because (as noted in my previous articles) Yahoo Mail replaces the property position with xposition,” which renders any positioning—and consequently the techniques outlined herein—useless. The good news is that it simply eradicates the images and displays the CSS-formatted text. An acceptable degradation in my book. As for web browsers, those with even moderate CSS support properly render pages using this technique. And those set to not display images see the CSS-formatted text. Awesome. So there it is. I hope my minor evolutions to Dave Shea’s technique help the web community with this less than desirable task. Thanks to Dave and the others from his article for their hard work in building such a solid foundation. This article was authored for Campaign Monitor by Mark Wyner of Mark Wyner Design, a small web design studio in Portland, OR, USA.

Blog Post

Check out Amigo

If you’ve ever considered adding a little advertising to your email newsletters but never knew where to start? Amigo, a new product from the team at Carson Systems looks really interesting. Here’s the skinny… “The app works like a matching service. If you are an advertiser you can register with Amigo and find hundreds of newsletters in which to advertise your product. If you are a newsletter owner, your small (but targeted) newsletter could be the perfect ad vehicle for one advertiser who is willing to pay a relatively high price per click to reach your subscribers. It’s a match made in heaven!” Amigo is currently in beta, but if you’re interested you can register for their beta program here. We can definitely see this kind of service coming in handy for smaller newsletter publishers looking at generating a little extra revenue.

Blog Post

Tip: Should You Personalize Your Subject Lines?

Campaign Monitor makes it really easy to personalize the subject of your email with your subscriber’s name and email address. The big question is, should you do it? Here’s some nice research from MediaPost’s Melinda Krueger on some recent tests she performed on this very topic. The results were very positive. So positive in fact that every campaign that had a personalized subject achieved a better open rate and often click-though rate. But before you start personalizing every email you send, she also had these important words of advice: “Beware of forcing personalization. Gratuitous personalization can make you sound like a huckster and detract from your message and your brand. Even though these results are pretty impressive, this client did not use personalized subject lines 100 percent of the time.” Let’s also not forget that the option to even consider personalization depends on the quality of your list. There aren’t many bigger email marketing mistakes than to receive a personalized email with someone else’s name. Our recommendation. If you’re confident in the quality of your subscriber name data then try this for your next campaign. See if there was an improvement in your open and click-through rate and make a judgment call yourself.

Blog Post

Can I Include a Print Stylesheet in My Campaign?

We’ve published a follow-up post with more recent results – view it here. We recently had a few customers approach us about print stylesheet support and whether or not they can include them in their campaigns. We weren’t sure either, so we did some testing to get to the bottom of it once and for all. What is a print stylesheet? Quick background, print stylesheets basically allow you to set a different set of CSS rules when you print the page to the one you see when viewing it on screen. By specifying a print stylesheet for our newsletters, we could ensure when a subscriber prints our email they see a much more print friendly email that might use simpler formatting and even hide some elements of the email itself. The test Because most email environments won’t let us link to an external CSS file, we used the @media rule to specify our print only styles (more on this here). Here’s a quick sample of the code we used: <STYLE type="text/css"> @media print { p.printme { font-size: 10px; color: #f00; } } @media screen { p.printme { font-size: 40px; color: #000} } </STYLE&gt The results Email client @media print { … } media=”print” Apple Mail 4 Yes Yes Outlook Express/2003 Yes Yes Outlook 2007/2010 No No Thunderbird Yes Yes Yahoo! Mail No Yes Gmail No No Windows Live Hotmail Yes No As you can see, the results were quite varied. None of the web-based email environments supported the print-friendly version, but most of the desktop environments did. Ultimately, we can put this down to lack of support for the @media rule. Unfortunately, since none of the web-based environments support the use of the link element for embedding external stylesheets, the @media rule is the only option available. Conclusion From our quick tests it appears that including print styles via the @media rule doesn’t do any harm in email environments that don’t support it (as they are ignored completely). If you’re sending an email like an invitation with specific details or any other kind of email your recipients are likely to print, you may want to consider adding a few print specific styles if it will make your email easier to read. If any of you guys have had other experiences with print stylesheets and have anything to share, I’d love to hear it.

Blog Post

HTML Emails – Taming the Beast!

I recently put together an article on email design for the awesome web design resource Vitamin. This was a combination of ideas I’ve covered in previous articles in this blog and some new recommendations to boot. Check it out and while you’re at it be sure to take a peek at the top notch content on the rest of the site.

Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free