Home > Questions and Answers > General Questions

Landing Pages th (9)

05-05-2014 06:45 AM #1 de_sean (Member)
Landing Pages th

Hi guys!

See I made a landing page for Desktop Ads on Facebook . It's very simple, no fancy coding.
Here's the draft:

I launched the campaign a few hours ago and so far the results are at a minimal. But I noticed that some of the browsers detected are a bit old and some(like viewed in xbox360) are not in the norm.

This is the Prosper STM Group Overview and it was sorted via Brand and Model. The values on the right are # of views and # of click through.

I decided to check how my LP loads at http://browsershots.org/. Out of 133, 110 are viewable but that didn't include IE.
For IE, I used http://netrenderer.com/ and found out that only at IE11 was my LP viewable. The rest are in a jumbled mess.

I came to the conclusion that clicks coming from Explorer will be as good as garbage. That is a bit frustrating.

So any tips on making the LP acceptable to most browsers? Or should I focus on something else to improve my CTR?

05-05-2014 10:34 AM #2 zeno (Administrator)

How did you make the lander? Most landers will display OK in IE 10/11 but if it's only in 11 you have some issues...

Are you using complicated CSS? HTML properties that IE hasn't come up to speed with pre IE11?

Also, I recommend checking out this - http://stmforum.com/forum/showthread...and-IE-testing

Get some free browserstack going to get an even better understanding of cross-browser performance.

05-05-2014 12:18 PM #3 caurmen (Administrator)

What exactly is happening in IE?

There are a number of things that could be causing this problem - very much depends on which specific browser bug you're hitting.

Did you hand-code the lander or make it using a graphical program like Muse?

05-05-2014 01:15 PM #4 de_sean (Member)

Thanks Zeno and Caurmen!

Judge for yourself. I hand coded this and I know it is very amateurish. I'm learning still learning.
I attached the whole file, there's no point in hiding anything from you guys lol. I'm eons away.

Code:

<DOCTYPE! html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Anonymous Caller?</title>
    <style>
body{margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
.arw {margin:0 auto; width:910px; height: 400px; display: block;}

.container {margin:0 auto; width:900px; height: 400px; display: block;}

.toptext {width:850px; height:45px; display:block; margin:0 auto; margin-top:24px; text-align: center;}

#toptext {font-family:Verdana, Geneva, sans-serif; font-size:60px; color:red; text-decoration:underline; font-style:normal; font-weight:bold;}

.midtext {width:765px; height:55px; display:block; margin:0 auto; margin-top:20px; text-align: left;}

.mtxt {font-family:Verdana, Geneva, sans-serif; font-size:46px; color:black; text-decoration:none; font-style:normal; font-weight:bold;}

.img1 {width:780px; height:300px; display:block; margin: 0 auto;}

.link {width:765px; height:55px; display:block; margin:0 auto; margin-top:8px; text-align: center; background-color: blue;}

.offer {width: 780px height: 55px; display:block; margin:0 auto; margin-top:5px; text-align:center; color: red;}


    </style>

<?php
    global $clickThruLink;
    $clickThruLink = ''.$_SERVER['QUERY_STRING'];
  ?>

   </head>
<body>
<div class="arw"> <img style="float:left;"src="left.jpg" border="0"/>  <img style="float:right;"src="right.jpg" border="0"/> 
    <div class="container">
<div class="toptext"> <a id="toptext">WHO'S CALLING ME?!?</a></div>
<div class="midtext"> <a class="mtxt">My Ex? Some Creep? Stalker?</div>
<div class="img1"> <img src="a1.jpg"border="0"/></div>
<div class="link"> <a class="mtxt" style="color: yellow;" href="<?php echo $clickThruLink?>"> CLICK HERE TO FIND OUT! </a> </div>
<div class="offer"> <a class="oftxt">Special 5 day Unlimited Trial for $1.00 - Facebook Users Only!</a> </div>
    </div>
</div>
</body>
</html>

Basically it goes from this(center aligned)

to this in IE which is aligned to the left:

05-05-2014 01:59 PM #5 zeno (Administrator)

I would redo this in something like Muse.

It may work better if the images actually have positions set via CSS... at the moment you're relying on floating which I have never trusted. You could try replacing float with inline-block. Also, display:block is redundant when floating (floated elements become blocks).

In a nutshell, the way I would do it via Muse would give you a central container that centers in the page, then the arrows/main image will have positions set relative to the edges of this internal container. That way they don't move around due to any formatting issues or clashing of elements, different interpretations of floating by browsers, etc.

05-06-2014 12:29 AM #6 de_sean (Member)

I'll eventually figure out what needs to be done. Thanks for the input Zeno.

05-10-2014 10:41 AM #7 caurmen (Administrator)

I'd agree with Zeno. The problem is almost certainly float issues: the error you're seeing is a pretty classic float problem.

Personally I love floats dearly and use them all the time, but you do have to debug them across different browsers.

As an initial test, what happens if you make the arw class 1200px wide rather than its current width?

05-11-2014 11:07 AM #8 Mr Green (Administrator)

Zeno's video for making fast loading landers should help you a lot.

05-11-2014 11:43 AM #9 zeno (Administrator)

LOL spoiler alert. Well, might as well release that tutorial now - or should I censure el Greeno... hmm tempting!

Home > Questions and Answers > General Questions