Mobile Configuration Options - Instapage Guide

Mobile Configuration Options

Last updated on May 18, 2017

Creating an optimized landing page for all types of screen sizes and types is paramount to increasing conversion rates. No matter who your target audience is, they are likely not restricted to one mobile device when it comes to accessing web pages. This is why it’s important to understand the main techniques to use when creating a page that looks pretty on all screen sizes.

There are three mobile configuration options:

1. Responsive Web Design (RWD)

Web pages created with responsive web design show the same page on the same URL regardless of the user’s device and screen size.

RWD is Google’s recommended design pattern when you create a responsive landing page because its algorithm automatically detects the setup and then Google user agents crawl the page and its assets that include CSS, JavaScript, and images.

This is how a responsive web design setup looks like on different devices:

Responsive Web Design Setup

With the help of responsive design, you reduce the possibility of unplayable content, faulty redirects, mobile-only 404s, irrelevant cross-links and slow mobile pages.

By adding a viewport meta tag to the head of the web document, you eliminate the risk of mobile browsers trying to make your content look better, which results in the inconsistent appearance of font sizes.

When you specify the meta viewport tag you achieve the following results:

Meta Viewport Tag Setup

2. Dynamic Serving

Dynamic serving is similar to responsive web design because both setups use the same URL on different devices. However, with dynamic serving the server responds with different HTML (and CSS) depending on the user agent requesting the page.

The setup sends different code to each device, but it does this on the same URL:

Dynamic Serving Setup

Because dynamic serving is not Google’s recommended setup, marketers need to use the Vary HTTP header to signal your changes depending on the user agent, so that user agent strings are detected correctly and users see all the content.

3. Separate URLs

In the separate URL setup, every desktop URL has an equivalent different URL for mobile-optimized content. Usually, the URL for the mobile optimized content is exactly like the desktop URL, with only a letter ‘m.’ at the beginning of the URL:

Separate URLs Setup

When implementing the separate URL setup, it’s important to check that desktop pages aren’t accidentally redirected to an unrelated mobile page:

Desktop Mobile Redirection Diagram

You can redirect your pages using HTTP and JavaScript redirects.

Mobile landing pages need to provide users with the optimal experience, because if there are problems with mobile optimization with your page, your Google rankings will suffer.

Regardless of the setup you choose, make sure to keep your page resources (such as HTML, CSS, and JavaScript files) crawlable. This is because if Google or other search engines don’t have access to your page’s resources, then they won’t be able to detect how it’s built to display, and your page’s appearance and functionality will suffer.