Marketo Responsive Method: Marketo Double Div

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.

I post interesting little Marketo hacks and workarounds on Twitter all the time. Let’s network.



Pin It
  • http://www.imryanmorgan.com/ Ryan Morgan

    This is brilliant. I’m going to try this right now.

    • Edward Unthank

      Thanks, Ryan! Looking forward to seeing what you do with it.

  • Edward Unthank

    Thanks, Ryan! I’d like to see what you do with it.

  • Fab Capodicasa

    Excellent! Can the form just be restyled using CSS? What’s the simplest way to introduce the form into the responsive template?

    • Edward Unthank

      It can be restyled with CSS, Fab. All of the CSS is there in the template, both in CSS and LESS. The easiest way to introduce the form into the responsive template is to drag and drop the form onto the page in the WYSIWYG editor and then rename it “posOverride”—that’ll change the class name to .posOverride, which is positioned correctly with that stylesheet.

  • Christopher

    Hello. Do I need to create separate HTML containers for each DIV in the WYSIWYG editor? I am confused. Thanks!

  • Senyo

    Have you found a way to incorporate Marketo forms or other landing page features into the template? If it’s only the HTML snippets that work inside here, I don’t see why I wouldn’t code the entire page and content inside the template itself. Thanks!

    • Edward Unthank

      That hack I posted on this page is specifically so you can use the native Marketo features. It would go something like:

      * Double-div HTML (open)

      * Marketo form

      * Double-div HTML (close)

      * Double-div HTML (open)

      * Dynamic snippet

      * Double-div HTML (close)

      http://edwardunthank.com/blog/how-we-made-a-responsive-marketo-landing-page/ has some more instructions. This article is just one facet of how to make the responsive LPs—it’s the workaround to create your own HTML structure that isn’t undone by Marketo’s coding.

  • Ken

    Have you heard of way to do this same sort of idea for responsive email design within Marketo?

    • Edward Unthank

      Sorry for the slow response, Ken. Responsive email design is actually much easier in Marketo—you don’t have to hack it at all. Marketo email coding works a little differently. It looks for certain div IDs and then makes their content editable in the WYSIWYG. A developer can code up the appropriate responsiveness and then the person creating emails just changes the content in each block.

  • Shadrack

    Looks great, thanks for sharing! Have you tried this with Optimizely or another javascript-based testing platform? I’m having issues with elements moving around as I resize the test page

    • Edward Unthank

      I use Optimizely on nearly all our landing pages. This approach doesn’t rely on JS, so there shouldn’t be any conflicts—should all function normally.

  • ant peters

    Hi, Im a tad late into this discussion but I think the double div is superb. Im using it in a marketo landing page. However, when I change the content I get a temporary duplicate of the same area. It takes a refresh to restore. Any ideas on how to prevent this?

    • Edward Unthank

      Hey Ant, this is a new feature/bug with the new landing page editor as far as I can tell. I haven’t looked into a workaround—really I use it once for template setup, and then I tokenize everything so you only have to do it for original template development!

  • Edward Unthank

    Hey Jason, sorry for the abhorrently slow response here and I’m sure you’ve figured it out… but for other people reading, it sounds like your PHP call (“echo $mcontent[body]” or something similar) was in the , not the body. When you move that to the , it should spit out in the right spot.