Website Design

Introduction

For many people, developing a web page is the most difficult task to accomplish. Creating a web page should not be something that people fear, and in fact can be quite easy for someone with no prior web development skills to learn.

Before we get into the “goods”, we need to all understand one thing. We need to understand what a web page is and how a web page is shown on the Internet. This may seem elementary for some of you, and if this is the case, please skip the following paragraphs.

A web page or web page is a resource of information that is suitable for the World Wide Web and can be accessed through a web browser. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links.
Web pages may be retrieved from a local computer or from a remote web server. The web server may restrict access only to a private network, e.g. a corporate intranet, or it may publish pages on the World Wide Web. Web pages are requested and served from web servers using Hypertext Transfer Protocol (HTTP). Source: Wikipedia

A website is a collaboration of one or more web pages. These pages are usually HTML (Hyper-Text Markup Language) which is the most primary web development language, and it is language that is understood by all web browsers such as Internet Explorer and Firefox. There are many other languages that allow you to do more exciting, dynamic things, but if you are starting out you should focus on creating strictly HTML pages.

A website includes a domain name and a server where your website files are contained. In order for your website to be on the Internet, you need to have hosting, a domain name, and at least one page on your web host. To read the tutorial on how to setup a web page, please visit our “How to Set Up a Website” tutorial.

How To Set Up a Website

Now that you understand how a web page works and how it gets displayed on the Internet, we are going to show you how to create a web page We are also going to show you where to go to find out extensive information on HTML programming and website development

Applications Used to Create a Website

We have created a website development tool that anyone can use to build websites here at Wealthy Affiliate. This tool does not require you to know HTML and has been deemed the easiest to use website development tool on the Internet. We suggest that if you have not done so already, that you sign in to Site Rubix before we go any further and start using this tool. It is free and you will be able to put together web pages in a matter of minutes.

Site Rubix is located in the toolbar here at WA!

There are also several pieces of software that you can download to simplify the editing and management aspect of website development. Some of these tools are paid, but there are many of these that are absolutely free. Remember, you have access to Site Rubix here, but if you want to use another web development tool, there are others available.

We recommend that you do not “buy” any software, especially if you are on a tight budget. You can get very user friendly applications that will do a good job for absolutely free. Below are the top recommendations for FREE website editors:

NVU.com
Google PageCreator (need Google account)
Macromedia Dreamweaver (Free 30-day Trial)

Resource & Tutorial Websites

There are many resources and tutorial websites available for you to learn almost any programming language. Instead of rehashing the same information, we have created a list of our recommendations on places to learn HTML. They are listed below:

W3Schools.com
HTML Goodies
HTML Code Tutorial

You can learn anything you need to know from these resources, and they even provide you with full snippets of code you can copy directly into your websites. If you can’t figure out how to do something, we suggest that you use these resources...because chances are you will find it there

HTML Resources

Learning HTML can be a little awkward at first, but by taking the time to learn HTML (which by the way is the most forgiving programming language), you are giving yourself leverage to create web pages “on demand” as well as add things to pages within Site Rubix (you can edit the code within SR as well). When you have a great idea that you would like to try out, you will not be at the mercy of another programmer, nor you do not have to rely on a merchant page's sales copy (which can at times lead to lower conversions).

One thing to remember when you are learning HTML, is that there are unlimited resources available if you need a small script or code to do something on your web page.

Templates

We have created some pre-made templates that you can use for the creation of your websites. This will give you the framework to work with, which is often the most difficult aspect of web development to learn. You can simply plug in content, links, and images into these templates and they will be fully functional web pages. Our templates are found within the following section.

Website Templates

**Note: that these templates are independent of Site Rubix (as Site Rubix has its own templates).

There is also a great place that you can go to pick up a wide variety of free, open source templates. These can be found within the Open Source Web Design site:

Oswd.org

Feeder Sites

We have also created feeder sites for those of you who would prefer not to make a website, but want to take advantage of high quality sites that we have created for you. The feeder sites dynamically generate a URL that will insert your Clickbank and Wealthy Affiliate linking codes into the web page This way you can promote our feeder sites linking to multiple products quickly and easily and it will only take a minute to get up-and-running!

To check out the feeder sites, please use the following link:

WA Feeder Sites

**Note: The feeder sites are being frequently expanded and added to, so check back often so that you can take advantage of these sites.

Dynamic Languages (JavaScript, PHP)

If you have been exposed to any sort of web programming, you are probably familiar with the languages JavaScript and PHP. Unlike HTML which is a static programming language, these languages are what we call dynamic programming languages because they allow you to perform dynamic functions on your web pages.

For example, with languages like PHP and Javascript you can pass variables from page to page allowing you to display dynamic content such as keywords, images, and personal preferences. If you had an ad in Google and you wanted to pass a keyword into your web page so that your page would be relevant to the user, you can do this with both Javascript and PHP. This is a little trick called Dynamic Page Optimization that many people use to increase their landing page relevancy, and thus their conversions. We outline this in more detail below.

Dynamic Page Optimization

It is very important to have highly relevant web pages, and with the web page relevancy component of the Google Adwords Quality Score algorithm, it has never been more important. Ideally, you want to include the exact keywords that someone searches into your web page.

Now this can become quite a pain if you have to create a brand new page for every search term that you have within your ad groups.

We have created a PHP script that you can add to your web page to dynamically insert keywords so that you do not need to create 1000’s of pages. We choose to include the PHP version of this script because Javascript is not recognized on the fly by Google’s bots, and therefore your Quality Score would would not improve. The script and instructions on how to use it are included below:

