Making The Case For Native Mobile Landing Pages

At SMX East in October 2012, I presented on mobile landing pages at the popular iConvert session. Given the surge of interest in mobile marketing, and in particular, mobile landing pages, I thought it would be a good time to cover some of the key points from that presentation here.

Generally speaking, there are two ways to implement mobile landing pages:

• Use responsive design to have your pages adapt to the appropriate device.
• Implement native mobile pages that are explicitly designed for that purpose.

Using Responsive Web Design

With responsive Web design, you can create one version of your pages that should look good on smartphones, tablets, and desktops alike. Scenarios where your audience may arrive from any device, such as your company’s primary website, are well-suited to this approach.

However, responsive Web designs can be challenging to build well. In many cases, you still want to conceptually evaluate content at different breakpoints (for instance, the width of the screen for a smartphone vs. a desktop browser) to determine which content is hidden or de-emphasized at each point and how the remaining content flows. Implementing flexible images and progressive enhancement can also be technically challenging.

For conversion optimization aficionados who value testing as a way of life, another conundrum should be apparent: the preferences and behaviors of mobile users may be very different from their desktop counterparts. You’ll want the ability to independently measure those two segments.

Many people like the idea of responsive design because they believe they won’t have to manage separate content for mobile and desktop users.

However, if you find that the “A” version of a test wins on desktops, while the “B” version wins on mobile, you’ll want the ability to deploy the winners to their respective audiences. In which case, you end up managing two different versions of your pages anyway.

Scenarios For Native Mobile Landing Pages

The trade-offs for responsive design in conversion optimization are subtle and complex, and they deserve their own article. For now, let’s examine two scenarios where having native mobile landing pages — built specifically for smartphone form factors — makes sense.

The first scenario is mobile ads. If we know the click is happening on a mobile device, then we can make a number of important assumptions in the post-click experience of the landing page.

Mobile ads, particularly in search, have tremendous potential to intercept prospects at a key moment of intent. New research from Google reports that 57% of smartphone users who use the Internet in general do one or more searches on their phones every day. Google also claims that mobile search ads have 11.5% higher click-through rates (CTR) on average.

The advantages of mobile-specific ad campaigns include the ability to bid differently, define a separate mobile budget, test different keywords, and write mobile-specific ad text. But most importantly, they let you link directly to mobile-specific landing pages.

The second scenario is QR codes. If someone triggers a QR code, not only do we know they’re on a mobile device, we also may know something about their location or physical context. For example, QR codes used at conferences and trade shows can connect people to highly relevant content and offers.

Now, we could debate whether QR codes are the best form of bridging the link between the physical world and the digital one. Indeed, new technologies such as near field communications (NFC) may supersede QR codes. But we can agree that where QR codes — or their future replacements — are being used, we should fulfill the expectations of those respondents with an appropriate mobile experience.

To quote the UX Drinking Game, “If a QR code doesn’t lead to mobile-enabled content, drink.”

Advantages Of Native Mobile Landing Pages

In those scenarios where we know we have a mobile user based on the origin of their click, there are several advantages to crafting mobile-specific landing pages: form factor, speed, and context-specific content.

The form factor is the most obvious. By designing a page that is explicitly targeted for a mobile device, we can properly proportion and lay out the content with a small touch-screen in mind in a WYSIWYG fashion. That may be achieved by removing “optional” content on a page, but more often it’s better to tailor your content to the format, such as using shorter headlines and copy blocks.

By building pages explicitly for mobile devices, you can also design interaction mechanisms that best suit those use cases. Taps, vertical scrolling, click-to-call, and swipes are easy. Pinch and zoom, horizontal scrolling, and filling out forms are not.

For instance, you may find that content is best rolled up into accordions or tabs that let people tap for more detailed information on specific sub-topics, rather than having to scroll through a full page of prose. (See Wikipedia on your smartphone for a great example of this.)

The size of your pages — as in how much bandwidth they require and how long they take to load — is more subtle, but extremely important. Even on so-called 4G devices, mobile users are often slowed by factors such as poor signal strength or contention with other Internet traffic on their particular hotspot.

Even under these constraints, however, mobile users don’t have much patience for slow-loading pages. A recent study by Compuware reported that 74% of mobile users expect a page to load within 5 seconds or less.

Another advantage of designing mobile-specific pages is that you can optimize your content for such low-bandwidth conditions. You can use smaller images — and a small number of them. You can eliminate some of the heavier Javascript that doesn’t apply on mobile devices. I generally recommend keeping total page weights (all assets included) to less than 300K.

The biggest advantage of native mobile landing pages, however, is that their content is tailored to the context of those respondents. As mentioned above, mobile users have more resistance to filling out forms as a call-to-action than they do on a desktop. However, actions such as click-to-call, click to download a mobile app, or click to use geo-location for local maps and directions are relatively easy and often much more helpful to mobile visitors.

If you are going to use a form, consider a single field form that simply asks for an email address and emails the respondent more detailed information with a number of follow-up links. This facilitates sequential multi-screening use cases, which are on the rise.