All posts in Landing Pages

This is a guest post written by Kate Carpenter, a designer over at a newly started design and development studio focused on web-only projects, Fireworksable.

Just to summarize this post for you; I’ll be discussing the issue of cross-browser compatibility, it’s implications for affiliates, and focusing on things that you can do to combat it.

So, what the hell does “cross-browser” compatibility mean?

Please excuse me if the title of this segment sounds a little, belittling. However, I know as an affiliate before I was thrust into the world of design and development, that I had no idea what the term meant, or how it impacted me, so I’m drawing from experience :).

Here’s a basic non-technical meltdown; web-browsers aren’t all equal. Sure, FireFox is a more robust platform, and Chrome is more free-flowing, but it’s not just the speed and usability that differs from browser to browser, it’s the way that web pages look too.

While a newly created web page may look stunning in FireFox, there’s a good chance it might not be as good looking in Chrome, and will most likely be very different in Internet Explorer.

Coding web pages so that they are cross-browser compatible is something that we as professional web designers have to deal with on a daily basis (and believe me it’s a pain in the ass), however as affiliates it’s probably something that you’re not particularly aware of, and if you’re used to hiring that random dude off of WarriorForum who’ll whip you up a nice landing page for $100, it’s likely that he or she doesn’t take it into account, and in the long run, you’ll probably end up paying for it.

Seriously though, it can’t have that much of an effect on me can it?

Unfortunately it can. With the spring up of Google Chrome over the past couple of years, all three major web browsers (FireFox, Chrome and Internet Explorer) all have substantial market shares (hovering around the 30% mark across the board), and therefore make it imperative that your landing pages are built for all three.

Take a look at the web page below when viewed in Chrome and Internet Explorer. This is just a simple page, but already you can see how you can go from fairly decent in one browser to completely unflattering in the next;

Unless precautions are taken when coding up a web page, these are the kinds of issues that can arise, and when they do your conversions will take a considerable hit.

Combating the illness of browser irregularities

I’ll go out on a limb here, and assume the vast majority of you reading this post don’t have much coding experience. If I told you to add a CSS reset in, you’d probably have no idea what I’m talking about.

So, I’ll stick to picking out certain things that you can do to help smooth out potential kinks in your campaigns:

Identifying where the issues lie

If your landing page is very basic, or your developer knew what they were doing, there might not be any kinks at all. Rather then running off assuming there’s something wrong, you can check with a simple browser testing tool. My personal favorite is Adobe BrowserLabs, it’s free and allows you to test with 99.9% of the browsers people use. Just create an account, pop your url in, and browse through screen shots taken with the different browsers.

Forms, watch out for them

One of the most common elements of a web page to get dismembered by lack of well placed coding are forms. Internet Explorer, the dinosaur that it is, won’t even allow you to set a custom height without aligning the text to the top of the form, looking pretty ugly and rather unprofessional. Look out.

What’s your audience using

If you’ve got Google Analytics installed on your web page, you’ll be able to see what portions of your audience use what browser. Even as a developer it’s impossible to have all websites looking completely the same in all browsers (because not all standards are supported by all browsers), but it’s certainly possible to optimize for the type of browser your audience uses most. For example, if you’ve got a web savvy audience, chances are they’re going to be using FireFox and Chrome far more than they are Internet Explorer.

Popularity: 3% [?]

This will be the first installment of a mini-series of articles on split testing your landing pages. I’ll kind of throw these posts in over time around other posts, so don’t expect them all in a row.

Ok, so we all know how optimization is key, blah blah blah. You’ve heard it a million times before…A/B split testing landing pages is critical for success and optimizing profitability. Rather than babble philosophically about the Why, the practical and useful information is the What. So What exactly should you be split testing? A lot of the things I’ll go over may be obvious to some, but maybe this post will provoke some creative thinking in other areas you can split test on your own pages.

