How to create a subscription confirmation email

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?”

First things first, make sure you have permission to contact the recipients in the first place - since this technique is often used on older lists that haven’t been sent to in a while. As we state in our anti-spam policy, permission doesn’t age well and you can’t use Campaign Monitor to email anyone you haven’t contacted in the last 2 years.

You’ve got permission, what’s next?

  1. Create a new list. From this we can build a link that when clicked, will add the subscriber to this new list.
  2. Grab the subscribe form URL, which you can find by going to the ‘Create a subscribe form’ option in your list and locating the URL in the supplied code. This URL will form the base of our link.  It should look something like http://clientname..com/.aspx/s/1234/.
  3. Add the recipient’s name and email address to the URL. To do this we add them as parameters to the URL. For the email address, we use the email address field name in the subscribe form code, such as cm-1234-1234. So, the full URL will be: http://clientname..com/.aspx/s/1234/?cm-1234-1234=[email]&name=[fullname, fallback=”“]

That’s it, we’re done. By adding that link to your subscription confirmation email, the variables will automatically get replaced with the values in your list that your sending to. Give the recipients a couple of weeks to confirm their subscription, then moving forward you should only send to the new confirmed list.

And don’t forget you can test this by previewing your campaign in Step 4.1 when you’re creating a new campaign.

Update: A newer version of this process can be found in our FAQ.

Read this post Posted by Ben Richardson

“One of those rare and perfect web apps”

"I'm blown away by your service. Campaign Monitor is one of those rare and perfect web apps. I've used Constant Contact for clients, and it was so painful that I cringed every time I logged into it. I just ran my first campaign -- I had a last minute, time-sensitive campaign need and I managed to design, test, re-test, consolidate our opt-in lists, customize our subscription form, and mail it out in half a day."

"I'm addicted to your reporting and your fast, intuitive interface. I've learned so much about how people respond to email campaigns from this. I am confident my future campaigns will be even more meaningful and useful to my subscribers. Many thanks for making such a useful and user-friendly service."

Rebecca Taylor, Founder - Velo la Source Cycling Adventures

Read this post Posted by David Greiner

Gallery: Fantesca Spring Newsletter

See the complete email designThis great seasonal email newsletter from California based Fantesca Spring Estate and Winery was sent using Campaign Monitor recently.

The design follows the classic 2 column approach to an email newsletter dividing the main stories of interest from supplementary content like events and other promotions. The newsletter copy also has a great personal tone to it and is full of great content for their wine loving customers.

Designer:  Tom Carmony  |  See the complete design

Read this post Posted by David Greiner - 1 Comment

Gallery: About.com Interactive Report

See the complete email designWe liked this report style email from About.com discussing the recent action on the site and other trends their recipients might be interested in.

This design is the perfect candidate for adopting Mark Wyner’s awesome technique to display a nicely formatted text-based headline when images are disabled - replaced with the image based version if images are switched on.

The best of both worlds.

Designer:  Katie Schmidt  |  See the complete design

Read this post Posted by David Greiner - 1 Comment

“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

Read this post Posted by David Greiner

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:

  1. smart, fundamental markup for those with outdated, graphical browsing devices;
  2. appropriate visual-design for those with standards-based, graphical browsing devices;
  3. 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:

[screen shot with CSS on, images on]
[CSS on, images on]

[screen shot with CSS off, images off]
[CSS off, images off]

[screen shot with CSS on, 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("img/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:

[screen shot of two-line phrase with logo graphic]

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="http://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("img/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.

Read this post Posted by Administrator - 21 Comments

Gallery: Creative Entrepreneurs Club Announcement

See the complete email designToday we’re featuring a nice example an email announcement for the launch of the Glasgow based Creative Entrepreneurs Club.

We especially liked the footer content that gives every recipient an explanation about how the CEC got their details and why they’re contacting them. This is often the missing but all-important ingredient in a lot of emails I see these days.

That single line can remind the recipient when they provided their details and go a long way towards reducing the chance of spam complaints if you haven’t send to those subscribers in a while.

Designer:  David Kelly  |  See the complete design

Read this post Posted by David Greiner
  1. 1
  2. 2

Sign up for free.
Then send campaigns for as little as $9/month

Create an account