OutsourceSurvival.com

This article is for those who don’t have a technical bone in their body, and feel intimidated by the prospect of hiring some guy in India (or wherever)to do it for them. Aside from convincing you that ordering a website IS like ordering a hamburger, this article will give an outline on what you need to know to build your own website.

There is a common misconception that if you don’t know how to muck around with code, you don’t know enough to outsource the building of a website. Let’s just burst that bubble right now- it’s easy. Anyone can do it. Yep anyone, even if you’re still not sure what a blog is, and you think .NET is just a web address

A Website is like a Burger

Ok, here comes my food analogy… it’s late and I haven’t eaten dinner. Bear with me it should eventually make sense. The premise is that you don’t need to know how your favourite hamburger is made to order it or enjoy it. Likewise, you don’t need to know what’s in the guts of a website to have a freelancer build it. In fact, just like with food sometimes it’s nicer not to know. Blissful ignorance can be a powerful thing

However, just like buying a hamburger, it’s up to you to decide what fillings, buns, and sauce you want. Those decisions are your responsibility. There’s nothing worse then waiting for someone to order when they haven’t worked out what they want. They fumble around, change their mind, and keep everyone waiting. Often they’ll ask their friend or the person serving them ‘what should I get?’ Desperately seeking to dodge that tremendous commitment and get someone else to make the decision… then in the heat of the moment, they order something they didn’t really want. Don’t let this be you when it comes time to build your site.

Browse the menu before you line up to order…

This is a failure of planning, and the same thing can happen to you when you buy a website. In fact, it’s behind most IT project failures. If you don’t have experience with web development, it’s like having to order without seeing a menu. In some restaurants like McDonalds you’ll get by just fine (with a greasy but predictable burger), in others you’re going to struggle and you may not get a burger at all.

Ok I’m letting go of the burger analogy…

So the goal then is to familiarize yourself with the products on offer, and determine what you want before you step in line to order. This isn’t hard, but it may be time consuming depending on how complicated you want your website to be.

Step 1. Shop around and get your basic requirements

The first thing you need to do is get a feel for what you want. Look at competitor’s websites. Think about the functions you’re going to want with yours. What will it do?

Create a Like List (basic design and interface requirements)

List the sites that you want it to be like, and describe in detail how you want it to be like them. For example, I like the way the articles are divided on site X, or I like the way the menu moves on site Y, or I like the logo in the top left. You’ll come back to this list later.

Create a Do List (basic functional requirements)

List the all of the things that you want your site to do. Every single thing it will do. Don’t be shy with details, more is better. For example, on this site one of the things I wanted it to do was to have a mailing list function.

One thing to note when doing this: unless you have relevant experience, don’t try to describe how it will do something. Bringing back the hamburger analogy, we don’t care what’s in the bun, only that it’s toasted white bread with sesame seeds.

When you think you’re done with the initial list, it’s time to start exploring the web for examples. Go to various websites and find examples of all of the do functions that you currently use in other websites. List them next to each item on your do list. For example: one item might be ‘mailing list function – see www.entrepreneurs-journey.com’. Description of what it is, and where an example can be found.

Tip for new players, don’t forget to consider administrative functions. Even if you plan to have a ‘static website’ (one that doesn’t change very often), you should consider ‘In future, what would I need to change to keep it up to date?’. Add these to your do list, as it’s usually faster to be able to update your own site, than it is to wait for your ‘web guy’ to do it (for a fee too).

Step 2. We want the Buffet. Find Shortcuts.

Despite what you may have heard, there is nothing new on the web… just different flavours of the same thing. For most business websites, everything you could possibly want to do right now has been done somewhere already. Hopefully you’ve already identified examples of each of your do requirements (above).

What we want to do now is go digging around on the web to find premade applications (often referred to as ‘platforms’), plug-ins, or services that will meet our needs. The last thing we want to do is build this thing from the ground up! It’s more expensive, there’s more risk that something will go wrong, and you get less for your money!

