Marketo Responsive Method: Marketo Double Div

June 7, 2013

(Originally posted on edwardunthank.com)

The primary way in which you’re able to make Marketo’s landing pages responsive is through a method I’ve affectionately (and shamelessly) dubbed the “Marketo double div.”

Marketo’s WYSIWYG editor works like this: You drag in a new element onto the page. The element is absolutely positioned wherever you placed it. A certain amount of pixels from the top, a certain amount of pixels from the left. But what’s actually being positioned is not the content of whatever you just dragged in—it’s the container for whatever you dragged in. This container is given a class (which is also its element name, so you should keep that in mind for making responsive Marketo landing pages) and a unique ID that Marketo uses to do the absolute positioning.

Marketo DoubleDiv Method Example

THEREFORE, the way to beat this absolute positioning is NOT just to slap on an !important class to override some CSS styling, but rather to close the containing divs that Marketo has created in the first place.

THE MARKETO DOUBLEDIV: drag in an HTML element, open it up, and put </div></div> at the very top. Excellent. Now you’re at the top level, not having to worry about Marketo’s absolute positioning. You can create your own divs, add your own HTML as desired, and code up a pretty, responsive web Marketo landing page. When you’re done with your HTML block, make sure to remember the opening tags <div><div>. You have to add these at the end because Marketo is still planning on closing the containing divs that it opened in the first place.

I’m sure you’ve already picked up on it, but this means a whole new possibility for DOM control in Marketo’s editor. You can mirror your own HTML for your website, then just copy and paste your existing HTML. Wow, branding possibilities just got a lot easier.

If you check out the responsive marketo landing page templates that I’ve been working on, you can see that I used the Marketo DoubleDiv to enable some Twitter Bootstrap styling. With some more DOM control in your hands, you can really do anything you want.

The beauty of the Marketo DoubleDiv method is that it allows you to use the native dynamic Marketo functionality. You can create dynamic content, segmented within your responsive Marketo template. This is harder to do when you have a heavily tokenized page, or you’re working primarily within the template editor as opposed to the Marketo landing page editor.

 

Also, I’m obviously trying to get the Marketo DoubleDiv method to become a thing. Because no one has publicized these kinds of solutions before. So please help create some positive externalities for social good by tweeting some comments with a #DoubleDiv hashtag.

It’s sweeping the… five or six people in B2B marketing who use Marketo and know what responsive design is.

 

[Editor’s note: We invented this, and there have been more than 1,500 people who have downloaded and implemented this approach! If you need help or have questions, don’t hesitate to reach out to uswe do this for a living.]

Related News