15 Effective Tips For Mobile Optimized Landing Pages

By: Masroor Ahmed, Invesp

A landing page is a landing page, right? So why bother with a separate landing page for your site’s mobile version? It’s because your site’s experience is so different on mobile that your desktop landing pages are not quite enough. Here’s how to design mobile-optimized landing pages.

1. Prioritize Important Elements—Strip your landing page of everything that’s not critical for conversion. Retain only the most crucial elements and ensure that they are placed in the right places. Enlarge and place all extremely important elements, such as the CTA, above the fold so that the user notices them immediately.
2. Make Sure Your Page Loads Fast—Slow-loading pages and low attention spans don’t make for great business. About 64% of mobile users expect pages to load in under four seconds. Cut all slow-loading elements, such as unnecessary images, flash, videos and so on, and ensure your page loads within five seconds.
3. Ensure Scalability—Given the close to 500 different screen sizes for Android phones, Windows phones, iPhones, Blackberries, and tablets, it’s important that your landing page scales to each size. Use responsive design to ensure that your landing page is perfectly rendered on each viewport size. Don’t forget to test.
4. Provide Both Landscape And Portrait Views—Mobile users can tilt their devices to enjoy a wider view of tiled content. If you optimize your landing page only for portrait modes, your visitors will get a stunted view when they tilt. That doesn’t help their comfort level. Enable both views so that users can use their phone’s tilt facility to the fullest.
5. Make Important Content Stand Out—Make important content and elements stand out by using distinctive fonts and colors. Given the limitation in the scope of vision, ordinarily marked up content will not stand out. You’ll have to make sure that content is truly and strikingly different in appearance, by using visual enhancements.
6. Minimize Navigation—You want minimal, simple and consistent navigation. Cut back on regular site tabs and links to other pages. Eliminate the sidebar, and limit scrolling both ways. Include a Search bar, limited menu options, a back-to-home arrow, and very few other significant buttons in the right places.
7. Personalize Your Website—Use technologies such as Geolocation API to obtain your user’s GPS coordinates; use this information to provide a personalized, localized experience. Knowing exactly where your user is located helps you throw up relevant local searches, especially address and links of your offline business locations.
8. Avoid Using Flash—It’s best to avoid using Flash, unless you are not interested in mobile conversions. Flash programs take up a lot of time to load, especially on slow, on-the-go mobile connections. You don’t need to use Flash in order to make your impression or to convert, so eliminate it altogether.
9. Add A Click-To-Call Button—Add a click-to-call button to help mobile users get in touch with your local business. About 61% of mobile users call the local businesses thrown up by personalized, Geo-specific searches. A large, very visible Click-To-Call CTA button or a phone number link will help users get in touch right away.
10. Make Your Action Buttons Large—Most smartphones are enabled with the Touch feature. Design your CTA buttons large enough so that they can be easily swiped with one’s thumb. The recommended size for a mobile-page’s CTA button is 44×44 pixels.
11. Enable White Space—Make sure there’s enough white space around your clickable links and CTA buttons. This is so that users can comfortably use their thumbs to swipe your action links and buttons without having to zoom them first. Also, providing sufficient white space around the buttons helps to avoid accidental clicks.
12. Keep Forms Very Short And Simple—Keep your forms to a bare minimum, even if collecting data is the purpose of your landing pages. What you need is a name, email address and a phone number. Anything beyond that can be collected via a desktop interface. Mobile conversions are not high to begin with, so avoid long forms.
13. Use Single Column View For Content—Laying out content in multiple columns makes for very poor user experience, given that mobile screens are small to begin with. Opt for a single column view, and try presenting links in grid form. Do not place two icons or links side by side.
14. Prevent Zooming—Mobile users are often on the go; they want to be able to view the entire landing page on their screen. If your landing page is so long that users are forced to pinch and zoom to read it, you’ve lost the game. Design your landing pages to adapt to multiple viewports.
15. Do Structured And Continued A/B Testing—Make a list of objectives that you want to achieve and create a set of structured A/B tests. Test site load times, copy length, fonts and font colors, image load times and image sizes. You’ll have to test how your page renders and performs on all major screen sizes.

Masroor Ahmed works as a conversion optimization analyst for Invesp. He loves to share his expertise in incorporating various landing page optimization techniques at the development stage itself.