How To Create Landers Based On Spied Landers Without Ripping - Fast (24)
How To Create Landers Based On Spied Landers Without Ripping - Fast
I've mentioned a few times that I'm not a fan of ripping landers.
But isn't it horribly complicated to recreate an entire lander?
Not really. Here's a quick-fire list of tips on how to recreate most landers very quickly.
Why recreate?
Two main reasons.
Firstly, if you're on the white-hat end of things, copyright is an issue. A lander that looks a lot like another lander but is not copied will not be covered by copyright, giving your rivals no ability to sue you (assuming you're not doing something like using logos for companies you don't own, using celebrity images, or other stuff that's on the "Really Bad Ideas, Do Not Do This" list).
And secondly, it's very easy to hide "defensive" code in a lander, and time-consuming to ferret it all out. A ripped lander could be flashing up "don't buy this" messages, silently redirecting your visitors, or any number of other unfun things. And the time you'll need to go through and check thoroughly that there's no malicious code is probably more time than you'd need to just create something very similar.
(Here's a post I wrote a few days ago about just how sneaky you can get with malicious code in landers. I don't know how much of that code is out there in the wild but I do know I'm not the smartest tech guy in the industry, so draw your own conclusions...)
Added to that, ripping is rarely as straightforward as it looks. By the time you've fixed broken links, modified or replaced Javascript libraries, and generally tidied a ripped lander up, I've often found I'd have been quicker recreating it from scratch.
Layout
Modern landers rarely have a very complicated layout. At most, you'll see a lead generation lander with 2 or 3 columns on the page.
If you use a CSS framework like Milligram or even Bootstrap (on desktop landers - it's too heavy for mobile) you'll be able to recreate these very easily using a grid system - probably the same grid system the original lander uses. For example, here's the basic Bootstrap code for a header - headline - image-and-form - three sales points - footer lead gen lander:
<div class="container-fluid"><div class="navbar-header"></div></div> <div class="container-fluid"> <div class="row"><div class="col-md-12">HEADLINE</div></div> <div class="row"><div class="col-md-6">IMAGE</div><div class="col-md-6">FORM</div></div> <div class="row"><div class="col-md-4">Sales Point 1</div><div class="col-md-4">Sales Point 2</div><div class="col-md-4">Sales Point 3</div></div> <div class="row"><div class="col-md-12">FOOTER</div></div>
Color
This is probably the most important element in making your lander look similar to the industry-leading landers you're spying.
You can check what colors a lander uses by right-clicking on an element, then using "Inspect" in Chrome.
Look at the "Computed" section for either "color" (for text color), "background-color" (for background color) or "border" for border color, which will give you the exact color codes it's using.
Or more simply, just screenshot it, bring it into Photoshop, and use the eyedropper tool to pick out colors.
Do check the color of text and background, even if it looks like it's black or white - very few experienced typographers will use pure black text, for example.
Font
Font and font sizes are the other key design element.
Again, just right-click on the text then use "Inspect" to find out what font a page uses - look for "font-family" - then look it up in Google. Chances are good you'll be able to find a free web font to use that'll duplicate it, if it's not just using a standard system font.
Generally a page will use two fonts - one for header text, one for body text. So do check all header text for different fonts.
Font sizes can be checked the same way - look for "font-size". If you see it's using a relative size, make sure you check the base font size too (usually found in the html element in the css).
Images and Copy
If you've checked all these things, all you need now is to insert your own copy and images.
Again, if you're white-hatting you want to avoid copyright problems: but that's reasonably easy to do. Just rephrase the copy as closely as you can: if you don't use exactly the same words, just the ideas behind them, you're safe. Copyright protects expression, not idea: if you change the expression you're not infringing, even if you're using all the same ideas behind the copy.
For the image, lander images are rarely super-original these days. Start by using Google Image Search or Tineye to figure out if the image on the lander you're using is licensed for reuse by anyone, or is from a stock photography site. If it is, you can just buy it from the stock photo site or use it if it's Creative Commons or equivalent.
If neither of those apply, search for something similar with a permissive license or a stock photo. Look for something as close as possible: small details may matter.
And there you have it - a lander recreated from scratch, which you know is free and clear both legally and code-wise. And it's probably taken less time than fixing broken links and hunting for malicious Javascript would have done!
I hope you found that useful! Questions, comments, suggestions? Reply below and I'll answer as fast as possible!
@caurmen thanks for the interesting post!
this might be a dumb newbie question since ive only just started learning code and making landers...
but dont code inspectors like fire bug have tabs for different sections of the code when you inspect a page...
couldn't you just go through the html and css tabs and copy everything that is in there while avoiding the other tabs which contain code that might contain malicious stuff, and then just fix the broken links...
hope that makes sense!i have only used inspectors a few times up to now so i might be completely wrong.
@vincent9 - you can do that but there's no guarantee at all that the HTML will work afterward - it may well depend on Javascript to render or function properly.
Also, that approach won't protect you from malicious code, which could easily be found in the HTML or the stylesheets.
Hope that clears things up!
What's the fastest way to recreate a lander?
After spying on landers and downloading them, I realized that I need to re-code them
My HTML and CSS skills are ok, but some landers need javascript and now I'm learning the basics of javascript
Aside from learning the code myself (which will take a super long time),
What other alternatives can I take to recreate the lander?
Example: Outsource to someone on fiverr to do it for me?
Wondering if there are any other examples?
What Javascript do you need?
Simple JS is very quick and easy to learn - you can just learn the basic "recipes" and then copy-paste them in changing variables as needed!
Example is when they do the spinning wheel of fortune style - to land on winning the iPhone
I noticed they used javascript for that lander
Because I don't want to waste too much time figuring out how to "master" javascript,
Can I confirm with you what level of coding skills (html, css, javscript, any others?) that I really need - for me to create most landers?
Yeah, most of the times you need to re-code the landers from scratch, even the JS since it's such a mess. If you re-build the lander from scratch you can try to avoid jQuery or use some much lightweight alternatives like zepto.js(9.6k when gzipped). You can also use lightweight bootstrap alternatives like BaseCSS, Skeleton, PureCSS and there are more if you really need the grid system and few other options.
Anyway, we're going to test-run a service that will re-build landing pages optimized as much as possible, from code to image size so you won't struggle and spend time with this stuff. It will be a fixed monthly fee/10 landing pages optimized....if you guys are interested PM me.
@ aloeveraa1491 - To recreate most landers you'll need a moderate level of skill with CSS and HTML. You'll need to understand the basics of the box model, what a div and a span are, and the usual HTML basics - a tags, p tags, header tags, image tags.
JS-wise, it'll very much depend on what you want. For a simple spinning wheel of fortune that you click on, I'd probably just use a gif and a link tag! (Or an ontouch event then some simple hide-show Javascript.) But the Codeacademy Javascript tutorial should get you a fair way there, and Google will get you most of the rest of the way if you're good at Googling.
And remember you can always ask on STM if you're stuck!
@ caurmen
hey caurmen, could you do some more threads on javascript and laders, such has how to deal with it in a ripped lander, or how to implement simple scripts into the basic landers you show how to build from scratch.
thanks!
@vincent9 - I'll put that on the list!
I've already written a number of articles on those topics - you might find this series useful:
http://stmforum.com/forum/showthread...ing-Parameters
http://stmforum.com/forum/showthread...Make-Decisions
http://stmforum.com/forum/showthread...-Input-Or-Time
as well as the various posts in
http://stmforum.com/forum/forumdispl...and-otherwise)
Hey Caurmen thanks for this it's great! A couple questions, why should we be finding new images instead of downloading the image we ripped and re-uploading it on our server? Also this just mentions the styling, should we copy any HTML CSS or JS files?
I'd avoid copying Javascript, CSS or HTML from ripped landers if you're taking this route. Particularly Javascript just reintroduces the concerns around ripped landers with malicious code - unless you've personally audited the JS and know it's OK. Once you've copied the layout, fonts, colors, and copy, you've copied everything in the CSS and HTML anyway!
Obviously if the lander relies heavily on JS you'll need to either recreate that or find existing code that does the same thing.
New images are optional depending on your sensitivity around copyright issues and whether the images on the original lander were already clear for copyright reasons, as mentioned above. If it's in the clear copyright-wise, no real reason not to reuse the images from the lander you found, although I'd also recommend split-testing new ones at some point.
I have been reading all your guides and tuts on STM and mostly about landers. I'm not a fan of ripping, had Aplexity till some days ago, yet to renew because apart from getting an idea of what's out there, it hasn't been of any use to me for now, I feel like it was a wasted use of start up funds because up till this moment, I'm yet to launch my first campaign, I had followed the instructions of tools needed, coughed up more than $300 but I have just staired at
Anyway, I wanted to say thank you for all this information you have shared over the years and I'm so glad other members have bee able to put them to use. As for all newbies, those whose experience is only with wordpress, all this information seems overwhelming and like you and @Zeno have stressed in so many threads that starting out could be daunting but the entry barrier in not huge with the guides provided. I'll like to say the barrier is as huge as the tallest mountain, sometimes it's a big brain drain.
Though, I'm not going to give up, I'm putting the right mentality into this, have learnt a lot but not been able to implement those ideas I've gotten makes me feel like an idiot. I'm looking for an html, css and javascript training around me, using what I can find on the web so far gradually to build more knowledge and start AM in full force.
But, I have one request, can you do a walkthrough for recreating an LP from the start, very basic in writing, you don't have to go the extra mile with images or videos. Regardless, I know every newbie in the future will appreciate this. Regards.
That's a good idea - I will add it to my to-create list for tutorials!
Yeah, it's a big climb to reach the summit of Affiliate Mountain, for sure. Keep learning, keep reading, keep taking notes and building on what you've learned already. You'll get there!
I was thinking about writing a guide to learning AM, actually - not any specific info about AM, more best practises for learning such a massive topic. How to learn, how to remember, how not to make the same mistakes twice, how to break down massive topics into understandable bites, etc.
Would that be useful?
Originally Posted by caurmen
Regardless, I think there are some of those information that will be pertinent to the individual themselves like how to remember and how not to make the same mistake twice; though, it will be of additional value to STM. Don't forget thay the industry involves over time, what changes we have today might not be what changes tomorrow, but tips on how to remember details will be onstant and dependent on the person's learning capacity.
Some of us learn from one mistake, others from more, also some of us have very distinctive memory, others don't. It comes down to how badly an imdividual wants it, for remembering stuff, regardless of the fact that all the information on STM can be overwhelming, a lot of people should by now use the free sticky notes program on PC to help with keeping important details close.
I as an individual and like most newbies struggle with the technicalities of AM, the very basic ones like Server Management and Landing Pages, though most relate to those changes that had happened over the years. I just heard about CDN, still trying to figure out how to set it up with S3 or VPS, using your guides.
In the meantime whilst I work on that, I'll recommend my favourite resource for learning, then.
That's the MOOC (Massively Open Online Course) "Learning How To Learn".
It's created by two neuroscientists who are leading experts in how the brain works with regards to learning, and it's nothing short of an unfair advantage if you've taken it.
https://www.coursera.org/learn/learning-how-to-learn
helpful
Originally Posted by caurmen
Every other lessons learnt on STM have stuck, the fear not bee able to get it right, be better at it at the first trial is holding me back, since I read on the forum that LP's are a must, I was running smaller camps with LPs created with instabuilder, but that method has been dismissed time and time over on STM with reason that tbey're code heavy.
So, I'm in paused mode for camps, until I get the whole LP aspect of AM covered, which includes hosting on S3 and Cloudfront. I use the VPS and ftp upload and php redirect, but with S3 and Cloudfront which javascript knowledge is needed rather than php. Hence the request for a written step by step walkthrough.
Going through Codecademy course now to help surpass that code fear. You've been most helpful, fyi, the landing page in 10 minutes using visual code studio video link ain't loading.
@shynepapin it looks to me that you've rushed on purchasing services and tools needed to have camps running.
Since you're struggling with getting yourself started and in case you are convinced that this first roadblock won't make you fail on AM do yourself a favor. Stop spending on tools if you're not ready to start. And, if your budget allows it, I'd highly recommend you reserve a seat on Zeno's course. It might not be the answer you were asking for, but like you, I didn't have a clue on HTML, CSS, JavaScripts, tracking links, redirects, back button or whatever it is you don't feel comfortable with.
With or without it you are going to spend those money, so it's better spending them under the supervision of a team of experts 
Originally Posted by platinum
Since you're struggling with getting yourself started and in case you are convinced that this first roadblock won't make you fail on AM do yourself a favor. Stop spending on tools if you're not ready to start. And, if your budget allows it, I'd highly recommend you reserve a seat on Zeno's course. It might not be the answer you were asking for, but like you, I didn't have a clue on HTML, CSS, JavaScripts, tracking links, redirects, back button or whatever it is you don't feel comfortable with.
With or without it you are going to spend those money, so it's better spending them under the supervision of a team of experts
All I was saying is since I joined STM and decided to follow the newbie guide, I put money in the recommended tool on those thread and never had to use it since I couldn't set up an LP as it's recommended, usi g hyml, css and javascript which I have very little knowledge of. In the past I was using tools like instabuilder to build LPs, I still have it by the way, but I am just commited to what is recommended on Stm, also the guides and tips. So cut this short, I'm strictly adhered to stm marketing principles, advice, recommendations and guides.
@shynepapin - sorry that "lander in 10 min" link isn't working! I thought I'd fixed that a while ago - what browser / OS / machine are you viewing on?
Originally Posted by caurmen
Thanks! We're looking into it, and will hopefully have a fix soonish.
Originally Posted by caurmen
Please confirm if I'm right and is this the process you do it using Visual Studio.
Home > Design - Imagery, Banners & Landers > Landing Pages