A Simple Guide to Mobile Landing Page Optimization

Unless you’ve been living under a rock for the past few years, you’ve seen the smartphone and tablet explosion happening around us. This isn’t set to slow anytime soon and designers are now finding themselves with more and more projects that need to be built for multiple screen sizes.

This is because tablets are gaining ground on traditional PCs, the latter of which are seeing the worst decline in sales in their history. Add to this the amount of internet traffic which smartphones now account for, and it’s clear that design is evolving.
Tablets and mobile currently account for 15% of the world’s internet traffic and this has been projected to rise to 50% in four to six years’ time. As the below chart from Adobe shows, this has been a steady and consistent rise that shows no sign of stopping.

Tablet traffic growth by country

Source: Adobe

Bearing this in mind, designers and internet marketers can no longer afford to ignore smartphones and tablets and all new projects should be carried out with these devices in mind.

It’s all about scalability and usability

When it comes to mobile, you’re limited for space. That means that it’s necessary to pay keen attention to how that space is used. With that in mind, let’s first have a look at responsive design and scalability.

Some designers think that it’s best to use adaptive and responsive design in order to cover all eventualities, but this is open to debate. The difference between them is very little, but adaptive uses multiple fixed width layouts, whilst responsive uses multiple fluid grid layouts.

However, responsive checks the target device first to see what size screen it needs to display, whilst adaptive doesn’t. It’s important to have this scaling in any case, as there’s nothing worse for a user than having to pinch, zoom and scroll around a site to navigate.

You can use resources for this, such as unsemantic’s CSS framework, which allows you to work with percentages, rather than columns and Screenfly, which allows you to build wireframes directly in a browser. The latter is also a very useful tool for testing different screen sizes and building site maps.

The nuts and bolts

So let’s get down to the nitty gritty of the landing pages. What is required of a landing page in general?

  • Strong call to action
  • Ease of navigation
  • Clean, lightweight design with limited distractions

These are the essential elements to begin with, starting with your call to action (CTA). This should be clearly visible as soon as the visitor lands on the page, which incidentally shouldn’t take forever. This could be anything from a button and form for downloadable content, to a special offer and should be towards the top of the page for best results.

However, take care not to use too many fields when it comes to forms, as soft keyboards make these more difficult to fill in. Less is very much more in this case, if you want landing pages to equal conversions.

Likewise, buttons should be finger friendly and you should use your own fingers as a template to work out the optimal sizes. Apple’s developer guidelines state that tappable UI elements should be at least 44 x 44 points, but in practice, this is still pretty small.

Sketch out a design first, using your finger template for different device sizes to see what kind of room you have to play with. You can use carousels and accordions for this and it’s important to use the space that the eye is drawn to as natural places for touch. For creating touchable areas, you can find open source JavaScript modules online in plentiful supply, with Mobify being a great example.

Progressive disclosure

You may want to consider using this if you have a lot of content and don’t want to clutter up the screen (recommended). Progressive disclosure basically allows a certain amount of content to be displayed, with the suggestion that there’s more information underneath when clicked.

However, it’s worth bearing in mind that the cleaner the landing page, the better the result will be, so you may want to save this for pages deeper in the navigation tree.

Headlines

These should be kept to a maximum of three to four words in a clear font, preferably making use of the keywords that you want to optimise the page for. It’s also advisable to bullet point any further text and ensure that it’s large enough, which should mean that you can read the text with the device held at arm’s length.

As far as other content goes, stick with a maximum of one image, optimised for speed and keywords/alt tags, as well as little in the way of links as you can get away with. A great CTA for mobile is also to include a ‘dial’ button so that visitors can immediately call your business.

According to recent Google research, the Mobile Movement Study, 61% of smartphone users will call a business after performing a local search on their device, so the dial button is well worth it.

This is especially useful for local businesses and should be used alongside Google Maps and/or location services.

Size matters

With regard to mobile sites, it’s essential that they are quick to load, as visitors don’t like to be kept waiting when using their phone. This means it’s important to consider HHTP requests and how many the page will make.

For mobile, it’s necessary that the site is somewhere around the 20 kilobytes mark and when using responsive design, this is something that will need tweaking. This is because responsive sites that are not optimised for performance tend to deliver the full desktop page to every device, even if a lot of the content isn’t displayed.

As mentioned, you should avoid the use of images and if you have to have them, then make sure that your code is tidy and use image sprites, or CSS instead of images altogether, if possible.

He’s all thumbs

Make sure your buttons can pass the thumb test (can visitors comfortably use the thumbs to navigate?) and keep the number of clicks that a visitor has to make to find their way around to a minimum.

As far as accessibility goes, it’s also a good idea to make sure that you stick to content that can be displayed on all devices. Flash should be avoided as it’s not supported by Apple devices and isn’t great for SEO in any case. Use HTML5, CSS3 and JavaScript/jQuery technologies for the best results.

The best way to approach mobile landing page design is very much with the user and ease of buying experience in mind. Don’t make your visitors pinch and zoom, this makes them leave. Do think about single column design and maximize on the current trend for minimalist design for the best results.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Comments

One comment on “A Simple Guide to Mobile Landing Page Optimization

  1. Although I use responsive design nowadays, I still usually serve up the same content to mobile devices. For a few sites I’ve done recently, I can see where the issues with this are. I was thinking about just setting display:none; on the parent container of a couple sections, reading that the images and content do not get loaded, in my media queries. Can you suggest any better ways? Thanks