Topics are always easier to explain when examples are provided, so I’m going to use one of my old landing pages to explain split testing. I’m going to use one of my many dating landing pages that targeted “chat room” type keywords (this used to be a huge niche before all advertisers decided the quality was dreadful).

Click here to see the page.

And quickly before the haters come in,

Back to the show, here’s a smaller screenshot of the page with the areas I’m going to talk about :

Note: you can already see that this page is slightly different than the one in the link. This I just grabbed from the source PSD and shows the original button that was green instead of purple. The purple button won the split test battle.

Note #2: This landing page isn’t perfect by any means, I designed it myself and it never really got out of the “prelim” stages because I ended up just running a Mate1 host&post instead.

Whoa, for being a pretty simple and straightforward landing page, you can see pretty much everything on the page is split testable. Proper optimization goes a bit deeper than just A/B testing the color of a button. Now I’m going to break down each part, and how it can be split tested.

#1 – The Header

So you can see we went with a header that’s going to blend with the Zoosk affiliate offer. They use that same blue, and you can see I pulled their logo to increase the relevance and connection between the landing page and the actual offer. On the right hand side is what we want to split test here, that header text. This very well may be the first thing users read when they hit the page (heat maps would show), so we want it to be extremely relevant to the ad they just clicked. You can also see I was geo-targeting the headline so it would read whatever state they’re in. Here are a few different variations I would split test :

1. 5,934 Singles Chatting in New York (control)
2. Nothing (leave the area blank)
3. 5,934 New York Profiles to Browse
4. 5,934 Singles Chatting Now
5. 5,934 Singes in Chat Rooms
6. continue to chat rooms >> (make clickable link)

You can pretty much come up with a million and one variations and ways to word it, which is the beauty of optimization. No matter how profitable or amazing your page is, there’s always a way to squeeze just a little bit more out of it.

#2 – Main Headline

If the header headline isn’t the first thing a visitor will read, the page headline probably is what they looked at instead. So just like with #1, we want this to be relevant to the ad they clicked. Here are some variations of this :

Those are just a few examples. The actual text isn’t the only thing you should be testing – colors are huge and can drastically affect the performance of your page.

#3 – The Button

The big button very may well be the most important part of this landing page. Therefore, it’s something you want to pay extra attention to when split testing. When split testing a large call to action button, keep in mind the many variations you can make to it :

• text
• font
• color
• styling (gradient, drop shadow, glow, etc)
• arrow
• animation
• hover-over

Here are a few examples using the button on the Zoosk page :

For the examples I just kind of did a bunch of random sampling. When you’re actually going to split test all of these elements, for the most part you should do them individually, and in order of prominence. For these buttons, I’d split test in this order :

1) Color
2) Text
3) Arrow
4) Font
5) Styling

#4 – Text Section

With simple landing pages like these it’s generally wise to at least have some content there for people to read. A lot of the visitors are just going to disregard this section and just click the big button when they see it, but not everyone will do this. Rather than spend an hour creating a bunch of different examples, I’ll just type some different possible variations out.

1) Remove the section. Maybe it will convert better with just a button and image? You never know until you test it.

2) Change the bullet points. You can change the order, change the bullet image, or highlight different points.

3) Replace it with a “New Members” section. Find a couple snazzy mug shots, give them a name and short bio, geo-target the location, and have a small “Chat Now” button to the right of each member.

4) Replace it with a “Current Stats” text box. List things like the number of photos uploaded, number of videos, number of chatrooms, number of active chatters, etc.

#5 – The Small Button

Variations for this button will be pretty similar to the large button, so no use in going too far in-depth about it. When you’re split testing and change the big button from say green to purple, don’t always change the little button color with the big button. A green big button and red little button may have a higher CTR than a green big button and green little button. Multi-variate testing is key.

#6 – Photo Button

Couple elements we can split test here: the color, text, and font. Some possible text alternates :

