How To Build a Simple Mobile Lander That Actually Works (38)
How To Build a Simple Mobile Lander That Actually Works
Second Part Now Uploaded! Read It Here.
Anyone else here old enough to remember the 1999 era of web design?
Half-supported standards, browsers with spectacularly funny quirks, absolutely no standard resolution whatsoever, oh, and half your audience is still on a 56k modem?
Well, the good old days are here again - with mobile.
Browser resolutions ranging from 240x320 to 640x1136? Check.
Design standards that should work, but don't? Check.
Really, really limited bandwidth? Check.
Fortunately, I did go through it all the first time around.
And in this tutorial, I'm going to show you exactly how to navigate the pointy-rock-filled waters of mobile design to make a mobile landing page that actually works on every device you care about - unlike 97% of your competition.
What we're going to do
In this tutorial, I'm going to take you through the process of designing a simple mobile lander. It's loosely based on one of Stackman's landers from this excellent post.
The tutorial's split into two parts.
In this first part, I'll take you through designing a lander focused on a single phone, but using intelligent responsive design to ensure you won't have major problems on other devices.
In part 2 (here it is), we'll dive into testing on BrowserStack and making sure that your lander works with EVERY device you care about.
Note: This is an example design rather than a lander from a live campaign. It's similar in design to landers that I do run, and will teach you the principles of responsive design for any mobile lander!
( If you want to see some real rubber-meets-road testing, I'm going to run a mobile follow-along in a week or so, where you'll be able to see exactly the process I take on a live mobile campaign in a new vertical. )
What You'll Need
You won't need many tools for this tutorial, because we're going old-school and writing the HTML from scratch.
Mobile design is so sensitive to file size, and so tweak-heavy, that I really don't recommend any web design tools out there for the job.
You will need:
- A mobile phone that can surf the web. I'm guessing most people have this.
- Your favourite image-editing tool.
- Somewhere to upload your landers to which is web-accessible. I created a new folder on my server called "MobTest".
If you absolutely don't have a phone you can use with this tutorial, you can use Chrome - turn on "Developer Tools", click the gear in the bottom right, then go to "overrides" and set "Device Metrics" to screen width 320x473. But it's far better to preview on a phone if possible.
Wow, this looks like a lot of work!
Yup. And that's a good thing.
I actively seek out areas in affiliate marketing that look like hard work - because most affiliates are lazy. Anyone who has stepped outside the realms of English-language campaigns will know this - whenever it's harder to run a campaign, there's a lot less competition.
This is one of the big reasons why optimising your server and speeding up your landers works so well, for example. It's hard, complicated work, and so most affiliates think "fuck it, I'll leave that 100k image and those five CSS files in, how much damage can they do?".
And so an optimised lander has a huge advantage.
That's even more the case in mobile. If you've gone through the pain, bought the BrowserStack subscription and generally beaten your face off the keyboard to make your lander look RIGHT on all mobiles, you've got a massive advantage over the competition. Their landers probably aren't even readable on half the devices they're trying to target.
WHY does all this work?
This tutorial is focused on "how" rather than "why". I'll briefly explain some things, but there's a lot of ground to cover, so we're going to focus on getting a lander up and running here.
Next week, though, I'll be writing a post on WHY all this works, and how you can use the principles of design here in any lander you like. Stay tuned!
Part 1: Preparing Your Lander On A Single Phone
First thing - get your phone out, get it connected to your wifi if you can, and make sure it has charge.
Because surfing on a mobile is a completely different experience to surfing on a computer, I strongly recommend previewing your mobile landers on your mobile phone rather than ever going near a computer, at least in the initial design phase. Huge usability problems aren't necessarily obvious unless you're previewing using the same interface as the people you're advertising too.
The Basic Lander
We'll start with what could be the code for a Web lander, and then make it work on a mobile.
Create a new page called "MobLander.html" or something similar, and paste the following code in:
<head>
<title>Get Rid Of Your Debt!</title>
<style>
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 900px; text-align: center;}
</style>
</head>
<body>
<div class="container">
<h1>Get Rid Of Your Debt Completely In Under 60 Days!</h1>
<img src="Family-Jumping.jpg">
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned about your debt situation?</li><li>Worried about losing the assets you worked so hard for?</li><li>Scared at the prospect of Bankrupcy?</li></ol>
<h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center">
<a href="redirect.php">Do It Now!</a>
</div></body>
Navigate to that page in your Web browser - and you'll see it's ugly as hell, but basically functional:
Sorting Out Width On A Phone
Now, go to the same page on your phone.
Chances are, it's absolutely tiny. That's the first thing we need to fix. Just below the <head> tag, add
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Upload the page and refresh it on your phone, and you'll see that all the text is now readable, but the lander goes way off the edge of your phone's screen.
So, we know how to fix this, right? Let's just go to the style tag, set the container width to 280px, and -
Don't do that.
Because you're designing for all mobiles - not just one - mobile designs have to take account of an enormous range of screen sizes. If you design in pixels at this stage, you're building a world of pain for yourself later on.
Instead, you should size ALL your divs using % - that'll adjust them to keep them looking broadly the same on any screen size.
In this case, change the <style> tag to the following:
<style>
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 96%; text-align: center;}
</style>
Making Your Images Fluid
Images in mobile design are a massive, massive pain in the ass. We'll look at this more next week. In general, you've got the choice between having them as small as possible, or having them look just right.
We'll take the simplest option for now, although it will cost us a bit of page loading speed. Add the following line just after <style>:
.image{width:80%; max-width: 80%;}
<img src="Family-Jumping-I5.jpg">
<img src="Family-Jumping-I5.jpg" class="image">
The downside of this technique is that on phones with a smaller display, you'll be loading a larger image than you need. For now, resize the image to 320 pixels wide - that's a good standard size for most phone browsers - and trim as much size off it as you can using standard image optimisation (Save For Web in Photoshop, for example).
The text's still not right, though. Moving on...
Setting Up Text For Easy Optimisation
OK, we're getting there, but the text is now far too large. So, it's time to resize that with % too, right?
Not so fast, sadly. % settings on text don't do anything as sensible as setting it based on the browser window - instead, they resize to a percentage of the phone's default font size. That's usually optimised for viewing non-mobile pages, and is sometimes just downright crazy.
A lot of our second stage, where we set the page up for all mobiles, is going to be tweaking text size. All we can really do for now is make it as sensible as possible and as easy to change as we can.
Add a line just below <style> :
html {font-size: 12pt}
Look at the numbered list. Is it easy to read? If so, you're good to go. If it's too small, make the number bigger - 14pt or 16pt. If it's too big, make the number smaller.
Tweak until you're happy.
Next, we need to style our header tags. The headline is probably waaaay too large right now, as is the line "You are currently in debt...".
We DON'T want to set individual sizes here - otherwise we'll have a lot more tweaking to do later - so what we do is use the little-known "rem" measurement. That sets the text size as a multiplier of the main font-size we set, above.
Add
h1{ font-size: 1.5rem;}
h2{ font-size: 1.2rem;}
Trim Your Copy
Now it's time for the hard bit. One of the big challenges with mobile lander design is that you've got a LOT less space. And currently, your CTA still is sitting below the fold - which is probably a bad thing.
(I'll talk more about this in the "theory" post - and I'd be interested to hear what other mobile affs think about CTAs above or below the fold).
So, it's time to trim our copy. Personally, I removed the word "Completely" from the headline, and removed all of the list, ending up with an HTML body that looks like this:
<body> <div class="container"> <h1>Get Rid Of Your Debt In Under 60 Days!</h1> <img src="Family-Jumping.jpg" class="image"> <h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center"> <a href="redirect.php">Do It Now!</a> </div></body>
Make A Super-Slim Call To Action
Finally, our Call To Action looks ugly. That doesn't mean it won't work, but particularly on mobile, research seems to indicate that users click on buttons more easily than links. So let's add a button.
No, no, don't go to Photoshop!
Because of the limited bandwidth of WAP, and the pain-in-the-ass nature of images, we want to avoid normal images wherever possible.
And one of the great joys of mobile development is that unlike development for the web, most mobile browsers are comparatively modern - which means that we can design our buttons in modern CSS, and not have to touch an image editor at all!
Image CSS is hella complicated, but there are tools to make it much simpler. So, go to http://css3button.net/ and tweak until you've got a button that looks perfect! Then copy the CSS into the bottom of your style tag, just above </style>.
I ended up with
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#53fc53 0%,
#007311);
background: -webkit-gradient(
linear, left top, left bottom,
from(#53fc53),
to(#007311));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #00b80c;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
text-shadow:
0px -1px 0px rgba(0,0,0,1),
0px 1px 0px rgba(255,255,255,0.2);
}
We've got a few modifications to make to this code. Firstly, remove the "button" from the start of the declaration, so that it simply reads .css3button. We don't actually want a button here - we want a link that looks like a button.
Secondly, change the font-size to "2rem" and the padding to "2% 5%", to make sure that it scales with the phone you're testing it on.
Now, simply change
<a href="redirect.php">Do It Now!</a>
<a href="redirect.php" class="css3button" aign="center">Do It Now!</a>
TIP: if you don't like the text of your button underlined, add "text-decoration: none" at the bottom of the button CSS ( the chunk of code starting with "button.css3button {" - add this line just before the closing "}" ) to de-underline it.
And that's it for Part 1!
We now have a simple lander that will work - more or less - on 90% of all phones. Sometimes the CTA will drop below the fold, but that's about the worst that should happen on a modern phone.
However, there's a lot more we can do. Next week, we'll dive into BrowserStack and cross-phone compatability checking in detail. We'll learn how to adjust text size for different phones, deal with Retina images on iPhone, use smaller images to save space, change our copy on the fly for different phone resolutions, and even switch to a completely different layout for people who are browsing in Landscape mode.
And if you found all of that useful, here's Part 2 with even more mobile goodness!
I hope that was helpful! Please do reply to this post if you found any of it confusing, and I'll clear things up. If you think something's wrong or you have a suggestion for a better way to do a part of the tutorial, again, please do reply and let me know!
UPDATE: I've attached the code for the final lander! Enjoy!
Beautiful!
Now i can code my own landers 
Loading time for mobile conversions means everything! You can double conversion rates overnight with a lander thans half the size depending on the country/phones your targeting
You'll like next week's installment, then - I'm going to be spending a while talking about various speed-increasing techniques. Lots of stuff most people don't realise is out there.
Thank you Mr Caurmen!
This will be a very valuable thread.
I use as few images as possible and if i do need images.. let's say 5 images. I put them in 1 file and place that with CSS. This way there is only 1 image to load instead of 5 separate images.
Don't just copy LPs from competitors just like that. During the adult dating contest I analyzed some LPs. You guys probably have seen the one where you have to click a button and then the set of rules fade in. It uses 3 separate scripts with a total file size of a staggering 100kb for the animation. I use the exact same animation which only needs a 487 bytes JS file.
Include scripts and styling within your LP instead of what page testing software tell you to do. Having styles in separate files only speeds up loading time for a website where a visitor browses multiple pages and caching comes in to play.
If you only target Android and iOS devices and use online CSS3 generators for buttons, gradients and animations you will be left with a lot of lines that are not used.
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
-webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6);
Also, hosting my LPs in targeted country is something that I'm fond of.
This is awesome, very timely and useful! Any chance you can post a zip w/ the final code? I'm not a real linear, step-by-step kinda person, need to see the whole picture to make sense of it.
@h0mp - yes, darn good tips. Definitely, don't spread stylesheets and scripts across multiple pages - additional opened HTTP connections are bad for raw speed! And massive agreement on hosting in your target country - or as near it as possible. I have a neat tip on that coming soon.
@thomasbhm - definitely, no problem at all. I'll do so in the next couple of days.
Boombacinoes/10! Caurman you're beastly
Epic guide!!! Thank you so much Caurmen.. 
One thing I might mention and caurmen can touch on in maybe his next thread is to make sure your server is setup to compress HTML.....
a lot of servers still by default aren't setup to gzip html....for instance storm on demand I believe don't have it enabled by default (or atleast they never used to)....it can make a huge dif in file size esp when we are talking mobile....
That's a very good point that I shall indeed include in the next guide!
There's a lazy man's solution to that one, incidentally - if you don't want to mess around with your server settings and your lander is already a php file, you can just add the line
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
Obviously the lander will need to be a php file for this to work, but certainly on mobile, the speed advantage from gzip will more than counteract the cost of calling PHP.
In the longer term, you're better off enabling it in your httpd.conf, but that gets gzip compression running fast.
Excellent basic guide on this topic, should help lots of people get started in created pages that work.
Minor note:
Awesome thread.
I can do absolutely everything I want with this template:
http://html5boilerplate.com/mobile/ or this one http://html5boilerplate.com/
When you have understood a thing or two, for example :
- How to use media queries in CSS to display your divs and images properly. This is a life saver.
(for example :
* img width = 100% if screen size < img size ; if screen size > img size, stop stretching your image to 100% of the screen size
or
* if screen > 300px, display a 200px container on the left and a 100px sidebar on the right ; if screen < 300px, display everything in one column
or
* if screen size > 300px, submit button is an image ; if screen size < 300px, submit button is text
)
With this method, you're sure that your LP is OK on mobile, but also on iPad and PC. You lose 0% of your trafic.
- Always using em instead of px, so your font size is OK everywhere.
- Using the .htaccess file provided that compress and optimize your page
- etc.
You can make perfect landing pages, compliant to all devices.
With this template, I always reach the best rank in GTmetrix.com.
Now, I always use this template for proven landing pages on Web trafic, so I'm sure I can convert mobile trafic as well.
PS : I'm not a tech guy, it's not that hard to learn with a solid template like this.
Just make a few google search to understand the part of the landing page or the JS, CSS and HTACCESS files you don't get.
@julien - thanks for the share! Interesting piece of code.
Personally, I'd still recommend building a lander from scratch rather than using a framework like this, because you'll pay the price in speed unless you're heavily customising the template.
There are 10 external links in that template, each of which will slow down loading time, and quite a lot of extraneous code to boot. I did a quick audit, and there's about 50k in total of CSS, JS and images loaded automatically - which will track to an additional second of load time on a lot of mobile networks.
However, if it works for you it works for you! And certainly for Web landers, where loading speed is a bit more forgiving, it's a useful alternative. I'd still go for raw code - given that the tests we did a little while ago show that even a 100ms delay can reduce CTR - but it's a valid alternative for speed and simplicity, particularly when you're testing an angle.
As for media queries - yes, they're extremely awesome. We'll be covering them in detail in this week's tutorial. I was really, really excited when I learned about all the things you could do with them - everything you've listed above and loads more!
Hey caurmen,
Yep, if you keep everything your loading time will definitely suffer a bit.
The best part in this template IMHO is in the css fixes that make your LP readable in every devices, and the htaccess file which is already customized.
You're totally right, it's better to start from scratch in most of the cases. Especially when you've understood the trick with mediaqueries and using em instead of px.
Quick update - I've just added the source code for the final lander to the original tutorial!
"If you want to see some real rubber-meets-road testing, I'm going to run a mobile follow-along in a week or so, where you'll be able to see exactly the process I take on a live mobile campaign in a new vertical." - caurmen the magnificent
Coming tomorrow, as it happens
Thanks for this awesome thread, it is very well explained and easier than I thought!
The only part I misunderstand is the Tip to de-underline the text button (TIP: if you don't like the text of your button underlined, add "a.cssbutton{text-decoration: none}" right after the button CSS to de-underline it.).
I place the code at different place but it doesn't work. Could you tell me were this code should be placed exactly?
I tried several variations like:
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
a.cssbutton{text-decoration: none}
</style>
</head>
or
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
a.cssbutton{text-decoration: none}
}
</style>
</head>
and others but it doesn't work.
Thanks!
Change this:
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
a.cssbutton{text-decoration: none}
}
</style>
</head>
to this:
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
text-decoration: none;
}
</style>
</head>
@w3061
YES! It works! Thanks a lot!
Great post!
"TIP: if you don't like the text of your button underlined, add "a.cssbutton{text-decoration: none}" right after the button CSS to de-underline it."
Where exactly is this put? I can't figure it out...
Thanks.
EDIT - Just saw it above...THANKS!!
I'll update that part in the guide to make it clearer - thanks for reminding me to do that!
sick tutorial ! thanks caurmen ! i have a quick question though: how can i stretch the button page wide so it gets auto resized according the page width ? thanks
tried setting width to 100% although when I rotate the phone it wont align to the right side and wrap around the image but stays at the bottom of the page
Yep, that's because of the width 100% - which means it fills the full width of the screen in both portrait and landscape.
The simplest way around this is to use an @media query to detect landscape mode and resize the button appropriately. So you can have it stretched to 100% in portrait, and then in your media query set the width of the CTA button to 50% in landscape.
See this chunk of Part 2 of the tutorial.
Does that make sense?
yeah totally ! thanks , im gonna try it out !
That button generator is awesome! I really like that thing.
Originally Posted by therealkrob
Code:
<head>
<title>Get Rid Of Your Debt!</title>
<style>
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 900px; text-align: center;}
</style>
</head>
<body>
<div class="container">
<h1>Get Rid Of Your Debt Completely In Under 60 Days!</h1>
<img src="Family-Jumping.jpg">
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned about your debt situation?</li><li>Worried about losing the assets you worked so hard for?</li><li>Scared at the prospect of Bankrupcy?</li></ol>
<h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center">
<a href="redirect.php">Do It Now!</a>
</div></body>
You can grab the image I was using from here.
Navigate to that page in your Web browser - and you'll see it's ugly as hell, but basically functional:
I don't understand what exactly I have to do to browse to that page. I don't see any URL in the code (I suck at coding, just to tell, maybe is something that I didn't see)
Thanks
Originally Posted by 2redemption
If you're completely new to this stuff, I'd recommend going through the 40-day tutorial, where I cover the bare basics. The tech stuff is a headache at first - will take some getting used to.
Amy
If you're completely new to this stuff, I'd recommend going through the 40-day tutorial, where I cover the bare basics. The tech stuff is a headache at first - will take some getting used to.
Amy
. Thanks again Amy
Nice post Caurmen. Wanted to know if these kind of simple landers still work in 2019?
Originally Posted by nitinsethi
Originally Posted by nitinsethi
And you can use the same code snippets to build bigger landers. Caurmen was mainly illustrating how to code a lander.
Ultimately though, it's not really necessary to code a lander from scratch. Most affiliate will "borrow" landers from spy tools and customize to their liking/needs.
That way you save a lot of time. Plus if you choose landers that are popular, you'd KNOW they must work at least semi-well, or there wouldn't be so many people running them.
Amy
Originally Posted by h0mp
Home > Paid Traffic Sources > Mobile