PHP Code:

PHP CODE: <?php print str_replace("+", " ", $_GET['key']);?>

JavaScript CODE:
<script language="JavaScript"> <!-- // Get the value of the variable "key" and print addr_str = document.URL.substring(document.URL.indexOf('?key=')+5, document.URL.length); document.write(addr_str.replace(/\+/gi, ' ')); --> </script>

What you need to do is place this code wherever you want on your page to print the keywords that you pass in from your adwords account: Remember, that since these are PHP scripts, you need to name your pages .php in order for this code to work.

Here's an example:

Keyword: Beating Adwords Review

Destination URL: www.yourpage.com?key=Beating+Adwords+Review

This will place the keywords "Beating Adwords Review" wherever you place the code on your page.

Like HTML, we are not going to elaborate on specific programming skills as you can find everything under the sun online for free. Here are some of the best PHP & Javascript resources that we have come across over the years.

PHP Resources

W3 Schools
PHP Builder
Hot Scripts

Javascript Resources

The JavaScript Source
Web Developer
Code Project

Web page Tips

A good web page is comprised of four components: Headline, Layout, Navigation, and Content. We are going to clearly define what these are for you and give you some suggestions outlining the best techniques and practices.

Headline

The headline is the first thing that you use to attract a visitor's attention when they visit your page. The key to attracting their attention is relevancy. If you have not heard us preach about relevancy before, you are going to hear it over and over again. If you drive traffic to your web page and your offer does not pertain to what they are looking for, you are wasting your money.

By having a relevant headline you will instantly captivate the visitor’s attention, and increase the length of stay. Ideally, you would like the person to read the entirety of the content on your web page, as all sales will be derived by people reading your page and clicking through to the affiliate sites (or if you are a merchant, following through with the order).

Here is an example of a good headline and a not-so-good headline that is used for the following ad group:

Internet marketing school
Internet marketing school reviews
School of internet marketing
Internet marketing schools

Not So Good: “Learn How to Become an Internet Marketer”.
Good: “Get Top-Notch Training at the ONLY Internet Marketing School That I Would Ever Recommend! $1000 Per Day is Possible at _________! ”

The headline should not only include the keywords from the ad group, it should be interesting. People have all the power in the world to close your page whenever they want, and they WILL if your headline and supporting information is not interesting. A headline is your first impression, so make it a good one!

Layout Styles

There are three different layouts that you can have for a review. We typically recommend that if you are reviewing multiple products that are similar, that you have them set-up one on top of each other, or a vertical review. Vertical reviews will put a lot more emphasis on the #1 & #2 products as they are higher up on the page, and people naturally read a page from top to bottom.

EXAMPLE OF VERTICAL REVIEW

Horizontal reviews can serve a good purpose (side-by-side) if you are trying to get an individual to buy multiple products as all the info can be put in front of them without scrolling. This will not put as much emphasis on a single product as many people will choose the middle review to read first.

Many people review a single product on a page, and this is more of a testimonial style review. Make sure that if you are going to do this sort of review, you convey your personal opinion and have in-depth knowledge as to how the product will enhance the person's current situation. It is recommended that you keep a single product review less than 1000 words, as anything more than this will lose consumers interest.

Navigation

Google’s Quality Score algorithm gives advertisers a better score if they have multi-page websites. You should have some form of navigation on your page, whether it be links down the right hand side of your page (with relevant linking text) or links at the bottom of your page. If you have links to internal pages on your site that contain relevant content, you will be rewarded by Google. Try to avoid the creation of a site with NO internal links.

Content

Content is very important on all web pages. It will allow you to pre-sell to your visitors and convey a message that will allow them to make a smarter purchasing decision. You should never copy and paste content from other websites as search engines frown upon this, and you also leave yourself open to plagiarism. If you truly want to have a web page that converts and gets picked up by search engine spiders, you will want to spend some time creating unique content.

Creating Squeeze Pages

A squeeze page is one of the simplest web pages to build in terms of functionality. Essentially all you are doing is creating a static web page with the sole purpose of trying to obtain some sort of information from the visitor via an opt-in form (usually name and email address). It will also include an enticing offer with supporting relevant content.

These techniques will not be discussed in depth within this tutorial, however if you want to find out more information on increase squeeze page conversions and the best practices that you should use for creating a squeeze page, please visit the following tutorial:

Building a Mailing List

Conclusion

As you have probably noticed, web design is not something that can be taught in a few minutes, or even an hour. The art of creating web pages is something that comes with practice, and to tell you the truth, it is something that most Internet marketers learn to do by trial and error.

Creating a web page is an integral component of Internet marketing, and with the information and tools we have provided within this tutorial, you should have a much better grasp on where you should go to get more information on HTML, PHP, and JavaScript. You should also have an understanding on how you can get a website up and running. The best starting point is to use Site Rubix as you do not need to know any HTML and it will allow you to easily build professional looking sites.

Learning how to build a website is an asset that you will be able to use for the rest of your life! Once you learn the main concepts there will be no looking back. Spend some time learning the “ropes” and you will be increasing your earning potential ten-fold online.

We are here to help you as well, so if you have any questions regarding web page development, any of the techniques we have provided, or want us to review your website, just send us a message in the forum. Also, posting questions in the main forum will help you immensely as there are many excellent web designers here at WA who are willing to help and give you constructive criticism.