{"id":78400,"date":"2017-06-21T00:00:58","date_gmt":"2017-06-20T14:00:58","guid":{"rendered":"https:\/\/problogger.com\/?p=78400"},"modified":"2017-06-20T21:40:03","modified_gmt":"2017-06-20T11:40:03","slug":"7-key-design-elements-mobile-landing-page-converts","status":"publish","type":"post","link":"https:\/\/problogger.com\/7-key-design-elements-mobile-landing-page-converts\/","title":{"rendered":"7 Key Design Elements for a Mobile Landing Page that Converts"},"content":{"rendered":"

\"7<\/a><\/p>\n

This is a guest contribution from Shane Barker.<\/em><\/p>\n

If you\u2019ve been blogging for awhile, you\u2019re probably familiar with landing pages, and may have even used a few of them for different campaigns. Whether you\u2019re trying to drive people to sign up for your mailing list, or to purchase a product\/service you\u2019re promoting, landing pages can help you achieve your conversion goals. But is your landing page optimized for mobile users? Is it able to drive enough conversions on mobile?<\/span><\/p>\n

Just imagine you\u2019re using your smartphone to read someone else\u2019s blog, and you <\/span>click on a link<\/span><\/a> to learn about a certain product reviewed in the post. But you end up on a page that is too difficult to view and navigate. You have to either squint, or zoom in to read the page content. That could ruin your experience, and may even compel you to leave the page. The result? For the blogger, it means they\u2019ve lost the opportunity to convert you.<\/span><\/p>\n

Don\u2019t make the same mistake. When you\u2019re designing a landing page, make sure you <\/span>optimize it for mobile users<\/span><\/a>. The seven key design elements below can help you design a mobile landing page optimized for conversions.<\/span><\/p>\n

1. A Short But Strong Headline<\/b><\/h2>\n

Landing page headlines should always be clear and concise. For a mobile landing page, your headline has to be even shorter, because you have even less space to work with. Use no more than five words, and describe what your website is about, or what your product does. This may be difficult, but it isn\u2019t impossible.<\/span><\/p>\n

Take a look at the <\/span>Squarespace<\/span><\/a> mobile landing page, for instance. The headline, \u201cBuild it Beautiful,\u201d is short, but it clearly tells people what the product is about \u2013 building websites. And \u201cbeautiful\u201d highlights the benefit of using the platform. They\u2019ve perfectly summed up what their product does, and what makes it special, in just three words, with a compelling headline.<\/span><\/p>\n

\"7<\/a><\/p>\n

Try to form your headline around the main features and\/or benefits of your product. Maybe it will help readers learn something useful, or tackle a challenge they\u2019ve been facing. Once you come up with a potential headline, check it several times to see if you can shorten it and still keep it compelling. For instance, you could shorten, \u201cConvert People with Beautiful Landing Pages,\u201d to, \u201cCreate Landing Pages that Convert.\u201d<\/span><\/p>\n

Although many landing pages have a subheading with more details about the product\u2019s features, that may not be the best option for a mobile landing page due to the limited space. You can try adding a few bullet points if you absolutely have to include further details or benefits of the product. Just make sure each point is concise and clear.<\/span><\/p>\n

2. A <\/b>Short And Persuasive Call-To-Action<\/b><\/h2>\n

You know the importance of persuasive CTA copy, and how it can help drive conversions. With mobile landing pages, your CTA copy needs to compel users to take action, and it needs to do so with just 2-3 words. Something like, \u201cGet Started,\u201d \u201cGrab Your Deal,\u201d or \u201cBuild Your Website,\u201d may be ideal as they get straight to the point in just a few words.<\/span><\/p>\n

For example, the mobile landing page for the <\/span>Shyp<\/span><\/a> app has clear call-to-action copy that urges people to, \u201cGet the App.\u201d <\/span><\/p>\n

\"7<\/a><\/p>\n

To come up with compelling copy for your CTA, first define the goal of your landing page. Is it to get people to enter a contest, download an eBook, or sign up for your mailing list? Next, write a short CTA that clearly tells people what you want them to do, like, \u201cEnter to Win,\u201d or \u201cDownload Your Guide.\u201d<\/span><\/p>\n

3. <\/b>One Prominent CTA Button<\/b><\/h2>\n

What\u2019s the goal of a landing page? To get people to do something. So what\u2019s the point of having a CTA button on your mobile landing page if it\u2019s barely visible? If you\u2019re trying to get people to take a certain action, make sure the CTA button is prominently displayed. If possible, choose a button color that contrasts with the main page color so that it stands out.<\/span><\/p>\n

While aesthetics are a crucial part of your landing page design, you shouldn\u2019t blend the elements so much that you hide the CTA button. The <\/span>New Balance<\/span><\/a> mobile landing page below highlights one CTA button boldly in black. And you can see that, although the button clearly contrasts with the rest of the page design, it doesn\u2019t compromise the overall aesthetics.<\/span><\/p>\n

\"7<\/a><\/p>\n

The optimal number of CTA buttons on a mobile landing page is one, because you want to direct users towards one particular action. You don\u2019t want to confuse them with too many options. If you have several goals, you can try building a separate landing page for each goal. But if you absolutely must have more than one CTA button on a page, make sure you highlight the main call-to-action, and blend in the others with the rest of the design.<\/span><\/p>\n

For instance, if the goal is to get people to download something, the CTA button for downloading should be the most prominent. Secondary CTA buttons like, \u201cLearn More,\u201d or \u201cContact Us,\u201d should be less visible. A good example is the Squarespace landing page shown above, where the main call-to-action, \u201cGet Started,\u201d is more prominent than the secondary CTA, \u201cLearn More.\u201d<\/span><\/p>\n

4.<\/b> Minimal Clutter<\/b><\/h2>\n

When you\u2019re targeting mobile users, you should keep in mind that there is limited screen space to work with. A busy page design with too many elements can be an eyesore, especially on mobile landing pages. You need to simplify the page design as much as possible. This means you need to remove any unnecessary clutter, and keep other elements hidden if possible.<\/span><\/p>\n

Keep only the most important elements. Just take a look at the simplistic and elegant landing page for <\/span>Moto 360<\/span><\/a>, for example. The page contains only a few elements: a strong headline, the product name, pricing info, and a call-to-action button.<\/span><\/p>\n

\"7<\/a><\/p>\n

Now let\u2019s take a look at the original desktop version of the landing page. Here, there are a few changes in the formatting. Although the headline remains the same, this version has a small subheading to describe the product. You can also see that the navigation bar isn\u2019t hidden like in the mobile version.<\/span><\/p>\n

\"7<\/a><\/p>\n

For mobile, keep only the most important elements, and remove unnecessary elements that may clutter the page. Removing unnecessary clutter from your mobile landing page doesn\u2019t just enhance the page\u2019s aesthetics, it also reduces the page\u2019s load time. A faster loading page can improve user experience, and boost conversions.<\/span><\/p>\n

5. <\/b>Simplified Forms<\/b><\/h2>\n

Do you really need people to fill in 7 or 8 form fields when signing up for something? Too many form fields can clutter your landing page, and frustrate users. If you want more people to convert, you need to simplify the conversion process. The idea is to get them to complete the task before they have time to change their minds. Simplify your forms \u2013 whether they\u2019re for subscriptions, free trials, or promo codes.<\/span><\/p>\n

Make sure any forms on your mobile landing page collect only the most crucial information. For example, you probably need a user\u2019s email address for eBook downloads, newsletter subscriptions, free trials, promo codes, and pretty much everything else. But you may not need to ask for their name, address, or phone number.<\/span><\/p>\n

Adjust the form fields based on what you want to achieve with the landing page. The <\/span>Shopify<\/span><\/a> free trial landing page shown below has only three form fields. It asks for an email address, store name, and a password so that users can access their account later. It doesn\u2019t ask for any unnecessary information like name, phone number, or address.<\/span><\/p>\n

\"7<\/a><\/p>\n

6. <\/b>Readable Copy <\/b><\/h2>\n

Which of these is easier to read: <\/span>ProBlogger <\/span>or <\/span>ProBlogger<\/span>? Naturally, you\u2019d choose the latter of these two font sizes. The font styles and sizes you choose to use can have a huge impact on the readability of your mobile landing page. Remember, you\u2019re working on a small screen; so you need to make sure that your copy is easy to read, despite the small space.<\/span><\/p>\n

The idea is to make sure that people don\u2019t have to squint or zoom in to read the content on your landing page. The ideal font size according to <\/span>Google<\/span><\/a> is 16 px, but you can always customize the size according to the font style you\u2019ve chosen. Don\u2019t forget to leave ample space between text lines to improve readability.<\/span><\/p>\n

If you\u2019ve followed the tips above, you\u2019ve already simplified the design, and shortened your headline. That means there will be more space on your mobile landing page, allowing you to use a larger font that\u2019s easier to read. Additionally, choose a font color that contrasts with the main color used on the page, but still blends well with the rest of the design.<\/span><\/p>\n

Here\u2019s an example from <\/span>Gumroad<\/span><\/a>. As you can see in the image below, the text is clearly visible. It is easy to read because of the large font size and simple style. It also contrasts with the main page color, while still complimenting the rest of the design.<\/span><\/p>\n

\"7<\/a><\/p>\n

7. <\/b>Neatly Organized Elements<\/b><\/h2>\n

If a mobile landing page has too much going on, the design can easily become an eyesore. Maybe there\u2019s too much text, or the headline and description are too close to the CTA button. Unorganized elements can confuse your readers, and negatively affect their experience.<\/span><\/p>\n

For a mobile landing page design that boosts conversions, make sure all elements are neatly organized. There should be a sufficient amount of whitespace between elements so that people can navigate the page easily, and find what they\u2019re looking for. This will also improve the visibility of your CTA button.<\/span><\/p>\n

Take a look at the mobile landing page for the <\/span>Albert<\/span><\/a> app below. There is more text than recommended, but the design still works well because the elements are neatly organized. Sufficient whitespace separates the headline, subheading, and CTA button, preventing the design from looking cluttered. The blue CTA button is prominent amidst all of the text and whitespace.<\/span><\/p>\n

\"7<\/a><\/p>\n

What\u2019s Next?<\/b><\/h2>\n

Once you\u2019ve optimized your mobile landing page with the seven design elements above, you need to check whether or not they\u2019re working for you. A few minor tweaks may be necessary to maximize their effectiveness. Make sure you run A\/B tests for every element, and make adjustments, or changes as needed. The goal is to ensure that your page:<\/span><\/p>\n