Why Responsive Landing Page Templates Make Better Landing Pages

Why Responsive Landing Page Templates Make Better Landing Pages

Last updated on September 13, 2016 by Ted Vrountas in Conversion Rate Optimization
Show Me The 35 Best Landing Page Tips

Step aside, Leonardo DiCaprio. Move over, Meryl Streep.

As it turns out, the best actors in the world aren’t found on movie sets in Hollywood, but in the silt and sand of the Indonesian seas.

The world’s most amazing role player is the aptly dubbed Mimic Octopus and it performs daily underwater dramas dressed as some of the ocean’s deadliest creatures. Its ability to quickly transform into sea snakes, a banded sole, or lionfish — no animal is too complex for this master impressionist — makes it one of the most adaptable creatures in all of nature.

The Mimic Octopus is the embodiment of the often cited Darwinian remark:

“It is not the strongest species that survives, nor the most intelligent species that survives. It is the one that is the most adaptable to change.” — Charles Darwin

Adaptation isn’t unique to the animal kingdom; it continues to plays a big role in digital marketing.


Responsive website design.

Adapting to a mobile, multi-screen world

Things were a lot easier for web designers before iPods, mobile phones, and tablets. Internet users browsed strictly on desktop and laptop screens that didn’t vary much in size — which meant most websites looked similar no matter where you viewed them.

But, that all changed when we started surfing the web with our thumbs. In 2014, the majority of internet traffic worldwide came from mobile — and it’s been that way since.

A year later, we spent an average of almost three hours a day on our mobile devices, compared to just 20 minutes in 2008.

This picture shows marketers how internet usage has increased on mobile the most in recent years compared to desktop and other devices.

This shift resulted in a distaste for “fixed design” websites that couldn’t adjust to the many screen sizes that internet users viewed the web on. To satisfy them, new techniques had to be developed.

Adaptive design and the early days of mobile

When the mobile revolution began several years ago, initially the most popular way to tailor your website to non-desktop users was to create a completely different mobile version of your site.

The major issue with this?

Double the website maintenance. You needed separate SEO campaigns, PPC campaigns, content strategies for both the mobile and desktop versions of your website. But, people made due…

That is until the number of screen sizes and resolutions became too many to keep up with.

This graphic from Ofcom’s 2014 internet usage report shows the variety of our device preferences:

This picture shows marketers how tablet, smartphone, and laptop dominate internet access.

Here’s another visual from Smart Insights, which shows people’s device preference throughout the day:

This picture shows marketers how people's device preference changes through the day from smartphone, to PC, to tablet.

And to hammer home the point? Look at all the different mobile devices manufactured JUST by Samsung in the “Galaxy” series:

This picture shows the wide variety of Samsung's Galaxy series on phone and tablet provided with dimensions.

It was becoming clear, as Steve Cartwright explains, that building multiple versions of your website wasn’t going to work.

“These days are gone, the problem with this approach is that just because something is made to be viewed on a mobile device, it doesn’t mean it can be viewed on any and all mobile devices.”

Still, some people clung to adaptive design — until Google chimed in to reveal that their search algorithm would soon change to reward sites that were responsive, and penalize those that weren’t:

“Starting April 21 (2015), we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high-quality search results that are optimized for their devices.”

(It should be noted that while at one point responsive websites ranked higher in search results, search engines have adjusted to accommodate adaptive sites as well.)

The message was clear: Adapt to more devices, or become obsolete (at least in search rankings).


By using responsive design.

Responsive design: What is it, and how does it work?

As it turns out, Google had been advocating for responsive design long before they gave the “Mobilegeddon” ultimatum — specifically saying things like:

“If you’re ready to build a mobile-friendly site, choose responsive web design”

“Responsive design is Google’s recommended design pattern”

But what did this technique entail? Why was it better than adaptive design?

To answer those questions and more, Verve created an awesome infographic that breaks things down in a way non-techies can understand. Some highlights:

This graphic shows marketers how responsive web design makes browsing easier and more user friendly.

Flip your phone sideways, turn it upside down — no matter the orientation, device, or browser, user content always displays well. But how?

This graphic shows marketers why flexible grids and flexible images are important to responsive web design.

“Unlike isolated mobile websites, responsive design adapts the layout to the viewing environment by using fluid, proportion-based grids and flexible images.”

Basically, where adaptive websites were tailored to specific screen sizes, responsive ones were designed using percentages of the total screen of the device it was being viewed on. Here’s a great GIF to help you visualize the difference across desktop and mobile screens:

This gif shows marketers the difference between responsive landing page templates and adaptive landing page templates.

Because responsive website elements are coded to occupy a certain percentage of a screen, they will take up that portion of the screen no matter what size it is:

This gif shows marketers the difference between relative units and static units with responsive web design.

Responsive landing page examples

To demonstrate how responsive pages appear on different devices, let's look at three examples.


This picture shows marketers how Tableau's whitepaper responsive landing page looks on desktop and mobile.


This picture shows marketers how PulsePoint's responsive demo landing page looks on desktop and mobile.


This picture shows marketers how Fundbox's get started responsive landing page looks on desktop and mobile.

A static landing page example

