Responsive Marketo Landing Pages - Solution

[Anonymous]

I've alluded to this in other places, such as some LinkedIn Marketo groups, but I've been working on some responsive Marketo landing page templates for the past two weeks. Well, it works!

Because everyone loves results, go check out our example of a responsive Marketo landing page: http://resources.yesler.com/responsive-marketo-landing-page-template.html.

That is a responsive landing page that we created in Marketo. Templates (one tokenized and pretty solidified in design, one responsive blank template) are included, with some short documentation on how to do it. Also included are all of the assets, which just need to be hosted on an external server and referenced. This is all coded in LESS, for you developers. Flat UI design and Twitter Bootstrap included.

I've been writing up some posts on how to make responsive LPs, still through the Marketo editor. Here's a link to a very succinct technical summary for web developers.

The two ways responsive design has been disallowed:

1. No CSS.
2. No DOM control.

Having CSS control: 

• First off, the referenced templates strip out all the unnecessary CSS.
• The element name is the containing div's class. Our solution is to name elements based on what you want them to do. Included classes that override the absolute positioning are: "posOverride," "posOverrideRight," and "posOverrideFull." Respectively, elements with these names will float left, float right, or float left with 100% width. 

Having DOM control:

• The order in which elements are created in the Marketo editor is the order in which they appear in the HTML. That's more DOM control than you thought. If you're careful about the order you're creating elements, you can make the HTML in the appropriate order.
• The Marketo Double Div method: create your own DOM with HTML elements, wrapped in closing and opening div tags. I wrote a blog post about how to do this, and it's also described in the documentation for the templates. With some creative HTML element coding, you can wrap other elements right where you want them, meaning you get responsive AND all your dynamic snippets and content.

More details and information are available on my Marketo blog. Feel free to comment, add suggestions and feedback on this page! 


Best Regards,
Edward Unthank
Marketing Operations Specialist
Yesler

[Anonymous]

Very cool!  Thank you for sharing!

[Anthony_Pica]

Wow, thank you!

[Anonymous]

Appreciate this!

[Anonymous]

Thanks Edward!

[Anonymous]

Much appreciated, Edward. Just starting out here, but is there a quick answer to the question: With your pattern, is it still as easy as suggested in this thread to add the hook class="mktEditable" to any and all elements that we wish for Marketers to be able to edit text for in the WYSIWYG? Or does your method subvert the WYSIWYG?

Peter

[Anonymous]

Hi Peter:

The discussion you're referencing is regarding emails in Marketo, not landing pages. They work a little bit differently--the class="mktEditable" in emails designated blocks that can be edited. In landing pages, this is accomplished through the entire body being "mktEditable" and then dragging in different elements. 

For adding any and all elements, you can use the Double Div method that I wrote about. It does make the WYSIWYG a bit more nuanced to use in achieving this, but it brings in the possibility of using native Marketo dynamic content in the editor. The short version of how to do it is to drag in HTML elements and create your own code structure to wrap those dynamic pieces of content.

When we have complicated landing pages with dynamic content and non-web-developers need ot change/recreate/clone, we can have someone technical put placeholders in the WYSIWYG, then the other Marketo users can clone the landing page and simply replace the elements (such as replacing the picture, editing the rich text content, changing the form, etc.). 


Best,
Edward Unthank
Marketing Operations Specialist
Yesler

[Anonymous]

Thanks for the form!  I was wondering if you could share what technology you use in the company search that brings up the list of possible companies - really neat.

[Anonymous]

Hi Nichole:

That would be Reachforce. It fills in appropriate demographic data for the company upon submission as well!


Best,
Edward Unthank
Marketing Operations Specialist
Yesler

[Anonymous]

Hey Edward,

Given this method, this means that all the elements you add at the Page Editor level have to share a common DOM parent, correct? One common wrapper for the whole layout? There's no way to embed a form within one of these double div HTML blocks, is there? I want to make sure I'm not further handcuffing myself.

Colin McClure
Web Developer
Simply Measured