What I learned redesigning the Campaign Monitor newsletter

Following the recent redesign of our web site and the Campaign Monitor interface, our email newsletter was in desperate need of a visual update. The previous design had served us well for more than 2 years, but it was too disconnected from our new look and feel. Instead of opting for a simple facelift, I decided to go back to the drawing board and look at what we could do differently. After all, how can we justify pimping best practice email design techniques if we aren't following them ourselves.

Before starting the design process, I made the effort to re-read the big pile of design advice we've been handing out on this site for the last 4 years. Turns out we were breaking a number of the recommendations we'd been advocating for so long, and it was time to remedy that. Other techniques might have made sense two years ago, but weren't so relevant today. The entire process was a great learning experience, so I figured it might be valuable to share some of the lessons learned pulling the new design together.

Setting the ground rules for the redesign

As part of the planning process, I made a list of must-have features of the new design. A while back we published a revised list of email design guidelines, which I recommend checking out if you haven't already. Based on this and other findings made over the years, here's the list I ended up with plus some screenshots of how they were met.

1. Must remain readable with images off

Given the fact that most email clients block images by default these days, this one is huge. The previous design still worked well with images disabled, but to take it a step further I moved away from the large image-based header graphic at the top of the email and kept every important bit of information as text. Here's a quick screenshot showing the old header vs the new header with images disabled.

Old header

{title}

New header

{title}

As well as avoiding the unsightly placeholder for the blocked logo, the new design also exposes the contents of the email much earlier. Which leads me to the second rule...

2. Optimize for the preview pane

Many of your recipients won't initially open your email in all its glory. Often they might only see a square of the top few hundred pixels. In many cases, the decision to read your email or relegate it to the trash will be based on that first impression.

To help mitigate this issue, the preheader concept was born. The idea is to include a small snippet of text at the top of your email that summarizes it's content and lures the recipient in. This approach does have its merits, but if your newsletter also has a table of contents at the top, it can mean lots of duplicate content.

Instead, I decided to skip the idea of a preheader and dive straight into the table of contents for that issue. This meant that in the first 150 pixels or so of the newsletter I covered all the main content. My testing showed this key content was now visible in the preview pane of every popular email client I tested, even at a very low resolution.

{title}

Moving the table of contents to the very top meant switching it with the Campaign Monitor logo (which was dramatically simplified). Given the fact that our "email from name" is Campaign Monitor and this text still appears in the preview pane for all email clients, I think the move is justified. Why cloud the good stuff with redundant branding?

I also simplified the "utility links" at the top of the email. Previously this was a number of wordy sentences: "Design look funny? View it in your browser. Not interested any more? Unsubscribe instantly." I figured our readers know what each of these links mean and removed the explanation altogether. Moving the permission reminder further down the email was something I was prepared to try, and the new version didn't see any increase in spam complaints. I think the key was making the unsubscribe link so obvious.

3. Should be easily scannable

People don't have time to read our newsletter. They're designers juggling a hundred things at once, so I better not waste their time. To keep the new design as scannable as possible, I abandoned the 2 column design with secondary content on the right to a cleaner single column design. I also went for a big increase in the font size of each title and improved the contrast of the descriptive text so it was easier to read. Links were also given a more prominent color so they were easier to spot.

{title}

The primary aim of the newsletter is to keep customers in the loop about email design and getting the most out of our software. Product news is secondary, so I went for a different visual style that allows us to make any key features easy to spot, and less important updates were given much less visual weight.

4. Easy in, easy out

As we've explained many times, you need to make it clear how you got permission to email someone and you need to make unsubscribing a no brainer. I went for an unsubscribe link at both the top and bottom of the email, as well as a clear permission reminder dominating the footer of the email and reminding people how they became a subscriber (we have an opt-in checkbox on our signup page).

Combining background images and alpha transparency

Because of the lighting effect in the header image (based on our web site headers), I thought it would be a good time to test alpha transparency on the dividing lines between each item in the table of contents. As you know, PNG alpha transparency isn't supported by earlier versions of Internet Explorer, meaning some older Windows based desktop email clients would be a no go. Not to mention early versions of Lotus Notes and the Word rendering engine in Outlook 2007.

I was pleasantly surprised to find that for those email clients that didn't support alpha transparency, a nice light grey version of the image was used instead, which actually worked well on top of the background image. By using a similar background color on the header area, the alpha transparent PNG's also looked good when images were blocked or the email client didn't support background images (like Outlook 2007). Here's a screenshot of how the header looks across a combination of images being blocked, no support for alpha transparency and no background images.

