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…
…tips on the Ad text and creatives
…suggestion on how to get people to take action
3. the concept
4. page structure & layout
7. effects & animation
9. browser testing
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.
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.
Aptana Studio 2 offers more then you need, and provides support, help and code completion for all major components of the Landing Page Code.
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!
Aptana includes all the reference manuals and code assistance that you need.
So what essential components does the LP need to include?
- Big clearly visible headline
- Attention grabbing image
- Sales paragraph
- Bullets with benefits
- Scarcity/urgency (countdown timer maybe?)
- Social proof (#facebook fans?)
- Authority / credibility logo’s
- Call to action button
- 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.
- 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.
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.
Thats all for part 1.
What did you think? If you have any questions, or suggestions, give me a shout below!