Template Documentation

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
        • pieWrapper
          • progressBar
          • pieGraph
      • clearer
      • subscribeForm
      • socialWrapper
      • clearer
  • shadow

CSS Structure - top

  • header
  • companyDetails
    • companyName
    • headerDivider
    • contactList
  • outerBorder
  • innerBorder
    • pieIE7Fix
      • pieWrapper
        • pieGraph
        • progressBar
  • subscribeForm
    • input#email
    • input.btn
  • 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