Dec 7, 2012

Drag and Drop Editor Updates in v7.8

It’s been a busy few weeks since we released our new drag and drop editor. While we were working hard on changes and features, we also paid attention to the tweets, blog comments, and feedback coming in about it. Most of what we’ve heard has been pure excitement (yay!), but we also picked up a bunch of ideas for making it better. Several of those concepts made it into this week’s v7.8 release. Ben already gave a good overview of the v7.8 changes a few days ago, but I thought I’d share more details on our changes to the editor.


New Social Blocks

Our old social block

If you’ve used any of the basic or predesigned templates in our old editor, you’re probably familiar with the image on the right. We considered this standard social block so critical to email campaigns that we even included it in the open source Email Blueprints that we’ve been maintaining on Github. While these blocks are very popular, the old editor doesn’t allow much flexibility. If you wanted to link to other social networks or change their appearance, you were out of luck.

For the new editor, we wanted to make inserting and configuring social links into your emails much easier so we’ve added two new blocks: Social Follow and Social Share.

The Social Follow block is similar to that old social block I showed above but a lot more flexible. It allows you to provide links to social networks where your readers can follow or connect with you. All you have to do is drag the block into your campaign and:

  1. Add the networks you want to include from the content tab.
  2. Set background, border, and font styles in the Style tab.
  3. Configure your layout options on the Settings tab.

 

After a few clicks, I had a social block that looked pretty good with the simple black and white demo campaign I created for this post.

In that old social block I mentioned before, there was a "Forward to Friend" link. When we thought about it, this action didn’t match up with the "Follow on Twitter" and "Friend on Facebook" links it was paired up with. Forwarding an email is a sharing action. Instead of rolling that into the Social Follow block, we created a separate one called Social Share.

The Social Share block allows your readers to share either the archive of your email campaign or a specified URL on a variety of different social networks. Here’s what the content tab looks like in the Social Share block:

 

By default, the links inside the social share blocks are designed to look like the small buttons that are typical for sharing on social media sites.

While these buttons look good on a light background, there’s just too much contrast to use them on the dark gray in my campaign. After a little tweaking in the Style and Settings tabs, they fit in pretty well.

 

Now Available for RSS and A/B Split Campaigns

If you tried to use the drag and drop editor with a non-regular campaign type before, you’ve probably experienced this:

 

Well, you’ll be seeing that disabled option a lot less now. The drag and drop editor now works for new RSS and A/B split campaigns. Also, if you create an RSS campaign with the drag and drop Editor, you’ll also notice two new blocks in the Content tab: RSS Header and RSS Items.

Most RSS feeds contain information about the source site (like a blog title and description) as well as the repeated data for each post (post title, url, date, author, etc.). The new RSS Header block allows you to include information about the feed and the RSS Items block let’s you control what repeated post information to display. We’ve had RSS merge tags to pull in all that feed information ever since we started doing RSS-to-email campaigns, but the new RSS blocks make it a lot easier.

In both new RSS blocks, there are a few presets to choose from.

 

Or you can go completely custom, styling and arranging the merge tags however you like:

If you want to see how all those asterisks and vertical bars will render your blog content, just click Preview & Test, and open up preview mode.

Finally, to make it even easier, we added a couple templates that come pre-filled with RSS Header and RSS Item Blocks. If you’ve created an RSS campaign, just looks for the RSS icons in the corner.

Obsessing Over Tiny Details

You might think that the new Social and RSS blocks took the majority of our time during this release, but that’s definitely not the case. We made a lot of seemingly insignificant changes that (we hope) will make the overall experience a lot better. Here are a few of my favorites:

Code Syntax Highlighting

As someone who writes a lot of HTML and CSS, switching to source view in the MailChimp editor always drove me nuts. Most code editing applications change the color of HTML tags, attributes, and attribute values to make the code easier to read. In our old code editor, all the text was the same color, which made the HTML doubly hard to read in a narrow editor column. We changed the source mode in the drag and drop Editor to use a tool called CodeMirror that does that fancy color changing business and adds line numbers. Let’s take a look at that RSS Items block code again with source view turned on:

