SOLVED

Responsive Landing Page

Go to solution
Brice_Dunwoodie
Level 4

Re: Responsive Landing Page

Hi Ilan,

I've posed our template HTML file here:
http://www.cmswire.com/downloads/ResponsiveLandingPage.zip

I cleaned up our file pretty quickly and ripped out our customized JS that (I think) does not apply. 

Give it a shot and let me know if you have questions.

We've seen a huge lift in mobile and tablet conversion rates since we deployed this.

-Brice
Anonymous
Not applicable

Re: Responsive Landing Page

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

Brice_Dunwoodie
Level 4

Re: Responsive Landing Page

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):

0EM50000000RzP5.jpg

-Brice
Anonymous
Not applicable

Re: Responsive Landing Page

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?

Anonymous
Not applicable

Re: Responsive Landing Page

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


Anonymous
Not applicable

Re: Responsive Landing Page

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.

http://avexdesigns.com/responsive-youtube-embed/

Ilan



 
Rasmus_Bidstru1
Level 4

Re: Responsive Landing Page

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 🙂 
Anonymous
Not applicable

Re: Responsive Landing Page

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? 
Brice_Dunwoodie
Level 4

Re: Responsive Landing Page

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. 
Rasmus_Bidstru1
Level 4

Re: Responsive Landing Page

@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)


0EM50000000SYLF.jpg
And after i put the 'real' content in my html widgets 0EM50000000SYLK.jpg

@Brice, I will have a look at your approach later today, it sounds very awesome 🙂