• Chat Now!
• View Profile!
• Send Message!
• Free Chatting!
• FREE!

Something like the font is an element that probably is pretty useless to split test in this scenario. Chances are the font type really isn’t going to make any difference on the overall CTR of the page, but once again you never know until you test and confirm that. When setting up your first multi-variate experiment though, only test the most important elements (the main headline, call to action, picture, and content).

#7 – Picture

The picture is a pretty big element on the page. I’d actually say this is the first thing your visitor is going to see, so split testing it is extremely important. This is a dating offer we’re talking about here, so guys are going to want to see someone sexy. You can see that the actual example webpage and screen shot have different pictures, those were a couple that I tested.

The actual picture isn’t the only thing we can split test here either, we can test different photo frames as well. Here’s a couple examples :

#8 – Photo Text

The frame and picture aren’t the only things we can test here, you can test different texts out like :

• Add Friend!
• Send Message >>
• Chat Now >>
• Chat this user >>

Again, this is a smaller detail, but it might be something that catches their attention.

#9 – Facebook Connect

Footers are always nice to kind of close a page off and complete it. In addition to having a regular lead-gen page, Zoosk also has a Facebook install that pays out. So I took the footer space and figured I’d use it for that on the chance that a person may see Facebook as an option they want to explore.

As far as split testing this section goes, maybe you could build out that area more or draw more attention to it. It’s not something I split tested though just because it’s really the least important part of the page.

Extra Notes & Things to Talk About

The examples above are all just for that specific and simple landing page. While most simple landing pages have very common elements (big button, image, content area, header), there may me more or less things to test on your page. This post was meant to get the creative juices flowing in your brain and maybe help you realize that split testing goes beyond just changing a few colors around. Here are some other things that you may want to split test on your own pages :

• The background. In our example we wanted to blend with the offer, so there wasn’t much we could do with the background. In many other instances, the background is something that can and should be manipulated. Try different flat colors, gradients, patterns, and dynamic images to see which color theme converts best.
• The domain and logo. This is something that may make a difference to your visitors. A site may perform better with a .org domain instead of .com, because the certain audience you’re targeting may be expecting something really credible, like an organization.
• Page arrangement. Should the content be on the left side and button be on the right side? Or should the content be on the left side and button on the right side? All things to think about and test.
• Complexity. This is something we briefly talked about earlier. Build your page exactly how you want it and save it. Then, at the bottom add in a horizontal divider and underneath that add more content. Pop in a graph, another image, and another content paragraph. Your visitors may want more to read on your landing page before moving on. On the flipside, sometimes brutal simplicity is what works. Test it.

Again, a lot of these things are obvious and this is not the end-all guide for split testing. But, you may find that taking a little bit of a deeper look into your own pages can yield some surprising results. We may test out all 9 elements on the Zoosk page and find out one thing that made a big difference in CTR was the Photo Text (#8). The photo button, photo frame, heading text, and content box may make no difference. But it was worth testing everything out to find that one small element made a big difference. I’m not talking out of my ass here either, you’d be surprised at how much just wording a line of text here or there can make a difference. A 1% increase in CTR over hundreds of thousands of impressions can make a big difference in your long-term profit.

The next article in this mini-series will focus on The How. We know a bunch of things to split test, but how do we best do it?

Popularity: 2% [?]

A lot of you probably know Unique Blog Designs, they’ve designed the themes for me, John Chow, Shoemoney, Zac Johnson, and the likes.

They’ve been working for months and have finally launched their Affiliate Theme. There’s honestly not even that much I have to say, go to the site and check it out yourself. Aside from the awesome looking design of their sales page/site/whatever, the theme itself looks awesome.

I actually was in on producing this theme in the beginning, I told them what to include and gave ideas on what should be done. So this wasn’t developed purely by designers, she’s got some affiliate blood in her too.

The best thing about it is the customization and ease of customization. You’re paying $100-200 and getting unlimited landing pages for it. With a click of your mouse you can change the background, the layout of the page, the images, the buttons, the affiliate links, everything. It’s all so simple to use. Check out the test drive page and see for yourself what they can do with a basic WordPress theme, pretty wild.

I’m not going to sit here and try to sell you on at least picking this up to have when you want to try a new niche or build a page of your own. Just go to the site and see it for yourself. I’d say it’s hands down worth it if you can front the $197 for the highest package, you get unlimited use, header graphics designed by them (huge perk), and a bigger affiliate commission.

Peace and love.

Popularity: 6% [?]

Probably the most common question I get through emails and IMs all regard landing pages. People ask if they should direct link, use a landing page, what their landing page should look like, things they should use, how to get a good landing page quality score, etc. Hopefully I’ll get some good information across about building landing pages here and just make a good conversation about it. So let’s start off with the question:

Do I direct link an offer, or use a landing page?

Couple points about this question :

1) I DO know people making decent money from just direct linking. This saves you a lot of time as it’s easy as hell to get an offer running.

