Why Responsive Landing Page Templates Make Better Landing Pages

Last updated on by Ted Vrountas in Conversion Optimization

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

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

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

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:

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

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

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:

Responsive post-click landing page examples

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




A static post-click 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?


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:


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

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

Why every web page is not responsive?

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

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 post-click landing page software

Designing a post-click 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 see a pop-up that will give your three options to get started creating your responsive post-click landing page:

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

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

Pick from:

Step 4: Create your responsive post-click 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:

And here’s what it looks like on mobile:

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 post-click landing page more persuasive, add:

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

Step 5: Publish your responsive post-click landing page

Responsive post-click 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:

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 post-click landing pages from scratch, or the money to outsource to a professional. Sign up for an Instapage Enterprise demo today.

Turn More Ad Clicks into Conversions

Try the world's first Post-Click Automation™ solution today. Start a trial or schedule a demo to learn more about the Enterprise plan.