Under Construction Template

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.

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.

Header - top

If you look at the HTML strucuture you'll notice that the header contains: your company or website's name, a divider, and a list of contact information. Now, you don't have to worry about the divider, so we wont be covering that.

#companyDetails

This a wrapper, think of it as a rubber band over some rolled up pieces of paper. The wrapper simply holds in place everything it contains, but like a rubber band, it will break if you add too much content. If your company name + divider + contain list > 650px it will break. I'll break that down into human speak below.

#companyName

In between the <h1> and </h1> place the name of your company, websitem project codename, etc. Just like this:

                
                    <div id="companyName">

                    <h1>Kozik Web Design</h1>

                    </div>
                
              

It's pretty easy, huh?

#contactList

I know, changing out the phone number is pretty basic stuff, but that doesn't mean I wont show you how to do it.

                
                    <div id="contactList">

                    <ul>
                    <li>Phone: 1-234-567-7890</li>
                
              

Changing the email address is just about as painless. Although you must remember that you've got to change the value of the <a href="">. For example:

                
                    <li>Email: <a href="mailto:change@this.com" title="Email Me">also@changeThis.com</a></li>
                
              

Once you're done putting in that information you're done with the header section! Lets move on to something a bit tougher.

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.

                    
                        <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