2) I personally have never had that much luck with it. I’ve had a couple offers that did well here and there for a couple weeks, and then tanked out. My recommendation is to use a landing page. That’s not the only way to do it, but it’s the way I do it.

Now that we have that aside, we know that we’re going to be building a landing page of some sort. The next big big point I want to make about landing pages is :

Landing pages are all DIFFERENT for unique offers/industries.

I know you’re bored to death from people (like me) saying, “Well it really all depends on a bunch of factors.” Well in this case it’s true. Different offers target different audiences, and you have to be aware of your biggest audience and try to target them. For example chances are somebody searching for ringtones is a 17 year old punk kid looking for a ringtone of his favorite band. Somebody searching for dental insurance is going to be a COMPLETELY different person. Flashing glitter and retarded looking crap will work great for your ringtone seeker, but you never really see pink flashing glitter text saying “Get Your Dental Insurance Now!”, now do you? So while it’s going to be tough to write an “end all” landing page article, I’ll try to give as much advice as I can.

Communicate with your user.

These are people clicking on your ads you know, and they clicked them to search for something. You’re supposed to be the solution to that something. By just pasting a button in the center of the page flashing “Click here to continue!”, you’re not really giving them any valuable solution. In certain industries this may work, but not all my friends. In some cases, by adding more content to your page you can actually increase both CTR and conversion rates, as you’ll have convinced the person that the offer you’re going to send them to will be the solution to their “something”.

The entire universe isn’t on Web 2.0 yet.

A lot of people tend to believe that more flashy “Web 2.0″ graphics with gradients and shadows and reflections will lead to a much better looking page, therefore higher CTR and conversion. I have made some of the UGLIEST looking pages alive, and they’ve had really good CTR. I tested dental insurance like two or three months ago and I remember I made this terrible looking page. The graphics weren’t smooth, all the images weren’t aligned properly – but the CTR was around 80%. Why? Because I communicated with my user. I told them a little about saving on dental insurance, and then told them how easy it was to search and sign up for a new dental plan. My graphics weren’t amazing and web 2.0 style, but they got what they were looking for. Again this somewhat depends on the industry. Someone looking for dental insurance is probably a middle aged person who looks at their computer once a day to check their emails on AOL and maybe Google about how to get rid of cold sores. They’re not web developers or the next generation of internet whiz kids. So when they search for dental insurance, all they want is a reliable, affordable plan.

Mix the offer’s brand into your page.

I’ve noticed higher conversion rates when I do this. Instead of saying “Welcome to MyDentalCare.com, here you will find a bunch of insurance offers”, and then sending them to DentalPlans.com, say “Welcome to MyDentalCare.com, we’ll show you the top insurance plans from DentalPlans.com, and you can pick out the best matching plan.” I’ll say it again – it may depend on the offer. But I’ve noticed on my own pages, if I mention the offer I’m going to be sending them too, they’ll be more prepared for the page change after they click through.

Landing page quality score.

Now this area of my post will be more of a contradicting one – in the way that I’m going to be contradicting myself a little. A very long time ago around the birth of this blog, I posted How I Do Quality Score. Those tips are true and will help Google see your page as a more relevant one. But do you really need to have all that? Good question.

I think in the future, you will need to have all of those things in line – so it’s certainly not a bad decision to implement all those steps. But in my experience with more recent tests, as long as you demonstrate that you ad is in excellent standing (good relevancy, good CTR), your pages won’t really get slapped. My last two offers that I’ve run have had pretty basic pages. I’ve had some articles written on them and linked to other articles deeper in the page, but for the most part I haven’t changed them at all in a couple months. They haven’t been slapped at all yet, my minimum bids are still around $0.02 and they’re running great. Why is this? I couldn’t tell you, but I’m just sharing my experience in hopes that maybe you’ll benefit from it.

Your visitors want trust.

Linking to another old post of mine, about a month back I posted Landing Page Tips for Increased Visitor Trust. I won’t write much more about it here, because I cover most of it in that article. The more your users trust your page/offer, the more likely they are to take action in completing whatever form you want them to complete.

Review pages are good.

Here’s a tip…why do you think there’s so many review-style landing pages out there? Umm…because they work! Coupled with the right offer, review style landing pages can work great. They come off to the user as pretty much being a bridge page to help them find the solution to their “something”. It cuts out all confusion when the page changes, as you’ll be sending them right to the offer that they want. Here’s a couple tips for making review style landing pages :

1) Test out how many reviews/offers you have up. I had a review page I tested 5 offers on and it was profiting pretty well. I switched it down to just two offers and my CTR SHOT up and I was making around 25% more profit. But I’ve had other offers where 4 reviews work better.

2) Don’t rate them all 5 stars. Put your best converting offers at the top and make them 5 stars, but the bottom of the review list should only be 3 stars at most. This will make the user feel like these are all more honest reviews and also make them more likely to pick the highest rated offer (which you can put as your best offer with highest payout, etc).

3) Highlight the main points of the offer, and then write a personal review under it. So you’re going to want to point out that it takes 2 minutes, is free, and only requires payment for shipping – something like that. Then you’ll have “our review” or something and write a little bit about why users rated this site being the best for “something”.

Iframing the offer can work.

Now I’m not talking about just iframing the offer on the main page – that’s ALWAYS worked terrible for me. I don’t know why, but that’s just the way it’s been with me. But you can iframe after the person clicks through. Once again this will work for some offers and will suck for others. I’ll use ringtones as an example, because it works for it. You’d have your carrier page, and then if the person clicks on Verizon, you send them to www.YourRingtones.com/go/verizon or something like that. By doing this, you have a bit more control. When it comes to ringtones, it doesn’t really matter if the user thinks they’re getting them from your site. You control the page title now so you can have “Download Verizon Ringtones – Step 1″, and then maybe a header that says the same. Now on a review style page, this wouldn’t really work.

Install heatmaps.

If you see where your users are looking/clicking most, you can make changes that will improve CTR quite a bit. If there’s a hot-spot and all that’s there is blank text, work the page so you have your “continue” button there and watch more clicks come in. I recommend CrazyEgg.

Test, test, test, test, test.

When it comes to landing pages, test everything. Over and over again. Colors, number of reviews, header text, content, images, placement, offers, everything. You can inch by inch keep increasing your CTR more and more, which in the long run will make you a lot more money. Unless you’re completely happy and want to just move to the Bahamas, keep testing that sucker.

Well that’s all I can really think of for now. Perhaps in the future I’ll reveal some of my old landing pages, and reveal that dental insurance once since I don’t use it anymore. Hopefully this is what you guys were looking for, it’s hard to write an article about something extremely dynamic.

Popularity: 12% [?]