Responsive Landing Page

[Brice_Dunwoodie]

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]

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

[Brice_Dunwoodie]

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

[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?

[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

[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.

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

Ilan

[Rasmus_Bidstru1]

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]

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]

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]

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



And after i put the 'real' content in my html widgets 

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