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.
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.
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.
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
Outlook 2000 – Uses IE6 so no alpha transparency, but background images supported
Apple Mail 3 – Support for both alpha transparency and background images
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.
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.
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.