Campaign Monitor’s Canvas: Email Design Made Easy

Nowadays, everyone is saying you should start your own mailing list — they even make it sound easy. But building up a list with subscribers and actually making a newsletter are two different things, the latter almost being harder than the former. It can be a truly daunting task to create a decent newsletter.

Back in the day, you just needed to make sure your email looked nicely in the most popular email clients, all of which displayed it mostly the same. This meant you could just send yourself a test mail and if it looked good in your inbox, you were assured it would look the same in anyone else’s.

Not anymore. With a large number of your subscribers reading emails only on their mobile or tablet, you’re now confronted with many different screen sizes. This means either owning all of the popular devices (which isn’t necessarily a bad idea, if you can afford it), or finding a provider which has the relevant previews and templates to match them. Making pretty newsletters is one thing, maintaining a unified look on all types of devices is even harder.

Without a lot of experience behind you, coding an email just isn’t something you want to be doing. You can easily screw up the layout, and it can be incredibly difficult to use images (we’ve all received those newsletters in the past where an image location was linked to the sender’s local drive), or make sure everything is lined out properly.

SitePoint newsletters are sent using Campaign Monitor. If you’re subscribed to Versioning you were actually part of a few tests in July. These tested various designs created with Campaign Monitor’s new email template tool called Canvas.

Canvas solves exactly the problems I described above. It’s a visual editor which allows you to select a template, after which you just drag-and-drop the necessary components. Campaign Monitor already has A/B testing built in. SitePoint’s Adam Roberts did an excellent article on this on the Campaign Monitor blog.

Split Testing

Let’s see just how easy it is to make a pretty newsletter that looks great on every device. Campaign Monitor also lets you do your own testing. Setting up a new email campaign starts with the option to run different tests.

Campaign Monitor allows for testing three different angles:

1. Subject line

Subject lines can heavily influence your open rate, and therefore the success of your newsletter campaign. This is the easiest way of testing, and setting up is even easier.

2. From name

Not as beneficial as having a good subject line is using a trusted sender. You could run a few tests with this, choosing different names and email addresses as the sender, just don’t expect major changes in your open rate.

3. Content

If you want your recipients to engage with the content of your newsletter, the most important type of split testing is through varying the content. If you look closely at my screenshot you’ll see you can set up Content A and Content B, indicating the different content pieces.

Using Canvas to modify the template

You can choose from a selection of 12 templates, or import your own. I decided to go with “Slate” because… I like it! For each template the basic layout is roughly the same. The template starts with a combination of pre-defined colors, which you can’t change afterwards.

On the bottom you see a button called “Add layout”. This little button is a very convenient way of adding a professional layout to your newsletter, with all the elements lined up perfectly. You can even choose to include placeholder content to see how it looks.

There are some variations of footers for each template, as well as the default placement of your logo. Great thing is you try each template even without actually building a campaign, so you can play around with it.

What’s perfect about this tool is that you can also use it to see a preview of how a given template will look on mobile, along with more examples for inspiration.

When you start editing you are given a myriad of options to edit your content. On the left you will find various buttons to add text, buttons, divers, spacers and images. You can insert these into your canvas, after which you can drag and drop them anywhere you like. Then you just add your content, logo or actionable button. At the top you’ll find a section to add a summary of your newsletter for your own reference.

There’s also the option to add some coding magic as well, to personalize each message. With some easy snippets (like [firstname,fallback=your content here]) you can add a first and/or last name and email address to your newsletter. You could also add the current day, month and year.

To spice things up even more, you can also use custom fields for adding dynamic content. This way you can build one newsletter for your entire audience, but let the output be decided on the custom fields they filled in when signing up. The custom fields can be anything you like, from gender to shopping interests.

Let’s use SitePoint’s newsletters as an example. They have separate newsletters for Mobile, Design, Ruby and so on. Using dynamic content they could include content of every channel, but only the ones who opted for each specific topic would see the relevant content. You could do this by adding the appropriate tag for each section. You can also use IF / ELSEIF / ElSE statements to display content based on different conditions.

Canvas also allows for easily making an attractive headline including your logo, tagline, summary, or special promotion. Just drop in a text section with a few images or buttons, and you can start grabbing attention right away.

Under the “Customize” tab, you’ll also find settings for the footer of your email. There are quite a few options here. You can add a Tweet, Like or Forward button for easy sharing for example. You can also choose to include a link to update email preferences, as well as a link to the web version of your e-mail. There are fields to enter your company name and address, along with a field to remind subscribers why they are receiving your newsletters (very important to prevent people from unsubscribing, because that link is right underneath it).

In the right-hand corner you’ll find the “Preview” button, which shows you a pop-up with the desktop/tablet and mobile version. The desktop version is actually responsive (hence the /tablet), so you can see how it looks by re-sizing your browser screen. The mobile version stays intact while doing this, which is really clever.

Withing minutes I was able to make a professional looking template (I didn’t change the logo’s sizes by the way). Because of the spacers (which is a great feature) you can make sure it’s all lined up perfectly. If you look closely you’ll see a slight height difference on the third logo. This was done intentionally so you can see how you can edit spacing right up to the pixel.

The mobile template comes out perfectly as well. It’s all properly re-sized and looks very clean. My own site (which is mentioned in the screenshots) is responsive too (visit on mobile) and if you put a bit more time in your email template you can replicate your site’s layout and design. How’s that for a consistent experience?

After you’re done editing version A of your template, you can save it as a new template, allowing you to copy it for your version B (we’re still A/B testing, remember) and modify the content. You can also choose to use a completely different template, that’s up to you of course.

I’ve tested a few A/B testing tools for a previous article. You can take it from me that A/B testing doesn’t get much easier than with Campaign Monitor. You’re also given detailed reports on your tests afterwards.

Conclusion

Campaign Monitor’s Canvas really make it easy to build a responsive newsletter campaign. I am really impressed of how convenient it is to present your content exactly the way you want to. They make it look so easy that you even forget how horrific it was to do this yourself. Up until now I wasn’t a huge fan of making a newsletter because of that difficulty. Other tools offer visual editing too, but I certainly prefer this Canvas method.

The A/B testing feature is a useful addition and the way they have implemented it deserve a great applause. It’s so intuitive that you may actually enjoy testing your different variations.

Overall Campaign Monitor delivered a great tool for building newsletters, and I’d certainly recommend that you give it a try yourself.

Have you given Canvas a go? Do you have any tips or tricks for designing email newsletters?