How to optimize your website’s landing page for mobile

It’s no longer necessary to underline the importance of preparing your site for mobile. The mobile revolution is the single biggest change in the Web’s short history. The only question is whether smart phone and tablet users will make up more than half of your audience this year, or next.

Bearing this in mind, optimizing your landing pages for mobile is now an essential process for every designer. It doesn’t have to be difficult however, there’s a simple checklist that you can run through to ensure your site is ready for mobile browsers:

Scale appropriately

The ability of a website to scale to various devices is vital. There are thousands of devices are out there, so selecting a few representative screen sizes isn’t practical.

The accepted answer to this is responsive web design, some people argue adaptive is better, other people argue adaptive is the same thing. These arguments are really semantic, the bottomline is that you have the ability to make your site work on any device, current or future. To fail to do so would be irresponsible.

One important consideration: make sure that your site scales properly in portrait and landscape.

Select content carefully

Obviously, mobile offers much less space to fit content onto a landing page. Ideally, keep headlines short, succinct, to the point and around three to four words. Likewise, keep the page as clutter-free as possible, with a low number of links and a maximum of one image, if feasible.

Put content in bullet points so that the eye can take it in easily, without having to pause and squint. Also, create a clear call to action to tempt the visitor to visit the rest of the site. It should give some kind of incentive and could be as simple as a button that allows visitors to call the business, especially useful for local businesses that also use location services.

Something like 75% of searchers take action on their search results within an hour, so it’s easy to see why a call to action should be strong. Also, put the call to action somewhere near the top of the page, so that it’s one of the first things the mobile visitor sees.

Size matters

Yes, size really does matter—file size, that is. A landing page should always be quick to load, especially one that will be accessed via a mobile device.

There’s no set rule—the faster the better—but as a general guide, if your landing page takes longer than 3 or 4 seconds to load you’ll start losing a lot of users.

Ideally, your page should be extremely lightweight, below 20 kilobytes. Images take a lot of time to load and so should be kept to an absolute minimum. Keep all of your code nice and tidy, use image sprites if necessary, and use CSS instead of images where possible.

As well as file size, think about the number of requests that are being made to the server; typically those requests cause more of a delay than the actual file download.

Are you local?

Mobile users are often on the go, so use location services. Tailor the landing page to be relevant to local users, and offer incentives to them too. You could customize content to the local branch of a store, for example.

Depending on the size and scope of the project, you could also adapt the core content itself to the location.

Readability matters more than ever

Being able to read what’s on the screen is vital, which is why less is more. If you can’t read the text with the phone held at arm’s length, then it needs to be bigger. You really are limited for space.

Don’t make users endlessly scroll either, or else they will get bored quickly and move on. Yes, people do have a short attention span on the Internet, much shorter than when reading a magazine or book, so everything you do must grab their attention immediately.

Thumbs up!

Anything clickable on your landing page should pass the thumb test. If it can’t easily be clicked using the thumb, then rethink it. Pad links to leave as much space around them as possible, and leave ample room between links. This will reduce the chances that the user taps the wrong links and leaves out of frustration.

Plugins can be used to ensure that photos can be easily swiped, although putting photos on the landing page is not exactly recommended.

Forms and input

If you do put a form on the landing page, keep it very simple, and don’t take up a lot of space. Forms that require a lot of input are off-putting and achieve a lower conversion rate than simple forms. So, add as few fields as possible.

Again, people get bored quickly, so giving them a lengthy form to fill in will make them more likely to abandon the site.

Simple navigation

Navigation should be simple and straightforward. Keep buttons to a minimum, and ensure that they pass the thumb test. Try adding buttons to different areas of the page so that a logical path can be followed.

Testing, testing, testing…

Thoroughly test your landing page to ensure that it works effectively on mobile. Consider A/B testing, which has been shown to increase leads by up to 40% in some cases.

With an A/B test, you would create two designs of the same page, A and B. Traffic is then split between each design to see which performs the best. Use metrics that are the most important to the project, such as conversion rate, sales, bounce rate. At the end of the test, go with the one that performs best, and you’ll be halfway to having a proven design.

There are lots of mobile simulators out there, but whichever one you choose, make sure you only use it for the first round of tests. To test properly you have to use real devices. Beg, borrow, and steal if necessary, just check out your site on as many real devices as you can lay your hands on.

Keep actions to a minimum

The more clicks or actions a user has to make, the less likely they are to complete them. Allow people to get from point A to point B in as few clicks as possible. Make every aspect of the navigation and the call to action incredibly simple.

These are the most important things to bear in mind when optimizing a landing page for mobile. Remember throughout the design process that mobile is a different medium to PC. People have even less patience on mobile because they are usually on the go and want to complete their task with a minimum of fuss. Slow loading times and unresponsive interaction also irritate people, so take the time to get them right.

Getting it right can be rewarding and could mean the difference between the site performing well against the competition and losing visitors.

Featured image/thumbnail, mobile image via Shutterstock.

Kerry Butters

A prolific technology writer, Kerry is an authority in her field and produces content for a variety of high profile sites in her niche. Also a published author, Kerry is co-founder of digital content agency markITwrite, adores the written word and all things tech and internet related.