Choosing a Hosting Package

Before choosing a hosting package you should think about what kind of site you will be creating on it. Typically there are many kinds of sites, but usually you can think of web sites in the following terms:

Personal vs Commercial:

Is your site going to be Personal or Commercial in nature? If it is a commercial site, will the site already have a user base or will it be there to attract new business? If the site is personal, what will your site have? a forum, a blog, an image gallery?

Commercial sites that will already have a user base, like a daycare organization that needs to post information for its customers, might not have large space or bandwidth usage, since their customer base will remain largely static. If your new commercial site is there to just advertise an established business, the space and bandwidth usage would also be largely static, meaning you would want to start with a small hosting package and then upgrade as your business grew. If you new commercial site will be the business, you might expect for your bandwidth and disk space needs to grow immediately, so picking a hosting package that you can readily grow into might be more appropiate.

Personal sites can become very popular over night, or they can be very modest. Unless you are going to feature image galleries or large file attachments on your site, a medium hosting package is usually the preferred choice.

At WebKeyDesign, we feature multiple hosting packages that can accomodate most hosting needs. For most beginning sites, the Basic 100 and Basic 150 would be good choices, however if you really plan on having a site for more than a year and features forums or high traffic, the Deluxe 300 plan is a better fit. For simply advertising a small niche business, the Basic 50 plan works great. You can also contact us if you would like a more custom plan than what we offer now.

Track Your Back Links

There’s a new search tool I added to the site over the weekend. You can find it under the Tools section on the sidebar as: Links Tracker.

The way it works is you input you domain name, along with some other parameters and it will track via Yahoo, all the web sites that have a link back to the site you typed in. This is really handy for seeing just how many people link to your blog, your site, or any page you have.

A Bandwidth Tester is also setup, so in case you were wondering how fast is your connection to our site, this tool will help you visually gauge it. The test works really well once, but if you run it multiple times, you end up throwing off the results due to cache mechanisms.

Intent-based Searching

The big searching companies like Google, Yahoo, and Microsoft are working hard on developing new searching technologies that finally may solve some of the problems we all have with current internet searches. Yahoo’s Mindset is perhaps a good peak on the future of search and just how useful it may become when search results are no longer laden with an overabundance of advertisements and special offers.

Mindset works just like a regular Yahoo or Google search, but on the results page, you can move a slider to either Shopping or to Research, this way your results become filtered depending on where you move the slider bar to.

I tried a generic search for “Toshiba tv review” and when moving the slider to Research, the first link was in fact an actual review of a Toshiba product, and not an add or store listing for one.

It will be interesting just how well Yahoo’s Intent-based searching develops and how Google will implement their own version of it in the future.

404 Custom Error Page

In cPanel, the Error Pages function allows you to modify the different html pages that a user will see when an error is registered on your site. The most common being the famous 404 Page Not Found error that you get when a page does not exist. This tutorial will show you how to setup a proper 404 Error page, so that visitors to your site will hopefully find what they are looking for.

cPanel lets you save the custom 404 Error page as anything you want, but the default name for it is 404.shtml. It is best to go ahead and code an html file and then upload it to your public_html folder as 404.shtml. You can then view and edit this file by going to cPanel: Error Pages.

As to what to include in your 404 Page, you can use our own WebKeyDesign 404 Page as an example. The basic things to include would be:

1. Your site logo, with a link to your home page.

2. An explanation for the error, like “Sorry the page so and so cannot be found on our site”. If you insert the code <!–#echo var=”REQUEST_URI” –> into your html, this will display the url that the browser requested. On our 404 page, we include the code <!–#echo var=”HTTP_REFERER” –> so that the person knows who referred them to the incorrect page.

cPanel offers the following variables in Error Pages:

  • Referring URL: Displays the URL that referred a user to the page.
  • Visitor’s IP Address: Displays the users IP address.
  • Requested URL: Displays the URL requested by the user.
  • Server Name: Returns the servers name or websites URL.
  • Visitor’s Browser: Displays information about the user’s browser.
  • Redirect Status Code: Displays the error code associated with the error.

3. A Default Page to your site is very helpful, for visitors to learn more about your site. Usually the default page should be a site map, an about page, or at least your home page.

4. Contact Information is essential. Some visitors will want to contact you, so include your contact page or email address for your site. The is probably best to use if you are going to put an email address.

Other ideas for your 404 page:

The search box is a good idea. On our default page, we setup a form that simply searches our site through Google, but you could get more complicated, by including your own site’s search box and code. To implement a simple search box include the following form code:

<form action="" name="searchbox"
  method="get" style="margin-left: 2em;" />
  <input type="hidden" name="hl" value="en" />
  <input type="hidden" name="ie" value="ISO-8859-1" />
  <input type="hidden" name="sitesearch" value="" />
  <input maxlength="256" size="40" name="q" value="" />
  <input type="submit" value="Search" name="btnG"
    style="font-size:75%;" />

You will need to change the to whatever your actual domain is of course.

Another good idea is a navigation bar for all of your site’s main pages.

One last thing to consider is that Internet Explorer will nto display any 404 Error page that is less than 512 bytes, which means your error page needs to be at least around 12 lines of code.

For more information visit some of these sites:

Browser Tools for Web Design

Most site design happens in an editor of some kind, be it Dreamweaver, Nvu, GoLive, or your text editor like BBEdit, UltraEdit, or Notepad even. However the editing and revisions, the little fixing of syntax only can be done if you double-check your work in the browser itself, and you have to do this constantly! This is where browser tools come in and really make this process easier to do. By default, the easiest of all browsers is of course Firefox and so we will cover some interesting extensions that you simply can not live without if you do any kind of site design, then you need to have these tools at your disposal. If you don’t, then you are just making things harder on yourself.

Web Developer Extension:

Available from is Web Developer. This extension adds a toolbar to Firefox which features all kinds of tools for web design. You can clear the cache of your browser, see the stylesheet for a site, as well as edit it to see the results right away. The only thing that is really missing from WD, is a cool color picker or color lookup tool.

Aardvark Extension:

While Web Developer has some nice outline tools, it might be overkill for when all you want to do is figure out what the class id of a div is on the page, or better yet, you want to kill a graphic or an entire section. This is where Aardvark comes in. Once you install it you just go to Tools and choose to start Aardvark and you can then simply glide your mouse over the different page elements to see what their id and class is.

Mouseover DOM Inspector

Unlike the previous two, Mouseover DOM Inspector is not an extension to Firefox, instead it is javascript. All you have to do to use it is go to and save this bookmark link to your bookmarks. Then any time you want to enable it just go to the page your want to inspect and go to your bookmark. A popupwindow will display now with information of the various elements you mouse over on your page. Some designers might actually prefer this script over Aardvark.

ColorZilla Extension

For figuring out what the color code is of different elements on a page, nothing beats ColorZilla. With the simple activation of the eyedropper on the lower left corner, you can now know what any color code is for any element on the page. This is a must for when trying to work with interesting color palettes.

Web Color Names Extension

I will also mention Web Color Names, because even though it is a simple color chart, it still comes in handy when you want to look up a color really quickly in the standard color palette.