Responsive Marketo Landing Pages - Solution | Community
Skip to main content
A
Anonymous
June 7, 2013
Question

Responsive Marketo Landing Pages - Solution

  • June 7, 2013
  • 18 replies
  • 2855 views
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: 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
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

18 replies

A
Anonymous
June 7, 2013
Very cool!  Thank you for sharing!
Anthony_Pica
Anthony_Pica
Level 4
June 7, 2013
Wow, thank you!
A
Anonymous
June 7, 2013
Appreciate this!
A
Anonymous
June 28, 2013
Thanks Edward!
A
Anonymous
August 28, 2013
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
A
Anonymous
August 29, 2013
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
A
Anonymous
October 25, 2013
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.

A
Anonymous
October 25, 2013
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
A
Anonymous
January 9, 2014
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
A
Anonymous
January 9, 2014
Colin:

That's correct. It goes something like this Haiku:

Static template code

[Bring in LP elements]

Static template code


Each WYSIWYG element gets thrown into some backend PHP functions to convert them into HTML. Each element is wrapped in two divs, which is where the absolute positioning comes from. The elements are just returned in the order of their creation, and they're all siblings. 

The "Bring in LP elements" piece is just a PHP echo (<?php echo $mContext['bodyElements']; ?>), which echoes all the resulting HTML of the WYSIWYG editor.

And no, there's no way to HTML-code the Marketo form within an HTML element. You can create your own DOM using the double-div HTML blocks, though!


Cheers,
Edward Unthank
Marketing Operations Specialist
Yesler

Show more replies
Terms & ConditionsAccessibility statement

Loading footer...