How to Optimize Mobile App Landing Pages - Instapage Guide

How to Optimize Mobile App Landing Pages

Last updated on June 13, 2017

Now that we’ve discussed the backend aspects of mobile app landing pages, it’s time to examine the front-end design. In this chapter, we will highlight the UX (user experience) practices and optimization techniques that are required for mobile app landing pages.

Mobile Landing Page Optimization Best Practices

Going mobile is no longer a trend. In chapter 2 we saw the number of mobile users had surpassed the number of desktop users, which means your offers and the landing pages you connect them with must be ready for mobile audiences.

According to Business Insider, mobile is growing faster than all other digital advertising platforms, and advertisers have begun allocating their marketing budgets for mobile users. Specifically, U.S. mobile ad spend will surpass $80 billion in 2018, which is a marked increase from 2013:

Mobile Advertising Revenue Chart

The important thing to understand about mobile users is that they behave differently than desktop users. The average session duration on mobile is 72 seconds, whereas desktop it’s more than double at 150 seconds. So it’s imperative that your page not be too long because mobile users are less likely to engage long enough and get value from an unnecessarily long page.
Therefore, your mobile landing pages shouldn’t be copy-heavy, just include enough copy to explain your offer’s value, and refrain from filler paragraphs that don’t add any value to the page and simply look pretty.
For example, Flyosity’s mobile app landing page doesn’t overwhelm you with copy:

Flyosity Mobile Landing Page Example

As far as typography and font size goes; fonts should be legible, be applicable to your brand, and Google recommends using a base font size of 16 CSS pixels.

Also, it’s recommended your form not include too many fields because if users hesitate to convert on their desktops, they’re even less likely to convert on mobile devices. This is because mobile users are too preoccupied with text messaging, email, and social media – you don’t want to create friction with a long form that requires significant effort to complete.

Threatmetrix runs the risk of losing conversions by including a long form on their mobile page:

ThreatMetrix Mobile Landing Page Example

Given the average mobile phone’s screen size, a form of this length looks too overwhelming for visitors. Plus, a free report doesn’t require so many fields in the first place, especially on a mobile page.

To increase your conversion chances, design your page with mobile UX principles in mind. According to UX Matters, mobile phone users interact with their phones in three different ways: one handed (49%), cradled (36%), and two-handed (15%):

Users Interacting with Mobile Phone Figure

The thumb plays a significant role in mobile touch screen action, so it’s critical that your call-to-action buttons and lead capture form fields be within the “thumb zone:”

Thumb Zone iPhone Map

The thumb zone is a heat map that portrays how easy users can tap different areas on phone screens. Below is what the different colors represent:

  1. The green zone depicts the safest and natural zone.
  2. The orange zone shows that users have to stretch their thumbs to reach the area.
  3. The red zone highlights the area which is the most difficult to reach.

Also, keep in mind that the heatmaps above apply to right-handed users. For left-handed users, you simply flip the heatmaps. If you’re mindful of UX principles when designing your mobile landing page, your conversion rates are likely to increase.

Your mobile landing page call-to-action buttons should be prominent and easily understood. For example, Reddit’s mobile app landing page CTA buttons draw visitors’ attention and lets them know how to download Reddit’s app in the App Store and Google Play:

Reddit Mobile App Landing Page Example

You can also add a click-to-call CTA button on mobile pages because offering visitors the option to call you after they’ve seen your offer is another way to earn a lead and potential customer.

A Search Engine Land study found click-to-call functionality to be most effective while the visitor is in research and purchase phases, and smartphone-based calls tend to come from buyers making larger value purchases:

Click-to-call Functionality Diagram

As an example, String Automotive A/B tested their mobile landing page and found a 200% increase in conversion rates with a click-to-call button above the fold. Furthermore, according to Google, 61% of mobile searches result in a phone call – so it’s worth including a click-to-call button on your landing page.

The following user experience terms are crucial for mobile app landing pages:

Appropriately size tap targets

Tap targets are locations on web pages that a user interacts with to perform an action, such as click a link, a button, or complete a form. Tap targets should be designed large enough so they can be touched easily without tapping another target. If visitors accidentally tap another target because their intended action was designed too small, they will become frustrated. At the same time, a page’s tap target should have enough room for the visitor to touch with their fingertip.

Avoid app install interstitials that hide content

Interstitial ads are overlays that block a user’s display and prevent them from interacting with other content. Because the user is required to take an extra step to close the ad, this ad format frustrates users and should not be used.

Avoid plugins

Plugins require installation and need to be updated to show web page content. Plugins are a nuisance for mobile pages because most mobile devices don’t support plugins, so your page is likely to crash when a visitor lands on it.

Configure the Viewport

A viewport is the user’s visible area of a web page, i.e. the width of a web page the user can see on the device they’re using. Because the viewport varies for each device type, it is smaller on mobile screens.

If you don’t configure the viewport for mobile screens, the web page will render at the width of a typical desktop screen, and then scale to fit the mobile screen. The problem with this is, the copy and images will be very tiny, causing readability issues (and hurting your conversion rates).

To avoid this problem, configure your page’s viewport so that it scales automatically and your mobile page looks something like this:

Meta Viewport Tag Setup

Size Content to Viewport

Failing to size content to your configured viewport causes your images and content to go off-screen horizontally. In turn, this requires visitors to scroll sideways to read about your offer instead of viewing all content within the screen’s dimensions. Of course, this isn’t ideal so make sure you size your content accordingly.

