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
.png)