Marketo has released another very interesting take on WYSIWYG: Email Editor 2.0.
With this gallery- and module-enabled interface, life becomes easier for the boots-on-the-ground marketer.
Though, just like with Guided Landing Pages, our developers will need to rethink their templates and include some important elements.
What’s new and cool?
Template Gallery replaces the “New Email” modal and gives you the ability to navigate Template thumbnails and preview in Desktop or Mobile formats. There are also 17 “Starter Templates” from Marketo that can be used for emails immediately or copied into your instance’s Design Studio for customization and future use.
Modules enable moving content within your emails to change order, hide and add more sections. We are only allowed to use one Container to store Modules in, but let’s talk about that more later.
All new editable elements and variables gives Developers more control over what the End User can edit and gives them more tools to get it in….
Save As Template is just a click away when editing an email. This stores your module order, tokens and other updates so the average Marketer can create their own version of a Template without calling on Developers.
Updating & Building Templates for 2.0
With all the shiny new features, we need to think about how the end user works and what kind of content they will need to add. Here’s how to get started:
1. Build a responsive email template. Make sure you are using a clear <table> structure with defined content sections as <table> or <tr> within the parent. You still get all the features if it’s just scalable or fluid, but why spend the time? The one I am working with looks like this:
2. Test it in all clients. Since we are going to add a bunch of custom Marketo variables and functions that browsers do not understand, I always like to make sure templates render right beforehand using Litmus.
3. Decide where Container needs to be, inject Modules and hide them if you want. AContainer is used to hold multiple Modules and allows the Editor to reorder or remove the Modules within it. Our template has one <table> with each section in a <tr> so our Container & first two Module <tr> look something like this:
<table class=”mktoContainer” id=”mainContent” mktoName=”container” width=”100%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”!{bgColor}” style=”padding: 0; margin: 0;”><tr class=”mktoModule” id=”onecolumn1″ mktoname=”onecolumn1″></tr>
<tr class=”mktoModule” id=”threeColumn” mktoname=”threeColumn”></tr>
4. Start Adding Elements. This is where most of the work goes in. Go through each section and discover how the end user should/ wants to fill in content. Do you want marketers writing HTML or just type in the box?
I suggest starting with Tokens, replace colors, fonts, etc. with a find & replace. Start by creating your <meta> in the <head> then cmd+f…
String Tokens can be used for CTA Buttons, as link urls or the text itself. In our example, the button text is “Read Me” across the template, though the link is unique for each button.
<meta class=”mktoString” id=”ctaCol1” mktoname=”CTA Column 1″ default=”http://www.gutenberg.org/cache/epub/4650/pg4650.txt” />
<meta class=”mktoString” id=”ctaText” mktoname=”CTA Button Text” default=”Read Me” />
<a href=”!{ctaCol1}” style=”font-weight: normal; color:#FFFFFF; text-decoration: none;”>
!{ctaText}</a>
5. Decide if you need Color & Number variables. Since every section has it’s own bg and style attribute, using variables makes it easy for the Editing User to make global changes.
Color variable for head:
<meta class=”mktoColor” id=”headerBand” mktoname=”Header Band Color” default=”#333333″ />
Number variable for Height Spacers:
<meta class=”mktoNumber” id=”spacerheight” mktoname=”Spacer Height” default=”40″ min=”10″ max=”80″ units=”px” step=”1″ />
Lets say you have a Header section, like the one below:
Start defining your non-module sections with editable elements.
Users need to replace the Logo image, but never the link so I used a mktoImg class in a <img>, set a default image with src and wrapped everything in my ‘hard-coded’ link url.
<a href=”http://www.leadmd.com” style=”color:${headerBand};”>
<img src=”http://our.leadmd.com/rs/822-QHK-923/images/LMD_Logo_White-w-Green-Leaf.png” class=”mktoImg” id=”logoImg” border=”0″ alt=”LeadMD” width=”160″ height=”90″ mktoname=”Logo Image” />
</a>
Social icons are similar, they don’t really change unless we want to remove them for a send. The mktoText class works similarly to mktoEditable and displays a Rich Text editor for the end user.
<div id=”socialIcons” mktoname=”socialIcons” class=”mktoText” align=”center” style=”height:30px; width:150px; ” >
<a title=”Facebook” href=”#”img src=”#” alt=”” width=”30″ height=”30″ border=”0″ style=”padding-left: 4px;” /></a>
<a title=”Twitter” href=”#”><img src=”#” alt=”” width=”30″ height=”30″ border=”0″ style=”padding-left: 4px;” /></a>
<a title=”Linkedin” href=”#”><img src=”#” alt=”” width=”30″ height=”30″ border=”0″ style=”padding-left: 4px;” /></a>
</div>
5. Decide how Modules are used & Methods for editing. Since Modules can be duplicated, but their Variables are global we need to think about what the Editing User will do. Some training will be needed here as we can’t prevent this action by the User.
Our 3 Column Section uses Variables for the CTA Links in the Header, Image & Button of each Column to ensure consistency of links. If the Editing User wants to duplicate the section, both Left Columns would have the same CTA Link. You could build the Variable into an editable area and allow the Editing User to add their own link. Instead of adding an image as we did above, use a <div> with mktoImg class like this.
<div class=”mktoImg img_scale” id=”columnImg_3-3″ mktoname=”3/3 Column Image” border=”0″ align=”middle”>
<a href=”${ctaCol3}”>
<img src=”http://placehold.it/160×110″ alt=”LeadMD” width=”160″ height=”110″ border=”0″ />
</a>
</div>
6. Check your syntax again & Validate in Marketo. The new Editor is a bit more picky than before and does not display in Preview if there is any ‘broken’ code. You can check standard HTML syntax with a validation tool but beware, all the Marketo attributes will log errors. Also, don’t forget, Marketo classes cannot be nested this means you can’t put an mktoImg inside an mktoText. Luckily, Marketo’s built in validator will alert on these items.
7. Create an email from the Template and make edits. Once I had my template built out, I needed to create a few emails based on it to ensure everything worked as intended. It also helped me understand how everything was working together and what would happen if…
8. Test send your email and do it again.
I strongly suggest reading through Marketo’s syntax guide before really diving in as there are specific requirements for each element and email structure.
Summary
This is a long awaited update that is actually what I was hoping for. There are some elements that could use work, such as the bulky UI and consistent load errors when navigating to a re-approve template. But this tool really does everything it had promised.
Link to post: What #MKTGnation Needs to Know About Marketo Email Editor 2.0 | LeadMD | Authored by: Max Suckle
2 Comments
.png)