By continuing to use our website, you consent to the use of cookies. Please refer our cookie policy for more details.
    Grazitti Interactive Logo

      Oct 23, 2013

      2 minutes read

      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.
      Create Responsive Landing Pages in Marketo

      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:

      Use Marketo Double DIV method
      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.
      Grazitti has developed responsive landing pages in Marketo for a number of clients. We have a rich portfolio of landing page and mailer designs, all set up in Marketo, with out-of-the-box features to help you get design inspiration and feature implementation ideas. Download Your Copy!