Five Mobile Design Tips Your Competition Are Ignoring (8)

Let's face it, most of us know what a web page should look like. But mobile pages? We're where web design was in 1999 - with most people still making elementary mistakes.

Here are five tips for a smooth, high-conversion mobile LP that I guarantee a good chunk of your competition on mobile are completely ignoring.


Remember The Size Of Thumbs

Here's something a lot of affiliates forget: we're not using a mouse any more.

An MIT study found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults, which translates to 45-57 pixels on most phone screens. The practical pressure surface lengthwise is slightly greater.

If your CTA isn't this high, it's a pain in the ass to target with your finger. Even worse, many phone users use their thumb to press - which is larger, around 72 pixels wide and the same high.

Make sure your CTA is easily thumb-pressable without being obscured - so around 70 pixels high - and users will feel more comfortable. At the very least make sure it's more than 45 pixels high.

Also, scrolling isn't as easy as it is on a PC. Opinion is divided on this, but it's definitely worth split-testing a lander that fits on a single screen with no scrolling needed.


Use CSS3 To Do Cool Stuff

Mobile design is restrictive in many ways, so it's worth taking advantage of the areas where it's easier than Web. One of those is its support for CSS3, the fancy new standard for stylesheets.

CSS3 lets you create buttons, shadows and gradients without the need for images, making your landers load faster.

It lets you redesign pages on the fly using media queries, so you can have different layouts for different phones.

It even lets you do in-page animation like Flash but without the loading time overhead. (Link works on Chrome and on most phones). Here's another rather mind-blowing example of that.

You can use CSS3 properties to save a lot of time and filespace and do things your competition aren't.


File Size And DNS Calls Are Really Important

Mobile phones are getting faster, but most of them are still really, really slow compared to Wifi or conventional broadband.

The minimum speed offered by a 3G connection is around 120 kilobits per second. That means that downloading jquery alone (32kb minified) could take up to 2 seconds. A 50k image could delay your page beyond the time when most users will give up (around 3 seconds).

Stackman has mentioned in the past that he's had success using text-only landers on mobile - and this is one of the reasons why.

EVERYTHING you can do to reduce the total file size of your landers counts.

There's something else, too, that most people don't realise. 3G isn't just slow bandwidth-wise - it's also slow latency-wise.

Virgin Media estimated that a 3g phone can have 400ms latency on every HTTP connection. If you have any connections to other servers in your LP, or if you have more than 6 files total, you're adding at least another 400ms to your load time per server or per 6 connections needed.


Think Phone, Not Screen

Phones have a completely different aesthetic to a screen. One of the simplest things a lot of designers get wrong is not considering the fact that a phone's screen is, y'know, phone-shaped.

Design your landers to flow vertically. Single columns seem to be best. Users have been shown to hate horizontal scrolling, so avoid it like the plague. For inspiration, here's a great big page full of top sites' signup pages and designs - lots of food for thought here.

Also, do remember that a phone's screen is small. Lines of text that might work fine on a 22" monitor are unreadable on a 4" screen. ( I just browsed around xhamster's mobile site for five minutes and found two landers I couldn't even read without peering at them!)

Finally, if you possibly can, it's best to always preview your landing page on an actual phone before you launch it - not just in the window at BrowserStack. You'll pick up on a dozen tiny usability problems that way.


Don't Let The Phone Rule You

Last thing - it doesn't matter how clever your design is if the phone decides to display it wrong.

Add this line at the top of your landers, in the <head>, to make it display your lander at 100%, not tiny-o-vision:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

To add to Caurmen's awesome post:

If you're proficient with CSS and want to do complex things then these compatibility tables will help you avoid cross-browser woes:
http://www.quirksmode.org/css/selectors/mobile.html
http://www.quirksmode.org/m/css.html

Also, TheDudeAbides posted a neat list of media queries to use as a template:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >

<style>
@media
only screen {
#image { background:url(defaultresimage.jpg no-repeat;}
}

/* Pixel ratio of 2 */
@media
only screen and (min-width: 640px),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2) {
#image { background:url(highresimage.jpg) no-repeat;}
}

* REM scaling from 320px to 800px */
@media (min-width: 801px) {
html { font-size: 25px;}
}

@media (max-width: 800px) {
html { font-size: 25px;}
}

@media (max-width: 768px) {
html { font-size: 24px;}
}

@media (max-width: 720px) {
html { font-size: 22.5px;}
}

@media (max-width: 640px) {
html { font-size: 20px;}
}

@media (max-width: 540px) {
html {font-size: 16.875px;}
}

@media (max-width: 480px) {
html {font-size: 15px;}
}

@media (max-width: 360px) {
html { font-size: 11.125px;}
}

@media (max-width: 320px) {
html { font-size: 10px;}
}

</style>

Shit, I knew I forgot something - I completely forgot to link to Quirksmode! Thanks!

Yes, Quirksmode is an awesome site, and very, very useful if you're planning on being at all cutting-edge with your mobile design.

Another note. Don't neglect feature phones. In the US STILL 50% of the market and internationally in some countries even higher.

I found quality from feature phones to be quite high, because lets face it if you're taking the time to search something on those dinosaurs you're probably way more engaged.

Originally Posted by The Angry Russian

Another note. Don't neglect feature phones. In the US STILL 50% of the market and internationally in some countries even higher.

I found quality from feature phones to be quite high, because lets face it if you're taking the time to search something on those dinosaurs you're probably way more engaged.

Agreed with Feature phone quality but there is an important thing to note. Even though 50% of phones in US are FF, only a % of them have internet access and a smaller % of people with feature phones actually attempt to use the internet with their crppy phones. The inventory therefore is not 50%. Unlike smartphones, the inventory is much more limited - no apps and very few sites actually cater to the smaller ad sizes.

Found this template for Feature phones from Nokia

TIP: Good copy goes a long way. I've tested a lot this month and i've learned good copy on my landing pages always beat photos. In this case a picture isn't a 1000 words.