In the latest of our introductory series, we’ll be taking a look at why and how mobile landing pages should be crafted to ensure the best results. Whilst of course many companies are now using responsive web design (RWD) to ensure that ‘one size fits all’ when it comes to their site, it’s important to understand why and how certain content should be optimised for different devices.
Mobile landing pages differ from those of desktop for relatively obvious reasons. Not only do you have less space to play with, but calls to actions (CTAs) differ, as do forms and navigational aspects. The right content should be delivered to mobile and it should be set out at the beginning of the design process as to what it should be.
What are Landing Pages?
These are simply the page that a visitor might arrive at when coming to a site through search or links from other sites. In order to convert that visitor into a sales or lead, you need to encourage them to take action when they arrive.
With mobile, you have even less time to grab attention than you do with desktop sites, so it pays to make the most of the space you have. It’s also a good idea to ensure that the visitor can find their way around the page quickly and easily in order to gain the best chance of them sticking around.
Creating a Landing Page
Before beginning to build landing pages for mobile, think about how the content is going to be served to the visitor. If your site is built using RWD, then you will have to think about using media queries to load specific content. You can also consider using Dynamic serving, so that you can really drill down user experience, but this isn’t the best approach for SEO, as it’s not immediately to Google bots that the content exists at all.
Whatever delivery model you choose, there are some rules for mobile landing pages that you should consider before sketching out and crafting the page.
- Images, if used at all, should be kept to a minimum and be ultra-light
- Input forms should be simple
- CTAs should appear at the top of the page
- Navigation should be simple and follow the ‘thumb rule’
- Text should be minimalized and it’s a good idea to employ a writer to craft short-form text well
- Actions should be kept to a minimum as much as possible
- Ensure that HTTP header method indicates that server response varies for different devices so that Google knows the content is there
Images, Inputs and CTAs
You can approach images in various ways, using sprites, media queries or whatever suits you and the site best. Remember that performance is crucial to mobile and so any images used should be optimised to within an inch of their life! This means that you don’t serve the same images to mobile as you would to desktop, as they are naturally going to be a smaller file size.
Input forms too should be kept simple and only ask for as much information as is necessary for the user to take the required action. In fact, with mobile, these can often be done away with altogether if a call button is used at the CTA, something that is especially useful when it comes to local businesses.
Try using a call us button as CTA for local business
However, as I said, if you really have to use an input form then:
- Keep it simple – as few fields as possible
- Ensure that it’s big enough to click in and type easily
- Try not to make the user have to pinch and zoom in order to enter information
CTAs, as mentioned previously, should appear near the top of the screen and should be bold and stand out above all of the other content. For example, you could have your ‘call’ button here, or you could have a nice big button that encourages the user to follow the path that you want them to.
Strong CTAs from Apple and Google
As you can see from the example buttons above, CTAs don’t have to be fancy, in fact the simpler, the better. You can use brand colours to reinforce who you are and even colour psychology to tempt the user further into clicking.
Navigation and the Thumb Rule
For best results, any buttons that are included on the page should be very clickable and not frustrating to the user. This means that touchable areas shouldn’t encroach on anything around them when touched/clicked with a thumb. Clickable areas should also be large enough so that they’re not fiddly and kept within a well-padded distance from other clickable areas to provide the best user experience.
(Source: MSDN)
The blue lines in this example show clickable areas, which should be as in example #2 for best results on mobile landing (or any other) pages.
Getting this wrong is likely to lose visitors, especially on mobile, whose users are not particularly renowned for patience.
Text – keep it light
On mobile, text should also be kept to a minimum and must be large enough for a user to read when they hold the device at arm’s length. Headlines should be kept to a maximum of three or four words and in order to break text up into easily readable chunks, it’s a good idea to use a bulleted layout.
Remember that you want the page to load quickly, within 20 seconds at absolute maximum (preferably much less) and whilst text is naturally light, don’t use any more than you have to. Nobody wants to see a cluttered page, that loads slowly thanks to heavy image use, or that they have to put work into in order to get around.
Crafting a landing page for mobile isn’t a difficult task, it’s just about knowing the rules and this is why it’s a good idea to plan it out first. It’s necessary to get content down to a minimum and to ensure that what you want to stand out does, and does so well. Get the UI right and visitors will be converting to customers before you know it.
Leave a Reply