Responsive Landing Pages

[Anonymous]

When are responsive landing page templates coming for Marketo? I know that there's custom HTML that can be used in the meantime but it's really not scalable. Any updates or suggestions?

[Anonymous]

Would love to know too. It feels like a big miss that Marketo doesn't have responsive landing page functionality. Have been trying to figure out a "hack" but nothing I come across seems easy to implement. 

[Anonymous · Accepted solution]

It's on our 2H 2014 Roadmap.  When we have a more specific timeframe, I will update the post.

[Rafael_Santoni1]

Carly,

There are different ways to currently apply responsive to Marketo landing pages. While none of them are currently out of the box Marketo functionality, I like to think of it as a normal part of the process when designing HTML templates for any online content management environment. Even non-MAS environments like Wordpress, Drupal, Adobe CQ 5, etc. requires some form of custom template coding to use responsive design code.

At a very high level, the most important part that any HTML/Landing page developer should be thinking of when working with Marketo pages, is the fact that Marketo page objects can be named and the name in the designer is used as the element's class. Having that in mind makes a world of a difference when it comes to applying responsive code techniques, because then you can simply override the absolute positioning that Marketo uses by default, for relative positioning.

The most difficult part is to use CSS code on the template that would manipulate the form object properly. Since there doesn't exist a Marketo CSS specs document that can be referenced for how the code is dynamically rendered for the forms, some trial and error needs to be made to find exactly what to do using CSS media queries for your particular design.

Yes, it is not for the regular Marketo end user to implement, but neither is creating a custom Marketo template even if it is not responsive. If you don't have the internal resources, you could hire one of many Marketo-certified consultants to help you create the template(s) you need.

Once you have that ready, any user with access to create landing pages will be able to leverage the template following of course some basic guidelines.

I really hope you can implement responsive coding on your pages if that is your main goal. Just keep in mind that no matter what, responsive is not just something you can throw into any existing template. You have to think about responsive before creating the design to create code that can adjust the way you want it.

I am sure that even if it were an out-of-the-box feature in Marketo, not every Marketo user (client) will think that it works for them, unless they are willing to accept a set of specific templates that Marketo would need to create for that purpose. Different designs, require different coding techniques when it comes down to responsive web pages.

I know I am not providing an actual solution here, but I think that what I am describing here might help more people understand how unique responsive can be, based on what each company's goals for the design are.

Good luck!

Rafael

[Anonymous]

Rafael, I can do responsive design css. The problem is, the Marketo Landing page templates have no place to "put" the responsive design css, without overriding it.

Even if I want to make a "mobile aware" LP, Marketo will display ti in mobile as a microscopic page!!!!!!!!!!!!!!!!!!!!!!!!

So, how to we get past the internal framework in the template? In any other application, I can easily cause the entire page to adjust it's full width to the mobile width. But marketo does not allow it!!!!!

We don't need responsive templates. We need access to the templates in such a way that WE can contro the overall page width, not just the inner or outerwrap div. Do you guys understand what we are asking?????

Thanks. I am venting.

Dave B.

[Anonymous]

We're using Unbounce to create landing pages right now - for more info, see the discussion here: https://community.marketo.com/marketodiscussiondetail?id=90650000000Pc7iAAC

[Rafael_Santoni1]

Dave,

First, let me make sure that this is clear. I am not part of Marketo. I am also a client. I felt I should clarify that since you said "Do you guys understand what we are asking?".

Now, I have been able to use CSS media queries to completely manipulate the way that the Marketo forms are rendered. You are not really locked in to their rendering. Granted, you can not do everything you might want, but most of the manipulation you need for the smallest viewports (mobile) is possible.

While we have not gone live with a major roll out of this capability, I have a small set of pages running as a pilot that respond to the different devices screen/viewport area.

The following page is in our Marketo QA instance and can go away at any time, but if you open it in different devices, or even re-size your browser screen, you can have an idea of the basic implementation that I did for this round.

I would ask from you (all) the favor of please not sharing this URL outside the Marketo community since this is NOT a production instance and please also don't submit the form: http://test.deliver.citrix.com/OptimizedLightMaster.html It is also a work in progress.

I did not use any special libraries like Bootstrap or anything like that. Only pure hand-coded CSS which you can see here: http://test.deliver.citrix.com/rs/citrixqa/images/responsive_v2.css

There is one other CSS on the page which is separate for now that is a boilerplate responsive CSS generated by Adobe's reflow. However, it has nothing to do with the form, only with the template look and feel. I also modified it to be on-par with my particular goals for this test.

I hope this helps you somehow see what I meant on my previous comments.

Thank you,

Rafael

[Anonymous]

Hi Rafael,

Thanks for your comments. I know you are not a part of Marketo. The css you have used is great. The problem is, we can create the same kind of css in say, an Exacttarget landing page, drop it in, and it works just fine.

With marketo, it is not that simple at all. There are processes in marketo which prevent the css from functioning as it should.

So my question is, for the example you showed, "how" did you use this css in the Marketo template, to "override" the marketo template code, so that the mobile display will not display microscopically?

For example, did you strip out all fo the css in the marketo template and "replace" it with the css from the file?

Hope this makes sense,

Dave B.

[Anonymous]

subscribing

[Rafael_Santoni1]

My code is placed lower on the page source and includes "!important" where needed to override Marketo's styles.