Stop Losing Those Mobile Conversions: 3 Steps to Designing and Implementing Responsive Landing Pages

By Jenny DeGraff | Mar 20, 2013
More Articles by Jenny


Mobile MarketingStart your mobile marketing program now. If you haven’t yet, you’re missing out. With mobile traffic making up nearly 22% of all paid search clicks on Google in the US in Q4 2012 and projections of mobile Internet usage overtaking PC usage in 2013, you should at least be considering a mobile marketing plan.

For those of you already utilizing mobile PPC or seeing increased traffic from mobile sources, don’t overlook the importance of a well designed, mobile-friendly landing page. This sounds obvious, but for many marketers, this is a lower priority item to testing other high friction elements on a landing page such as headline, CTA, hero shots, etc.

To help you on the road to a well designed, mobile-friendly landing page follow these 3 steps:

1. Make Your Mobile-Friendly Landing Page with Responsive Design

Scott Brinker of Search Engine Land makes a great case for native mobile landing pages, but if you are looking for a solution that will work across all devices, start with responsive design. To simplify the initial stages of designing a responsive page, use 3 breakpoints (the resolution at which the layout changes): desktop (1024px), tablet (768px) and mobile (360px). Design for each of these widths as a guide for your wireframes and mockups.

Mobile Friendly Landing Page

2. As Available Real Estate Decreases, So Should the Amount of Content

When considering these 3 breakpoints, keep in mind how user intent and needs will change depending on what device they are using. For instance, your customer on a mobile device may not be as likely to fill out your landing page form as they are to place a phone call (de-emphasize the form and increase the attention given to the phone number and be sure to make it clickable). A tablet user may not need as much information or even a hero shot to move them to the form. Evaluate your content with care and use dynamic serving to provide each user with only the content required to convert.

3. Test, Test, Test (and Test Some More)

Remember when you are coding, your 3 mockups/breakpoints are strictly a starting place. The best way to test how your page responds is to start with a finished layout and then resize your browser window until the design breaks – make that another breakpoint in your CSS and then continue on. You’ll find that your landing page will flow much smoother.

Once you have your responsive landing page in place, don’t kick your legs up and pat yourself on the back just yet. Keep testing every element on the page. Or give that native mobile page a shot now. Either way, by utilizing responsive design you should see improved landing page functionality and a reduction in the barrier to conversion. So go out and get those mobile leads.

If you want to learn more about responsive design, Smashing Magazine has a wealth of information available. A couple of other great resources for responsive design testing are http://mattkersley.com/responsive/ and https://www.manymo.com/.

Bonus responsive testing trick: In Mozilla FireFox hit command+option+m to view any website in various resolutions.

How are you marketing on mobile? Comment below or find me on Twitter @JennyDeGraff to continue the conversation.

Share this article

Share on LinkedIn Share on Twitter

Blog Search


Receive Daily Digital Marketing Tips

Subscribe to monthly updates from the Marketing Mojo Blog to get the latest digital marketing tips, best practices and insights - hot off the presses and straight to your inbox!