Home > E-learning > Web Site Design and Construction >

Web Development Processes - New Websites or Redeveloped Sites

Introduction to Web Development and Re-development Methods

In Web Design Issues I outlined some of the key issues involved in the design of my own web site. I also provided links to a variety of resources that provided good advice on design issues.

This page deals with the actual development process. Once you have a design concept, the real work begins.

Broadly, the development process covers a number of steps. These steps apply to new sites or re-developing existing sites. The steps are:

1. Finalise the design.

2. Plan a development approach, including developing a design "template". Divide the project into stages.

3. Carry out the development work on each major page or section of the site.

4. Test

5. Refine and continue development.

The above process looks relatively straightforward. If it is followed, it will save you days of re-work and error correction.

Web development is like any computer development. The degree of re-work necessary grows exponentially as the project goes forward. Good planning and consideration of all the issues is essential. I cannot overemphasise enough the importance of getting the design finalised and correct before proceeding with the coding work.

If you want an explanation of computer system development, see: Implementing new business systems successfully.

My own web development process

In My personal journey and Web Design Issues I explained the approach I took to the two re-development projects of the Derek Stockley web site.

In this section, I will elabourate on how I used the development process introduced in the previous section.

1. Finalise the design.

For the first re-development, my design concept was to retain the original two framed screen so that the contents were always visible, but to extend that design to three columns for the new site sections e.g. e-learning.

This was based on my extenive research and consideration of the needs of potential site users.

For the second re-development, my focus was improving the appearance and search engine friendliness. I also wanted to ensure that the design was flexible and easy to update.

2. Plan a development approach, including developing a design "template".

The project was divided into phases. Each phase included design, execution, test, revision, test, and finalisation. For the first re-development, the first phase was redoing the Articles section of the original site. The second phase was the other pages of the original site. The third phase was the E-learning section including this e-journey. In each phase, a design template for the page was developed, tested and refined before the detailed content was added.

For the second re-development, I converted the HTML to XHTML. I also re-designed the left frame which provides the site menu/contents. The frame structure made this process relatively easy. If you have not reviewed my reasoning already, my use of frames on this web site is explained in: Derek's decision to use frames - advantages and disadvantages..

3. Carry out the development work on each major page or section of the site.

This basically proceeded as planned in both re-development projects. Some minor alterations were made to the templates as development proceeded but no major re-work was necessary.

4. Test

This was carried out progressively. User feedback from a variety of sources was sought.

5. Refine and continue development.

This is an ongoing requirement. If you have designed with flexibility in mind, this is relatively easy. Continuous improvement should be an underlying web development theme.

Development advice

In my research, I discovered some useful resources:

See: Ten Mistakes in Site Planning for some cautionary advice. (This opens a new window. Please close it to return to this point.)

If you are interested in a complete tutorial, this five lesson tutorial : Anatomy of a Re-design is very comprehensive.

I found Lesson Five particularly useful. (This opens a new window. Please close it to return to this point.)

IBM's Advice

Although it is aimed at experienced web developers with a good programming knowledge, the IBM article: Rapid Web Development is an excellent guide map. To achieve success with a minimum of fuss is possible if the advice is followed. (This will open a new page. Please close it to return to this point.)

You do need to have looked at HTML and other programming languages to understand the terminology used. The IBM article recommends XHTML. If you haven't already considered it: XHTML Explanation provides a good explanation of the issues involved. (This will open a new page. Please close it to return to this point.)

By the way, the IBM web site is regarded by many as "best practice".

Templates

The IBM article: Rapid Web Development in the previous section introduced the concept of page templates.

This is a very important concept.

A template allows you to present a consistent and professional image, and correctly executed, can save considerable development time. It also prevents frustration because of the time wasted in re-work. The IBM article gave you the format. Lesson Five further explained the template concept by introducing "evergreen", "global" and "fresh" content types.

Both articles give a good overview of the concept, although both mentioned databases. My site does not warrant database inclusion, so I used JavaScript to "include" global content into my various templates.

What's next?

The final section provides further: References and Information

To return to the index of this e-journey, see: Web Design and Construction - Road Map

If you are interested in web design from a search engine perspective, see: Search Engine Optimisation/Search Engine Marketing for more specific information.

To return to the Derek Stockley Home Page: Derek Stockley Home Page