1. Do iframes work in email?

    By Ros Hodgekiss

    August 17, 2010

    5 Comments

    Questions regarding the use of iframes in email crop up from time to time. Whether it be to do with adding content from a site, or a 'Like' Facebook box, we figured that we'd finally do some thorough tests of our own and put the matter to rest.

    So, what was the verdict? After testing an email with iframes across 24 major web, desktop and mobile clients, we found that the results weren't particularly promising. As iframes can potentially link to shady or plain malicious content (like scripts), a lot of email clients just disable them.

    Here's a breakdown of which email clients display iframes, and which ones do away with them altogether:

    How iframes Perform in HTML Emails
    Client Is Displayed?
    AOL Webmail No
    Gmail No
    Windows Live Hotmail No
    MobileMe No
    Yahoo! Mail No
    AOL 9 No
    Apple Mail 3 / 4 Yes
    Entourage 2008 No
    Lotus Notes 6 / 7 No
    Lotus Notes 8 Yes
    Outlook 2000 Yes
    Outlook Express 6 Yes
    Outlook XP / 2003 / 2007 / 2010 No
    Thunderbird Yes
    Windows Mail Yes
    Blackberry No
    iPhone / iPad Yes
    Symbian S60 Yes
    Windows Mobile 5 No
    Windows Mobile 6 Yes
    Android (default client) Yes
    Android (Gmail client) No

    Our advice: given the notably poor adoption of iframes, we seriously discourage you from using them. Even though this means that you can't add a 'Like' box to your email, there are alternate ways to share your campaign on Facebook that you can consider.

    Leave a comment › Posted in:

  2. Shake the blues by overriding Yahoo! Mail’s default link color

    By Ros Hodgekiss

    August 11, 2010

    2 Comments

    Its been pointed out recently that links in HTML emails have started showing up blue within Yahoo! Mail. This has been documented across a number of blogs and on our forums, alongside solutions to this rendering glitch. Lets go through why this is happening, then two approaches to restoring your links to the color you originally intended.

    How is Yahoo! Mail changing my link colors?

    As pointed out by email genius and cool customer, Brian Thies, Yahoo! Mail is now applying a class called .yshortcuts and surrounding links within HTML emails with <span> tags. The .yshortcuts class makes all impacted links a blue color (#366388, to be exact), which of course, is bad news for your design.

    Yahoo! Mail blue links

    Thankfully, there are two solid solutions which you can use to override Yahoo! Mail's choice of link color. Here's the skinny on both.

    Brian's solution: If you can't beat 'em, style 'em

    Given that Yahoo! Mail is automatically adding a .yshortcuts class and <span> tags, Brian Thies' solution is to simply override Yahoo's ambitions with your own styles. In the <head> section of your code, add the following:

    <style type="text/css">
       div { color: #CCCCCC }
       a { color: #00FF00 }
       .yshortcuts { color: #CCCCCC } /* Body text color */
       .yshortcuts a span { color: #00FF00 } /* Link text color */
    </style>

    Where the colors defined are appropriate to your design. In your body, wrap your body copy and links in a <div> tag or similar, with the class .yshortcuts like so:

    <div class="yshortcuts">If you wish HTML wasn't so darn quirky, <a href="...">click here</a></div>

    This will override any link color styles that Yahoo! Mail applies.

    Smith Harmon's solution: Roll your own span tags

    The second solution posed by Smith Harmon is to surround every link with a <span> tag with inline styles, like so:

    <a href="..." style="color:#808080; text-decoration:none;"><span style="color:#808080;">Link</span></a>

    This also does the trick just fine, however it does result in a bit of repetitive coding.

    Why should I tweak my campaigns, anyway?

    If you hike on over to your email client usage reports in your account, there's a good chance that you might find some good reasons to make your email campaigns display as desired in Yahoo! Mail. As of our most recent stats, Yahoo! Mail accounted for over 14% of email client market share, however this percentage may be more or less, depending on who is on your lists.

    You might also want to consider running your newsletters through our design and spam tests to see how they display in Yahoo! Mail.

    And what's with those blue, dotted links? Can I remove them?

    Yahoo! Mail also has a knack for picking keywords in emails and linking them to advertising popups (look for the blue, dotted links). Unfortunately, there's no known way to disable this behavior, despite it being potentially distracting or confusing to your subscribers.

    Many thanks to Brian for having all the correct answers, as always. Whether you've got 5 or 5,000 Yahoo! Mail subscribers on your list, this is ultimately yet another quirk to add to your HTML email testing checklist.

    Leave a comment › Posted in: ,

  3. Why does Thunderbird think my email is a scam?

    By Ros Hodgekiss

    July 08, 2010

    6 Comments

    We learnt a valuable lesson after sending our most recent monthly newsletter, which we'd like to share. It turns out that our friends using the Mozilla Thunderbird email client had their newsletters prefaced with the alert, "Thunderbird thinks this message might be an email scam." It looked something like this:

    {title}

    Of course, we weren't trying to scam anyone with our monthly dose of email tips and app updates... So what had we done wrong?

    After a bit of tweaking, we discovered that Thunderbird systematically throws up this alert when it sees a URLs in your HTML email copy. This is also an issue that similarly affects Outlook and Entourage email clients, too. In this case, we had made the mistake of adding the following line:

    If you would like to support the National Wildlife Federation in protecting wildlife and their habitats, kindly donate at http://killspill.org/.

    Big boo. Although adding a text link doesn't explicitly set off any spam filters (ie. your email will still get delivered), the alert could potentially be enough to put off some readers. When we changed this line to...

    If you would like to support the National Wildlife Federation in protecting wildlife and their habitats, kindly donate today.

    ...Thunderbird calmed down. Well, that's something we won't repeat.

    Another approach is to append your links with cm_dontconvertlink, as phishing alerts are often thrown when the URL in the email copy doesn't match the URL (<a href="...">) it's linking to. Adding cm_dontconvertlink tells our app to not make your link trackable (ie. leave it alone), so this discrepancy doesn't arise. Here's an example:

    <a href="http://www.myserver.com" cm_dontconvertlink>this is a link</a>

    The obvious downside is that clicks on links like this won't be recorded in your campaign reports.

    The moral of the story is, don't type out URLs in your email copy, or be prepared to turn off tracking if you wish to do so. Otherwise, the bird might just drop some of its thunder on you.

    Leave a comment › Posted in:

  4. Email Standoff: Bands and Musicians

    By Ros Hodgekiss

    July 06, 2010

    0 Comments

    Three emails to promote a similar product or service. Which one will make the cut?

    To kick off our first 'Email Standoff', we've rustled up three email campaigns promoting musicians and bands. Putting their diverse music preferences aside for a moment, Trish from QA & Stephen from Support were asked to briefly describe what they liked about each of the emails. Finally, they reveal which one would get them buying tickets to a gig faster than Ed Van Halen can shake a whammy bar. Here goes!

    Owl City

    {title}

    First up is the wildly inventive email newsletter from pop performer, Owl City, by designer Armistead Booker. I'm all for its' large buttons and an uncomplicated layout, but did our judges like it, too?

    Trish: "I love the retro vibe here, makes me feel cooler just looking at it. Having the tour dates on the side is great, also I like owls."

    Stephen: "This campaign's delicious colour scheme - which reminds me of a warm Summer's evening - is coupled with excellent typography and bold headings... plus let's face it, who can resist cute, cuddly animals, right?"

    "The only things which let it down slightly are a lack of alt tags on their menu icons at the top of the campaign, and a missing border="0" on the 'forward to a friend' image at the base of the email, which will generate a thick blue border around it within some email clients as a result."

    James Vincent McMorrow

    From Owl City's bold imagery, we go to the subdued charm of James Vincent McMorrow by Life Forms Design. The conversational copy gives this email a very personal touch - by the time I reached the simple call to action to 'Pre-order the Album', I was sold.

    Trish: "I guess it looks clean, but not super exciting. It looks like a nice design but I can’t say it makes me want to read that big chunk of text."

    Stephen: "A very clean, subtle and almost melancholy design which is meticulously laid out. You can tell the designer has probably spent quite some time getting everything looking perfect, right down to the last pixel, and it shows."

    "Only criticism would be that the text on my ridiculously large 27" monitor is a little small difficult to read, but the Serif font does compliment the content nevertheless."

    The Lethals

    {title}

    Finally, to wrap up our first Email Standoff with a roar is this bold email newsletter from The Lethals, by Inklab. The imagery just leaps from the page, but did it have our judges leaping to the box office?

    Trish: "Fierce! This gets straight to the point without making me think too hard, which is what I need when I’ve been listening to loud music all day. I like the MYSPACE FACEBOOK TWITTER down the bottom, instead of the usual overused icons which my eye usually just bypasses."

    Stephen: "A very striking, edgy and moody design with great use of imagery to convey the band's style, and it really grabs your attention when it lands in your inbox."

    "Only criticisms here is that the campaign has been coded using divs rather than tables, plus the main 'lion head' and 'forest' images are housed in a single background image, which isn't going to display in Outlook 2007." (Until now. - Ed)

    The verdict

    Trish: "They were all worthy but in the end I have to choose Owl City. The laidback feel and interesting artwork gave me a good idea of their personality as a band, and made me want to find out more."

    Stephen: "My pick here is Owl City's newsletter, as not only does it look great, but it is fairly well-coded, separates content nicely and is easy to read; everything you want in a email really. Good job."

    Like Trish, Owl City did have the most impact on me. The gentle colors, type and simple illustrations just say 'personality'! It's like getting a hand-written letter from a quirky relative.

    The key takeaways here are to cut back on the copy and give your music-related newsletter some life with illustrations and an informal tone. Notice how none of these emails resorted to cliche'd stock social media icons, instead choosing to blend in the Facebook / Twitter / MySpace links with the rest of the email.

    Overall winner: Owl City

    Three emails. Two judges. One product.

    That's the skinny behind our new blog series, 'Email Standoff'. Every so often, we'll round up three designs that promote a similar service or product. We'll discuss what worked, what didn't and explore the diversity of approaches that can go into marketing a single concept!

    Finally, you tell us which email you would most love to see in your inbox and why. Did you agree with our judges? Let us know in the comments below.

    Don't forget that you can find more design inspiration in our gallery.

    Leave a comment › Posted in:

  5. How a cartoonist uses his email newsletter to build his business

    By Mathew Patterson

    June 22, 2010

    0 Comments

    {title}It's easy to see other people and other businesses getting mentions in the big newspapers, on TV or radio or even on popular websites and think "they've got it made".

    What we've found at Campaign Monitor is that mainstream media mentions produce a minuscule amount of actual business compared to word of mouth from our customers.

    So it was interesting to see a recent post at CopyBlogger from cartoonist Hugh MacLeod on much the same theme. Hugh has seen repeatedly that encouraging his subscribers to share the newsletter (and therefore his cartoons) with their friends has an immediate impact on his business.

    But looking back, it occurs to me that none of that “hot PR media action” has moved my business forward nearly as quickly or effectively as this one simple thing:

    My newsletter subscribers telling their friends about my newsletter, and suggesting that they sign up.

    No, really, that’s it. That is the money shot. When that happens, my business grows, end of story.
    -Hugh MacLeod

    Having made that discovery, Hugh then worked to capitalise on the knowledge by making it super easy for subscribers to let other people know about the newsletter, adding a very direct "Hello from Hugh: Please share this link with your friends." sentence in each one. It's a link to page explaining what Hugh is about and encouraging people to sign up.

    How to use Campaign Monitor to encourage your subscribers to spread the word

    In Campaign Monitor you already have a super easy forward to a friend link you can use to let your subscribers send a copy of the email to up to 5 people at once. It only takes a moment to implement and you'll be able to see exactly who used that link, and how many people they forwarded your email to.

    The second part of the process is to consider people who have received your email as a forwarded copy. You might want to add a block specifically for them, something like "Received this from a friend? Find out more and join yourself on our site. Link that to a well thought out sign up page and form, and you'll be on your way.

    Finally, take a look at one of Hugh's blog posts. At the end of the article, even before the comments, is a giant sign-up form with a brief explanation of what the newsletter is about. It's clear how important Hugh considers his list to be.

    Do you put the same level of importance on your newsletter? How could you make it easier to spread the word?

    Leave a comment › Posted in:

Browse the Blog

  1. Behind the Scenes (18)
  2. Interviews & Buzz (124)
  3. New Features & Updates (201)
  4. Observations & Answers (189)
  5. Tips & Resources (368)

Explore the Email Gallery