Responsive Landing Page

Forum|Forum|12 years ago
August 19, 2013
20 replies
4910 views

If I have my development team write responsive parameters into the coding of a Marketo landing page template, will it then recognize when someone is viewing the page on a mobile device?

Does Marketo have the ability/functionality to tell if their landing pages are being viewed on a PC vs. mobile device or tablet?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by

Rebecca,
You can ask your dev team to create a responsive landing page and it will work when served from Marketo as long as you don't hand-place any marketo widget (like a form, text, social widgets etc). The main reasons for this is that our designer relies on absolute positioning of the widget and this will break responsiveness of the template. Put differently, the template should contain all the HTML that you would want in the final Landing page. I know this will be disappointing, so I'll add that we are working on supporting responsive landing pages natively.

In the meantime, you could use Edward Unthank's Responsive Landing Page hack (edwardunthank.com/blog/how-we-made-a-responsive-marketo-landing-page/), which templatizes using tokens

Raj

Show previous replies

A

Anonymous

Brice,
how do I use it?
How do i float items left and right etc...

BDx

Level 4

Hi,

You will need to be HTML / CSS / JavaScript literate to be able to use this. I'm sorry but I don't have time to document this at this time.

The trick is in the naming of your "Page Elements" in the landing page.

Here's what you should have (except the SponsoredBy one):

-Brice

A

Anonymous

Hi,
Does this mean you won't use a Marketo form for these solutions?

Or which version of Marketo form would for in a repsonsive landing page? 1 or 2.0?

A

Anonymous

Does anyone have a responsive landing page template where there is a video featured?

We are trying to make the below landing page responsive and are having a hard time because of the 2 videos in it..Any help will be greatly appreciated!

http://pages.masergy.com/2-Networking_Networking-Managed-Cloud-LP2.html

A

Anonymous

Sunita,
firstly it doesn't seem that your landing page is responsive at all..

To answer your questions and this is not a solution but may help in getting one

You might need to add the video so that its responsive itself.

Here is a how to link.

avexdesigns.com/responsive-youtube-embed/

Ilan

R

Rasmus_Bidstru1

Level 4

It amaze me that Marketo is 3-4 year behind on the landingpage part still using position: absolute on every object.

So my solution is to remove the default position with:
#mktContent [class*='lpeC']{
height: auto;
left: auto;
min-height: 0 !important;
min-width:0 !important;
position: relative;
top: auto;
width: auto;
}
#mktContent .rawHtmlSpan {
height: auto !important;
left: auto !important;
min-height: auto !important;
min-width: auto !important;
position: relative !important;
top: auto !important;
width: auto !important;
}

And then just drop html-widgets in. The downside is that they always get show in the order they are place, and cant be change afterwards.. :(

Come on Marketo, get in the game :)

A

Anonymous

Rasmus, where do you put this code? Can you explain more about the html widgets and the limitation wiht what order you place them in?

BDx

Level 4

If you understand my approach above, you can achieve a responsive page that also gives you flexibility about positioning. Your naming convension for each item added to the page can be used to place the components at render time into different zones, using jQuery.

With that said, yes, it's pretty disappointing that Marketo's landing page technology is lagging so far behind the norm.

R

Rasmus_Bidstru1

Level 4

@Brandy C, i have placed this css in my <header> in the landingpage template. this allows me to drop pieces of html in to the draft. This image shows how the HTML widgets automaticly are placed in a row.(you can see the dotted line)