Now, let's look at how a non-responsive page looks on different devices. Notice how the mobile version is much more condensed to fit the screen size and not as user friendly?


This picture shows marketers how Alteryx's static landing page is not responsive to different screen sizes.

Is responsive design worth it?

According to a number of case studies, redesigning your website using responsive techniques can have a massive impact on your bottom line. Check out some results from businesses that have already adapted:

  • Electric Pulp boosts conversions for O’Neill clothing company on Apple devices by 65.71%, transactions by 112.5%, and revenue by 101.25%. Android devices boast an even more impressive boost, with conversions improving by 407.32%, transactions by 333.33%, and revenue by 591.42%.
  • Using responsive website design, Baines & Ernst boosted pages per visit by 11%, average visit duration by 30%, mobile conversions by 51%, all while decreasing bounce rate by 8%.
  • According to Gravity Department, who responsively redesigned clothing retailer, Skinny Ties' website: “By the numbers, modernizing Skinny Ties is already proving a watershed success. The normalized figures versus the prior three months are staggering.”

The new version of Skinny Ties' website succeeded in skyrocketing a number of key performance indicators:

    • 42.4% revenue growth for all devices
    • 377.6% revenue growth for iPhone
    • 13.6% increase in conversion rate
    • 71.9% increase in conversion rate on iPhone
    • 44.6% increase in average visit duration
  • TIME magazine adapts to a growing percentage of mobile readers with a nine-month responsive rehaul of their website. The results speak for themselves, says David Moth of Econsultancy:
    • Mobile and tablet traffic has gone from 15% of the site traffic pre-redesign to now almost 25%. The bulk of that was the migration of people who were using the old WAP site migrating to the new site.
    • Pages per visit (PPV), across mobile, tablet and desktop are up “considerably” - for example, mobile PPV increased 23%
    • On the homepage, unique visits increased 15%, and time spent went up 7.5%, with the mobile bounce rate decreasing by 26%.

Sounds like all good news from the responsive front. So why isn’t everyone responsive?

According to an article from Nielsen Norman Group, there are a few reasons:

  • Responsive websites are generally a bit slower to load.
  • A higher level of development skill is required to create a responsive website. If you don’t have that skill, outsourcing can be expensive.
  • Responsive sites can’t always perform complex tasks as well as adaptive sites can, or resize rich media like spreadsheets on smaller devices.

So when you don’t have the time or skill to develop a responsive website — or the money to outsource the redesign to professionals — what are you to do?

We’ll refer back to Google for the answer to this one:

...select a responsive template or theme for your website. A responsive template/theme adapts the display to the visitor no matter if they are using a desktop, tablet, or mobile phone.”

Instapage’s simple responsive landing page software

Designing a landing page that displays content beautifully across all devices is easy with Instapage. Here’s how to do it:

Step 1: Log into your Instapage account

Step one, of course, is to log into your Instapage account. If you don’t have one yet, you can create one here.

Once you’re in, click the “Create New Page” button.

Step 2: Pick your creation method

Now you should sees a pop-up that will give your three options to get started creating your responsive landing page:

This picture shows marketers how to pick a responsive landing page in Instapage.

  • If you’ve saved any landing page designs, you can upload a “.instapage” file
  • If you have a Premium account, you can scan pages from your website into our editor
  • If you want to start from scratch, pick one of our pre-designed responsive landing page templates

Step 3: Decide which responsive landing page template you want to use

Let’s assume you want to build a responsive landing page from scratch. Before you choose one of our templates, sort them by the type of landing page you want to create using the menu across the top of the page:

This picture shows marketers how to choose a responsive landing page template in Instapage.

Pick from:

  • Lead Generation landing page
  • Lead Generation (2-Step) landing page
  • Click Through landing page
  • Webinar landing page
  • Mobile App landing page
  • “Thank You” landing page

Step 4: Create your responsive landing page

It’s time to get creative. Click any element on the page to select it, and delete, drag, or edit it with the click of your mouse. Here’s what ours looks like:

This picture shows marketers how a responsive landing page looks on desktop.

And here’s what it looks like on mobile:

This picture shows marketers how a mobile responsive landing page looks in Instapage.

Preview yours by toggling between the mobile and desktop version of the page in the upper-left of your screen, then press the “Preview” button in the upper-right.

To make your responsive landing page more persuasive, add:

Now you’re ready to publish your responsive landing page.

Step 5: Publish your responsive landing page

Responsive landing pages are easy to publish with Instapage. Now simply move your mouse cursor to the upper right-hand corner of the page and click the blue “Publish” button.

Once you do that, you should see a pop-up like the one below:

This picture shows marketers the many publishing options within Instapage.

Now choose from five different publishing options. You can:

And now you’re done! It’s that easy!

Design responsively

Today your website visitors expect an experience tailored to the device they’re using. When you don’t have the time, resources, or skill to create your own responsive landing pages from scratch, or the money to outsource to a professional, use one of Instapage’s 100+ templates to publish a page in a matter of minutes!

Show Me The 35 Best Landing Page Tips
Sign Up for a 30 Day Free Trial
Join 250,000+ other businesses who rely on Instapage.
Get Started