Browse by...
Home Resources Blog

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

“One of the Best Web Applications I’ve Ever Used”

“I just wanted to say that we’re so impressed with everything about Campaign Monitor. It has to be one of the best web applications I’ve ever used. It’s beautifully designed (people in our office love the reports) and I can tell that a lot of thought and effort has gone into the user experience. It works beautifully. Oh and the support is excellent too! Congratulations. “ Mark Bennett, CABE

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

Update: Unsubscribe Confirmation Page Improvement

We’ve just pushed a much requested improvement to our generic unsubscribe pages live. Whenever a recipient unsubscribes from one of your lists, the confirmation page now includes: The email address that was removed. A re-subscribe link so if the single-click unsubscribe link was clicked accidentally (it’s amazing how many people click it to “see what happens”), the recipient can re-subscribe to the list with a single-click. Of course, you can still use your own unsubscribe confirmation pages to keep the entire process transparent. If you’re keen to implement your own version of the re-subscribe option, check out this tip and this method in our API.

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

New Feature: Segment Your Email Addresses By “Contains”

Since we launched segmentation back in February, the most requested improvement by far was the ability to create a segment based on a wildcard or “contains” condition. We’ve been listening. As of today, you can now use the “contains” and “does not contain” clauses in the email address field to narrow your segments for even more targeted emails. For example, now you can send an email to all your recipient except those at Hotmail or target only those at educational (.edu) addresses.

Blog Post

Introducing MailBuild

You guys might have noticed the posts have been a little thin around here lately. Unfortunately, it’s not because we’ve been surfing in Indonesia. We’ve actually been hard at work on a brand new email marketing application called MailBuild, which is launching some time next month. Just like Campaign Monitor, MailBuild has been built for you guys – web designers and email marketers. But the similarities stop there. We’ve built MailBuild for those clients of yours that want to create their own emails and manage their own subscribers, but still send great looking emails. Here’s a quick screenshot to give you a taste of what’s coming. You can use MailBuild to: Create a separate account for each of your clients – which they can log-in to from your own site. Completely customize the app so it looks like your own tool. Like Campaign Monitor, it’s completely private label. Design great looking templates for your clients or re-use any from our growing gallery. Your clients can use MailBuild to: Create and send awesome looking emails in seconds with no knowledge of HTML – see this in action (1 minute, 6.3MB) Manage their own subscribers – we handle unsubscribes and bounces for them. Check out attractive reports on the results of their campaigns. The best part is, the pricing model will be just like Campaign Monitor, so you can easily charge your clients a marked up rate to use the software. We’ll be officially launching some time in July, but we’re currently accepting applications to join our beta program. If MailBuild sounds like something you’d be interested in, apply for an invite code today. OK, one last screenshot, we couldn’t resist.

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

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free