How to Make Responsive Landing Pages in Marketo, for Web Developers
Edit: I no longer believe that !important stylings are the best way to achieve the responsive LP goal. Instead, create your own DOM with this DoubleDiv Method. There’s a more detailed description of how to create responsive Marketo pages here, along with free Marketo LP templates:
Written for web developers. People who already know some coding best practices, but just don’t know the intricacies of how Marketo’s WYSIWYG editor works quite yet.
Starting with making the responsive Marketo landing page template:
Delete all of the CSS in the landing page template. Everything you can manage. There will be some CSS still called in a PHP line, but that’s unavoidable because the same PHP echo has necessary Marketo tracking functionality.
Do your external CSS and JS calls in the head. And extra JS right before the closing of the body tag, as usual.
You can use tokens in the landing page template! This is recommended for the super advanced landing page design. Two examples:
{{my.landingPageCSS}} = <style link=stylesheet href=”http://etumos.com/mkto/style.css”>
{{my.landingPageCSS}} = <style>.PO{position:relative!important;}</style>
.banner{background-image:url({{my.landingPageBannerURL:default=http://etumos.com/mkto/banner.png}})}
The token my.landingPageCSS can call external CSS or have the styling within itself. This allows some flexibility within the template. Without a default value, if there is no token set, this line will disappear. The example of my.landingPageBannerURL allows for easily changing background pictures of features, which can be useful if you’re looking to have the highlighted image in the CSS as opposed to the landing page itself. A possible use for this might be the new SVG clown car method for responsive images.
Making the Marketo responsive landing page in the editor:
Marketo editor and preview doesn’t call CSS or JS. These are only applied in the approved page.
The order in which you create elements is the order in which they appear in the DOM. Mind the order appropriately for proper order and floating.
The name of the element is included as its container div’s class. Spaces are translated into underscores, so you can only have one class name per element.
Any positioning styling that you’re looking to do will have to override the normal CSS hierarchy, so be prepared for some !important class stylings.
Segmentation is possible so long as all of the elements are named appropriately as classes and the element creation order is respected for the DOM.
That’s the basic knowledge that you need to know in order to create responsive Marketo LPs! The DOM is based on what order you created elements, the name of the element becomes the containing div’s class, and you can add your absolute positioning styling up in the head, or make tokens so you don’t have to edit the actual landing page template after the first time!
About The Author
3 thoughts on “How to Make Responsive Landing Pages in Marketo, for Web Developers”
Comments are closed.
Thanks for this, Edward! We took a similar approach – actually inserted Twitter Bootstrap into our template. Then, using jQuery, I stripped all the .lpeCElement elements (those created by the mkto editor) of their absolute positioning, and assigned them to a #target div to kind of “inject” them into the overall Bootstrap (responsive) layout. Worked well. Here’s the page:
http://community.davidsuzuki.org/preferenceCentre.html
Didn’t know anything about tokens though – when I have time, I’ll go back and see if I can make that fly: seems way more adaptable.
And here’s jQuery code we used:
//Uses noConflict just in case
var $jQ = jQuery.noConflict();
// Use jQuery via $j(...)
$jQ(document).ready(function(){
$jQ('.lpeCElement').css({
'position':'static',
'top':'0',
'left':'0',
'width':'auto',
'height':'auto',
'margin':'1em'
}).appendTo('#dsftarget');
Cheers!
-Chris
Hi, Chris:
The landing page template that I’m developing now actually uses Twitter Bootstrap. In terms of development, I personally prefer to use as little Javascript as possible—if there’s an HTML and CSS solution, I prefer it. Cleaner code, faster page load times, friendly to users without Javascript.
I’m making up an example responsive template right now. With tokens, Bootstrap, and instructions on how to use it. I think it allows for some real Bootstrap functionality, the ability to wrap snippets and forms and dynamic content in Bootstrap HTML. I’ll post it as soon as I can get it live!
Best,
Edward Unthank
You can also manually embed the munchkin tracking code at the bottom. 🙂