Obviously the precise layout of a mobile page depends on the visitor behaviour you want to encourage and should come as a result of user testing, but these are all important points you should consider…
Don’t make people pinch and zoom
If you’ve designed your mobile site correctly this shouldn’t be an issue, but it’s always worth noting that users aren’t interested in pinching and zooming to bring your content into focus.
Not only is it a poor user experience, but it also means your content and calls-to-action will be at the mercy of the user.
It’s best to just make sure your site fits the screen correctly in the first place.
Test it on both landscape and portrait views
When browsing the mobile web it’s common for users to read sites in both portrait and landscape view. Make sure your site is compatible with tilted screens so that it delivers a consistent user experience.
As this example shows, Tesco’s mobile homepage uses large icons that render perfectly in landscape view.
Make sure fonts stand out
You need to bear in mind that what appears obvious to you might not jump out at the average mobile user. Space is tight, so make sure the font and background colours contrast one another so it doesn’t all blur into one.
This is even more important for CTAs, which need to be visually appealing and attract the user’s attention.
Concise content is king
On a mobile screen it’s easy for content to appear cluttered, so landing pages need to be stripped down to the bare essentials. You don’t have space to win users over with reams of text, so copy needs to be concise and to the point.
Think about what you’re trying to achieve and make sure it’s obvious to users how to complete the required action, ideally with a nice, big CTA.
These examples from Skinny Ties and ASOS show two very different approaches to mobile content. Skinny Ties has a responsive site and has ensured that its copy is concise so it is easy to read on a mobile screen.
In contrast, ASOS’s product description is extremely long and the font is tiny, making it a real chore for a mobile user to read.
Speed is of the essence
Research shows that well over half (64%) of smartphone users want a web page to load within four seconds, while the vast majority (82%) expect it to load within five.
Therefore you need to ensure your page loads as quickly as possible, remembering that a lot of users will be relying on 3G access.
Stripping out any unnecessary content, such as large images or Flash, can speed up pages. Which brings me to my next point…
Don’t use flash
Unless you want to kill your chances of converting anyone using an iPhone, it’s a good idea not to use Flash on your mobile site.
According to Google’s Mobile Movement Study 61% of mobile users call after a local business search, so why not make it easy for them?
Mobile searchers by definition have a phone in their hand, so by adding a click-to-call button you are increasing the likelihood of them getting in touch with you.
Based on my own mobile browsing habits, it’s likely that they are searching for contact details anyway. So consider including a large CTA that simply says ‘Call now’, or a phone number with a clickable hyperlink.
Bupa and London restaurant Volupte both have decent click-to-call buttons. Volupte’s is more obvious though, and Bupa could perhaps use a different coloured font to draw attention to the CTA.
Obey the 44×44 rule
In order for users to be able to navigate your site comfortably all CTAs need to be big enough to easily click with a thumb.
A CTA that is 44×44 pixels should be large enough to accommodate most people’s thumbprints, but you also need to make sure there is enough space around the buttons to avoid accidental clicks.
These examples from Currys and United Pixel Workers, which both use responsive design, show how to design CTAs that standout and are easy to click.
Remember that mobile search is local search
It’s a well worn line that 40% of mobile search has local intent, so sites need to make sure they are catering to this need. This could mean including a prominent CTA inviting users to ‘Find your nearest store’, or the aforementioned ‘Click to call’ button.
Though it’s probably not necessary to include store contact details and opening times on the landing page, these should be easily accessible within a few clicks.
Restaurant chains tend to be good at displaying prominent store locator tools, but then getting people to visit their outlets is the only way they’re going to make any money.
Subway’s landing page is a great example of how easy it is to help mobile users find your outlets, while John Lewis also has useful links to ‘Find nearest shop’ and ‘Show all shops’ on its homepage.
Make sure forms are short and simple
If your landing page is primarily for data capture, it’s important to ensure that form filling is kept to a bare minimum.
Though it’s useful to have a huge amount of customer data on file, what do you really need beyond a name, email address and possibly a phone number?
Conversion rates on smartphones are generally extremely low, so don’t jeopardise yours further by requiring users to fill in a massive data capture form.
Single column FTW
Smartphone screens are thin, so laying out content in several columns will lead to a poor user experience.
Most sites go for a single column view, though it’s not uncommon for mobile sites to present links in a grid of large icons. Both work well, but anymore than two icons side-by-side and you’re asking for trouble.
Keep your CTA above the fold
Though some get sniffy at mentions of keeping things ‘above the fold’, as an ex-newspaper hack I’m a fan of the phrase.
In mobile terms, it generally means keeping the important content within the top 100 pixels. So if you’ve got a CTA on your landing page, make sure it’s near the top otherwise you risk dampening the impact and potentially losing the conversion.