Making the Most of Mobile Landing Pages

Landing pages are a huge part of the mobile experience. Business wise, there is a big difference in what consumers expect and what businesses are actually delivering. Given a choice, 32% of customers would rather view the full website on the mobile device than the actual mobile site. Why? Mobile behavior, in terms of what people are looking for, is starting to look like desktop behavior.

Those differences in actual goals of people coming to the site are not as different as many people would like to have us believe.

Building a Mobile Site

A large chunk of a website is usually cut when building a mobile site. Everything that is not important is getting cut, especially if the site is fairly complex. People won’t be able to do the same thing they can do with a desktop experience on their mobile device. Yet, when we build mobile experiences, the first thing we do is cut out stuff. So they often get a less rich or less intensive experience on a mobile device.

One other reason that a huge portion is cut out on a mobile site is the load time is far slower when opening a page on a mobile device. There is a statistic  that suggest that for every second in additional load time, you lose anywhere between 9 to 16 percent in conversion. So it has a huge contribution to the abandonment of your site. In the webinar, Ian Everdell of Mediative shared a graph of Page Abandonment versus Load Time. It showed that the longer the page takes to load, the higher the rate of abandonment of your site. There are also some common problems that cause people to abandon your mobile site. Problems such as slow loading, site crash or freeze, hard to read content, not available, or things like flash on iOS devices that causes big problems.

These problems affect mobile behavior. People expect pages to load quickly. They expect it to load faster than the desktop version of the page. Over 40% of consumers will abandon a website that takes more than 3 seconds to load. Almost 80% of people who are dissatisfied with the website performance are less likely to buy from that site again. If your site is slow, it will greatly affect customer satisfaction and site loyalty. That is not brand recognition that you want to be providing to people.

It is also important that we look at how we can optimize our mobile sites to be fast, user-friendly, and provide everything people need. We can do it through:

1. Prioritizing content
2. Compressing images
3. Avoiding Flash for iOS devices
4. Adjusting light contrast
5. Address and phone number inclusion
6. Call to actions

Prioritizing Content

Prioritizing content doesn’t mean that you need to cut out the content. You have to figure out how to optimize your site in the mobile way. The thing is, there are a lot of mobile sites that you can get with full screen navigation. That’s okay for the homepage. But in some cases, as soon as you get into an actual content page, some content are not there for navigation. So users either have to roll the navigation up to a small menu at the top so that they can click and experience the website, or have it at the bottom of the page. You should focus on showing the content in the center to attract the users’ attention.

Image compression

It’s one of the best practices out there. You should know how to set-up two different versions of images by making sure that they will be the appropriate size for all the devices in order for them to load as quickly as possible. While some images lose quality when they are compressed, it will hardly matter for mobile devices with significantly smaller display screens.

Avoid Flash for iOS devices

Lots of iOS devices are out there, so avoiding Flash is obviously key in optimizing your landing page. You need to provide links between different versions. You need to make it very easy for users to switch from one to the other. And you also need to make it easy for them to switch back to the full version in case device detection is not working once they switch by accident. One more important thing is to keep visitors where they are. There are lots of instances where people are redirected to the mobile version of the site; but to the homepage, and not to the page they are looking at. That can be very frustrating. You need to make sure to keep the visitors where they were regardless of which version they are looking at.

Contrast

This is one you would not necessarily think of. A desktop is on the desk most of the time and the lighting around it is fairly consistent. A smart phone on the other hand, we use it everywhere. Be it inside a dark building or outside on a bright sunny day. As soon as you are under bright light, it is much easier to see dark text or dark content on a white background, than it is to see white content on a dark background. As for text size; you may need to set it to 15 pt minimum which is bigger than you would typically see on a desktop site, but it makes it easier to read on a mobile device.

Include Address and Phone Number 

[Tweet “People are often in a local context when they are using a mobile device. You have to make sure that it’s easy for them to find your phone number and address”]

Enable contact info so users can tap the number and easily call you. Also make the address clickable to open a map and show your location.

Call to actions

It is important that we take into consideration things such as the call to action buttons, the targets, its size and its position on a mobile device. It matters because of the way we interact with them using our fingers. In the user interface guideline’s of Apple and Microsoft, they provide minimum sizes for their touch targets. And you may want to have a larger target size if it is a frequently used action button.

The size and position of these buttons are typically based on where the controls of the mobile device is. People are using their hands and fingers to manipulate it. Their hand is often covering whatever they are manipulating. You have to make sure that they are not missing any content underneath their hand. So moving control to the bottom is important. If you want to learn more about the website, click here.