Ahh…much better. To all of us code monkeys, at least.

Right-To-Left Text and Native Spell Checking Support

While we were working on the text editor, we made a couple of other minor changes. First off, you’ll notice a couple new buttons in the extended tool set.

Those icons change the text direction to left or right to support languages that are written from right to left. Also, since most browsers now handle spell checking with a right-click, we changed the default right click behavior of the editor so that it uses the browsers context menu instead of the editor’s, which typically only displayed one option—paste.

Note: You can still get to the editor’s proprietary right-click menu by holding down CTRL (or CMD on mac), then right-clicking.

Keyboard Shortcuts

You might think keyboard shortcuts are for nerds and power users, but they can really help speed up the process of creating campaigns. We’ve been adding keyboard shortcuts here and there since we started working on the new editor. We’ve revealed some of those as hints. For example, holding down alt while clicking the delete icon on a block allows you to skip the confirmation dialog:

We decided we couldn’t just keep sticking "hints" like this everywhere so we started a little keyboard shortcut cheat sheet. Just type ? from the new editor to see the list. There’s not much there yet, but now that we have a place to share them, we’ll be adding more.

Color Picker Improvements

The color picker you see in the new editor looks like it did before, but we changed a few things under the hood to make it easier to use.

First off, we improved the actual picker behavior. Before, it was hard to click and drag that little bullseye or the slider bar around. You kinda had to click around which made it hard to get the color you wanted. We also added some logic to make it handle hex colors with no # (which you get when pasting hex codes from Photoshop), multiple #’s, abbreviated hex codes like F00, which gets correctly changed to #FF0000 and even RGB codes like rgb(255,221,0), which becomes #ffdd00.

We have several more ideas in the works to improve color selection and management in your campaigns, but removing some of the frustration from the picker and input box had to happen first.

Fixed-Width Right Panel

When we created the split-pane layout in the new editor, we decided to set each column to a percentage of the window width. By default, these widths were 61.8% on the left and 38.2% for the right column. (Design nerds will know why.) The idea was to give you more space in both columns as you resized your browser window. It was a great idea in theory, but in practice, the right column felt clunky when resizing the window, and looked awkward when it was really wide. Now, the right column starts out at 440px and stays that wide unless you adjust it with the little drag handle at the top.

Smarter Image Dropping

Being able to drag images directly into the image placeholders in your campaign saves a lot of time, but there were some things that frustrated us with it. We found ourselves trying to drag an image onto an existing image to replace it, and…nothing happened. We also tried to drag three images into an image block that had three images and it only uploaded one. Blurgh. We fixed both of those issues.

Image Centering on Top and Bottom Captions

In the blocks that contain images, we always encourage you to upload files that are at least 600px wide.

If you’re using that image in a 30% wide image with caption block, it allows you to keep the same image if you switch to a full-width top or bottom caption. More importantly, it ensures that the image will look good when the columns adjust to 100% in mobile mode.

Sometimes, though, you’re stuck with a smaller image. Before, that image would be stuck to the left side of the block. To fix that, we added an image alignment option in the settings tab of top and bottom captions.

Planning for the Future

As you can tell, we’ve been working hard on improving the new editor, but we’re far from done. We already have a few tricks up our sleeves for the next release, but the one feature that will be our biggest priority is adding the ability to Save as Template. That has been, by far, the most common feature request, but it’s a bigger task than it seems. Campaigns in the new editor are not merely raw HTML but arrays of configuration information for the blocks inside them. Also, allowing the saving of new editor templates means you have to be able to import and export them. It’s a complicated problem, but one that we look forward to tackling.

We’ve also been kicking around ideas for new blocks, ways to better handle merge tags and how to tackle conditional content.  If you’ve been using the new editor, please let us know what you think in the comments, or via our feedback form. We’re listening (in a totally non-creepy sorta way). For now though, it’s time to wrap up this long post and get back to that pesky Save as Template task.

Drag on my friends, drag on.