A Guide to High Quality Web Development

Planning

Before you can design the structure of your site, you must know what the purpose of your site is and what information it needs to convey.

No web site will succeed if it does not consider the needs of its audience.

To start the planning process you need to answer some questions.

What is the purpose of your website?

If you were creating a site for a business, the purpose of your site may be to provide information about products and services and a means for potential clients to make contact. Different sites will have different goals. It isn't enough to need a web site, you must know why.

Who is your target audience?

Considering your expected audience for a site may influence some design decisions. Your user is paramount. They should consider your site useful and easy to use or you risk losing them. It is important to keep your audience firmly in mind throughout the development of a site; their reaction will determine the success or failure of your project.

What will be the content of your site?

Once you have established what your site should achieve and whom your target audience is you need to establish what content you will need.

Solid content is vital. Your site can be as well structured as you please but if it is devoid of content it is no use to anyone. Gather together the resources you already have and consider what else you need to obtain.

Before you start to code you should have text (edited and proofed) and images ready to go. There may well be tweaks to these later in the process but without the core of your content in existence you cannot effectively design your site.

How many pages (or divs) will your site contain?

Establishing the size and basic organization of your site allows you to start to organize your content appropriately. Now that you know what your site will contain you can start to map out how that information will be presented in your site structure.

Draw a diagram that illustrates how those pages will be structured. The example below is for an imaginary business site. There are seven pages in total. The main page is understandably at the top of the structure. From that point information is divided into three divs: products, services, and request/contact information. The products div in turn hosts subdivs of products (plasticware, metalware and all other products).

A Diagram of the structure of a website

Determine the navigation systems for your site. Take the diagram you have just produced and consider what navigation should be provided on each page. This is a good time to establish a filename for each page.

At a bare minimum each page should have a link back to the "home" page. Ideally each page will have links to at least the other pages in their div. Users don't want to have to hop back and forth through your structure to navigate your site. Give them the cleanest most comprehensive navigation system possible.

So, for the site diagrammed above, there will be a link to the home page on every page and the following as indicated by blue arrows:

A Diagram of the structured links between pages on a website

Now you will have a complete map of your site, outlining how it will all link together.

Sketch an outline for your template page. Indicate where your navigation, title and main content will sit. Describe how the site will work. Contemplate your color scheme: pick suitable colors for headings, text, background and links (all states: visited, unvisited etc.).

Finally, you are ready to start coding! All this preparation should make the next phase very straightforward.

Return to the top of the page.