Make A Mobile Lander Work Flawlessly With Any Phone (57)
Welcome back to this Stack That Money series on making mobile landing pages! If you missed the excitement, part 1, in which we turned a Web-based lander into a snazzy, fast, compliant mobile lander, is right over here.
What we ended up with was a lander that will work well enough on most mobile phones - but it won't be perfect. And, particularly once you've identified which phones convert for you, you want - you need - perfect.
And that's what this tutorial will show you - how to build a mighty morphin' power lander that will adapt to whatever phone views it and display exactly what you need it to.
What you'll need for this tutorial
You won't need a lot of technology to complete this tutorial, but there are a few vital bits:
- {*]You'll want to be registered with BrowserStack, the mobile testing tool. A paid subscription to BrowserStack really isn't optional for mobile development - it's the only tool that does the job unless you fancy buying 40 or 50 phones to test on. For this tutorial, if you're careful and log out whenever you're not using it, you can probably get away with the free 30-minute trial.
- A phone capable of browsing the Web - less vital in this part, but still handy.
- 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".
- A list of phones you want to work with. Attempting to make your lander work on every phone is a recipe for a damn long afternoon. If you're following Stackman's guide to mobile campaigns, you'll already have identified which handsets convert for your offer - just optimise for this. Otherwise, if you're following along for learning purposes, just pick a few popular phones - iPhone 4, HTC handsets, Galaxy S3 or similar.
Index
There's a lot to take in with this tutorial, so here are handy links to each section:
- How It All Works: The Magic Of Media Queries
- Making The Page Landscape-Friendly
- Adjusting Font Size
- Only Load The Images You Need
- More Things You Can Do
How It All Works: The Magic Of Media Queries
So how exactly are we going to make a single design fit all phones, everywhere?
We're not.
Instead, we're going to use some CSS magic to make our landing page transform to fit whatever phone happens to be viewing it.
One of the joys of working with mobile as opposed to Web is that the browser technology is mostly pretty modern. That means that a lot of the crazy goodness in the latest version of CSS will work flawlessly on phones - where it definitely won't on the Web.
One particularly neat bit of CSS magic is the @media query, which is what we'll be using today. It allows us to change the stylesheet of our landing page based on what browser is viewing it.
Confused? Don't worry - here's a quick demonstration.
Copy-paste this HTML code into a new document, and upload it somewhere:
<head><style>
body{color:red}
@media screen and (orientation:landscape) {
body{color:blue}
}
</style>
</head>
<body><h1>Look! It changes!</h1></body>
Now turn the phone. You'll see that as you flip the phone from landscape to portrait or portrait to landscape, the colour of the text changes.
We use the same detection to fit our lander to any phone. And I suspect most seasoned affiliates reading this will be able to think of all sorts of other nefarious uses for this tech too...
("You can unlock this ONE-TIME SPECIAL OFFER right now - just TURN YOUR PHONE!")
Making The Page Landscape-Friendly
So, let's start by making our page work on the same phone we were using before - but in a landscape orientation this time.
This is actually terrifyingly easy to do. All we do is add our first media query. Just before the closing </style> tag, add
@media screen and (orientation:landscape) {
.image{width:50%; float: left}
}
TIP: If you have problems with the image breaking out of the landing page at the bottom, add <br clear='all'/> just before the last </div> on the page.
Adjusting Font Size
As I mentioned last week, some of the font size choices phones make are just flat-out odd. As a result, we've set our font size to always be the same - but that means that on small phones, our text will now be too big.
To combat this, we'll need to check each phone we're targeting, and adjust the text size with media queries.
First of all, add this code at the bottom of your page, just before the last closing </div>:
<script type="text/javascript"> document.write(screen.width+'x'+screen.height); </script>
Now, go to BrowserStack, and open your landing page in the smallest-resolution phone you're targeting. Does the text look too big? Does it drive the Call To Action off the screen? If so, note down the height of the screen (second number of the two) and add the following to your lander just above the bottom </style> tag:
@media only screen and (orientation:portrait)
and (max-height : HEIGHTpx) {
html {font-size: SMALLERpt; }
Adjust until everything looks good, then repeat on the next smallest-resolution phone, add a new rule, and so on. You'll end up with 4 or 5 different rules with different max-heights.
Remember to increase font size for larger-resolution phones too! If you're feeling particularly picky, you can also check font size for landscape options - just add more rules with (orientation:landscape) rather than (orientation
ortrait).
Only Loading The Image You Need
If one of our viewers is looking at our lander on a tiny, tiny phone, do we still want to load a massive image? Hell no we don't.
Currently, we're using an image with width set to a percentage. That scales smoothly, but we *can't* load different images depending on screen size this way. So we have to change things.
Changing the framework
Remove your image, and replace it with a div, still with the class "image", and with a second div with the class "padding" in it, like so:
<div class="image"><div class="padding"></div></div>
.image{background-image:url('Family-Jumping.jpg'); background-size: cover; width:80%; max-width: 80%; margin: 0 auto}
.padding{padding-top: 62%;}
Check for compatibility
Next, check that this doesn't break horribly in ANY of the phones you're targeting. The background-size:cover property can be ... a little fiddly.
If it does, you'll can either:
- Go back to the single-image option for now
- Set the height and width of the div to the height and width of your image and remove the background-size: cover property.
The second option will mean it doesn't scale nicely any more, but you can just prepare more images to compensate.
Adding alternative images
Next, check the width of the smallest phone resolution you're targeting. If it's 240px, say, go into your image editor, resize your image to 80% of that (192 px wide), and call it Family-Jumping-Small.jpg . Upload it.
Now, add this line just below your </style> tag:
@media only screen and (max-width: 240px) {
.image{background-image:url('Family-Jumping-Small.jpg'}
}
You can then go through your other important phone models, and upload images for each of their common browser sizes. You can even upload larger images for high-resolution phones - in fact, if you want to get really fancy, you can use
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2)
Even More Clever Stuff
Those three things are the most common tweaks you'll need to use for optimising a mobile lander, but there are even more tricks out there if you want to research them. You can;
- Use min-aspect-ratio to detect phones with unusually short screens, and use flatter images or even insert alternate text (using display:none and display:inline)
- Use monochrome to check for old phones with black-and-white displays, and optimise your colour scheme for them.
- Add additional text or columns on wider phones - for example, add a testimonial column to the right of a long-form landing page.
Final Note
Remember to remove the size-finding Javascript from the bottom of your lander before you send live traffic to it!
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!
Amazing tutorial - 5 Stars
Glad it's useful! Any questions, of course, just post 'em here.
I've SO got to try the "rotate your phone to unlock your prize" trick on a lander one of these days... So many tech ideas, so little time...
Awesome, thank you so much for your work.
So concerning the font size, the best practice could be to set the initial size of reference with your trick, then use "em" as an unit for all the text, so we're using this ratio to display fonts properly.
Am I right?
http://kyleschaeffer.com/user-experi...s-px-vs-pt-vs/
PS : sorry to bother you with this, but in all my tests on multiple devices, simply using "em" as a unit seems to be a "one fits all" to me.
What's your opinion about this?
My approach is definitely to set the overall font size for html in pt, then everything else (p, h1, h2, etc) as rem. I'd recommend using rem rather than em, as em is cumulative - if you set an em on a div, for example, then have an h1 set in em inside that, the two em numbers will multiply to give you either much smaller or much larger text than you were expecting. That doesn't happen with rem.
(Here's an interesting post explaining the rem/em problem more.)
Most mobiles these days do set reasonably sensible sizes, so just adjusting everything in rem is a decent alternative - however, a few phones (HTC Wildfire) have slightly... controversial base text sizes. Hence I recommend setting everything yourself rather than trusting the phone manufacturer to do it!
Very interesting, thanks man.
This thread is like free gold. Thank you!!
How to set both making the page landscape-friendly and adjusting font size? I tried:
@media only screen and (orientation:portrait)
and (max-height : HEIGHTpx) {
html {font-size: SMALLERpt; }
@media screen and (orientation:landscape) {
.image{width:50%; float: left}
}
@media screen and (orientation:landscape) {
.image{width:50%; float: left}
}
What happens when you try the first one?
Adjusting font size works (of course I changed font-size, etc.), in landscape mode image is still in the same place. When I only use the second code (without font adjusting) the image is smaller, is at the left and text is at the right, so it works.
After a bit of testing, I think I've found the problem - you need a second curly bracket after SMALLERpt; in your first example. Currently you're not closing the first media query.
Does that solve it?
Thanks a lot caurmen, it solves the problem. You're the best!
And by the way, thanks a million for this lander. It was super easy to set it up and it looks great (and converts).
Hi,
When i go to landscape some of the text on the right side runs over the image - any way to prevent that?
I see a "thanks" scam here.
You broke it into 3 parts so you could get multi-thanked 
I know your type :P
Good shit!
@mstm - awesome! Glad that sorted it for you.
@Smaxor - you're onto my scam there 
@thenorwegian - hmm, that's an interesting bug. Can you provide a screenshot to help me narrow the problem down? I'll look into it.
Nice post in here but I have a small problem. When I go into landscape, the button gets cut in half. Any way to solve that?
my button just cut in half as well in portrait when the download now button text got longer (translated to another language).... how do I fix it? I did the "clear:both" I believe
@kamaleon, @karim0028 - If that's happening, set an @media query to reduce the text size of the button when it's on narrower phones.
For example,
@media only screen
and (max-width : 320px) {
.button{font-size: 50%}
}
should do it (if your button's has a class of "button", of course!).
Does that sort the problem out?
Nope... Didnt do anything for me.... The button is actually splitting when im looking at the page on my desktop & mobile...
Can you copy the HTML and CSS for that button to here, or PM me with the address of the LP? I'll take a look and see what the best way to fix it is.
Dot points running over the image
@Kamaleon - I had the exact same problem. To fix it up insert the following style attribute: list-style-position: inside;
Heads up on models failing to respond to @media query
I ran into the issue of some handset models failing to respond to the @media query suggested in this tutorial (which is an awesome tutorial mind you).
For instance I attempted to target iphone 3GS (320px by 396px) using the following code:
@media only screen and (orientationortrait)
and (max-height : 396px) {
.heading {font-size: 8pt;}
.benefits{font-size: 6pt; }
.other{font-size: 6pt;} }
In such a case you might have to remove the orientation: attribute and also target the pixel ratio for the some models to respond. But don't fear as there are cheat sheets available on the internet such as this one: http://cssmediaqueries.com/target/ (Thanks for the link Zeno).
In this case I resorted to the following code to successfully target 3gs phones:
@media screen and (device-width: 320px) and (device-height: 396px) and (-webkit-device-pixel-ratio: 1)
Hope that helps anyone who runs into the same problem!
@caurmen
Thanks for this! real helpful. Just a small problem I encountered. I'm viewing the same lander with my iphone 5s (320x568) and ipod touch (320x480)
Can't seem to use the media query command to reduce the font size so the lander fits on the smaller ipod. This is the code I used:
@media only screen and (orientationortrait)
and (max-height : 480px) {
html {font-size: 10pt; }
}
not sure if i'm doing anything wrong. this simply changes the font for both screens. instead of simply scaling the smaller one down.
Try using max-device-width instead. iPhones can be a bit tricksy for media queries. Here's a list of good media queries for the iPhone and ipod touch: http://stephen.io/mediaqueries/
Never cared much about em, I think widths are more important.
Originally Posted by shakedown
Is there a specific code to use to make it the site 'centered' when it's on landscape?
At the moment, everything is to the left when it's on landscape.
Sounds like your page design just isn't centered at all? If the page container is centered this will work irrespective of orientation.
Just use something like #pagecontainer{margin-left:auto;margin-right:auto} on your main site container.
It's centered when it's on portrait but on landscape, it moves to the left.
I'll give the code a try and see if it works
This is likely due to your page centering CSS being not quite right or a page container somewhere having a width set so that, once the page gets wide enough, things stop moving around as expected.
Great post as always caurmen!
Let's see if I can add a little bit of value here.
If you want full browser (nearly) support when swapping images with media queries you actually want to define all images inside of media queries, including the "default" one in the stylesheet.
Defining a default image in the stylesheet will still download (but not show) that image in important older versions of Safari and Android browsers, even when using media queries.
Good point!
I'm amazed we don't have a better solution for responsive images yet - but we don't, at least to the best of my knowledge.
Hi Caurmen, one question.
It seems to me that in order to make the lander fit in the screen when rotating the phone you had to remove a lot of text. In other threads you seem to care a lot about the fact that landers fit in the screen and nothing goes beyond the fold. Is this really so important for converting?
In spytools landers go beyond the fold quite often. Could you tell me more? Can landers be converting even if they go beyond the fold?
For exemple I've created this landing page (which I ripped ) for mobile but i just can't make it fit in the screen because of the lenght of the text...and text is needed
Got lost in " Change framework " Now, change your stylesheet to read
@davidep - every time I've split-tested I've discovered that the CTA being above the fold is very important - but only for short-form landers.
Long-form sales letters or equivalent (farticles, flogs, advertorials) have different rules.
And there will definitely be a lander out there that breaks these rules! For most landers, though, I'd work hard to get the CTA above the fold.
Originally Posted by caurmen
@media only screen and (orientation:portrait)
and (max-height : HEIGHTpx) {
html {font-size: SMALLERpt; }
Adjust until everything looks good, then repeat on the next smallest-resolution phone, add a new rule, and so on. You'll end up with 4 or 5 different rules with different max-heights.
Remember to increase font size for larger-resolution phones too! If you're feeling particularly picky, you can also check font size for landscape options - just add more rules with (orientation:landscape) rather than (orientation
ortrait).Example (below is for the smallest phone size)
@media only screen and (orientation
ortrait)and (max-height : HEIGHTpx) {
html {font-size: 12pt; }
Question: How do you make the rules code come into play, and what's the exact code we should use?
@media only screen and (orientation:portrait)
and (max-height : HEIGHTpx) {
html {font-size: SMALLERpt; }
One more question, I realized that this particular line of code
@media only screen and (orientation:portrait)
and (max-height : 568px) {
html {font-size: 10pt; }
I trialed and error this code with every other possibility, and it narrowed down to this code being the one that caused my button to disappear
My button was created from:
http://css3button.net/
@aloeveraa1491 - Wow, that's super-weird. Can you post the exact code you used for the button, and also shots of before and after you added that code?
@media only screen and (orientation:portrait)
and (max-height : 250px) {
html {font-size: 5pt; }
Before:
After:
------------------------------------------------------
This is my code for AFTER:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
html{font-size:10pt;}
body{background:none repeat scroll 0 0 #181818;color:#fff;padding-top:5px;height:100%;width:100%}
h1 {color: orange; text-align: center; font-family:Arial; font-size: 1.5rem;padding-bottom:0px;}
h2 {color: red; text-align: center; font-family:Tahoma;font-size: 1.2rem;}
p {color:white; text-align:center; font-family: Arial;}
.image {margin: auto; display: block;}
.container {margin: 0 auto; width: 96%; text-align: center;}
@media only screen and (orientationortrait)
and (max-height : 568px) {
html {font-size: 10pt; }
.button1 {
background-color: #004A7F;
-webkit-border-radius: 10px;
border-radius: 10px;
border: none;
color: #FFFFFF; cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 20px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
box-sizing: border-box;padding:10px 15px;
color:#fff;
border-radius:3px;
width: 100%;
display: block;
background: #FF0000;
}
@media screen and (orientation:landscape) {
.image{width:30%; float: left}
html{font-size: 10pt;}}
</style>
<title>WARNING! You may have a virus!
</title>
<script>
alert("Virus Alert! " + "\n\n" + "Your Android may be infected with (13) malware and spyware virus! Click the Remove button immediately" );
</script>
</head>
<body>
<div class="container">
<h1>Your SAMSUNG GALAXY NOTE 4 may be infected with (13) Viruses!</h1>
<img src="android.png" width="128px" class="image" />
<p>To scan and remove the viruses,<br>
<strong>Step 1</strong>: Click on the button below<br>
<strong>Step 2</strong>: Download the free scanner to remove your viruses completely</p>
<h2>IMPORTANT: Please scan and update in <span id="counter">30</span> seconds</h2>
<p align="center">
<a href="www.google.com" class="button1">Remove Virus Now</a>
</p>
<script>
function countdown() {
var i = document.getElementById('counter');
i.innerHTML = parseInt(i.innerHTML)-1;
if (parseInt(i.innerHTML)==0) {
clearInterval(timerId);
}
}
var timerId = setInterval(function(){ countdown(); },1000);
</script>
</div>
</body>
</html>
The only difference for before and after is:
For BEFORE, I removed these lines of code:
@media only screen and (orientationortrait)
and (max-height : 568px) {
html {font-size: 10pt; }
@media screen and (orientation:landscape) {
.image{width:30%; float: left}
html{font-size: 10pt;}}
------------------------------------------------------
Edit Question 2: Also, can I ask how do you display the user's phone model and OS out?
Example:
Warning! Your (SAMSUNG GALAXY S7) may be infected with virus
I'm trying to get the lander to display the user's phone exact model and OS, and I understand this is done by
This link below is created from my
http://track.mydomain.com/a90c84a8-e723-4f92-9f83-2b4153681763?pln={pln}&plid={plid}&crid={crid}&isp ={isp}&uid={uid_deviceid}&country={country}&brand= {device_vendor}&model={device_model}&os={os}&cid={ clickid}
Question 3: Could you also help me check my code and see if everything's in order?
Thank you so much for your help!!!
OK, here's the fix - at least, it works on my machine. Let me know if it works for you.
Very simple: move the button CSS ABOVE both media queries.
So your style tag should be:
<style>
html{font-size:10pt;}
body{background:none repeat scroll 0 0 #181818;color:#fff;padding-top:5px;height:100%;width:100%}
h1 {color: orange; text-align: center; font-family:Arial; font-size: 1.5rem;padding-bottom:0px;}
h2 {color: red; text-align: center; font-family:Tahoma;font-size: 1.2rem;}
p {color:white; text-align:center; font-family: Arial;}
.image {margin: auto; display: block;}
.container {margin: 0 auto; width: 96%; text-align: center;}
.button1 {
background-color: #004A7F;
-webkit-border-radius: 10px;
border-radius: 10px;
border: none;
color: #FFFFFF; cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 20px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
box-sizing: border-box;padding:10px 15px;
color:#fff;
border-radius:3px;
width: 100%;
display: block;
background: #FF0000;
}
@media only screen and (orientation:portrait)
and (max-height : 568px) {
html {font-size: 10pt; }
@media screen and (orientation:landscape) {
.image{width:30%; float: left}
html{font-size: 10pt;}}
</style>
Here's Voluum's tutorial on how to do that: http://feedback.Voluum.com/knowledge...eter-on-lander
Question 3: On a quick review, all looks good!
Hi Caurmen,
On THIS landing page I can't make this media query for portrait orientation work. It seems that the code doesn't have any effect on the page which doesn't adapt to the screen size.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>UBER APP</title>
</head>
<body>
<style>
html {
text-align: center;
background-size: 100%;
background-color: #0d4d57;
font-size: 12px;
}
#main {
height: 100%;
width: 90%;
margin: 0 auto;
background: white;
}
h1 {
font-family: "verdana";
font-size: 170%;
color: #0d4d57;
}
p {
font-family: "verdana";
font-size: 115%;
color: #0d4d57;
padding-right: 15px;
margin-left: 10px;
}
img {margin-top: 3%;
}
#button {
text-align: center;
vertical-align: bottom;
}
.button {
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 1px 3px #666666;
font-family: "verdana";
color: #ffffff;
font-size: 20px;
background: #0d4d57;
padding: 10px 20px 10px 20px;
border: no;
text-decoration: none;
margin-bottom: 1%;
}
.button:hover {
background: #3cb0fd;
text-decoration: none;
}
@media only screen and (orientation:landscape){
img {float: left; margin-left: 2%; margin-right: 2%; width: 20%}
h1 {float: center; font-size: 150%}
p {float: center; font-size: 100% }
html {font-size: 12px }
button {font-size: 60% }
@media only screen and (orientation
ortrait)and (max-device-width: 480px) {
html {font-size: 8px }
</style>
<div id="main">
<img src="lpim.jpg" width=50%; max-width=50% />
<h1>ARE YOU READY FOR YOUR PRIVATE RIDE?</h1>
<p>
With UBER's app you will be able to: </p>
<div style="text-align: left">
<p><span style="background-color: yellow"><b>></b></span><b> <u>Plan a route</u> with a tap on the screen and make your car come get you</b> <br> <br>
<span style="background-color: yellow"><b>></b></span><b> Enjoy your ride at <u>every hour</u> and <u>every day</u> of the year with your <u>private driver</u></b><br><br>
<span style="background-color: yellow"><b>></b></span><b> <u>Choose your favorite car</u> to meet your style and space expectations</b></p></div>
<p>Download Free App directly from Play Store or App Store!</p>
<a href="http://mboyl.ab4all.com/click">
<div id="button"> <button type="button" class="button" rel="style">GIVE ME MY APP NOW!</button> </a>
</div><span style="background-color: yellow; font-size: 120%; color: red"> <b> GUARANTEED BY MILLIONS OF USERS </b></span>
</div>
</body>
You're missing a curly bracket closing your media query there.
It should be
@media only screen and (orientation:landscape){
img {float: left; margin-left: 2%; margin-right: 2%; width: 20%}
h1 {float: center; font-size: 150%}
p {float: center; font-size: 100% }
html {font-size: 12px }
button {font-size: 60% }
}
@media only screen and (orientation: portrait)and (max-device-width: 480px) {
html {font-size: 8px }
}
Thank you very much Caurmen, now it works!
I'm using windows resizer beta for Chrome, mobiletest.me and the 30 minutes of the browserstack trial version and sometimes the page fits in the screen differently depending on which tool I use, which one do you think I should trust more?
I'd trust Browserstack personally.
I run a couple of tests with some phones and, yes, Browserstack performs better. Paid tools always tend to be better. One last thing, regarding tablet optimisation, is this guide suitable for it? Can we treat tablet as phones?
The design elements are obviously different - different screen sizes - but yes, all the techniques I explain in this post will work for tablets too. They're basically just bigger phones after all
Great! Such an awesome guide, especially for newbies like me.
Just wanted to add... There's an online tool that lets you resize resolutions to any preference (http://quirktools.com/screenfly/) I have not used the tool mentioned in the guide but I'm sure this one works the same and it's completely FREE
Let me know if BrowserStacks is different indeed.
@luigi0821 - BrowserStack is different because it does a lot more than just change resolution: it also actually runs the site on various phones so you can pick up other quirks with box models, CSS support, and all the other fun things that can make mobile web development a pain
Checking resolutions is definitely a good first step, though.
Hey Caurmen,
This does look like an awesome guide indeed, Just wanted to check if you still believe the same design philosophy should be used today - being 4 years later, or are there certain areas that are not as critical.
thanks
Originally Posted by wellness84
Yep, correct.
The landing page design will still basically work, but it's probably not what I'd go with these days, and probably not the best-converting design ever. 
The focus of the post is very much the technical process of getting a lander to work responsively on a phone, not the design of the lander.
Home > Design - Imagery, Banners & Landers > Landing Pages