Simply in the ways to create Mobile Landing Pages You must have probably already chosen a responsive theme for your website. It's really a good decision to go for a mobile responsive theme, and you know that. When mobile traffic has become so abundant nowadays, you cannot afford to loose any of your potential customers just because your website is not responsive. But, what about your landing pages? Have you ever put an extra effort on your mobile landing pages? I this post I will stress on why responsive landing pages are merely not sufficient to gain the best response from the mobile users. I will also discuss some extra efforts that you need to make them really optimized for mobile users.
Why mobile friendly landing pages? It's not a dreamworld anymore where desktops were the only techs used by the users to visit your site and make purchases. Today mobile users share a major portion of website traffic on the entire internet. In fact, according to Google, in some markets Mobile traffic has already beaten the desktops. The same could be also seen in an another report that says “Nearly 58% of Google searches are now done on mobile.� So, mobile is important, and so is the traffic from the mobile devices. At least you would consider going mobile after knowing that 40% of searchers choose to go back and open another search result if your website is not mobile-friendly. With stats like these, it's not easy to ignore the need for going mobile-friendly.
Tips to create mobile friendly landing pages We had posted a series of articles about the tips to create mobile landing pages a while ago. You should have a look at these tips as well because they are pretty applicable to any kind of landing page- desktop or mobile. The Making of an Amazing Mobile Landing Page: Chapter 1 Chapter 2
Chapter 3 Chapter 4 Moreover, Here in this post, I am going to give an extended view of the tips from the design point of view.
1. Eliminate the distractions and unnecessary elements You must be knowing this conversion optimization best practice"Focus on the conversion goal and make a clear path for the user to enter in the conversion funnel" When you are creating a landing page, you have a business objective in your mind and that objective is your primary conversion goal. Whether on mobile or desktop you do not want distractions on your landing page. However, on a mobile screen, the stakes are quite high and definition of distraction becomes quite different from what it is for the desktop users. The mobile screen is very small as compared to a desktop screen, and most of the space is taken by the primary elements like the headline, sub-headline, image, and CTA. Adding any more element is quite risky and can also break the user experience by consuming the white spaces. So, as much as possible, try to limit the elements to necessary ones only. Hide every other element that can break the mobile experience.
2. Use short and strong headline On the small mobile screens, you have a quite limited viewable space. Moreover, you also need to add your sub-headline, image, CTA button. To keep your headline attractive, and readable, you should use a Shorten headline considering the mobile view. If you have a separate mobile site, you can create a separate small headline for the mobile version. However, if you have a responsive site, you may consider keeping the headline length optimized for both the desktop and mobile view. Keeping it short would be a necessary step as you do not want the users to swipe left and right to read the whole headline. As you can see in the image below from Motorola's, they've restricted the headline within five words and yet
because of the strong words choice, the headline gives a complete compelling sense and the most important details are not missed as well.
3. Make the contact Number clickable In what way the phone number shared on your landing would be used by your users? Silly question; to call you of course. So, when users have a device which can not only be used to browse your landing page but also to make calls, why not make the contact number clickable on the landing page? Wouldn’t it be easy for the user to directly call on your Number with a single click on your landing page? When building a landing page, the convenience and usability are two factors that can either make or break your expectations. The more convenient is the user experience, the more is the chances of conversion. Making the phone number clickable would be a wise step that would eliminate the hassle of copying and pasting the contact number on the phone's dialer to make a call. CAUTION! While it's quite easy to make your phone number clickable using a clickable hyperlink, there are certain chances of miss-clicks as well. To avoid this, try
adding the phone number in the form of a button which would provide the sufficient white space around the clickable button. If calling is you primary CTA, make it stand out like you would do with any primary CTA. While you can learn how to adjust the clickable phone number as a secondary element from the below example:
4. Consider the easily clickable range of the thumb The placement of the CTA button is always a primary concern in conversion optimization. A user on the computer screen can click anywhere on the page with ease. While it's not the same for mobile users. Considering a research by UX matters, this is how the clickable area on a mobile screen looks when users generally hold the mobile devices.
Most of the users hold their mobile devices in these ways only, and green space in the image is the convenient clickable range with the thumb. Considering this stat, putting the CTA button outside this range is not at recommended by any CRO or designing expert. Always keep the CTA within the easy reach of the thumb. That would nearly be a standard placing CTA buttons on the mobile versions.
5. Test them comprehensively When you have made the optimization, how would you know that you have created a perfect landing page? How would you know if you have created a landing page that converts? Running an A/B testing experiment will help you in this. Comparing different versions on your mobile landing page using A/B testing would not only give insight design elements but also a chance to know what your users like the most, and what they don't like. For example, below is an example of a mobile landing page where different version of the page were created and tested to know which logo would give a better conversion:
The experiences gained through the A/B tests on landing pages would help you make the correct modifications that would help in optimizing the conversion rate by giving your customers what they want. It is always important to test your landing pages. Perhaps, despite all your efforts, the CTA copy might hold it back, or the whole layout is not efficient. You can clear these confusions from a simple A/B testing experiment.