Home > Design - Imagery, Banners & Landers > Landing Pages

Please help me building this lander for mobile in the right way (10)

08-30-2016 08:06 PM #1 davidep (Member)
Please help me building this lander for mobile in the right way

Hey guys!

I'm having a hard time setting up this lander. I read Caurmen's guides about making a landing page work on any phone when you hold your phone vertically and horizontally but I still have troubles.

HERE is the landing page.

Now, if the phone is hold vertically everything seems ok but as I rotate it horizontally the mess happens.

Screenshot from my phone when it's vertical

Screenshot from my phone when it's horizontal

I paste here the html

<head>

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

<link href="scribdlp2.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="grad">
<h1>
You're about to know a shocking bargain that all offline stores don't want you to know!
</h1>
<div id="img">
<img src="scribd2.jpg" width=40%; max-width=40% />

</div>
<p> <b>Here's how to get you hands on thousands of comics, sheet music, audiobooks, books and much more in 3 simple steps:</b></p>

<p> <b>1. Click on the "Get access now" button</b> </p>

<p><b>2. Click on the "Start your free 30 days" in the next page</b></p>

<p><b>3. Complete the easy and fast registration and then you have it!</b></p>
<p><b><font color="red"> HURRY UP BEFORE THIS OFFER EXPIRES!</font> </b></p>

<a href="http://mboyl.ab4all.com/click">
<div id="divbutton"> <button type="button" class="button" rel="stylesheet">GET ACCESS NOW!</button> </a></div>
</body>

and the css.

body {
background-size: 100%;
background: linear-gradient(#1f294d, #917470);
}

@media only screen and (orientation:landscape){
html {font-size: 9pt;}
#img {width: 70%; float: left; }
}
h1 {
text-align: center;
font-family: "verdana";
font-size: 120%;
color: red;
}
p {
font-family: "verdana";
font-size: 100%;
text-align: center;
color: white;
}
#img {
text-align: center;
}

#divbutton {
text-align: center;
vertical-align: bottom;
}

.button {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Arial;
color: #ffffff;
font-size: 17px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

.button:hover {
background: #0066ff;
text-decoration: none;
}

When it is horizontal I want the image to be at the left while the text (beside the button and the "hurry up" line) to be at its right. Can someone please give me some suggestions?

Thanks in advance

09-01-2016 08:37 AM #2 davidep (Member)

Anybody?

09-01-2016 10:58 AM #3 caurmen (Administrator)

OK, you'll need to change a few things here.

Firstly, if you want the text to align right, you'll need to put it all in a div tag. Otherwise it'll wrap around as it's doing. So put <div> </div> around the text you want to go right - that should work as the image is floated left, but if not then add in style="float:right" and assign a width.

I'd take out the media query #img {width: 70%; float: left; } - not sure what that's meant to do in this case as the image is already locked to max-width 40%.

Those two changes might do it - if not post here again and we'll keep debugging!

09-01-2016 05:18 PM #4 davidep (Member)

Hi Caurmen, thanks for your useful reply

Of course there were some mistakes because I've never created a Html page until now

Anyway, it seems to me that it's almost ok now. Thank to your suggestions I've managed to make the elements go where I want except for the "Hurry Up" line that doesn't wanna go under the image yet and the button which goes too close to the bottom when I hold the phone horizontally. What have I got to do to make them all right?
I'm also worried about how it may look like on other devices.

Here are all the data

Landing page link

Screenshot from my phone when it's vertical

Screenshot from my phone when it's horizontal

HTML

<head>

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

<link href="scribdlp2.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="grad">
<h1>
You're about to know a shocking bargain that all offline stores don't want you to know!
</h1>
<div id="img">
<img src="scribd2.jpg" width=40%; max-width=40% />

</div><br>
<div style="color: white; font-family: verdana; font-size: 90%; text-align: center" />
<b>Here's how to get you hands on thousands of comics, sheet music, audiobooks, books and much more in 3 simple steps:</b> <br><br>

<b>1. Click on the "Get access now" button</b> <br><br>

<b>2. Click on the "Start your free 30 days" in the next page</b><br><br>

<b>3. Complete the easy and fast registration and then you have it!</b><br><br>

</div>
<p><b><div style= "color: red; font-family: verdana; font-size: 100%; text-align: center" > HURRY UP BEFORE THIS OFFER EXPIRES!</b></p> </div>
<a href="http://mboyl.ab4all.com/click">
<div id="divbutton"> <button type="button" class="button" rel="stylesheet">GET ACCESS NOW!</button> </a></div>
</body>

CSS

body {
background-size: 100%;
text-align: center;
background: linear-gradient(#1f294d, #917470);
}

@media only screen and (orientation:landscape){
html {font-size: 9pt;}
p {float: right; width: 70%; }
img {float: left;}
}
h1 {
text-align: center;
font-family: "verdana";
font-size: 110%;
color: red;
}
#img {
text-align: center;
}

#divbutton {
text-align: center;
vertical-align: bottom;
}

.button {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Arial;
color: #ffffff;
font-size: 17px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

.button:hover {
background: #0066ff;
text-decoration: none;
}

I see that in your html lander creation guides you never attach css files to the html. Is it because you include all the informations in the <style> </style> tags?

Thanks in advance

09-01-2016 05:50 PM #5 jessejames (Member)

You can set display: block; on the red text and float it left with a media query. For the button you can set a margin-top: 20vh; (or whatever margin you want) with a media query. By inlining css (which is usually pretty lightweight for mobile landers), you're saving a request, making the load times faster (doesn't apply if you're using bootstrap, but I wouldn't use that for mobile landers anyways).