Outlook 2007 - No support for background images but displayed alpha transparency

{title}

Outlook 2000 - Uses IE6 so no alpha transparency, but background images supported

{title}

Apple Mail 3 - Support for both alpha transparency and background images

{title}

Another quick tip: While Outlook 2007 doesn't support background images per se, our own Travis Bell did find a cheeky hack that let you set a background image for the body in Outlook 2007. Check out his post for the details.

The finished product

Here's a slimmed down screenshot of the design I ended up sending, which you can click for the full version.

{title}

Download your own copy

Just like the email templates in our resource section, we're making this new design freely available. Please feel free to grab yourself a copy, make your own tweaks and use it any way you like. In a single download we've included the original PhotoShop file, the final email I sent, as well as a version with Campaign Monitor template tags that you can import directly as an editable template.


The results

{title}As I mentioned earlier, the entire aim of our monthly newsletter is to keep you guys in the loop about email design and help you get the most out of our software. There are a few ways we can measure this, but one of the simplest is by comparing the click rate of the new design compared to previous issues.

It's been less than a week since the newsletter was sent, but I'm happy to report that the click rate for the new design has already jumped more than 8% over the average of the previous design. If you're interested, it's a cinch to produce a report like this using our compare campaigns feature.

So there you have it. By sticking a little closer to best practice email design we managed to dramatically improve the amount of traffic back to our site. Of course, getting your design right is only one piece of the puzzle, and a nice design is useless without relevant, engaging content. That's a job that's never finished.

Posted by David Greiner

