Preplanning for Marketo Templates: 5 Things to Think About Other Than Design

People often assume it’s just as easy to create and edit email and landing page templates as it is an HTML web page. Spoiler alert: It isn’t.

If you spend any time building templates in Marketo, or trying to make changes to the templates you’ve been given, you already know this. (And if you don’t, my colleague Lori Mann recently wrote a great blog post talking about the major differences between email and web design.)

I spend a large part of my time building templates for our clients. Many of them have extremely talented web designers in house. They’ll provide beautiful mockups, with very specific instructions regarding spacing, padding, margins, and style. All of which would look amazing in HTML…but may have elements that simply can’t be coded in an email.

Designers want a clean, eye-catching, and on-brand template. End users need to be able to easily work with the templates in order to get campaigns out the door. So, how do you code in a way that makes everybody happy?

It is possible. Before you start coding, consider the following five things to help ensure your templates will work for everyone:

1. Who are your users?

First, take an inventory of the people who will be building your campaigns. What are their comfort levels with coding? Should they only have the option of entering values into a field using variables? Can they only work in WYSIWYG, or do they have some experience with HTML and are comfortable enough to work within the source view to make changes directly to the code?

Knowing who your users are will help you determine the best approach for your editable elements when setting up your templates. Does it make the most sense to keep it simple for non-technical users? Or, do you want to provide more flexibility and give the people working on your campaigns the ability to make changes to the code?

2. Understand the differences between email and landing page templates in Marketo — and the limitations of each. 

Email templates are modular, which makes it easy for your end users to drag in, rearrange, and reposition sections from the Modules tab. You can also setup local variables specific to each module to make it easier for them to make changes in the email editor. (For more information on variables, check out 3 Tips for Streamlining Your Marketo 2.0 Email Templates.)

Email template with modular components

Landing pages are guided, not modular, so what you see in the editor is typically what you get, and you don’t have the ability to rearrange sections with ease. This also means that all of the variables are global. If your end users change a single variable (font styling, color, etc.), that variable will change everywhere else it appears on the page. This usually means many unique variables have to be created, which can create a long, intimidating list of variables.

Landing page template with static components

QUICK TIP: If you include a lot of variables, make sure you are using short, descriptive naming conventions — as Marketo will cut off longer ones — so all so your end users can quickly see where they exist on the page.

3. Which layouts are currently in use? What will be needed for future communications?

Take an inventory of your current campaigns. Which templates are your end users actually using? Which elements do they use the most? What do they need in the future? Take all of this into account when you’re building new templates.

Maybe one team manages webinars, another handles live events, and yet another is responsible for product promotion. And don’t forget your auto-responder emails. Each of these different communications requires a different layout. The good news is that you can incorporate each of these different layout styles into a single master email template.

Won’t that be confusing, you ask? Not if you’re using program templates. You can setup the email in the program template to include the modules that are normally used in that communication type, and everything else in the master template will remain hidden. When the program template is cloned, the assets will continue to be setup correctly. This is extremely convenient for users who may not know how to code, but still need to get a brand-compliant campaign out the door ASAP. And, if you need to make any style changes in the future (background color, font style, new logo, etc.), you only have to update one template — not ten.

Of course, if you don’t anticipate many edits to the master template, you can always clone the master and create versions of the template that display different modules by default for each communication type:

4. How should your users add content?

It’s also important to keep in mind how your users will build an email and what their comfort level is with HTML (this goes back to knowing your users). Will they just open up the WYSIWYG, paste in the text, and add images? I’ve seen emails where marketers copied and pasted content straight from a Word document into the standard WYSIWYG editor — not realizing that the Word doc styling gets copied over along with it. And it’s not just font size and color. Line heights don’t look right. Spacing is off. The entire email won’t render correctly.

If your users don’t often build assets, I recommend removing the ability for them to edit content through the WYSIWYG and using variables moving forward. Copying and pasting directly into a variable automatically strips all styling, because it’s being injected into the code through an email script.

The same thing goes for landing pages. Since browsers don’t have the same coding restrictions as email clients, you have the ability to do much more with your design, including the ability to add JavaScript elements (slideshows, modals, dynamic navigation, etc.). These are all things that may also have content that you DON’T want users to edit through a WYSIWYG. Rather, you want to maintain some control by having them use variables to add content because the likelihood of them inadvertently wreaking havoc on the code is much higher.

As an example, the landing page template shown in the screenshots below has a dynamic navigation where the links collapse into a hamburger menu when viewed in mobile:

On the back end, the links are coded in multiple places:

Back End: Variables in HTML

So, rather than making them editable elements, and expecting the user to remember to update each link for both the desktop and mobile view, the simpler solution is to create a variable input. This will update the text in the HTML in both places that variable’s ID is set:

Front End: Variables in editor

Think about what kinds of issues you’ve encountered in the past, and design your templates to make them not only user-friendly, but user-proof.

5. Should controls be put in place to limit “creative” styling choices?

In addition to understanding how your end users will add content, you need to figure out how much flexibility you want to provide when it comes to making changes. Can your end users change the font style, color, and size? Can they pick a new font altogether? Can they be trusted to make only tasteful, brand-compliant changes to your template?

These are questions only you can answer. If you find that your end users constantly leave brand compliance by the wayside in an effort to get their emails and landing pages to stand out, you can lock down individual style elements in your templates using variables. If you want to provide some flexibility, you can even provide several preapproved choices for each variable. This way they have some safe options for customizing their email that still adhere to your organization’s brand guidelines.

While you can’t fully prevent every brand transgression, you can take away the ability for end users to go into the WYSIWYG and do their own thing. Setting up variables makes individual elements editable, but only within the brand-approved options you provide.

For example, you can provide a few font families to choose from, 2-3 different size options, 1-2 background colors, and so on:

In order to create templates that will make everyone happy, it’s important to understand both the tools we have to work with and the people who will actually be using them.

Sometimes, though, it’s simply a question of resources (i.e. not having enough of them). If that’s the case, DemandGen’s Campaign Execution Services offering might be the answer. In addition to creating sophisticated, responsive templates, our team of industry-certified experts can help you manage the day to day of ongoing campaign development and execution.

Adam Mokrzecki is a DemandGen Campaign Operations Specialist who supports the marketing efforts for multiple client accounts. A Jack-of-all-trades, Adam is Eloqua Partner Certified and a Marketo expert with extensive experience in campaign strategy and execution, lead management, reporting and analytics, email and landing page development. Adam has a keen sense for problem solving, quickly finding and implementing solutions to any challenges keeping clients from reaching their marketing goals.

The post Preplanning for Marketo Templates: 5 Things to Think About Other Than Design appeared first on DemandGen.

About the Author

Adam Mokrzecki is a DemandGen Implementation Architect who supports the marketing efforts for multiple client accounts. A Jack-of-all-trades, Adam is Eloqua Partner Certified and a Marketo expert with extensive experience in campaign strategy and execution, lead management, reporting and analytics, email and landing page development. Adam has a keen sense for problem solving, quickly finding and implementing solutions to any challenges keeping clients from reaching their marketing goals.

More Content by DemandGen