How To Create Advanced PPV or CPV Landingpages – Part 1

by imrat on August 26, 2010

Do you want to learn step by step how to build your own advanced landing pages?

As part of my soon to be released post on the excellent blog of ppv playbook on Jquery and PPV landing pages, I decided to re-publish my step by step process for building advanced landing pages. As I am getting going with PPV, its focussed on the 750 px by 550 px form best suited to most PPV networks.

Update 2 October 2010:
For a much more detailed explanation of PPV popup sizes, check out this excellent post from Josh Todd about PPV Landing Page Dimensions.

I’ve been messing around with coding Landingpages for a while to get to a generic template that I can reuse time and time again. One that will stand the test of time!

I also develop advanced landing pages on spec. If your skill is starting and testing new campaigns, I can take care of building or improving your LPs, splittesting, and boosting your CTR, Conversions and ROI.

Here’s the deal

Here is the step by step process I use to build and code an advanced landing page. I am sharing the actual code and steps so if you want you can follow along.

What I would like from you in return is…

…your feedback
…tips on the Ad text and creatives
…suggestion on how to get people to take action
etc etc.

Content

LESSON 1:

1. tools 
2. ingredients 
3. the concept 
4. page structure & layout 
5. design 

LESSON 2:

6. graphics
7. effects & animation
8. audio
9. browser testing
10. launch

1. Tools of the LP trade

Requirement: Free, multi platform and usable for the average web developer.

I am on a Mac, but Linux or Windows work just as well.

Web server:
Not required. My objective is to do all of this in html which can be run in your browser and does not need php, apache, etc.

Coding:
Aptana Studio 2 offers more then you need, and provides support, help and code completion for all major components of the Landing Page Code.

Graphics:
I use the simple online tool Pixlr (www.pixlr.com) to do most of my graphical editing – it offers all you need for this landing page. If you need offline editing try the Gimp

Images:
I get mine from google and bing.

Audio recording and editing:
Aviary has a great simple to use and free online audio recorder and editor. You can even do some fancy multi track stuff if you want to be really creative!

Reference materials:
Aptana includes all the reference manuals and code assistance that you need.

2. Ingredients

So what essential components does the LP need to include?

  • Prequalification
  • Big clearly visible headline
  • Subhead
  • Attention grabbing image
  • Sales paragraph
  • Bullets with benefits
  • Testimonial
  • Scarcity/urgency (countdown timer maybe?)
  • Social proof (#facebook fans?)
  • Authority / credibility logo’s
  • Call to action button
  • Disclaimer?

Design requirements

  • Eyeflow from headline via benefit bullets to call to action button
  • Grab attention (audio, animation, colour)
  • Consistency with Offer landing page
  • Fit most PPV sources so 750px by 550px with call to action at vertical 350px
  • Compatible with main browsers
  • Quick load time
  • Two LP designs for split testing > 1) fancy pants design and a 2) ugly shocking design

This stage 3 things to do:

a) select an offer
b) research audience
c) concept design

To select the offer I went into EWA and looked at their emerging offers and selected one from the top 5.

Using Quantcast, Alexa, Google Ad Planner, and Compete I researched the demographic:

  • Female
  • 25-54
  • African American
  • Has young kids
  • Income 30k+
  • Some College
  • English speaking

Here is the rough concept. I know – No fancy pants tools, just paper, pencil and my Sharpies 

Because ugly LPs work very well – I decided to do 2 versions.

Fancy Pants Version

Ugly Duck Version

Colour is also key. I use Kuler from Adobe to get the primary colours from the landing page image. Just take a screenshot of the offer LP, and upload to:http://kuler.adobe.com/#create/fromanimage

Finally – key features, messages, benefits from the offer landing page

  • 10 Year Anniversary Sale
  • Top 10 products Free & 80% off on others
  • 42 free business card designs
  • upload your own design and photo free
  • Free rubber stamp
  • 3 day rush delivery
  • lowest price guarentee
  • guarantee: full refund if not happy within 30 day
  • urgency: Hurry, this offer ends 8/9/2010!

4. Page Structure & Layout

Ok. This is where I start to use html and css to set out the framework design for the landing page. Basically, what I have done, is divide the page up in logical squares.

Later on I will format these squares and put relevant content and images in each.
Ignore the colours and borders, these are there just so you can see the page structure.

