Because everyone loves results, go check out our example of a responsive Marketo landing page: http://pages.etumos.com/updated-responsive-marketo-landing-page-templates-v2.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:
- No CSS.
- 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.
Please link to this article! Comment below and provide feedback! Tweet it!
I post interesting little Marketo hacks and workarounds on Twitter all the time. Let’s network.
Etumos is a marketing technology consulting firm, offering Marketo consulting, strategy, and implementation services for B2B companies.
Need help with implementation? Request a quote by emailing firstname.lastname@example.org.