36 Comments

  • Richard Wiggins
    12th February

    That’s a really interesting and useful article. I’m just working on a new template for a client so I’ll try and put those points into practice.

  • Max Power
    12th February

    “I was pleasantly surprised to find that for those email clients that didn’t support alpha transparency, a nice light grey version of the image was used instead,” - huh? Have you got an example of this?

  • David Greiner
    12th February

    @Max, check out the Outlook 2000 screenshot above for an example of this. This is the typical behavior of the IE6 rendering engine when it tries to display a 24 bit PNG image with alpha transparency. Luckily that fallback grey color matched the design well.

  • Wayde Christie
    12th February

    Thanks for this Dave - I’ll definitely be reappropriating some of your ideas for our next newsletter.

    There’s a cross-platform way to get 8-bit PNG transparency using Fireworks. Sitepoint discusses it here: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

    Wonder if that would solve your PNG transparency issue?

  • Wayde Christie
    12th February

    I’ve just realised how great your ‘easy scannability’ approach is too. Just got an email from a company which had a right column - which I completely ignored. Big chunks of content are the go for sure.

  • David Greiner
    12th February

    Nice call on the 8-bit transparency option Wayde, as a PhotoShop user I wasn’t aware of that feature and will have to give it a try in the next issue.

  • Damien Buckley
    12th February

    Nice timing Dave.  I am just about to do a redesign on our newsletter with a simpler less arty tome than the last and this will make life much easier.

  • John Faulds
    12th February

    I notice that you don’t use any heading (hx) tags but instead use p tags scaled up to look like headings instead. Are heading tags a no-no for HTML email? And what’s the reason for wrapping the larger links in two anchor tags?

  • Jayne
    13th February

    Fantastic article…

    The 8-bit PNG trick has saved me on more than one occasion - unfortunately Photoshop refuses to output 8-bit the same way as Fireworks.

  • Brad
    15th February

    Your CSS is not inline in the downloadable sample, but instead linked. Is this right? Or does it get changed to inline when you send it?

  • David Greiner
    15th February

    Hey Brad, when you import your campaign into Campaign Monitor we automatically move your CSS inline, so to make things easier I designed the newsletter with an external style sheet.

  • Nikolai
    20th February

    That newsletter does sure look sweet!

  • Bev Osborne
    28th February

    Great stuff. Have replaced the jpeg logo in my own emails with text now. Also forwarded a link to this article to a client who’s busy sorting out her emailers.

  • AustinJ
    28th February

    Congrats for staying objective and not being too proud of your previous work.  Love everything you did and thanks so much for sharing

  • Angela
    6th March

    Interestingly, I have never read your emails… until this one! The index up front made me notice it and I got hooked! Well done.

  • Julia@Niche
    6th March

    This is a fantastically useful article.  Thanks so much.  You make me geekily giddy with excitement over the ways to push newsletter design to its creative limits.

  • Dustin
    6th March

    The redesign is highly effective and has really engaged me the past two mailings. There are a lot of great things to be learned by this redesign. Thanks for sharing your thoughts and templates!

  • Elder Forest Publishing
    6th March

    Great design ideas; they also make sense for many print-based applications. Thanks Campaign Monitor ... you’re always one step ahead ...

  • Tito Delgado
    6th March

    I have to tell you,  As a master media web designer, I respectfully disagree with so much of what you say in this article.  You are talking about print webdites being more impactful than video.  Read the Forester Report.  TEXT IS DEAD VIieo is what the 16 to 49 year old dem demands.  We deliver over to over 90 million recipients per month.  If our clients sent TEXT based News letters they would be gravely disappointed.  Your experts are way way way off on this report.  Very amatureistic in the design and not even versed in the top echilon technologies used to capture and grow a database.

  • David Greiner
    6th March

    Tito, not sure if I’ve met a “master media web designer” before, but thanks for the comments. You might want to check this out though…

    http://www.campaignmonitor.com/videoinemail/

  • Bobby Prince
    7th March

    With the increased use of mobile mail readers such as the Blackberry and Iphone, it would be useful if you could include the mobile platforms in your testing.

    I think that ttheir increased use supports your view that Video in email is not the way to go.  I also think that for those sitting in a crowded office or on a train, receiving a personal video while someone is looking over your shoulder could have it drawbacks.
    Videos with sound?  Please, imagine the noise as those morning commuters read their emails on their laptops and Blackberrys, on the train at 8am.

  • Bert Meert
    7th March

    David, is the 8% increase you mention the result of an A/B test with the same content?

  • Rob Enslin
    7th March

    Great article David. I particularly enjoy how you’ve spaced the content - so much clearer and easy to read. My only other comment is I’d like to see more of the CM brand poking through. I’m still a firm believer in trust and trust in a brand.

    Result: Job well done.

    Thanks for sharing with us.
    If only: I wish I’d seen your sketches/wireframes before you prototyped it.

  • Sarah Scherdt
    7th March

    Thank you for sharing this great information.  I, too, was sucked in by the “preheader.”  I read every word of the newsletter.  It was worth it.

  • Jeremy
    7th March

    Excellent stuff, thanks for posting the thought process behind it.

  • Joe Dearman
    7th March

    I think it’s worth noting that the new design looks fantastic on the iphone. When I opened the email, I followed one of your links. I rarely do that with graphic emails I get on my iphone. Well done!

  • Amanda O'Brien
    7th March

    Thanks for sharing the behind the scenes look on your new format. It really works. Keep up the good work! Your posts and emails inspire me to be more creative and effective with our email marketing campaigns!

  • Frances Dugan
    7th March

    “Why cloud the good stuff with redundant branding?”

    Amen! I love that you have revitalized the top left area with the real meat of the email. I knew before (and after) opening that this was an email from Campaign Monitor - I don’t need a large logo to tell me that. Well done!

  • Jason James
    7th March

    I’m glad you wrote this article. I liked this design so much I wanted to know exactly what you explained here. Before this newsletter was sent out I emailed support asking about this very process!
    Thanks ! This helps a lot!!

  • Shannon
    7th March

    david: great job again.  thanks for all the tips.

    tito: tried to jump on your site, but you coded it wrong.  figured it out, but as a master, just wanted you to know.  :)

  • Gurpreet
    7th March

    Nice post man. I really liked the idea of including ‘this issue’ in the header itself.
    Gurpreet

  • Rachel
    9th March

    I think it’s a great design.  I rarely follow links in newsletters, but I’m here.

  • David Greiner
    9th March

    @Bert No, this result wasn’t garnered from an A/B test, it was a mere comparison to the average click rate of all campaigns sent using the previous design. So, give that as much weight as you think it deserves. I can also confirm that the latest issue sent last week maintained these higher click rates.

  • Rob
    23rd March

    Its a beautiful thing dude. Isnt it incredible what a difference good design, or just design for that matter can make - a lesson for those corporates that think its not worth investing in. As a designer working in a corporate I feel this.

  • matthew w
    4th April

    In the newsletter you sent, your list of contents up top didn’t exactly match the content below. Is there a way to control what’s modify what’s included in a table of contents? (beyond choosing one repeater over another)

    The design is great. I’m reworking it for myself right now.

  • Robert Morrow
    29th April

    That is what I like about you guys… always forward thinking. Keep up the great work!

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

Create an account