Mobile landing pages [winning ingredients] (19)

Quick guide for a proper mobile landing page. I've tested quite a bit and i know what works

3 key ingredients for a mobile lander
1. You need to make the landing page auto resize, so it properly fits all phones.
2. VERY small filesize. Your page needs to load ninja fast
3. Limited text/images etc... Screen space is limited, don't overload the user

- There are a lot of "converting" tactics to use on landing pages, but you want to limit the amount you use because your space is limited.
- Make your buttons (call to action) easy to see and easier to click
- Split test (like always)
- Mobile is new, try your own pages instead of a copying because a lot hasn't been done yet

Inspiration links
1. http://stmforum.com/forum/showthread.php?5289-Mobile-landing-page-concepts-%28SCREENSHOTS-galore*!%29
2. http://pttrns.com/

Great work stackman, keep it up!

Anyone have a designer I can use for mobile pages? Looking to get some typical landing pages fit for mobile and I don't have the time or patience to do it all myself.

Thanks Stacks! Perfect timing

Originally Posted by zenmoney

Anyone have a designer I can use for mobile pages? Looking to get some typical landing pages fit for mobile and I don't have the time or patience to do it all myself.

A little tip from me...

When creating landers on mobile, make sure you code links to open on the same page.

Why?

Quite a few phones have window limits on them. So if a user has the max windows open already and they click a link on your lander, they will get an error message that they will have to close one of their other windows before proceeding.

This won't make a huge difference, but will save you a few conversions here and there.

Originally Posted by Mr Green

When creating landers on mobile, make sure you code links to open on the same page.

<a href="http://yourlink.com" target="_self">Click here</a>

<a href="http://yourlink.com" target="_top">Click here</a>

<a href="http://yourlink.com" target="_blank">Click here</a>

Would it be advisable to host lander files on a CDN(MaxCDN) and then go direct to offer? (Cutting CPVLab out due to slow redirects)

Alternative for me right now is hosting on VPN.
For tracking, I can pass handset to my network as subid since I'm dealing only with one carrier atm.

Originally Posted by ayzo

Just grab something on themeforest:

http://themeforest.net/category/site-templates/mobile

Make sure you strip out all the extra junk you don't need, lots of designers (especially on themeforest) have huge javascript/css files because they have a different layout for different pages (homepage, contact us, faq, map, about, etc). Then to make things worse they usually add a lot of images, usually in .png format none the less.

Here is an example of a recent theme I bought:

http://themeforest.net/item/abeeso-m...webapp/1581645

As it is, here is the size/requests/load time:



This first benchmark isn't fair since this theme has a lot of extra options enabled by default so I started stripping out everything I didn't need like the contact us pages, the sliders, unused images, and stuff like that and got it down to this:



I thought it was still too big and slow to load so I started stripping out all the .css I wasn't using, eliminated all javascript and jquery, got rid of the background and wrapper images, imported fonts, converted the arrow and checkmark from .png to .gif (from over 3kb each to ~500 bytes) and got it down to this:



Server is located in California btw.

On a desktop you're not going to notice 381kb vs 5.7kb or 715ms vs 259ms because most broadband connections have a downstream of 10mb or more but on a cell phone the difference is very noticeable.

If anyone wants to use my stripped down version feel free to download it here:

http://www.mediafire.com/file/vs89no...9/tinymobi.zip

Some of you can probably strip it down further to reduce the size.

Here is what it looks like:



Very basic but it's helped increase my conversion on a few campaigns over direct linking. If you want to speed it up even more consider using something like cloudflare so that the page is cached as close as possible to your visitors.

Also make sure you put this in your .htaccess file!

<IfModule mod_headers.c>
    <FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$">
        Header set Last-Modified "Mon, 31 Aug 2013 00:00:00 GMT"
    </FilesMatch>
</IfModule>

Originally Posted by river

Also make sure you put this in your .htaccess file!

Code:

<IfModule mod_headers.c>
    <FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$">
        Header set Last-Modified "Mon, 31 Aug 2009 00:00:00 GMT"
    </FilesMatch>
</IfModule>

It's setting a last modified date on images, js files and pdfs. The idea is if a mobile hits you page a 2nd time it should check the last modified date, and only download files that have been modified. Since he is setting the date to 2009, images and pdfs wouldn't be re-downloaded which would increase the 2nd page load.

Another source for inspiration: http://cssiphone.com/

Ok, reading this thread I understood that it is not a good idea to make links on a mobile lander to open in new tabs.
I am building a lander with 2 offers on it. I want the links to open in new tabs.

Since I am tracking with STM and I use the $clickThruLink, how do I make this open in a new tab or window?

I have tried the _blank but it did not work. or maybe I did not use it right...Can someone help me what is the correct line?
E.g. I have:

$button_url = "$clickThruLink7457";

How do I make it open in new tab or window? It does not matter which one, I just want the lander to stay open.

So, just to clarify: you want these links to open in NEW tabs, right?

If that's the case, you'd format your URLs as:

<a href="<?php echo $button_url?>" target="_blank">Click here</a>

So for example, I have

$button_text = "Step#1: Scan It! Download this Antivirus App & Scan for Viruses & Spyware !";
$button_url = "$clickThruLink1476";
<a href="<?php echo $button_url?>" target="_blank">Click here</a>


I am not sure, if I put it this way, I am getting php error...I know it is not the right way.
As in the example above, how does it go?
I use $button_text instead of Click Here?

I really have no idea how it goes..
under the rest?
Or I modify it...
Also, I should specify that this is a settings.php file called by the index.php...
So now what? LOL

Ah, I just found this in index.php:

<div id="button-outer" class="center"><a id="button" href="<?php echo $button_url ?>"><span id="button-text"><?php echo $button_text ?></span></a></div>

Maybe here is where I should use your code?

Where did this 1476 come from???
You should have $button_url = $clickThruLink - this is a useless statement, it just says A = B so we can later echo A instead of B. Why?

So, just put the p202 code at the top of the lander (or in settings.php). Remove the button_url part or at least the 1476 and quote marks around the $clickThruLink. Then use the following code, for example:

<div id="button-outer" class="center"><a id="button" href="<?php echo $clickThruLink ?>"><span id="button-text"><?php echo $button_text ?></span></a></div>

Hi Zeno,
Thanks for the help.

This WAS a lander w/2 offers on it (that's why the 1476 for the click-through url).
However, just my luck...BOTH offers are being paused today. LOL
But yes, for a single offer lander, your code and Caurmen's should work.
I am not a coder, that's why I am so dumbish.
Thank you again.

Nice thread to bring back here, tons of big tips!