Building your Website

Instead of telling you your options, we're just going to start by telling you how to build your website using the best, most professional and efficient way possible.

This is of course assuming that you've already planned and designed your website. If not, you can still start building but it may be a bit more time consuming.

  1. Get a Hosting Account & Domain Name

    Getting yourself a hosting account and a domain name is the first step. We highly recommend Bonsai Domains for registering domains as well as hosting, email and other marketing tools.

  2. Set up the Directory Structure

    Having your files and folders neatly organized will save you a lot of confusion and time. Your folder names (and file names) should always be in lowercase with no spaces or special characters. Below is a list of folders you should definitely have:

    • CSS
    • Images
    • Includes
    • Javascript
    • As well as any pages that are in their own category or have subpages to go along. For example: About Us, Contact Us, etc..

    You can download our sample site package, it includes the standard directories as well as random files you'll want to get familiar with.

  3. From the Start

    The first thing you should be doing is creating one main file to start from. Add your page title, meta tags, includes and so on.

    Once you get that first page the way you want it, the rest is pretty must easy but repetitive work.

  4. Code & Browser Validation

    Just when you think your website is done, well... it's not. Be sure to correct any HTML/validation errors your website has. Having errors on your pages will not only hurt your rankings but also most likely cause an inconsistency between different browsers. You can validate your pages here but the easiest way to validate your webpages is to download FireFox and install the Developer Toolbar Add-on. Once it been added, go to: Tools -> Validate Local HTML (Also do the CSS).

    Making sure that your website looks clean and identical on all major browsers is extremely important. Nobody likes to visit a website that only works in a certain browser or worse a specific version.

    You should be testing for Internet Explorer 6, 7 and now 8, FireFox, Chrome, Opera and Safari. I know what you're thinking, NO WAY AM I DOING THAT... well the good news is, if you follow good coding standards, you won't have to. Most browsers render HTML relatively the same with the big exception of IE6 which has the tendency to suck.

  5. Building for SEO

    Making sure that you utalize every possible SEO opportunity while building your website will significantly increase your rankings. It's all about knowing when and where to use these methods.

    Dealing with Images

    Avoid images at all costs! We are not talking about photos as in photographs but any images that could otherwise be created with text. All images should have populated alt tags (<img src="" alt="" width="" height="" />) that is what a proper image tag should look like.

    Image Replacement

    Image replacement is a great way to display your image without sacrificing your keywork opportunity. This is done by adding the image reference in the css and manually hiding the text. See the example below (this is a real example from our own code).

    HTML: <h1 id="logo"><a href="/" title="weburge">weburge</a></h1>
    CSS:
    #logo {
       margin-top: 20px;
       float: left;
       width: 191px;
       height: 49px;
       background: transparent url(/images/logo.gif) left top no-repeat;
       }

    #logo a {
       display: block;
       width: 191px;
       height: 49px;
       text-indent: -9999px;
       }

    As you can see, the text is positioned at -9999px way off stage. Browsers do not care where the text is, as long as it is readable.

    Link Titles

    When adding hyperlinks to your content, be sure to add a title tag inside of the anchor tag. A proper anchor tag will look like: <a href="" title="" >link</a>.

    To read more on Search Engine Optimization please visit our SEO page.