Six Tips for Designing a Mobile Landing Page

Written by in Campaign Optimization on February 23, 2011

It’s officially time to put on your mobile marketing thinking caps whether you’re ready for it or not!

A recent press release by the IDC research group revealed that for the first time ever, smart phones are outselling personal computers.  100.9 million smart phones were shipped in the last quarter of 2010, which is an 87 percent jump from the previous year.  To understand the market share, in the third quarter of 2010, smart phones accounted for 19.3% of overall mobile phone sales. Faster and cheaper mobile internet connections have made browsing the web on a mobile phone much more popular and extremely common.

This trend in smart phone sales shows how consumers are changing their way of getting their information. Most people will go all day with their cell phone either in their hand or only an arms reach away at most. It is important for a marketer to understand that the cell phone has almost become an extension of a person’s self.

A landing page is a great way to communicate a targeted offer and capture specific leads. With more and more consumers becoming mobile dependent, it is important to look at best practices for reaching out to your mobile audience through a landing page.

Here are a few things to consider when designing a landing page for your mobile audience.

Optimizing Design for a Mobile Landing Page:

1) Screen and pixel sizes

The design challenge you face when creating a landing page made for mobile is the large amount of diversity between screen and pixel sizes.  The best recommendation would be to check analytics on what types of mobile devices are accessing your page the most. However, if you don’t know exactly which device makes up the majority of your audience, it is beneficial to at least know which ones are most commonly used and their screen resolution.

Top 5 best-selling cell phones in December 2010:

1.    Apple iPhone 4 – 320 x 480 pixels
2.    Nokia 3720 Classic – 320 x 240 pixels
3.    HTC HD2 – 480 x 800 pixels
4.    Nokia E52 – 240 x 320 pixels
5.    Nokia N8 – 640 x 360 pixels

Until you know what the majority of your audience is using, it may be beneficial to create a reference design that is in the middle of the road (about 240 pixels wide) and give it the freedom to adapt into a smaller or larger screen size.

2)     Call to action button size: about 44 pixels or .3 inches

A mobile page is not just a smaller version of a desktop landing page. It’s important to design your page to the correct specifications that a mobile landing page requires. The call to action buttons should be easily clickable by the tip of a finger (and we all know most of us struggle with this one on our own).  Make sure to always think skinny!

3)     Limit the amount of information you ask for on your landing page.

Do you really need to ask for their first, last, company, and zip? Could you get away with only asking for their email address and then following up at a later date to gather further information on the contact? Even on a landing page built for a PC, the goal is to minimize the amount of friction. A prospect’s attention span on a mobile device will be much shorter than if they were on a desktop since they are most likely on-the-go.

4)     Optimal line length for mobiles: For a 320 pixel width, keep it under 50 characters per line

With a desktop PC, you have anywhere between 13 and 21 inches diagonally to work with. However, with a mobile device you’re looking at about 2 to 4 inches to play with. The length of your line should reflect the smaller width that you have to work with.

5)     Optimal Headline Length:  16 – 24 characters

16 – 24 characters and about 3 – 4 words for a headline on a mobile device. Don’t forget how little of real estate you are working with. Remember, clear and concise! Clear and concise!

6)     Design your landing page as a fluid width single column design so the content will expand and contract naturally to fill the screen completely

Smart phone owners are more likely to be on-the-go and task-oriented. They will spend time browsing the internet on their cell phone while waiting for an oil change, sitting on public transportation, even sitting at a stop light or in traffic (yup, I’m guilty of this one).  This is why keeping your landing page content clear and concise is crucial when setting up a mobile landing page. I can’t stress it enough, clear and concise! Clear and concise!

Here is a great emulator tool I found online where you can see how your landing page might appear on an iPhone.

If your target audience might be viewing your landing page on their mobile device, this may be because they received it via an email in their inbox while on their mobile, which leads me to next week’s post.  I will focus on another huge factor involved with mobile marketing: designing an email for the mobile device.

If you’ve created a landing page for a mobile device, please share your experience here. We love to hear new ideas!


Related posts:

Lead Generation June 10, 2012 at 7:34 pm

Great tips you have here! It’s undeniable that mobile usage has an unprecedented speed of adoption globally. A well-designed mobile website can help you stay in touch with consumers on the go and even land extra sales from impulse buys. Thanks for sharing.


    Priscilla Converse June 11, 2012 at 9:27 am

    Thanks for the comment James!

    You are right, it’s becoming very apparent that we live in such a mobile world today and it’s becoming more and more important to be sure and optimize not only your site for mobile, but also any emails as well. And let’s not forget the Mobile Ad Market! I recently read in Direct Marketing News that in 2011 it was valued at $5.3Billion according to the Interactive Advertising Bureau (IAB)!

    Here’s the article, if you are interested: IAB Values Mobile Ad Market at $5.3 Billion

    Thanks for reading,


Leave Your Comment


  • Subscribe to more marketing insight from RC

    Get our monthly content round-up

    Return to Blog
    Let’s Get Social: