Create Responsive Landing Pages in Marketo

Responsive design has been a hot topic for the past few months and now, users can experience this in Marketo hosted Landing Pages also.

Benefits

Using responsive Landing pages in Marketo will benefit in the following ways:

• User friendly : Responsive design provides great user experience with clarity and readability
• SEO friendly : Search Engines prefer Responsive designs and index them high
• Device friendly: User will get the LP version as per the device used with no horizontal scrollbar. One Landing Page works for all – desktops, tablets, and mobiles.

Why Responsive Landing Pages in Marketo?

Responsive LP in marketo helps you in achieving better conversion rates.

• With Marketo, one can get the progressive profiling for forms to gather more lead data overtime
• Extensive tracking and analytics
• Other features – Social sharing, polls, tokens in one click

Key things in creating Responsive Landing Pages in Marketo:

1. There will be no CSS defined in the Landing Page template. You have to define all the styles in External CSS (it can be on third party server or in your Marketo instance) and call it in your Landing Page Template.
2. The order in which the elements have been created is the order in which they appear in the DOM i.e. they will float as per the order.
3. Use Bootstrap package for creating Responsive Landing pages using the provided CSS classes in it or you may use CSS Media Queries.
4. Use Marketo Double DIV method to remove absolute positioning of the dragged Page Elements. Example below:

Adding New Element:

1. Once you drag the HTML container, the code in the container should start with (Marketo double DIV method)
   </div>
   </div>
   and ends with
   <div>
   <div>
2. It is a good practice to encapsulate the code in <article> and <section> tags as shown in the above image, and to use bootstrap classes for making the code responsive
3. If you want to add & display the Page Element in between of the created ones, you have to place the elements in correct order. For this, you have to delete the Page Elements which are coming after the created ones and then add them again.