CK Web Development

The following article is for non-techies who want to know what to expect during the development of their website. (This article draws a bit on the ideas presented in this here. Many thanks to the author.)

The website development process includes six steps:

1. Gathering Information
2. Planning
3. Design
4. Development
5. Delivery and Testing
6. Maintenance

Each step is outlined below.

Step 1: Gathering Information

The first step in the web site development process is to gather information about the operation of your business and specific needs for a website (or website improvement).
The following should be discussed before any work is started: objective, specific goals, target audience, content, budget, and technical constraints.

Objective

What is the purpose of the site? Are you disseminating information? Selling a product? Creating community? Providing a service?

Specific Goals

What are the specific goals of the site? The general goal of most sites is to either generate revenue or disseminate information. While it’s important to start with a general set of goals, it’s also important to set specific ones along the they way. For example, one goal for a site could be to increase member signups by 20% in the first year. Or increase donations by 50%. Or have 20,000 unique visitors in the first year.

Target Audience

Who is the ideal audience for your site? The answer to this question greatly affects design and development decisions for your site, so it’s important to be as specific as possible. Come up with as many demographic details possible. Sometimes your website will cater to more than one target audience.

Content

What type of content will your audience be looking for on your site? And in what form? Text, pdf, audio, video, podcasts are all valid options. How often will they expect new content? Who will generate this content?

Budget

What is the realistic budget for your website? It’s important to begin your project with a frank evaluation of available budget. Often there are solutions to fit nearly every reasonable budget. The budget should make allowance for: initial design and development, monthly hosting costs, on-going maintenance, and future development.

Technical Constraints

Are there any existing technical constraints with which your website will need to function? Perhaps you have an existing database from which your website will need to get information. Or, you are setting up an eCommerce site and you have a merchant account and shipping account that you need the site to utilize.

Step 2: Planning

The second step in the web development process is to take all the information gathered in Step 1 and plan your site. Planning your site includes three steps: determining requirements, writing a site plan, and choosing technology.

Determine Requirements

Your website requirements are the needs of your website translated into specific functionality. And, as such, your requirements become a set of tasks for your website developer. Some example requirements are:

• ability for a non-technical person to add, update and delete site content.
• content on site must be categorized into four different sections.
• site must have members-only area that is password-protected.
• ability for a non-technical person to approve member requests and update member information.
• site must by able to process payments using my PayPal account.

Your requirements list can be as short or as long as you deem necessary, but should be as complete as possible. Think of your requirements as the checklist that you’ll use when checking your final website to ensure that everything has been completed.

Write a Site Map

Your site map is the org chart of your website’s content. It should include the names of all main and any subcategories, as well as a short description of the specific content belonging to each category.

This document is essential to the development of your site’s structure and navigation and should be included in your requirements list.

Choose Your Technology

After your requirements have been outlined and your site map developed, you will then be able to work with your developer to choose the technology for your website. This includes, but is not limited to choosing your: hosting plan, web server software, database software and programming language.

Step 3: Design

It is during this step that the look and feel of your website is developed. The target audience is a key factor when designing your site. During this phase, any existing graphic elements such as logo and color scheme are incorporated into the design of the site.

Initial Comps

A designer will typically create a set of mockups, which will then be presented to you in the form of jpeg or png files that you can easily view on your computer or through a web browser. Usually mockups include at least the homepage for your site and possibly a sub page or two.

You will then pick your favorite, provide specific feedback and the designer will go back to work.

Revised Comps

Based on your feedback, the designer will continue working on a single design and make improvements and refinements based on your feedback. At this stage, the designer will likely provide another set of mockups for you to review. If no subpages were included in the initial comps, they should be included now.

Prototypes

Once the design is nearly finalized, the designer may elect to provide an html prototype of the layout. This prototype is usually a couple of static html pages that you’ll be able to interact with.

Final Design

The above steps continue until a final design is decided upon. Then the design, usually in the form of a layered Photoshop or Illustrator file is handed over for development and implementation.

Step 4: Development

There are two main phases of development, front-end development and back-end development, which can overlap or even occur simultaneously.
Front-end and back-end development can be performed by the same person, but are often performed by two different individuals.

Not all projects require a back-end developer. Many software packages (like ExpressionEngine or Wordpress) can provide a complete website without additional custom programming.

Front-end Development

Front-end development concerns the conversion of the final design to html layouts with the associated css, javascript and images. A complete layout should be provided for each unique page template. I.e., for a simple blog site this would include: home page, article page, and the archives page.

The layouts should also be developed according to current web standards and look consistent across major browsers (Internet Explorer 7, FireFox 3, Opera and Safari).
Sometimes front-end development also includes the integration of these html layouts with a content management system (CMS), eCommerce, or other website management tool.

Back-end Development

Back-end development concerns the “behind-the-scenes” programming necessary to make your website do what you want it to do.
This involves programming in a language like PHP or C#, and, often, setting up and querying a database like MySQL or Oracle.

For the most part, you only need a back-end developer if you would like to customize the functionality of your content management or eCommerce system (or create your own from scratch).

Step 5: Testing and Delivery

Testing is crucial to the web development process and can occur in a few different steps.

Internal Testing

Internal testing is done as a part of development. Sites are tested for errors and against the requirements document before being released to you. Once the site is in good working order (e.g., “beta” version), it is presented to you for review and feedback.

Client Testing

A functional website is presented to you for review and feedback. Any requirements not yet implemented are outlined along with an estimated time to completion. At this stage you report any bugs you encounter as well as any requirements that have not been implemented according to your requirements.

Final Acceptance

Development, internal testing and client testing continue until the final product is reached and you are happy with the way your site looks and functions.

Delivery

Once you have accepted your final website it is delivered to you, with installation instructions, or deployed to your server or webhost (depending on what was decided during requirements development).

Step 6: Maintenance

Maintenance of your site includes both updating its content and adding new features. Sometimes other maintenance issues can arise as you attract visitors to your site.

If you’ve elected to include a content management system as part of your website, you will probably be able to maintain basic content yourself. That is, you’ll be able to add new pages, and edit and delete old ones. Otherwise, you may need to learn how to edit html yourself, or continue to work with your website developer.