Date Published: January 1st 2012
Author name: Robert Kozik
Contact: Email
Thank you so much for buying this site template. If you have any
questions about thing not covered in this help file please feel free to contact me.
Getting Started - top
Thank you so much for buying this template, but before we get started I need
to go over a couple things with you. Honestly, one of the biggest ways
to blow a ton of money and sink a project is by buying the wrong type of
hosting. I get it, there is sort of a grey area when it comes to hosting.
Unless you're building a web app or running a high-traffic e-commerce store
there is almost no reason why shared hosting wont do the job.
If a company ever offers multiple options for shared hosting they're just
looking to squeeze a few extra dollars out of you each month. You'll never
even come close to using up all the disk space and bandwith allotted to your
account, ever. Some companies offering shared hosting will tell you 300GB of
bandwidth a month is for the beginners, yet a 44kb picture viewed 95,000 times only
uses 4GB of bandwidth. They're justing showing you those large numbers because
big numbers look better than the small numbers that reflect actual usage.
I don't know about you, but I don't trust a company that implies getting
7,125,000 visits a month is a cake walk. Thats why I like companies like Just Host;
because they don't waste your time with numbers that don't mean anything. Instead of playing
some silly marketing game they invest their money into their infrastructure. Their
shared hosting is fastest shared hosting I've ever used.
They also offer their customers $250 in free Ad Vouchers, and let me tell you something,
learning on the house's dime is the way to go. Because like learning anything new you're going
to make mistakes, but with advertising you're talking money out of your pocket. But hey, if you
play it right you're talking up to 1,500 high targeted visitors for free! Thats money in your
pocket.
Let's review.
- You're not blowing money on something you can't fully utilize.
- You can learn about advertising with the house's money.
- It's very inexpensive, just a few bucks a month.
Save yourself some money, get shared hosting. It's best to evaluate your website's growth as you go.
Because if you start off with dedicated hosting I can garauntee that you'll wind up sinking $70/month right
down the hole. Website growth is a gradual process, so don't blow your startup funds on something you can't
actually take advantage of for months. For a limited time use this code:
JHSL20 and save 20%.
Color Choice - top
It's important to chose a color that your demographic generally finds pleasing. You might really like
the pink version of the site template, but if your site is for hardcore gamers... Just sayin'. Rather than chosing the color
you love chose a color that is associate with your niche. For instance, business, finance, organic, and environmentalist niches
are all associated with the color green. If you're interested in split test you probably already know where to start, so have at it.
HTML Structure - top
-
- header
-
- companyDetails
- companyName
- headerDivider
- contactList
-
- outerBorder
-
- innerBorder
- mainContent
-
- pieIE7Fix
- clearer
- subscribeForm
- socialWrapper
- clearer
-
- shadow
CSS Structure - top
- header
-
- companyDetails
- companyName
- headerDivider
- contactList
- outerBorder
-
- innerBorder
-
- subscribeForm
-
- socialWrapper
- socialWrapper.iconPadding
- socialWrapper.endPiece
- shadow
Main Content - top
This section is what will make or break your landing page. This isn't where you post your lame, poorly written
excuse about why your website is down. No, you've got to use this limited real estate to create excitement in your
visitors, and then capture it either using social media profiles or by collecting their emails. I've created a couple of tools
to help you out, so lets get in there and get this done properly.
Bring it.
This is where you need to bring it. With just 280 characters you've got to not only excite
visitors about your website, but you also need to convince them that they need to act now. What the easiest
way to do that? Give them something for free on the condition that they complete a desired action. For example,
marketing websites like to give away free e-books that contain marketing secrets.
Creating an e-book is also the easiest, cheapest thing you can give away. I know the words 'writting' and 'book' in
the same senetence is pretty scary stuff, so don't think about an e-book as a book. It's more of a catch-all, like getting arrested
for disorderly conduct because you were explaining to a police office, quite forcefully, that it was bullshit that they didn't hand
out baseball cards anymore. Annoying a police officer isn't a crime because it's too general, so instead they came up with 'disorderly conduct'. Which
gives a police officer the descretion to deem some event so distracting that they're incapable of doing their job. Just like how this documentation
could be described as an e-book. Because at my descretion, as the author, I went above and beyond what was expected of me.
An e-book could be as simple as a blog post or a complex as a story. I recommend you stick with the former. Because the last thing you
should do before launching your website is getting bogged down by after thoughts. What should your e-book be about? Answering the most
basic question(s) people have about your niche. For instance, when people see the word 'marketing' what phrase pops in to their head? Selling things. Thats
why marketing e-book are always about sales secrets.
I'm not italicizing 'secrets' because I'm implying something sarcastically. No, I am italicizing
'secrets' because it's a trigger; a word or phrase that when read generates an almost animal form of excitement.
Let's say you're a photographer, and you are using this template as a place holder for your portfolio site. Your e-book would
go something a little like this:
- Title: "How to capture the perfect photo."
- Content: The basics of properly taking a picture.
Call to Action
Whether you're using this template as a placeholder or not the title you choose is critical. Your title is your hook, so before you brainstorm ideas for a pitch
remember this is the thought you need to expand upon. Otherwise the read will feel very disconnected. For the best results I recommend your title doesn't exceed
30 characters. To calculate how many characters your title is you can use the tool in the 'Sell it.' section.
Sell it.
So you've written your e-book, your blog post, right? Because now you've got to sell it in just 280 characters or less. For optimal results
I suggest your pitch is around 225 characters. That way your landing page wont look akwardly spaced out.
If you don't got the time to write an e-book, and you can't come up with something free to give your users in exchange for an action note that your
conversion rates will be lower. Why's that? It's just how the game goes. People are more willing to do something if they get something they see as a premium
for no effort.
HTML Output
Stylize.
The colorization of the first sentence isn't just for looks; it's a visual cue. Since most people skim websites it's important to clearly
identify the main points of your argument. When someone skims your under construction landing page this what they will see: your company's title,
your call to action, the first sentence of your pitch, and then either the social media icons or the subscribe button depending on which template you chose.
Therefor it's wise to wrap <span class="firstSentence"></span>
around the first sentence of your pitch like so:
<p><span class="firstSentence">But not for long; our website is
undergoing a website redesign.</span> Our designers and developers
are working hard to provide you with the best experience possible! If
you'd like we can email you when everything is finished. Just enter
your email address below and click 'subscribe'.</p>
Pie Graph - top
The pie graph is incredibly easy to use. To set the percentage all you've got to do
is change the class to slice_numbericPercent
that you want to represent.
For instance, this is how you display 60%:
<div id="pieGraph" class="slice_60"></div>
3 ways graphs can increase conversion rates
Just as I promised in the sales page her are three incredibly simple ways
you can use graphs and charts to your advantage while maximizing conversion rates.
1. Incite a Panic
Marketing websites are nutorious for implementing this method, and it works brilliantly for them. Since making
rash decisions more than not can be linked back to greed using a chart to incite a riot can be very effective depending
on your niche. If you niche has to do with finance, marketing, business, etc. this is the most effective way to go.
Here's what you need to do: Write a hook making it seem as if someone is getting a hell of a deal, create an
extravogant pitch emphasizing time is of the essence, and seal the deal with a chart saying the website is 90% complete.
The idea that someone a deal is so limited and could be gone any second will drive a person mad. If someone succombs
to greed they're a conversion for sure.
2. Show off
Every company loves to show much better they are than the other guy. Whats a better way of doing than creating a
completely meaningless graph based loosely on facts? What do these graphs mean,
what are the numbers based off of? Who knows, but they sure as hell are effective, aren't they? Green triangle 2.4x... damn that's good. My last computer
was only blue semi-circle 0.75x.
3. Skew Data
I know, this is a shady thing to do, but every company who uses charts as a form of marketing
does it. This is perfect for the psuedo-intellectual niches like hardcore gaming. There is absolutely nothing
more effective in the nerdy niches than a niche looking graph. Next time you're at your local big box electronics store head to
the computer accessory section and look at the boxes.
Sorry gamers, nerds, my brethren, but lets be honest, nothing gets us going like a sexy chart in an overly self-indulgent
article.
Progress Bar - top
It's important to make sure that your progress bar matches what you're
displaying with the graph, so lets continue using the metrics from the example
above. We've set the pie graph to 60%, so we set the progress bar to what?
<div class="progressBar">
<p>60% of the layout is finished</p>
</div>
Yep, thats right, 60% as well.
Email Subscription Form - top
If you're using AWeber set is a breeze. You only need to make two basic modifications!
First things first, to store all the emails you're going to collect you need to create a
new list. Don't know how to do that? Well, AWeber has a step by step guide to that shows
you how it's done. Once you've got all of that taken care of all you need to do is change the value of name="redirect"
to the name of your list. For example:
<div><input type="hidden" name="listname" value="[greatest list ever]" /></div>
After someone subscribes to your newsletter you'll need to send them somewhere. Unfortunately, this
version of the site-template doesn't have a thank-you page built-in, so you're either going to have to get
your hands dirty or simply redirect them to your understruction page. I suggest you do the later until I release
version 1.5b which will include a thank-you template. To redirect them simply change the value of name="redirect"
to the url of your thank-you page or under construction template.
<div><input type="hidden" name="redirect" value="http://www.yourwebsite.com" /></div>
And just like that you're done! Now all you've got to do is promote your landing page.
jQuery / Javascript - top
To be frank, there is nothing that you need to edit in Javascript file, but if you're
just curious how it works I'll be happy to explain that. If you don't know a lot about JavaScript
you don't have to look at this part of the documentation.
$(document).ready(function(){
$('#email').focus(function() {
if($(this).val() == 'Enter your email address') {
$(this).val('');
}
});
When you click input#email
, and if the value it's input form is equal to 'Enter your email address' the
value of input#email
will be set to null. In other words, when you click the email input form the message displayed in it
goes away.
$('#email').blur(function() {
if($(this).val() == '') {
$(this).val('Enter your email address');
}
});
});
If you don't input anything into input#email and click anywhere else the value of the input#email
form will be set back to
'Enter your email address'. However, if you type anything in the input box and you click anywhere else the value wont be lost
when you click outside of input#email
.
So if you want to add more input boxes for whatever reason you'll need to duplicate the original code and change the id
values
to the id
of the new input boxes. Psst, if you do this I highly suggest you minify your code for optimal performance.
Support - top
If you have any questions about anything that wasn't covered here, suggestions for future
product updates, or you're just stuck and need help setting up your template I'll be happy
to respond to your questions in the order that I recieve them.
Here's my personal email:KozikWebDesign@gmail.com
Credits - top
The social media icons were created by: Komodo Media
Thanks for buying this template!
I personally wish you the best of luck with your not only your recent purchase, but also the project you'll be launching
in the not so distance future. The marketing tips I've written about in this documentation are based on my own personal experiences
with testing landing pages. Most web designers are just that, web designers. I hope my knowledge of marketing came through in this documentation,
and that you'll be able to build off what I taught you.
Hope your future project works out for you,
Robert