Question for the Expert:

What’s the best way to develop a mobile-friendly landing page?

Answer from the Expert:

While the specific method to use will vary depending on your situation, remember – mobile traffic is still on the rise – this means that not considering how your landing pages load for these visitors is a big oversight. With that out of the way, the first step in developing a mobile-friendly page is to determine which design strategy will work best. This might vary depending on the type of landing page you’re designing.

First things first: view your page on mobile, scroll through it, submit the form. Are there elements on the page that aren’t needed for a mobile conversion? (Examples: images or copy.) Are there elements that might prevent a mobile conversion? (Examples: form fields that are too difficult to complete, or a submit button that is impossible to press on a mobile device.) Depending on your answers, the best design strategy will fit into one of these two buckets:

1. Responsive Design

With responsive design, the only thing that changes from desktop to mobile is the size of each element. Your page layout becomes flexible, with the content resizing depending on which platform it’s being viewed on. All of the elements from the desktop page will still be present on the mobile page.

source: http://www.rapidops.com/blog/adaptive-vs-responsive-web-design/

This strategy is beneficial when you need both the desktop and mobile pages to contain the same information, but need the layout to change fluidly depending on your visitor’s viewing platform.

2. Adaptive Design

With adaptive design, both the presentation and content on the page can vary based on the visitor’s device. This means that, for example, you can remove an image or use different copy for the mobile version of the landing page.

Adaptive design makes it possible to remove any elements that aren’t a complete necessity, as well as resize those that should be smaller on mobile devices. It also means that certain elements, such as your form, can display with different form fields, making it easier for the visitor to submit on mobile.

No matter which design method you decide to go with, utilizing tactics such as media queries and mobile no-show code will help pave your road to mobile-friendly landing page success. Also, don’t forget to use a tool like Google’s Mobile-Friendly Test to double check your page’s friendliness once you’re all done.

For more information on how to create successful landing pages, head here!

Happy designing!


Also published on Medium.