How We Made a Responsive Marketo Landing Page
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 eunthank@etumos.com.
About The Author
22 thoughts on “How We Made a Responsive Marketo Landing Page”
Comments are closed.
The required text that displays when a required field is submitted is not displaying properly.
Thanks, Kenny, I overlooked that piece of CSS. I just fixed it, so it should be working now.
This is a fantastic resource. Quick question – I noticed the styling you’ve built into the form only seems to apply to the text entry fields, but not to select, radio, and checkboxes. So depending on the types of fields in a form, the alignment and styling can appear off. Any suggestions?
Jeff:
We weren’t trying to target that level of design/CSS perfection with this template. The tools to fix the specific CSS are included in the template, though. In the LESS files, you can edit “marketo.less” and compile as necessary to fix the formatting. Or you can edit the flatui.css if you don’t have a precompiler.
Specifically, you need to add in CSS selectors at the proper level of specificity, then you just have to add the CSS as necessary to fix the spacing.
The selectors you need that will address those elements (not at the proper level of specificity):
input[type=’checkbox’]
input[type=’radio]
select
A web developer/designer could help you out with those little perfections—all the skeleton structure is there. Hope that helps!
– Edward
Okay, that makes sense. Thanks for the info!
SO CUTE
Thanks buddy. I just implemented a form using your method. this is a nice workaround while MKTO figures out how to do it natively. good work.
how did you add a form?
This was incredibly helpful – thanks!
There’s a horizontal scrollbar when resizing. Any idea how to fix that?
How do you add a form to this template if the wysiwg is broken?
The WYSIWYG being “broken” doesn’t mean it’s actually broken—it works, and you can still create landing pages with it. It’s more that this solution turns the WYSIWYG into “what you see is not what you get.” You add a form in the same way as before—just drag and drop a form onto the page, name it appropriately and in the right order, and then approve the page, and it all works.
I am trying to make basic use of this and I keep bumping into an issue with the text that is dropped in either a Rich Text Marketo object or an HTML object. The object does not adjust its size when the window is smaller than what fits, so the text continues to the right and starts hiding.
The text that is part of the template itself adjusts without problems but not when I place content on the designer.
What am I missing?
If I insert an image within an HTML object it scales but not a text “container” (Marketo object).
The key in this is naming the elements (either rich text or HTML) appropriately, because that becomes the containing div’s class. If you have a unique case, you can create a simple CSS class and put it on the landing page, then name the element the new class created.
E.g.:
#fullwidth{width:100%}
And then naming the element “fullwidth”—that might address your problem.
There are some simple classes contained in this template that use this method. “#PO” is one—it floats the element to the left.
FYI, I think you meant .fullwidth because #fullwidth is an ID. Honest typo. Later I figured out the problem I was having. I was doing what you suggested and then I realized I had a typo myself. But thank you for that.
However I am still having a slight problem. Everything is working the way I expected except for the actual Marketo form. Having all the real estate available on the content on fairly empty pages renders the form in either full width which makes it look super bad because the field names are on the left and the fields all the way on the right. If I use the class that allows me to leverage the width used on design studio, then the form width never adjusts so you can see its width “over” its container. I know I am missing something minor. Any ideas?
Oh, and also, if the error messages are displayed, the the responsiveness stops working as well.
You were right on the typo. I just changed it!
As for the form, that brings in the double-div method of creating your own container. In our landing page, for example, the form is put in a .span4 div. That way the form is 100% of the smaller container’s width, instead of being 100% the whole page.
Error messages will be solved with the same empty/open double-div method linked in the article.
That makes sense. Thank you.
Edward, I just realized that using Forms 2.0 makes it that much easier to integrate responsive design. But, if you have a chance, let me know if you have a suggestion on my previous question from yesterday.
Any plans to upgrade to Bootstrap 3.0? Found this a bit challenging coming across your example, while also trying to incorporate new components from the Bootstrap site… (that is, until I realized 3.0 had just come out) 🙂
Thanks again for this Edward. I’m just now using your template as part of a site redesign. I created a LP and can add a form 1.0 and its amazingly responsive. It is aligned left per your default described in the readme, but I don’t see how to control its alignment, The readme file says there should be 3 Page Elements (posOverride, posOverrideRight, and posOverrideFull), but there are no Page Elements in the Designer when creating a new LP. What am I misunderstanding?
Thanks Edward. This is a huge leap in the right direction. However, i’m having an issue with the form (renamed: posOverride) and adding a rich text box (renamed: posOverride or posOverrideRight) only constrained to 300px width. If i change my copy into an html box and rename it anything, it will show the items (html box and form) stacked. Am i missing something?
Just wanted to say thanks for this! Was able to get a responsive landing page up and running very quickly with this. Really appreciate it!