This Marketo Responsive Landing Page project is a work in progress. This page was last updated on April 7, 2014 and will continue to evolve. It is based on the Bootstrap 3 framework, but you could use any responsive framework. We have leveraged the minimum required components to construct this example, so changing frameworks is not a big deal.
The approach here is as follows:
- Create a simple two column responsive page structure.
- Add the page elements to the page with the Marketo WYSIWYG editor.
- Ensure your Marketo UI elements are named so that your jQuery code can find them in the DOM.
- Upon page load, use jQuery to grab the Marketo UI elements and move them in the DOM such that they become child elements of your responsive structure.
- Use CSS to hide (display:none) the original Marketo DOM container, so that its dimensions and that of its children no longer play a role in the page layout.
- Tune your CSS and media queries to desired look and feel, and responsive behavior
If you have suggestions for improvement, we'd love to hear from you.