Use Legible Font Sizes

Your page will only be readable if you use legible font sizes for smaller screens (see Chapter 5 and using 16 px). Also, keep in mind the angular resolution of a mobile screen. According to UX Matters, you can calculate angular resolution for any device using the following formula:

Visual Angle (minutes of arc) = (3438) * (length of the object perpendicular to the line of sight) / (distance from the front of the eye to the object)

Here’s a graphic that explains the concept:

Angular Resolution Figure

Why Pagespeed is Critical for Your Mobile Landing Page

If your mobile landing page doesn’t load quickly, you will frustrate your visitors and risk losing conversions. In fact, 85% of mobile visitors expect pages to load faster than they do on a desktop.

The diagram below explains how latency (the time interval between the simulation and response of a web page) impacts user behavior:

Latency impact on User Behavior

Meeting the 4-second load threshold is critical for meeting user expectations because if your page takes longer to load, your visitors will move on to another page that addresses their needs much quicker.

Faster mobile landing pages (meant to be indexed, or included in search results) are also important for SEO purposes because they generally rank higher in search engines than slower pages. Landing pages are often “noindexed” so they do not compete with other website pages, as the content is usually similar (and shorter) compared to existing, indexable pages on a site. Visitors tend to click on higher-ranked pages more often, and thus, a faster mobile landing page increases the chance for more visits and conversions.

The WebPageTest tool uses the waterfall diagram to give a graphical representation of all the resources loaded by a web browser to show a page to users. By using this diagram, you can gain an insight into why your page loads slowly and how you can fix issues to make it faster. The diagram is a cascading chart that displays how a web browser loads and renders web pages. It uses a multi-colored bar to show where the browser spent time loading the page resource:

WebPageTest Tool Waterfall Diagram

Google’s Pagespeed Insights gives you an in-depth UX summary of your website. It rates the website on a scale of 100 by checking off points such as font sizes, plugins, app interstitials, etc.

To demonstrate, let’s see how Google’s Pagespeed Insights rates Reddit’s landing page:

Reddit Mobile Landing Page Pagespeed Example

Although the scoring data will likely change as Reddit makes changes to their page, the scoring criteria will remain the same (64 and 96 were shown here to demonstrate how Reddit scored when this test was performed).

Google’s Mobile-Friendly Test tests whether or not your page is mobile friendly. Just enter a URL and click “analyze,” like we did with Reddit’s mobile app landing page:

Reddit Google Mobile-friendly Test Example

Google’s Search Console tool shows a mobile version of your page and gives you a site-wide mobile usability report. Continuing with Reddit’s page, here is their result:

Reddit Google Search Console Mobile Test Example

Like Google, Bing’s Mobile Friendliness Test Tool lets you analyze your page and tells you whether or not it’s mobile friendly by checking off a list of mobile page UX prerequisites (shown next to the green checkmarks).

Here are the results for the Reddit app page:

Reddit Bing Mobile Friendliness Test Example

For your mobile landing pages to load faster, you must take care of the following items:

  1. Eliminate render-blocking JavaScript and CSS in above-the-fold content: Google recommends removing JavaScript that interferes with loading the above-the-fold content. If you fail to do this, your page will not load correctly.
  2. Leverage Browser Caching: Browser caching locally stores resource files when you visit a web page. When you leverage browser caching, the browser remembers the resources it previously loaded. This means your logo and CSS files are saved by the browser and your page loads quicker than if there were no previous resource files.
  3. Enable Compression: Compression allows the web server to serve up smaller file sizes, so they are loaded faster on mobile devices.
  4. Minify Resources: Minifying resources involves removing all unnecessary characters from a file to reduce its size, which results in faster load times. While Minifying HTML, some things that get removed are white space, comments, line breaks, and block delimiters.
  5. Avoid landing page redirects: Redirects are not recommended because they increase page load times and hinder search engine bots to crawl the page.
  6. Optimize Images: Instead of reducing image size, optimize your images to decrease page load times. You can use a whole array of tools to optimize your mobile images, including the ones on this list.
  7. Prioritize visible content: Visible content refers to the above-the-fold section on the page — the part visitors can see before they scroll. To ensure visitors see page content as soon as they land on the page, it’s important to reduce the size of the above-the-fold content. You can do this by either structuring your HTML content to load above-the-fold content first or by reducing the amount of data used by your resources.
  8. Reduce server response time: Server response time is the amount of time it takes for a server to respond to a browser request. If your server response time is slow, your mobile page’s speed is negatively impacted. To improve response time you need to use a hosting service, or use a caching plugin on your page.

Clearly, pagespeed is a vital ingredient to the conversion equation. Google’s introduction of Accelerated Mobile Pages (AMP) and Facebook’s Instant Articles are a clear indicator of this. The AMP framework uses a lighter form of coding languages to create pages that load quickly on mobile without any third party JavaScript and gives your page a big SEO boost.

This is what AMP looks like:

AMP Example

Both platforms claim to deliver mobile web experience ten times faster than the common website experience. The AMP project is an open source initiative and aims to help publishers create mobile-optimized content that loads instantly everywhere. Instant Articles are designed in the same manner and allow publishers to create fast loading interactive articles on Facebook:

Facebook Instant Articles Solution

Optimizing mobile landing pages based on UX principles is the best way to ensure you’re providing value to mobile visitors. If you choose not to optimize your mobile pages, your conversion rates will undoubtedly suffer.