12/7/2012: We just rolled out some updates to the new editor. Read about them here.

I was kidnapped! All I remember is that one day I was quietly working at my desk in the UX department, and the next I was relocated to a secret office with a small, multidisciplinary team of other chimps. At first, very few people in the company even knew where we had moved to, much less that we were working on the next generation editor for MailChimp. How could anyone know when we were toiling away behind a closed door with paper taped over the glass? Printed on that sheet of paper, though, was a clue.

Code Name: Neapolitan

Like all good covert operations, we had to have a code name. We chose Neapolitan for several reasons. First off, the word comes from the Greek name for Naples (the birthplace of pizza…mmm, pizza), Neapolis, meaning “New City.” Very appropriate for a part of the app where MailChimp users spend the most time. Also, we love ice cream, and Neapolitan ice cream consists of different blocks, layered in a single container. So there you have it, a word with ties to two delicious food items that helps define the design criteria for our new editor:

1. Make the process of building emails better.
2. Provide different types of content blocks for email creators to drop in.
3. Make it simple to edit content, change design, and rearrange content blocks.
4. Update the campaign preview in real time, with every change.
5. All templates created with the new editor have to be mobile friendly, resizing down to fit phone screens in modern email clients that support media queries.

That last requirement was, by far, the biggest challenge. At one point we wanted to abandon mobile resizing, but Ben Chestnut did not approve. In the end, we were glad we stuck it out, because the adaptive templates ended up being our favorite feature.

Digging In

We kept Neapolitan a secret for a while, but over the last couple months, more than a few hints about the new editor were dropped here on the blog. We were originally planning to launch it to a handful of users with version 7.7 but decided instead to let everyone in at once. We’re still tweaking some things and have a long list of features to add over the coming weeks, but we’re excited to finally see people using it.

To give the new editor a try, create a regular MailChimp campaign. When you get to the design step, you’ll see a brand new, brightly colored option on the left:

Once you’ve confirmed that you want to use the new editor, you’ll arrive in the Template Selection tab.

We’re starting with a small number of basic layouts in the new editor, but we’ll be adding more soon. As we’ve experimented with our new editor, we’ve discovered we can replicate many of the best email templates our customers are making, starting with one of these six options.

Dropping in Content

The content tab of the new editor offers 9 different types of content blocks that you can insert into your campaign: Text, Boxed Text, Image Group, Image, Divider, Bottom Caption, Right Caption, Left Caption, and Button. To add one, simply drag it from the right column into the campaign preview on the left.

When you drop in a block, its editor slides in over the right column. Most blocks have editable Content, Style, and Settings options. As you edit the copy, insert images, or configure the design of your blocks in the editor pane, the preview updates instantly. One thing we knew we wanted to improve was the toolbar in the editor. It took up way too much space to use in a flexible sidebar, and the inset, rounded boxes around all the tools were too distracting.

After researching which tools in the editor were used the most, we reordered it a bit, killed off a few tools, and streamlined the look. But we didn’t stop there.

We also set up a toggle in the toolbar to show and hide the second row of icons. Here’s what a typical Text Block editor looks like with the toolbar collapsed.

As with the templates, we have plans to add lots of other content block types. Of the blocks we have so far, my favorite is probably the image group. By default, an image group has 2 images, but let’s say I have 3 images that I want to add to my block. I can just click a button in the editor to add an image, and another placeholder is instantly added to the preview on the left. Now I can start dragging images into it.

I can drag images from my desktop, or even from a browser window directly onto those placeholders. MailChimp will upload them in the background, while you get to work in the interface. Makes things nice and speedy.

Automagic Proportion Correction

As I drop a third image into my block and it starts uploading, I notice a problem…

The kitten mug image is is a little longer than keyboard cat. After it finishes uploading I see a message in the pane on the right telling me that the new editor noticed this too, along with a way to correct it.

Clicking that “Let’s fix it” link brings up a cropping tool set to a ratio that matches the shortest image in the row. No matter how much or how little of the image I select, it’ll line up with the bottom of the other image.

After hitting “Apply,” the sidebar message goes away, the preview updates, and the bottoms of the 2 images line up.

That bit of magic wouldn’t have been possible without the Aviary image editor. Our friends at Aviary helped us make image editing a breeze in MailChimp, and not just for cropping. They’re constantly adding new features and improving old ones. In fact, they recently added a bunch of fonts and a custom color picker to their text tool, making it a lot more powerful and fun. Yarrrr!

Style Points

Once you’ve got your copy and images set in your content block, you’ll probably want to click over and explore the options available in the Style and Settings tabs. As you change things in either of these tabs, they’ll be updated live in the preview. Some blocks, like boxed text, have quite a few options in the Style tab. That’s where a tiny little checkbox at the bottom of the editor comes in handy.

After making the changes shown in the form above, the boxed text block I added looks way more exciting than all the other ones.

…but after checking that magical “Apply to all” box, they all have the same look.

The Design Tab

You may have noticed that the blocks above are sitting on a beige background. If you’re familiar with the old MailChimp editor, you probably know that the place to change the background colors is the tabbed style editor interface. The Design tab in the new editor is streamlined version of that interface. In fact, the main options are the same as most of the top-level sections of the old style editor.

The key difference between the new design tab and the old style editor, though, is that there are no more subtabs. All the options for each section are available on a single page. Also, the changes you make here apply instantly, without a page refresh.

Preview Mode

As you edit your campaign, it’s a good idea to test it out. The preview in the left column of the editor gives a pretty good representation of how your campaign will look on most desktop email clients. If you recall design criteria #5 for project Neapolitan though, all of our content blocks and new templates are designed to adapt on mobile devices. That was one of the reasons why we ditched the old popup preview to build a new preview mode. You’ll find it in the “Preview & Test” dropdown at the top of your campaign.

The new Preview Mode opens up inside your current browser window, filling the entire screen and providing plenty of room to show the mobile and desktop versions of your campaign side by side. You can scroll around, check links, change header info, send tests, and push a test to the MailChimp Mobile app from this simple interface.

Try It Out!

The 7.7 release (along with the new editor) has already been rolled out to all MailChimp users, so log in and give it a whirl! We still have a lot of plans for our formerly top-secret project, but we’re excited about how far Neapolitan has come. Most of all, we can’t wait to see what you do with it.