Blog: New Features & Updates

Our passion at Campaign Monitor has always been about making a designer's job easier. This happens in a variety of ways, from our research and advocacy right through to the features we add to our software. While these efforts have come in handy for a lot of you, the truth is, building a great looking and rock-solid email is still incredibly hard. Limited CSS support combined with such a broad range of email clients means that designing an email campaign for a client can actually be an order of magnitude harder than building them a simple web site.

We think that sucks. So we did something about it.

Today, we're excited to unveil a new and super-fast way to roll out simple, beautiful and most importantly, reliable email templates for you and your clients. Here's a quick video tour to show you some of the key features.

Music by Voltaire Twins, Animalia (if you dig it, you can grab a free copy for a limited time).

Choose a layout

Whenever you add a new template to your account, you'll now have the option to import your own custom template (like we've always supported), or use our new template builder. If you go for the template builder option, we'll present you with four simple template layouts to choose from.

Pick a color scheme

After choosing a layout, you'll be able to customize your design and see a live preview as you do it. To give you a head start, we've provided a range of simple color schemes so you can match the template with your (or your client's) brand.

Customize with your own colours and images

You can easily tweak the color of any element in your email, customize the footer, add social sharing links and even upload your own header image to suit.

Save and it's ready to use

When you'e done building, save the template and it will be available for you and your client's to use in our new editor. You can also jump back in and make further design tweaks whenever you like.

In a few quick minutes you'll end up with a great looking email design that will display reliably in every email client out there.

Not available for your clients

It's important to mention that the new template builder will only be available to admin account holders, and won't be available to any of your clients. We built this tool for designers who want a quick way to build a basic template for their clients. It's a nice compliment to the total flexibility of building your own templates, but will never be a replacement for it.

We also see this feature as a perfect way for getting clients who don't have big template design budgets up and running quickly. In a few minutes you can grant them client access, build them some simple templates and they'll be ready to start sending.

Export for further tweaking

We also consider the template builder an awesome starting point for more complex email designs. We've worked hard and poured everything we know about email coding into these templates to make them as bulletproof as possible.

Because of this, you can create a basic design in minutes, then export the design as a fully-coded template with all our know-how built right in. Open it in your favourite editor and customize away before importing as a new and improved template.

Mobile optimized

No matter how you customize these designs, the saved template will be heavily optimized for mobile email clients without any extra work. Columns are resized, text-sizes are tweaked and image dimensions changed so the email looks great on every device. We've got plans to make it easier for you to see how the template will look on a mobile device in an upcoming update, but feel free to test it out and see for yourself.

Update: Our mobile preview feature was just released. You can read all the details here.

Our motivation

With the template builder out the door, there's an important point we wanted to make loud and clear. We keep track of every single feature request we get at Campaign Monitor and we literally have thousands of these ideas that heavily influence the direction we take. The ability for a designer to quickly build a reliable template has been at the top of this list for a long, long time now.

We're lucky to have tens of thousands of incredible designers as customers, and we know that a lot of you are comfortable diving into nested tables and inline CSS. At the same time, there are also many thousands of you that know the web well, but have been lucky enough to never see a table tag in your life. That's who we built this for, and we hope you love it.

Earlier this week we released a big improvement to the snapshot page you use to see what your subscribers have been up to. While the old design focused only on their campaign activity, the new design makes things a lot more personal. Here's how it looks (click the image for a full-size version):

The new snapshot includes a great deal more about each subscriber, but does so in a cleaner and less cluttered design. For each subscriber, we now also show you...

Where they're based

The launch of Worldview earlier this year opened up a new world of geo data on your subscribers. For any subscriber that's opened an email from you, or clicked a link, we'll now show you where they were on a map the last time they interacted with you.

On top of the latest location, we'll also show you where each open, click and share has taken place over time. It's amazing how may of our own subscribers open our emails in lots of different locations.

What they look like

If the data is available, we'll also show you a small photo of your subscriber. While it won't be available for everyone, it's a nice touch that makes for a much more personal experience than just seeing an email address.

If they love you or not

The new snapshot now shows a small chart that illustrates how each subscriber has been interacting with you over time. It's a nice way to spot trends at a glance and see if your subscribers are becoming more or less likely to open your emails, visit your site or share your content with their friends.

Super quick editing

On top of this new data, updating any subscriber's details is now much snappier allowing you to basically edit in place instead of redirecting you off to a different form. It's only a subtle change, but makes for a much nicer experience, especially when you need to update more than one subscriber's details.

The feedback so far on our new editor and template language has been nothing short of phenomenal. We've managed to save a life, cancel travel plans, and caused grown men to dribble. Not bad for week one.

During this time we've also managed to push more than 50 new features, bug fixes and improvements thanks to your feedback. While we've got plenty more in the works, I wanted to highlight some of the more interesting changes we made and also say thanks to everyone for their patience as we rolled these out.

Expandable WYSIWYG editor

While the shift to a vertical split for the editing window makes a lot of sense for letting you see your email as you build it, it also means we had to sacrifice some width of the WYSIWYG editor. This wasn't a problem for most customers, but there are lots of you who send fairly lengthy emails, and the default was too small.

The WYSIWYG editor now automatically adjusts in size based on how much content you're adding for that item. It stays small for most of you, but expands to a large size if you're writing loads of content.

The standard size with little content

The expanded size with lots of content

We'll continue to tweak the sizes and default behaviour to get the perfect balance, but feedback so far has been really positive.

Sticky save button

Now that you can have an unlimited number of items in each repeater and the WYSIWYG editor can expand with lots of content, it's easy for the "Save changes" button to disappear below the fold. To avoid this, we've made the save and cancel buttons sticky.

The buttons stay at the bottom of your editable fields, but as soon as the size of those fields is greater than the height of your screen, we stick the buttons to the bottom of your screen in a layer above the editor so they are always available. This is also great for any clients that might be working on low resolutions. You can resize your window to see this in action.

Delete all items in a repeater to hide it

While this was available in the old editor, it wasn't included in the initial release of the new version, and, well, everyone noticed. Before we added support for the awesome new layout tag, turns out lots of you were adding a range of repeater designs that could be easily deleted from the email if you didn't want use them.

It was a handy hack, and we've updated the new version to work the same way. Now, if you delete all items in a repeater, we'll remove all traces of it and simply show an "Add New" button.

Cleaner copy and paste

One of the more frustrating parts of the old editor was the annoying popup we displayed whenever you guys pasted new content. The idea of this was to clean all unnecessary formatting (such as those from Word docs) before adding it to your email. The problem was it was a horrible three step process.

We turned all of this into a one step, hidden process in the new editor. Whenever you paste new content, we clean it for you automatically and add it to your email. We've since added more smarts to this cleaning process to make sure no unwanted formatting gets through, and the email still looks as intended no matter what a client throws at it.

The only downside to this slicker approach is that we've had to remove the Paste option from the right click menu in the WYSIWYG editor. There are some fairly technical reasons behind this, but there was no way to include this without reverting back to the ugly popup and three step process. Instead, we recommend telling your clients to use the Edit menu in their browser, or a good old keyboard shortcut to paste their content.

Goodbye, IE6

It may come as a surprise to many, but the older editor worked in all browsers all the way down to IE6. Given the UI improvements we wanted to make with the update and the ridiculously small number of customers still using it, we made the call to cut support for the 11 year old browser. Like Microsoft themselves have said, friends don't let friends use IE6. If a client is in the nasty position where they can't update their browser, they can always install Google Chrome frame and the editor will then work nicely for them.

Free templates updated to the new language

Along with a great new design from our newest team member Pete Usborne, our 100+ free email templates have all been updated to the new template language. If you're looking for some inspiration for your next design, or a nice baseline to build from, these templates are the best place to start.

Thanks everyone

The editor update was a big undertaking for us, and it was a huge challenge to build something that would automatically work with the hundreds of thousands of templates you've all imported over the years. While almost everyone had a smooth experience, I wanted to personally thank those that did spot a problem and worked with us to help get to the bottom of it. You guys, along with the crazy hard working members of the CM team, have been amazing.

We've got more updates and improvements coming out for the editor soon, along with some other big new features I think you're going to love.

With the release of our much improved new email editor this morning, I wanted to share the details of our new template language that takes advantage of all the exciting new features. Before I dig into the details though, you'll be pleased to know these changes are much more evolutionary than revolutionary. Much of the language remains unchanged, some has been tweaked and we have a couple of new tags on the block.

To recap last week's announcement, the new editor lets you put anything in a repeater, design multiple layouts within the same repeater and includes a much nicer WYSIWYG editor for your clients to work with. I'll walk through the changes we've made to support this, but you can also jump to the full template language documentation to see it all at once.

One important thing to note is that we've automatically converted all your templates to the updated language for you behind the scenes. There's no need for you to do any extra work, and all of your existing templates will continue to work in the new editor. Of course, if you do spot a problem with one of your existing templates, please let us know and we'll get to the bottom of it for you right away.

Goodbye <$title$> and <$description$>

Now that you can have any combo of elements in a repeater, the old <$title$> and <$description$> tags were a little confusing. These have been replaced with the more generic <singleline> and <multiline> tags. Like their predecessors, singlelines are great for simple text that doesn't need any special formatting like image captions, titles, dates, etc. Multilines expose our new WYSIWYG editor and are for much longer passages of text that might require formatting.

We've also moved towards a more HTML-like opening and closing tag structure. here's how the tags look:

This code would create an editable text input with the default text of "Headline goes here".

This code would create a WYSIWYG field with the default text of "Story goes here".

A cleaner way to handle images

We've done away with the awkward <$imagesrc$> tag and added a simple attribute you can add to any image in your template. Just by including editable="true" in any image, it can be changed by a client. If you want to include a default image, just reference it in the src attribute like any regular image. Here's the code:

As always, the width of the image is required so we can automatically resize an image your clients add if it's larger. You can also provide alt text for any images, which will be used by default when the image is replaced and can be updated easily by your client within the editor.

The all new label attribute

Now that we've thrown out the single title and description limitation, we needed a simple way for you to label each editable field in a template. The new label attribute does just that.

For example <singleline label="Image caption">Describe the photo</singleline> would create an editable single line field with the label "Image caption" and the default text "Describe the photo".

By combining the new label attribute and adding your own default text for all fields, you can set simple guidelines for your clients right in the template code that makes it extremely easy for them to work with. Here's an example for a photography email template that clearly explains what goes where. Just place this code inside a repeater:

This will appear in the editor like so:

Introducing the <layout> tag

This tag is awesome. It's a simple idea, but gives you complete flexibility in the types of template designs you can build. In a nutshell, the <layout> tag lets you build multiple layouts inside a single repeater.

For example, you might want the first item in a repeater to have an image aligned to the right, and in the next item aligned to the left. Or, you might want to have two repeating items that are just simple text, then throw in a gallery of images, then switch back to text again.

This is done by wrapping each alternate design in its own <layout> tag within a <repeater>. Here's an example where the first layout has an image floated right, and the second has it floated left.

Each time your client adds a new item to this repeater, it will simply cycle through the layouts you have set in the template. You can add as many layouts as you like, and each layout can include any combo of elements.

Give each layout a label

You can go one step further with your layouts by throwing in a label attribute. By labelling each layout in the same repeater, we'll show your client a handy drop down each time they add a new item that lets them choose which layout they want to use. Here's the code:

<layout label="New feature">

So, if you don't include a label we just cycle through each layout in the order they appear in your template. Throw in a label and we let your client choose what they want to use and when. It's your call.

Populating a table of contents

Previously, you had to add the toc="true" attribute to a repeater, and we'd just use the title in that repeater to populate a table of contents. Now we've moved away from title tags, you'll need to tell us which <singleline> in a repeater should be used to build your table of contents. This is done with the new repeatertitle="true" attribute.

For example, you have a table of contents set up in your template, and you want the main headline in each repeating item to populate it automatically. Here's how this would look:

In keeping with the HTML-like structure of our template language, the old <$repeatertitle$> tag, which tells us where to place each item in your table of contents layout has been updated to <repeatertitle></repeatertitle>.

This also means you can populate a table of contents from multiple repeaters, which is something we've had a lot of requests for. These will appear in the order they appear in your template code.

Date tags tweaked

For consistency, date tags have also been tweaked by removing the dollar symbol. For example, the old <$currentday$> tag has been simplified to <currentday>. Check the full documentation for examples of all date fields.

Get coding...

To dive straight into the new language, you can check out the full documentation, or get your hands dirty with the sample template below. This is the same template used in last week's video demo, is mobile optimized and includes a lot of the new tags such as layout and label.

Download the sample template (zip file, 688kb)

One of the biggest aims of this update to the editor and template language was to try and make the migration as simple as possible. Hopefully we've struck a balance between giving you all loads more flexibility in how you design templates, whilst still retaining the simple template language to make it all happen.

This is step one of something that we'll continue to evolve, but in the mean time we can't wait for you guys to start importing designs that were never previously possible.

In a few days time we're taking the wrapping paper off a huge upgrade to the Campaign Monitor editor. This update has been months in the making, and is the sum total of thousands of bits of feedback from passionate customers. We're pretty excited about it, but before I dig into all the gory details, here's a video showing some of the highlights.

The first thing you probably noticed is the new vertical split window. Now that you can have an unlimited number of elements in a repeater, we switched to a vertical split so you can still see most of your email when you're adding content. I've been using this version for a couple of weeks now, and it's a huge improvement on the old horizontal split. Now you can see most or all of your email as you add content to it.

On top of the new layout, here are some of the exciting bits.

Put anything in a repeater

By far the biggest request for the editor was more flexible repeaters, and it was the first thing we built into this update. Now you can have a repeater with 6 images, no images, 5 titles, whatever you like. You can also add your own labels for each of these elements so you and your clients know what you're updating.

What this really means for you is total design flexibility. You can now throw any template design at the new editor, and it will still be a piece of cake for your clients to add their content to.

Design multiple layouts within the same repeater

This is probably my favorite new feature for the editor. Let's say you want a repeater where an image is sitting on the right for the first item, but on the left for the second, then back on the right again. Using the new <layout> tag (which I explain below), you can specify any combo of different layouts in the same repeater.

What's more, you can even label each of these different layouts and give your client the option of choosing which one to use and when.

Streamlined WYSIWYG editor

The experience of formatting content was another area we wanted to nail with this update. The first step was simplifying things. We've combined all the different ways to add special items to your content into a single "Insert" button. You can add a link, personalization, social sharing buttons plus lots of other goodies all from a clean menu system.

We've also given your clients the ability to tweak the font size for any content. This was a hard one for us. As designers we think most of this should be defined for our clients in the template itself, but the requests were overwhelming. To keep a balance we've kept the size options within a reasonable range to minimize the chances of client-uglification. We've also cleaned up and streamlined the way text is pasted (goodbye annoying popup), especially from places like Microsoft Word.

Add alt text to any images

Another shortcoming of the old editor meant your clients couldn't add alternate text to any images added to their email content. Image blocking in many email clients makes alt text a valuable fallback when an image isn't loaded and it's now super easy for clients to add or edit the alt text for any images they insert in their email.

On top of some of these larger improvements, we also snuck in a ton of other niceties. Drag and drop is now smoother, we auto generate thumbnails for any templates you add, plus images now upload automatically and appear instantly.

Updated template language

To accommodate some of these great new features, we also made a number of changes to the existing template language. I'll dig into these changes in more detail when the new editor launches this coming Monday, but wanted to mention that your old templates will continue to work.

As part of the launch next week we'll be automatically converting all existing templates to use the updated tags. We'll always be backwards compatible too, so even if you import a template using older tags, we'll convert them for you silently behind the scenes. The changes aren't radical anyway, but rest assured we've been working hard to make sure the transition will be a smooth one.

White label video for your clients

We've also set up a brief, white labeled video demo showing off some of these updates that any reseller can show their clients. We don't mention designer-y stuff like repeaters, but show off the new look and feel and some of the new features. Here's the video if you're looking for a quick way to keep clients in the loop.

All this and more this coming Monday, July 11

We'll be pushing the new editor to all accounts on Sunday at 10am Sydney time (see this in your time zone), so it will be ready to roll for you and your clients first thing Monday. Look out for a new post then with all the details about the updated template language. This update has been a big effort by the Campaign Monitor team, but none of it would have happened without the passionate feedback from all of you. We're always listening, so please keep it coming.

Update: The new editor is now live

The update was a success and the new editor is ready to roll in your account. Get the skinny on the new template language and download a sample template to learn how you can get the most out of this big update.