A continuing challenge for marketers is deploying landing page and emails that are on-brand, look good across platforms and devices, and are easy to use for non-coders.

Good luck!

Actually, marketers have very good luck these days between all of the marketing automation platforms and new solutions that have cropped up recently. The problem is less with the features and more about how they are used. Let’s face it, many of us are not HTML/CSS gurus (or not anymore), and we lack the creative slush fund of consumer product companies.

Yet, we are still tasked with ensuring our landing pages are deployed fast and look amazing, like our website. Same for emails. I receive requests all the time for “special” pages and emails because someone had a bright idea about next week’s event. How often does that happen to you? Does your firm really need an entirely special page every time? What if I could help you develop a system that allows flexibility in design, works across devices, and is easy to deploy for non-coders?

What if I told you that you already had it?

Template System Considerations

In Marketo, and I suspect other systems, there are a lot of personalization options that are also ways to ensure rapid deployment and updating of pages and emails. The catch is – you have to design it that way.

Cadence of Branding and Updates

While many firms do not make major brand updates frequently, there is pressure to keep websites “fresh” about every 12-18 months. In the startup world, this brand change could happen more frequently, creating a fire drill of page and email changes that are time consuming, taking away from message crafting and distribution.

Digital marketing teams also tend to have a separate project timeline from demand gen and marketing operations, and only inform the marketing ops team about a week before the new site goes live… “Oh by the way, your page templates need to match the main site and we can’t help you because we’re too busy.” Huh.

You can save yourself! Marketing automation is intended to empower the marketer and avoid this frustration. But you have to plan in advance. 

Communication Between Teams

First, agree with Brand, Communications, Design, and Web that there will be

• No more than one major change per year and that change is planned six months in advance. (you can stop laughing!).
• Build 5 to 10 situational templates Marketing can use without further approvals.
• Marketing (and others) agree to use only those templates. Special page or email designs must be thoughtfully considered. (Remember, you can always swap out images!).
• If there is a Creative team, or retained agency, decide if you really want them to be paid for every single email you need.

Use Cases and Scenario Planning

Once you decide that you will limit template designs, you should come up with the standard use cases and “scenarios” for each Template.

Asset	Email		Landing Page
Situation/Type	1 column	2 column	1 column	2 column
Invitation – Webinar
Invitation – Roadshow
Promotion – Generic
Confirmation – Webinar
Confirmation – Event
Confirmation – Generic

You may also want to be more specific, such as “Webinar Invitations need to allow me to display 1, 2, or 3 presenter images.” Be specific up front so you do not have to re-code later.

Using Tokens and My Tokens Across the System

Speaking of coding, Marketo (and others) offer tokenization abilities that go well beyond the “mail merge.”

In fact, My Tokens in Marketo can be used to turn on and off Page features such as Guided Template sections or even javascript options. Here are a few specific tips to consider after you whiteboard the layouts from the table above. The more you can create these variables and code them into your Templates, the more easily you can make universal changes in a flash.

• CSS/HTML Snippets
• Javascript and Tag Switches
• Form behavior and look and feel
• Logos
• Branding code
• Header and Footers
• Meta Tags like Title, Description, and other HEADs
• Preheader Email Text
• Snippets
• Standard Image Areas – swap in an image and it’s a whole new email!

Essentially, you will end up with a set of wireframes indicating which components of the Email or Page should be coded as Editable Areas, Replaceable Areas, and Tokenized.

Which layouts should you use? It’s up to you. Many firms have established layouts, but most are not tested against other layouts. Most of us have used WhichTestWon.com, MarketingSherpa, and a host of examples from other firms in the past 15 years. Those layouts are battle hardened and good places to start. But if you plan to optimize your conversion rates, build in a testing plan on Templates. 

Designing for Devices and Viewers: Mobile and Responsive

You can imagine how important mobile responsiveness is, given that according to some surveys, 61.9% of email opens occurred on a mobile device. We are in a world where you must design for mobile-first, but how do you determine which systems and devices you are optimizing for?

If you are able to check your Google Analytics device stats for the web and use a service like Litmus, you can decide which coding methods will perform best for Email and Landing Pages. For example, corporate IT departments are often on MS Outlook for Windows, so that should take precedence over Android Mobile. But those targeting marketers may find Apple products higher on the list.

That being said, you do need pages and email that work well on all current devices and operating systems. Build in device and viewer flexibility from the start.

If you are only using Marketo, you can get directional data on Device-Viewer Opens and Clicks using a set of Smart Lists.

Remember, if you are targeting mobile users, consider:

• What do I expect someone to do on a small device? (read!)
• What do people really do on the device?
• When do people use the mobile device? (commutes, weekends, travel, boredom).

Guided Landing Pages and Emails

Over the years, many marketers have come up to me and said, “I’d like to remove this section of the asset this time.” For whatever reason, that block of text isn’t necessary for every single campaign. That’s ok!

But the standard editable sections in emails cannot be removed. Landing Pages (Free Form) were only partially dynamic. In both cases, one-off templates or changes were needed. So I generally discouraged “special” requests.

And frankly, the template layouts you chose above are good enough for 99% of situations. Remember, you aren’t an ad agency, you are in demand generation.

With the advent of Guided Landing Pages and Marketo’s Email Templates 2.0, it is possible to build flexible Templates with removable sections.

Guided Pages and Emails can also be used as a way to build in Layout Testing without having to re-code new Templates every time. Plan out the editable sections in a way that can be tested head-to-head.

The same rules apply here: design the variable sections in advance, before coding.

Testing Across Platforms