09-02-2016 09:35 PM #6 davidep (Member)

Ok guys, thank your help I've managed to obtain what is a satisfactory to me. The red "hurry up" line isn't below the image and the image, in my opinion, looks a bit too small (when the phon is vertical).Anyway changing these things means making the button go under the fold so I'll keep everything like it is now.
Just a question. Sometimes the vertical distance between the lines and the centering of the elements isn't completely balanced (maybe because of the various types of devices). Can this somehow affect the number of conversions?

In order to see if everything is balanced and nothing goes under the fold both when the phone is vertical and horizontal I use Window Resizer Beta but it seems to cover more the tablets rather that the mobile phones. Do you think the lander could look all right in most of the phones? Thanks!

Rectified lander

09-14-2016 07:15 PM #7 davidep (Member)

Hello guys, I'm having another grief with another lander.
This is the landing page. It's going on mobile but, just to make you understand, this is the problem and it is better visible on desktop

On mobile it could look like this

As you can see the text always stays on the left and there's some mistake in HTML that doesn't allow me to make it like I want it to be (like this):

Simply put, I would like it to be just as it is now but the whole text in the center under the headline.
Something like this, with this type of alignment.
(This is another old landing page of mine)

Here is the HTML

</li>
</ul></div>
<p>Just click on the "I want them now" button and enter your cellular number for confirmation.</p>
<script>
var count=60;
var counter=setInterval(timer, 1000);
function timer()
{count=count-1;
if (count <= 0)
{clearInterval(counter);
return;
}document.getElementById("timer").innerHTML=count +" seconds left.";}
</script>
<span style="color:red" id="timer">60 seconds left</span></div>
</body>
</html>

HERE you can find the lander

Thank you

09-15-2016 10:17 AM #8 caurmen (Administrator)

You need to change the CSS padding property on the container div to push the text in a little from the sides.

Change this line:

.container {margin: 0 auto; width: 100%; text-align:center;}

to

.container {margin: 0 auto; width: 100%; text-align:center; padding: 0px 20px 0px 20px}

That will push the text in. Adjust the numbers in the padding declaration until they look right!

09-15-2016 04:31 PM #9 davidep (Member)

Thank you very much! I've realized that it works also adding the width in px as you can see by the HTML

I'm having the usual issue with the landscape orientation. I've been constrained to remove one benefit in the bulleted list to make it all fit without going under the fold (although the image and h1 headline resizings suck as hell in landscape mode).

So here are my questions:
1. What should I do to the HTML in order to make everything fit in both the orientations?
2. Do you think the text is easily readable an colours are well combined ?
3. I have read several guides about landing page design, optimization and psychology but I can't do much on mobile because of the limited space and I'm afraid nothing's good enough for a decent amount of conversions. Any suggestion?

Landing page URL

<html>
<head>

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

<title>EXCLUSIVE EMOTICONS PACK!</title>
<style>
body {
line-height:normal;
padding:0;
margin-left:0;
text-align:center;
background-color: #c0bcbb;
color: #424242;
font-family:Arial;
font-size: 14px;
}
.container {margin: 0 auto; width: 70%; text-align:center; padding: 0px 20px 0px 20px}

#description {
margin: auto;
width: 350px;
text-align: left;
margin-bottom:10px;
font-size: 14px;
}

#description li {
list-style-image:none;
list-style-type:circle;
margin-left:5px;
margin-bottom:10px;
padding-left:10px;

}
#description ul {
padding:0;
text-align:left;

}

#btn {
-webkit-border-radius: 17;
-moz-border-radius: 17;
border-radius: 17px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #06b500;
padding: 10px 20px 10px 20px;
border: solid yellow 2px;
text-decoration: none;
text-align:center;
margin: auto;
margin-top: 10px;

}

#btn:hover {
background: red;
text-decoration: none;
}

@media only screen and (orientation:landscape){
img {width: 40%}
body {font-size: 12px}
h1 {font-size: 12px}

</style>

</head>
<body>
<img src="topem.png"; width=100%; max-width=100%>

<h1>STOP THE BOREDOM ON WHATSAPP!</h1>
<div id= "description">
<strong>
<p>We are introducing new unpublished zombie emoticons <u>guaranteed</u> to </p>
<ul> <li><font color="white"> impress your friends </font> with something they don't have</li>

<li>give you and your contacts a <font color="white">smile</font> everytime Whatsapp is opened</li>
</ul>
<p>Just click on the <font color="white">"Get them now!"</font>button and enter your cellular number for confirmation.</p></div>
<u><script>
var count=60;
var counter=setInterval(timer, 1000);
function timer()
{count=count-1;
if (count <= 0)
{clearInterval(counter);
return;
}document.getElementById("timer").innerHTML=count +" seconds left!!!";}
</script>
<div>Hurry up <span style="color:red" id="timer">60 seconds left!!!</span></strong></u><div></div>
<div class= "container" >
<p><button id= "btn" align= "center">GET THEM NOW!</button></p></div>
</body>
</html>

09-19-2016 10:39 AM #10 caurmen (Administrator)

The simplest approach would be to just change the width of your "description" container when it's switched to landscape mode. You could also use a percentage width (say, 80%), which would be a simpler but less precise solution - however, it'd probably work well enough for your needs.

Home > Design - Imagery, Banners & Landers > Landing Pages