• Build a landing page in the Unbounce Builder's new Preview mode
  • How "Best Practices" Change When You’re Dealing with Mobile-Responsive Landing Pages

    Are your landing pages as mobile-friendly as this kitty? Image by Prime Number via Flickr.

    Are you creating delightful landing page experiences for your prospects regardless of which device they’re using?

    Visitors shouldn’t have to pinch-to-zoom to read the copy on your landing page. They shouldn’t have to scroll frantically to find your CTA. And they shouldn’t have to tire their thumbs completing your super long form.

    If you want to create delightful experiences for all your visitors, then you need to optimize your landing pages for mobile.

    But what does that entail exactly? What do you need to know about your mobile visitors to optimize your landing pages for them?

    I reached out to eight conversion rate optimization experts to find out.

    Here are six ways that landing page optimization “best practices” change when you’re dealing with mobile-responsive pages.

    1. Account for the unique goals of your mobile users

    Very often, your mobile and desktop users have different goals. Angie Schottmuller of Three Deep Marketing explained:

    Screen size, device type and context (environment, mindset) can all dramatically change what users expect, what users need and what users want to do.

    Many of the experts I spoke to found that their mobile users are not in the same buying mode as their desktop users. Specifically, here’s what Michael Aagaard of ContentVerve found:

    michaelI generally see lower conversion rates via mobile. In most cases, desktop is still the highest converting channel, followed by tablet and then mobile.

    We’ll probably see more of a shift towards mobile over the next few years, but it seems that people are still more comfortable making buying decisions via desktop. Of course it depends on the business, the conversion goal and the mobile experience. It seems to me that lower scrutiny offers that require less commitment are a better fit for mobile than offers where you need to take in a lot of information and make a major buying decision.

    People might be less likely to make a purchase on mobile, but Alex Harris of Alex Designs found that mobile users are often in research mode:


    Through our research we have found that mobile users tend to do research on their phone and then complete transactions and purchases on their other devices (tablets and computers).

    This makes generating leads the most important conversion for the mobile device.

    If mobile users are still in the research phase, then you’ll want to make it easy for them to get all the information they need – which is why many experts recommended this next tactic.

    2. Test swapping out your CTA for a click to call

    Because prospects are gathering the information they need to make a buying decision, Alex Harris explained that you should make it easy for people to phone in:

    When setting up your mobile/responsive landing pages, you want to ensure that it’s easy for the user to call your company.

    Here’s what he recommended:

    1. Ensure your phone number is in HTML and it is “Click to Call” ready, meaning you can tap on the phone and it will dial for you.
    2. Test a phone number versus a “Click to Call” button. This button functions the same as clickable phone number, but it’s a button with call to action text that says “Call Now – Click Here.” We have seen 10-20% increase in phone calls when using this type of button.

    Angie Schottmuller shared this slide from one of her presentations, showing how to configure your click to call buttons (complete with GA tracking):

    Image courtesy of Angie Schottmuller.

    Keep in mind that this tactic is only effective if you have the bandwidth to actually field calls. For many marketers, optimizing your lead gen forms for mobile may be a more sustainable route.

    3. If calls aren’t your primary goal, eliminate typing as much as you can

    Even if you have a mobile-responsive landing page, receiving calls may not be your primary goal. After all, phones are for way more than calling these days.

    You may also want to be capturing leads via a form.

    It that’s the case, Brad Geddes of Certified Knowledge suggests keeping the forms as simple as possible:

    bradUsing a lot of dropdown menus and required selections can be OK to qualify users on a desktop. That same form is not OK to use on a mobile device.

    Remove most, if not all, of your optional fields on mobile devices and then remove the “extra” required fields that a salesperson can ask.

    For many of the experts I spoke to, optimizing mobile opt-in forms is all about reducing friction – the resistance your visitors experience (whether psychological or physical) when trying to complete an action.

    To reduce friction, Johnathan Dane, President and Co-Founder of Disruptive Advertising, recommended cutting back on form fields, especially if you follow up with prospects later:

    daneTake a good look at what form fields you’re requiring visitors to fill out.

    Can you remove a lot and then qualify them over the phone instead?

    If so, do it, and see your conversion rates grow.

    He also shared a really simple but effective tip that will make the user experience more smooth for prospects:

    With mobile forms, make sure your different input fields automatically switch the mobile keyboards to alphabetical vs numeric depending on if it’s name (alphabetical), phone (numerical), email (alphabetical), zip code (numerical), etc.

    In one of her presentations, Angie Schottmuller illustrated what different input fields look like on a mobile device:

    Image courtesy of Angie Schottmuller.

    Another tactic for reducing typing (and friction) on your mobile landing page forms came from Josh Krafchin, founder of Clever Zebo:

    joshPeople are hesitant to type a lot on their phone, but they’re more likely to take an action if made easy. Finding ways to reduce typing can be crucial: e.g. social login instead of form fill out, integrating with payment solutions that already have payer information loaded, multi-select over free-form text.

    4. Forget what you know about “above the fold”

    As Alex Harris explained, optimizing your mobile-responsive landing pages for “above the fold” design practices is tricky:

    The best practice of keeping your best CTAs “above the fold” can be difficult with all the different screen sizes.

    This is because there are so many different devices with different resolutions and fold lines. For example, in portrait view, the iPhone 4 is 480px tall, the iPhone 5 is 568px, the iPhone 6 is 667px and lastly iPhone 6 plus is 736px tall.

    This means that placing your CTA “above the fold” on your mobile-responsive landing pages isn’t as clear-cut as doing so on a regular landing page.

    So how do you get around this? How do you adapt your pages to an ever-changing fold line? Angie Schottmuller recommends creating a smaller version of your form CTA at the very top page, typically below the logo:

    angieCreate a mini version of the main CTA that simply jumps to the web form to expedite action.

    This approach ensures an obvious CTA is “above the fold” which highly appeals to the goal-oriented mobile user.

    Even if we’ve grown accustomed to scrolling on our mobile devices, you need to make sure that your opt-in form is easily accessible, and your CTA is ready to be tapped when the time is right.

    5. Cut back on copy as much as you can (without sacrificing clarity)

    If you regularly read up on landing page optimization, you’ve heard time and time again that clarity is important when optimizing for conversions.

    And though this is still true with mobile-responsive landing pages, being concise is even more important. Johnathan Dane elaborated on why this is:

    People have even less of an attention span on mobile compared to desktop. This means you have to get to the point as soon as possible with your landing pages – be clear instead of clever and reduce as much text as you can.

    Alhan Keser, Senior Conversion Strategist at WiderFunnel, has found the same to be true:

    We have not seen a mobile-specific test where cutting down the amount of content in favor of more concise, well-worded copy did not help.

    Beyond that, Alhan has found that showing that your opt-in process is also brief can have a positive effect on conversions:

    alhanConsidering the mobile context in which a page is being seen, we’ve successfully tested language that is in line with the visitors mindset:

    This will be quick, easy and you can do it via your device.”

    6. Account for slower internet connections

    Your mobile users don’t only have slower attention spans – they probably also have slow internet connections.

    And while you may not think it’s your problem, failing to optimize your pages for slower connections can have serious repercussions; a recent study showed that 43% of users are unlikely to return to a slow-loading landing page or website.

    Jen Gordon of ConvertThemes shared some tips for ensuring that your landing pages are optimized for slow load times:


    If you’re not sure where to start optimizing your site speed, check out this diagnostic tool that Angie Schottmuller recommends in one of her presentations. The “mobileOK Checker” performs various tests on your page to determine its level of mobile-friendliness.

    Test ‘til it hurts

    At the end of the day, never forget that your mobile and desktop users are the same people.

    No matter which device they are using, they have a problem – and they want you to provide a solution.

    Jen Gordon summarized it well:

    Big picture “best practices” for desktop, tablet and mobile design are the same – connect with the visitor’s pains and dreams, and offer a compelling solution.

    These tactics are all great starting points for creating your first mobile-responsive landing page, but the only way to be sure that these tactics will resonate with your audience (and cause them to convert) is to test.

    To get you started, here’s a summary of some of the things our experts suggested:

    1. Test swapping out your CTA for a click to call button.
    2. Test that click to call button against a clickable text phone number.
    3. Test removing all optional fields.
    4. Test using social login instead of form fill out.
    5. Test a smaller version of your CTA that jumps to the web form when tapped.
    6. Test cutting down your copy as much as possible.
    7. Test for language that reinforces that completing the action on the page will be quick and effortless.

    Over to you – have you seen any landing page optimization “best practices” fail on mobile devices?

    — Amanda Durepos


    default author image
    About Amanda Durepos
    As Unbounce’s Blog Editor, Amanda Durepos curates and crafts content to help marketers be better at their jobs. When she’s not managing the editorial calendar for the Unbounce Blog, she’s wrangling internal and external subject matter experts, helping them educate other marketers in an entertaining and actionable way. You can follow her on Twitter but she’s mostly just making puns.
    » More blog posts by Amanda Durepos
    • Mac

      I haven’t thought about swapping out your CTA for a click to call. I might conduct more research of how effective it would be for conversion. Thank you for the ideas. I really had a great time reading your points.

      • Amanda Durepos

        Thanks for reading, Mac. Let us know what you find!

    • Nowadays, Mobile is the one of the most important and highly used device among all other devices. But, still many businesses get lower profit than other devices and it just because, they are not using the responsive design for their website.
      Adding an impressive landing page on the website is good to attract the visitors, but, what if they will find any problem to access your website and confuse to understand about what you really want to offer.

      I really appreciate your work Amanda. It’s really important article for business owners & marketers, specially who are related to eCommerce business.

    • Thank you – a very useful article. I’ve been trying to get this point across recently and this will help me no end

      • Amanda Durepos

        Glad you found in useful, Jason. :) Good luck!

    • Amanda, Excellent matter and and damn great usage of images they way you arrange and explained facts is amazing.

      Really Knowledgeable stuff!!!!!

    • Ryan St. John

      Great article Amanda! You may be interested in this article which highlights some similar mobile marketing strategies. http://experience.stratusinteractive.com/blog/bid/394071/Why-Local-Mobile-Marketing-Strategies-Are-A-Must-For-Your-Business

    • Andy

      Thanks Amanda, great article! For #3, can you please help to explain how in Unbounce we can implement different input fields automatically based on the field type? For example, I would like phone number field to display a numeric keyboard, email field to display keyboard with “.com” and “@” symbol, etc. Is this possible within Unbounce, and if so, how?

      • Amanda Durepos

        Hey Andy, thank you for reading.

        This isn’t currently possible, but it’s on our list for Page Builder improvements. You can follow up on progress here. :)

        • Andy

          Thanks Amanda!

    • It’s awesome to visit this website and reading the views of all colleagues regarding this post, while I am also keen of getting experience.

    • Thanks Amanda, this is very helpful.

      You had mentioned that different offers work for mobile vs desktop users. How do whitepapers do on mobile devices compared to desktop? Are people willing to read a long piece of content like that one their phone?

    • Thanks Amanda, i was doing research on this topic and had some confusions but thanks to you, i learnt a lot from this article. You surely deserve some appreciation :)

    • You guys have the nerve to post this when you don’t even provide a mobile friendly solution, and I wasted hours of my time creating landing pages with your tool that aren’t even mobile friendly? Ridiculous

    • Hi Amanda,

      Following up on Andy’s comment from 2014 is calling the correct keyboard appropriate to the the field now possible?

      ‘For #3, can you please help to explain how in Unbounce we can implement different input fields automatically based on the field type? For example, I would like phone number field to display a numeric keyboard, email field to display keyboard with “.com” and “@” symbol, etc. Is this possible within Unbounce, and if so, how?’


      • Hey Paul,

        Joel from Unbounce Customer Success here! Thanks for reaching out today with your question.

        We had another Unbounce customer come up with a workaround solution for this exact issue, which involves putting javascript on your page and matching the javascript to your form field IDs. You can check out their post here: https://community.unbounce.com/unbounce/topics/input-types-on-forms-for-mobile.

        I’ve also sent you a DM with these instructions, so if you can’t get this working on your end, feel free to reach back out via my email.

        Otherwise, have a great rest of your day Paul and thanks again for reaching out : )


        • Jacinda Siew

          there isn’t a javascript code by jeff on that community page, mind resharing it again? or could you DM me the instructions on the specific javascripts i could add?

    • Jac

      Hi Amanda,

      How can I cut and edit text for the mobile responsive version with out affecting the desktop version?

      Is there an easier way than hiding the old text and recreating it again?

      • Hey Jac – Stephanie from Unbounce here :)

        That’s a great question since the desktop and mobile versions share the same page elements. In order to change the text or shorten the copy on mobile only, the best way is to hide the desktop textbox and create a new textbox for the mobile version, just as you suggested. That being said, if you only wanted to edit the text size, then you could use the Scale bar or resize the textbox element itself on the mobile view!

        Also, keep your eyes out for an email from me with more info about the desktop-mobile link :)

    • This design is wicked! You most certainly know how to
      keep a reader entertained. Between your wit and your videos, I
      was almost moved to start my own blog (well, almost…HaHa!)
      Fantastic job. I really loved what you had too say, and more than that,
      how you presented it. Too cool!