I am not going to explain here the ins and outs of html and css. There are plenty of online resources for this. Here is a good introduction.

Here are the screenshots of the page for each concept. Click on the image to load the actual html in your browser. Right click to save, or View source to look at the html code.

Fancy pants

Ugly duck

5. Design

I am sure you will celebrate with me the fact that I am a CRAP designer. Hopefully when I add the graphics in in the next step, it will all look better. Maybe I did not need to create the Ugly Duck version, because the Fancy Pants one is ugly enough!!

ps. Watch out for dodgy copywriting as well 

The first thing I did was add to the html page, at the bottom, the color pallet from kuler (see step 3), and a screenshot of the offer landing page (now removed). I do this so that I can easily see in one screen what I am aiming for.

Consistency is important when your users moved from your landing page to the offer landing page. Thats why I use the same colours, key messages, and screenshot as examples.

You might also want to change a configuration setting in Aptana Studio to get the html code and wysiwyg version side by side. To do this go to the Aptana Settings/Preferences, and change to the following:

With this setting, as soon as you save (control-S on windows, or Cmd-s on a Mac), the wysiwyg version updates.

To make it easier for you to see the changes to the html file css, I have added in the design code separate to the layout code. Just look for the /* design */ line in the styles/css section.

Here they are again – just click on the links to open the html file in your browser. View source to see the coding.

Fancy pants

Ugly duck

Thats all for part 1.

What did you think? If you have any questions, or suggestions, give me a shout below!

