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.

A/B Testing on Mobile Landing Pages

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.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: Channel: Analytics | Search & Conversion

Sponsored


About The Author: is the president and CTO of ion interactive, a leading provider of landing page management and conversion optimization software. He also writes a blog on marketing technology, Chief Marketing Technologist. Follow him on twitter via @chiefmartec.

Connect with the author via: Email | Twitter



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://www.delivra.com/ Cody Sharp

    I like that you mention the difficulty of making responsive pages,. Most people act like it is the only way to do things nowadays but the truth is, it is a whole lot of work, especially foe a pre-existing website with ton’s of content.

  • http://www.esocialmedia.com Jerry Nordstrom

    Great Pro’s and Cons Scott. I have been working through these issues and exciting opportunities over this past year. Once again it comes down to balancing the client’s needs and resources. Although it would be great to create/track/test all variations unfortunately, the budget is simply not there to take on this level of complexity. Responsive gives you an “all in one” solution that works for these types of clients.

    Converting an existing site into a responsive design can be a huge challenge. If the site has never addressed mobile, then perhaps now is the time to consider updating the entire strategy. Web, Ads, Tracking, Testing.

    Otherwise creating new sites by combining a responsive design with media queries can help achieve a solid hybrid solution. It is nearly impossible to keep up with all the new device sizes and resolution capabilities, so you can handle the masses with a responsive design and still build out media query styles for the mainstream devices.

    For any small business owner who is looking at redesigning or creating a new website, your developers had better be offering mobile solutions!

  • http://twitter.com/chiefmartec Scott Brinker

    Just to clarify, I think responsive web design (RWD) is great. For web sites today, given all the different trade-offs at play, I think it’s probably the best way to go.

    However, with things like landing pages and their variations — i.e., campaign-specific experiences that follow a click-through from an ad or other targeted promotion — if you KNOW (with 99.9% certainty) that your respondents are mobile users, as is the case with the two scenarios I describe in the article, then it just seems simpler to build those experiences directly with that form factor in mind.

    Of course, as one RWD advocate pointed out to me, you could certainly build for that form factor within the context of a responsive design. If that’s faster and easier for you — and maybe with some RWD frameworks it is — then great, go for it! :-)

    I guess I’d reframe my position this way: for mobile-specific campaigns, give your mobile respondents the best possible experience you can. Whether that’s achieved with RWD or a native mobile page design really becomes more of a technical detail.

  • http://www.facebook.com/stephane.bottine Stéphane Bottine

    Can someone recommend a responsive design framework? I’ve used Bootstrap in the recent past and was impressed with its performance but am open to suggestions and keen to hear what others have to say.

  • http://twitter.com/DPC_RS_ Daniel Carlyon

    I’ve used bootstrap before too and found it very good, there’s another one that is very similar to bootstrap but i am yet to try called wirefy. http://getwirefy.com/

  • Peter @SparkPage.com

    Great breakdown of the issue Scott.

    In addition to PPC & QR, I’d add SMS as a 3rd, really important channel where we know for certain that the user is on a mobile device.

  • James

    Use html5boilerplate – example of a website using it well http://gosillk.com – view the source code and learn.

  • James

    Use html5boilerplate – example of a website using it well http://gosillk.com – view the source code and learn.

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide