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

March 20, 2013 | 3 min read
By Jenny Knizner

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 @JennyKnizner to continue the conversation.

WEBINAR: Monitoring, Managing and Maintaining Your Company's Online Reputation
3 Best-Practice Search Strategies for the Wedding Industry
Subscribe to the Digital Marketing Tip!
Get the latest insights and time-tested wisdom from veterans of the digital marketing industry.

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

March 20, 2013 | 3 min read
By Jenny Knizner

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 @JennyKnizner to continue the conversation.
Share This Post
PREVIOUS POST

WEBINAR: Monitoring, Managing and Maintaining Your Company's Online Reputation
NEXT POST

3 Best-Practice Search Strategies for the Wedding Industry
Subscribe to the Digital Marketing Tip!
Get the latest insights and time-tested wisdom from veterans of the digital marketing industry.