Tagged as: cpv landing pages, landing page design, ppv landing pages, training, web design

  • http://pulse.yahoo.com/_GFN5MDLB6HYSEOUS2WXVY3LMJU Bob Micheal

    Nice blog so far mate, you've just acquired a new subscriber :) Useful shit, great series! Looking forward for part 2

  • http://imrat.com imrat

    @Bob Thanks for subscribing. If your interested in something whilst I work on part 2, check out my guestpost on the ppv playbook blog.

    @Bagiis – let me know once you have tried the steps whether this works for you or if something is unclear. Any tips for improving this mini course would also be welcome.

  • Bagiis

    Hope it'll work! I try to catch up all PPV things. Keep good job!

  • David

    Great job!

  • Pingback: TrafficVance Users – Browser And OS Versions | Internet Marketing Rat

  • Semanticlayout

    Thanks for a such good post, here I try some PPV design, please check it out and let me know your feedback, link : http://www.semanticlayout.com/

  • http://imrat.com imrat

    Glad you liked it. Had a look at your site and looking at the example template you put up, I think they have too much text for PPV. A user will have to be able to read, decide and click all within about 4 to 6 seconds. Therefore my advice – keep it short and sweet.

  • Alexandra

    This is fantastic! Thanks for this because I’ve been trying to figure out how to make my landers better…

    With trafficvance the window is 800 X 600 (i think)… is that large enough to accommodate this format?

    Best wishes,
    Alexandra

  • http://imrat.com imrat

    Thanks Alexandra for the positive comment. I havent had time yet to do part 2, but I’ll try and fit it in over the next couple of weeks. Yes it will fit for TV, but I have started reducing the height of some of my landers due to the number of toolbars many people have installed. So on average I run my landers on 700 x 400 now.

  • Scott

    IMRat, I really appreciate the information you have posted here about CPV. I have been doing intensive research into CPV and just came across your site here. I need help in understanding the LPage size and uses.
    1) Are most ad platforms LPage sizes allowed 750p x 550p?
    2) Traffic Vance allows 800p x 600p?
    3) If a ad platform allows 750p x 550p can I actually use a Lpage UP TO that size like for example use actually 700p x 500p?

    Also can you post a vid of you creating a LPage demonstrating how to precisely size a Lpage?

    Kind Regards,
    Scott

  • http://imrat.com imrat

    Hi Scott
    750×550 is suited for most networks. Note that this is the size of the total browser window and not just the viewable page. Therefore aim for the Call To Action to be down around 400px. A good post on the topic of page size is here: http://insideaffiliate.net/size-matters-ppv-landing-page-dimensions/

  • Scott

    I appreciate the link greatly and I have a better understanding of the browser actual dimensions (750p x 550p) vs the viewing of the LPage dimensions inside the browser window. Thanks for the CTA tip around the 400p mark I see where this is very advantageous…

    I appreciate you,
    Scott

  • Paul

    Hey,

    Thanks for this! Any update with part 2?

  • Pegasus2218

    This is a great post, and I really hope you’ll continue with part 2.

    Quick question: I’m trying to follow along with what you’re doing, and I’m stuck on the part where you say “add to the html page, at the bottom, the color pallet from kuler.” I’ve gone to kuler and created a palette (even created an Adobe ID). But the only format it lets me download it as is .ase – how do I import it into Aptana?

    Again, thanks for this. Great stuff.

  • http://imrat.com imrat

    he pegasus – sorry the post is not very clear actually at that point. What I did was take a screenshot fo the colour bar, saved the file to my landing page folder and used the <img tag to include it at the bottom.

    re: part 2 – i'll see if I can get that done in the next couple of days.

  • http://imrat.com imrat

    havent started writing it but agree Paul that it is long overdue. Should be out in a couple of days.

  • Lorne

    Hey Imrat, some really great tips here for designing landing pages.
    1. Have you tested any ‘geo scripts’ (eg Country, State or City) to see if this increases CTR?
    2. Have you tested animation like a blinking ‘Click Here’ button?
    3. Finally, check out the Web Developer Tool addon for FireFox. It’s pretty useful for resizing the browser window.

    Regards,
    Lorne
    http://seotools4u.com

  • Dan

    Where is the 2nd part of the guide? It’s been 2 months and no where to be seen :(

  • Dan

    This is a great post btw.
    I hope the 2nd part is coming soon!

  • http://imrat.com imrat

    fair point Dan. I have been slacking and focussed too much on other posts, guest posts, and building PPV campaigns. Thanks for pointing this out ;) I’ve got a full week of PPV next week so finishing part 2 will be one of my priorities.
    Is there anything specific that your keen for me to cover in part two?

  • http://imrat.com imrat

    Hi Lorne.
    1. Yes – in many cases it does.
    2. Yes – you might want to check my JQuery post on the ppvplaybook blog.
    3. Agree – Web Developer Tools are great

  • http://twitter.com/masterlesamurai MasterlessSamurai

    Awesome post. Im gonna rip the hell out of my LP now and redesign with some of these suggestions. Oh…a quick way to grab colors from the offer…try the firefox plugin called ColorZilla. Any update on Part 2?

  • http://twitter.com/masterlesamurai MasterlessSamurai

    Awesome post. Im gonna rip the hell out of my LP now and redesign with some of these suggestions. Oh…a quick way to grab colors from the offer…try the firefox plugin called ColorZilla. Any update on Part 2?

  • http://imrat.com imrat

    Would you believe it I am actually working on it ;) I know – a miracle!

  • http://imrat.com imrat

    Yeah about 6 months overdue.

  • http://twitter.com/PandaMarketer Panda Marketer

    What kinds of credibility logos do you use?

  • http://imrat.com imrat

    Anything that is relevant to that specific market, or that are shown or related to the offer landing page. So if the offer shows BBB logo, i replicate that on the landing page. Also, anti spam logos (like a padlock) work well.

  • Weath55535

    do we put the image in the middle or the left side so they can see the ad in the 800 x 600 box

  • Brenda W

    Can landing pages work on there own without and ad campaign to drive the traffic to the LP?

  • Gab

    Good stuff, thank you.

    When will you post part 2?

  • http://imrat.com tijn

    Man I am such a slacker. Done tons of vids and tutorials on STM forum but am not following through on my own blog. Thanks for the reminder!!!! I will do my best ;)

  • http://imrat.com tijn

    Theoretically yes, but it is unlikely to rank in the search engines because these type of landing pages have very little or no valuable content on them. But there are other ways to send traffic to them without paid advertising. Like through Yahoo Answers, Facebook Pages, Forum links, etc. Hope this answers your question.

  • http://imrat.com tijn

    both will work fine as long as the image is not larger then the popup dimensions. 750 x 450 is safe for all PPV networks.

  • http://imrat.com tijn

    thx. so do i. lol

  • Nils

    Excellent Post! So much value you could sell this as a $47 ebook!;)

    Can’t wait for part 2 though.

    Thanks

Previous post:

Next post: