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

Show previous replies
A
Anonymous
March 18, 2014
Edward, we are implementing a new website in Wordpress whose pages are responsive; however, the Marketo landing page with a form 1.0 that is displayed in an iframe on our website page is not responsive.  In other words the field labels don't wrap from being to the left of the field when the window is wide to being on top of the field when the window is narrow as does the form in your Responsive Marketo Landing Page Templates page,

Can we use the double-div technique with the landing page that is displayed in the iframe to make the form responsive on our web page?  Does this work with forms 1.0, 2.0 or both?



 
BDx
BDx
Level 4
April 3, 2014
I've been looking at this post and the related templates for a a few hours and I feel like there's an easier and less brittle way to arrive at responsive landing pages.

No doubt, it's a shame that in 2014 we have to hack Marketo to get mobile friendly landing pages, but here we are. :(

My approach is to create a simple, clean boostrap template that renders via Marketo. I name (with IDs) a few containers where I want the Marketo components (e.g., text, form) to render. Then I establish a naming convention, (this is brittle, but we need some way to bind). Then when the page loads, I use jQuery to grab the marketo elements and move them into their proper places in the responsive grid.

Here's the jQuery and naming convention that I've tested:
<script>
$(document).ready(function() {
$('#containerHeader').append($('div.txtH1 span.lpContentsItem'));
$('#containerHeader').append($('div.txtH2 span.lpContentsItem'));
$('#containerBody').append($('div.txtBody span.lpContentsItem'));
$('#containerForm').append($('div.objForm span.formSpan'));
});
</script>

Once the jQuery runs, voila, you've got a responsive landing page.

I've implemented this quickly and it seems to work just fine. I have not tested this with Forms 2.0 yet, nor have I gotten far enough so that I'm comfortable putting this into production, but from what I can see, this is a simpler way to skin the cat, and it requires less technical skills (no Marketo Double Div) to create the landing pages, once the template is defined.

Barring a better answer, this is how we're going to make our landing page responsive.

-Brice
A
Anonymous
April 3, 2014
Thanks Brice, Can you post a link to a prototype LP where you've used this technique?
A
Anonymous
April 3, 2014
Would also be interesting in seeing this.
BDx
BDx
Level 4
April 4, 2014
Hi Elliot and Jason,

I can't post the prototype here as it's client specific. I'll post something once I have a generic page for review.

thanks,
Brice
BDx
BDx
Level 4
April 8, 2014
Hi all,

I've posted a simple example here:
http://www2.simplermedia.com/marketo-responsive-landing-page.html

This is still pretty quick and dirty, but it works and should make our process fairly easy to understand.

Feedback welcome.

-Brice
A
Anonymous
May 29, 2014
 Elliot Lowe, if you use gravity forms plugin there is an addon for marketo. that way you dont need to iframe the forms into the page...
 
A
Anonymous
May 29, 2014
Edward,

i am trying to use you LP code.
i cant get the elements to stack properly.
 pages.pyramidanalytics.com/Gartner-Temp_Gartner-Newsletter-v2.html
i want the form under the image.

all three elements are posOverride

please let me know

 
Terms & ConditionsAccessibility statement

Loading footer...