Earlier, I spoke about using Litmus and Google Analytics to understand the proportion of your audience on the Device-Viewer matrix. Don’t bother coding crazy things for under 5% of your audience. An image that’s 1px off doesn’t matter to anyone!

Of course, you still have to test your Templates properly across these tools. Litmus, EmailonAcid, and other tools are available to conduct such testing easily before you ever load the code into a marketing automation platform.

Once the code is well-tested, then load it into your Sandbox, non-visible pages, or a Staging site to conduct further tests.

A Word About Your Brand Guide

If you have a brand guide that explains all of the precise colors, sizes, logos, and fonts to use across communications, it is important to take that into consideration as you build. But, there are limitations on what you can enforce when people are not directly on your website. And, if you treat your audience the way you would want to be treated, you would design pages and emails to play nicely on low bandwidth to retain a good experience.

Your lead is not there to enjoy that fancy font; they are there to solve their problem.

• Eschew fancy fonts on email. (It’s possible for some viewers).
• Load fonts on landing pages, but ensure the font API is fast on mobile.
• Images on pages and emails should have small file sizes.
• Use ALT tags on all images, especially email.
• Emails should never be a single image, nor should they be dozens of images in tables.
• Keep HTML and CSS simple and mobile friendly.

The final part of testing is to load it into a live system and train marketers to use any special features as well as provide clear instructions on how to edit the child asset.

Marketing Automation Template Options

Building templates can be as simple as adjusting pre-built templates, or complex with hired agencies and designers. Keep your team focused on

• Goal of the page or email.
• Audience use – what are they there to do fast?
• Audience devices and viewers.

Ways to Get Templates Created

Internal Creative Team

Lucky firms have an internal design team or web designers. Work with them to build wireframes and provide them with the instructions to code for your MAP.

External Creative Agency or Freelancer

There are now dozens of agencies and freelancers with Marketo and other MAP building experience.  Pricing ranges from $500 to $2000 per template.

Marketing Technology Consultancy

There are now dozens of agencies and freelancers with Marketo and other MAP building experience.  Pricing for basic email templates can be as low as $500, however, that involves very limited work. Most custom templates start at $1500.

Automated Generator Services

We’ll discuss some below. If you need a constant stream of template options, the fees are very reasonable. These services take your inputs and generate code you can drop into your system with minimal changes. While ideal for those with limited budgets and skills, an automated customizer saves a ton of time and reduces the need for complex “branding” choices you often don’t need to make.

Vendors for Email and Page Templates

Knak.io

Knak is a service from fellow Marketo Champ and Consultant, Pierce Ujjainwalla. The setup process is the same for landing pages and emails, allowing customization of logos, colors, and the other little pieces that make a template yours. Knak is completely self-service and integrates directly with Marketo. (I received a free trial for the purposes of this article).

• Type = Self Serve, Automated
• Fees: $125/mo x 12 = $1500.
• Best for: anyone.

Let me walk you through Knak, although you hardly need my help! 

Other Template Options and Examples

There are plenty of other agencies and consultants out there. Here are a few options, free and paid, for you to try out. Remember, most of free templates will need someone to customize logos, graphics, and other options. These examples can be a good starting point for a web designer learning the quirks of Marketo Templates.

• Etumos [free]
• ShowMeLeads [how to]
• Marketo Free Library [free]
• Grazitti Interactive [custom]
• MapleIQ[custom]
• Perkuto [custom]
• LeadMD [custom]
• MarvelMarketers [custom]
• RevenuePulse [custom, makers of Knak]

For those looking at more interactive options like Surveys and fun tools, take a look at SurveyMonkey, SnapApp, and IonInteractive.

Ultimately, the layouts and templates you choose should be rooted in what your audience wants, not what your designer or VP wants.

Yesterday, Marketo began rolling out the new Email Editor and Template system. Quite a few others have already written in detail about it. Marketo’s docs are fairly clear as well. 

Template provider Knak.io sent a notice regarding the Email 2.0 rollout process that everyone should pay attention to:

“When you switch to the new editor, all of your existing (v1.0) templates go into draft mode. If those templates are reapproved, Marketo converts them to v2.0 and it is impossible to revert them back to v1.0. This means that if for some reason you are not happy with the new editor, or it is not able to produce code that is conducive to fully responsive templates, you would not be able to revert the templates back to their original state.” – Pierce Ujjainwalla

To handle this rollout for your team, I recommend testing and training in your Sandbox first. If you do not have a Marketo Sandbox available, please consider carefully training your Designers and Marketers before switching on Email Editor 2.0 in Admin > Email > Email Editor. The biggest impact here is on Templates that were created before you turned on Email 2.0. Be very careful about editing Templates or re-approving Templates with a 2.0 Draft.

Email 2.0 addresses many of the shortcomings of last year’s Email Editor update as well as new features we’ve been clamoring for. Here’s what I’m excited about as I prepare a giant Template Update this year:

• Built in Pre-Header Text – no more asking for special code. This enables Gmail and other viewers to display a short text to entice leads to open your emails.
• Improved Editor and Section Designer – Modules! This is essentially Guided Templates for Email – add and remove sections you want, or don’t. This feature also enables human friendly section names and enhanced handling of image, video, and rich text components. The options include “snippitization” where you can designate a section for a Snippet. And now that Snippets no longer throw all your assets into “Approved w/ Draft” mode, you can easily scale up Footers globally much faster.
• Template Picker – this includes templates from Marketo’s Library and your Library in a nice previewer that takes the guess work out of the picture.

Marketo is also recommending turning on Rich Text Editor when using Email 2.0. My bet is you already turned this on last year, but in case you did not, do so when switching to the upgraded Email system.

Stay tuned for more on Email and Landing Page Template planning and design.

Image Credit: Marketo.