I recommend that you look for ‘open source’ or other community based free applications. The advantage is that they’ll do just about everything you need, they’re free, they’re (usually) stable, and people are constantly working to improve them. For example, this blog operates on a platform developed and given away by www.wordpress.org. Another blogging platform is www.movabletype.org. For general websites or ecommerce sites you might consider www.dotnetnuke.com.

These are just a few of the more common platforms. There are hundreds of open source projects on the web (although it is better to stick with the bigger ones, like those mentioned above). The main thing is that if you can find a platform that satisfies most of you do list, you’re halfway to getting your site done and you haven’t spent a dime!

The emphasis here is on getting a premade open source ‘something’ that will do most of your do list. There maybe a few things that aren’t easily found or that your chosen platform can’t do ‘out of the box’. That’s ok. We’ll leave those details up to our freelancer.

Output 1: Combine your platform selection with your do list and you have a basic requirements document!

Step 3. Get the look right. Start Copying!

Print screen is your best friend (on your keyboard CTRL+PRTSCN). From your like list, find the page that most closely matches what you want. Print-screen it. Then open MS Paint, and paste (CTRL-V) in the screenshot. Do this for all the other items in your like list. You’ll end up with a pile of screen shot images.

We can now release the tormented artist trapped within each of us. What you’re going to do is cut and paste all the bits you’ve taken screen shots of until your main page(s) look the way you want it. This is not a beauty contest! Scribble all over it, use arrows or text. The main thing is to communicate ‘what’ goes ‘where’. We’re trying to develop a first cut, to communicate to our expectations to the designer. Here’s an early example from my blog.

It’s not your job to make it pretty… just to know what you want!

Output 2: We now have a page mock-up.

Step 4. Build your model (optional but desirable)

Wait… didn’t I say this wasn’t technical? Well if you can work MS Excel, you can build a model. The reason we do this is to quickly and simply get a feel for the site, and how all the pages mesh together. It shouldn’t take you more then 15mins – 1hr depending on how complex your site is (and how speedy you are with Excel).

Using the outline/border function, draw each page of your website. We start with the homepage and work our way back, deeper into the site. Put in outlined boxes for the menus, and other functions, type in their titles. The ratio is 1 webpage page to 1 worksheet. Create a new worksheet for every page. You may also take graphics from your screenshot activities and paste those in too, or fill different blocks of cells in different colours to represent graphics or zones. It’s up to you.

There’s no need to be perfect, we just want a rough model to see how the site fits together. Look for any weird dead end pages that weren’t thought through properly. Keep an eye out for anything you may have forgotten to add to your do list.

Once you’ve drawn the first few pages go back over it, and right click on any of the menu titles that you created and select ‘Hyperlink’. This will show you a menu, and you select the page that it should go to. You can now click on the hyperlink and navigate between worksheets just as though it was a real website.

Do this for all of the links in your model. When you are done, you have created a basic model of your site. Sure it’s ugly, but now you know how it looks, how many pages it has, and how it all fits together. Plus you can step through it just like your customers would, and all without a single line of code!

Output 3: We’ve created a simple functional model.

Step 5. Get it built

You can now take these 3 documents and get it built. Take output 1 and 3 to a graphic designer, and get your pages drawn and ‘chopped’. Then, take the newly developed graphics, along with Output 2 and 3 to a web developer or specialist in your open source platform and have your site created. Easy! (Ok… these steps could be expanded some more, but we’ll get to that in future articles!)

Why go to all this trouble?

We go to all of this effort to define exactly how our hamburger is going to look, and what it’s going to be filled with We’re trying to eliminate as many ‘unknowns’ before the project gets underway. It’s a cost effective way for you to work out the details. It will save you money and give you better results. You don’t need specialised skills or software, and it takes just a few hours in front of your PC.

This approach is how you can save 90% or more of your development costs, and still end up with a fantastic looking and working website.