Web conception

by Aleksandar Čupić

1         Preface

This article offers no introductions to web technologies. It is rather from interest for people who are dedicate to conception or to deal with their projects more professionally. It is no article of completeness, but should give an insight, tips and stimulations. The division of the phases in a project are leaned to the book of Jens Jacobsens [1] what helped me a lot in my career as a manager of web projects.

Concept is called according to Duden Fremdwörterbuch [2], a keyword-like design of a speech or plan, program. This sounds very formal first. There are also some rules that must be kept, but it remains to a not inessential part, in spite of its entire still a process where personal taste and creativity are asked. That's why it is more than an advantage to know the rules, but they should not be considered as a dogma. The finding of a solution is dependent from customers as well as from the situation. In addition, one wants to stand out from the mass with his product.

2         At whom this article is directed

On people in projects who have the aim to create a Webside. Also to people that over and over again notice to that the time runs by the fingers, or also the customer is not contented with the outcome. Also to all who are interested in work with concepts in the area of Websides. One of the most important points for concepts is that projects are better planed and the time involved can be better determined. The writing down, and this are concepts, are according to the time management expert Lothar Seiwert [3], the most important planning principle. Each who is not certain in time management I can only suggest his books.

With the today's tools the creation of a Webside has become very simple. One needs not to study it and also no programming knowledge. Not for a private or static homepage at least. If it comes to professional pages and with thus mostly to dynamic pages, the situation looks completely different. There could be quickly a few dozens sides to deal with. Several language versions, plug ins, Blogs, newsletter and a lot more. The step to a content management system (CMS) is not far, and there, the chaff separates itself from the wheat. Even with the known tools, a decent page is not to develop without knowledge of the used language and the used platform at all.

What has all that to do with the subject?

Shouldn’t it be about concepts of websites?

Now what I wanted to show shortly is, that with the task, also the complexity of the task raises. Without planning the project it will be hard or impracticable, at least not in adequate quality. What helps is the division of the project in clear steps. Should it be a page for a paying customer, he/she must be included in the decision-making. He still pays.

It simply follows; to make the customer happy I must represent every single step clearly and incorporate him in the development. At the beginning it seems as one would need much longer for the project, but if you take all phases together you could see, it is the opposite.

No matter what kind of project it concerns, rework an existing Webside or the development of a completely new, you can classify them into the same phases.

The names for the phases, which are used, can differ. Here we take the terms from Jens Jacobsen's book [1], because they were known to me and were used in own projects. They have shown themselves more than helpful. These phases as well as action-wise are not carved in stone, accordingly to this steps can be cancelled but also added.

3         Exchange of information

In this phase the customer has moved up to you. To be able to hand in a well-arranged offer one should already take action in this phase very carefully. It is your duty to find out what the customer would like and what he would to realize. This happens best of all if you arrange some personal appointments with him. With these appointments, you are getting a good insight view over the possible next client. All information’s are helpful: Where is the company? In which industrial sector is it active? How is the equipment? How do the persons handle with each other? How does the client behave to them? This is only some information you could get in such a visit. Be observant and record them all.

In the discussion itself, a contractor let the customers always talk, after he/ she ask there questions. However, one should also always reinsure himself, that both mean the same, in different industrial sectors words are often understood differently.

For example the word Transparency:

According to Duden [2] it means clearly or translucently.

In parts of the computer science, for example, in distributed systems, it signifies the opposite, namely hide, mask or cover. [4]

What kind of questions should one ask? To list a complete interrogative catalog at this place would exceed the frame of the article, thus only catchwords are listed for the stimulation. One should ask for aim, target groups, kind of contents, creation guidelines, models, paragons. Also whether contents (texts, graphics, images etc.) already exist and if, who has created them and whether one can use them? Also important are questions to technical basic conditions (domain, former Side, databases etc.).

After one have made own observations. Received answers to his interrogative catalog. One should go one step further and run even a few more investigations. For example, a competition analysis, market analysis or also the question how important the web for the customer is or can be. This step can follow also after you get the job. And all this information could be inserted into the rough conception.

4         Proposal

With all this information you have a basis with which you can start to make your proposal. Before you start to do this you should well consider whether it is feasible for you or not. The considerations enclose staff demand, knowledge, company equipment, technical feasibility and some more. After the outcome is a positive response, you start with the proposal.

One should here, estimate the amount of work involved and list them in single steps of the project with time involved and expense. It should be exactly as possible to generate an overview for himself and the customer. It should contain a project description, schedule and references beside the pure calculation.

Should the knowledge for a detailed proposal not exist, I must refer to suitable technical literature.

4.1         Steps after the proposal

If the proposal has been successfully and you received the contract, you try to get to know your customer a little bit more exactly. Surfing a round through the Internet with the customer and showing him a few example Sides, would be the next step. Maybe the customer himself has some Sides he would like to show you. The reasons why and why not are very important. In each case three to five examples are mostly sufficient.

This gives the opportunity to understand the wishes and ideas of his customer better. At the same time you could give the customer a clue over the complexity of techniques for certain applications used within the sides. Criteria should be the content, target groups, techniques, info editing, design, text and user's guidance.

Each of the following concepts must be mailed to the customer and inspected and approved by him. There are several reasons:

• The customer is held in narrow contact with the whole process.
• Possible later changes can be charged.
• The contractor knows exactly what he must put into practice and which work comes up to him.

5         Rough conception

This concept should guarantee the developer as like the customer have the same destination and know where the project goes. That's why target groups, features, complexity, used media and the destination of the site must be performed in this phase.

To understand better the target group, which should attend the site, you should create user profiles. In these profiles belong age, gender, education, occupation, claims and more. Besides, the technical equipment should not be neglected. Browsers, connection to the Internet, monitor resolution etc. are important as well. Simply everything that is helpful to get a better overview.

If the profiles are created you should play through a typical scenario with a standard approach to the Side. The order of events should be written down and be used internally. This also could be transmitted as an attachment to the rough conception to the customer.

Now one puts together all information from the previous orders of events and creates from it the rough conception. A possible structure of the rough conception could look as follows:

• In the introduction you describe the requirements and the environment of the site. The client as well as the contractor should be introduced.
• The additional value for the contractor should be represented.
• The special qualifications of the client should be exposed.
• The project with its destinations as well as with the complexity to be expected should likewise appear.

As next you could address on the target group. The main interest is to detect the target group and their needs. How good is the knowledge about computer and World Wide Web in these groups and why they are visiting the site? The expected technical equipment of the target group should be in, because it influences the technical requirements. According to this, the necessary features are selected and realized. Which kind of features, should be also listed. The planned contents (only as keywords) are also important. Other contents could be the maintenance and possible visions.

6         Production concept

With this phase you are reaching more deeply into the matter. That means graphics, media and texts must be listed here.

In this part most of the work flows in. Every single HTML page is described. With a note on all contents: Text, images, graphics etc.. Every Template, without contents must appear here and must be described.

To be able to create the production concept one must create the navigation-architecture. Further you must construct the info-architecture and the layout needs to be applied. The best will be to develop prototypes and carries out tests. With the help of these tests you can rework the architecture. At the end you create the real document.

In the following we would like to suggest how to do the segmentation of the production concept with possible contents. As with all concepts nothing is engraved in stone and everybody is free to exchange the order of events as well as the contents.

6.1         Preamble

Here could take place a short table of contents what is included in the production concept. A short review what was worked out in the rough conception without including the whole again. Also you refer to the future steps without including them but you include there you will find them in detail in the documentation.

6.2         Information-architecture

Here is the structure of the contents listed, the site structure is determined and the organization of the layers (deep or flat). Other questions to be answered are: What are the primary data areas? What appears in the navigation bar and superior areas? Which categories are required and how they are named? What kind of media are used and where?

For better representation of the organization structure it is best to put it into an organization chart. Therefore you get a better overview of the organization of the site. You should not forget to describe why this linking has been chosen.

6.3         Navigation-architecture

After the information-architecture is done, it becomes time to think about the navigation. You always should think of the question „ How does the user move on the site? “. The user must always know where he is and how he reaches the desired information as fast as possible. To show this graphically you could use the site map and draw in the linking.

6.4         The pages in detail

All HTML pages (home page as well as content pages) should be here exactly described. To a HTML page belong titles, brief description and keywords which should be entered like it appears on the finished Website. The images should be described and it would be good if the filenames are already known. The text how it supposed to appear on the ready page should be in as well. Afterwards again the acceptance of the concept by the customer is needed before the next step starts.

7         Design concept

In this phase we specify the lookout of the site. The best is to create a so-called creation grid to show where which element is placed. The size and the position should likewise be determined. The color climate should point out which colors should be used on the whole page. In the font guideline the font, style, size and color are explained. The intended purpose should be determined as well.

When all this is finished you start with the creation of prototypes. One for the home page, one or according to size several content pages. This should be presented in a presentation to the customer and accepted by them.

The connectional work is done. It goes further to Implementation. With the help of the concepts, the graphic designer and programmer should know exactly what to do. Before you start with the Launch you have to make in any case a Usability test. These points will not be to take care of in this article, it would lead too far and it is not the subject of the article.

8         In Principle

The layout and the used web technologies should fit always for the purpose of the site. One will present objective contents rather soberly to give the seeker a clear path to the information he is looking for. Entertaining contents are shown accordingly - with much too playfully pages, now and then it happens that the visitor through all the plug-ins do not find the entertainment.

Basic consensus should be, to insist about the fact that the HTML source code of the web pages should be valid. Indeed, the least web editors of themselves generate standard-valid code. That means you have to put your hands on your HTML code.

Who ever avoids the contact with the source code, can check his pages at least with the HTML Validator of the World Wide Web Consortiums (W3C) - this organization adopt all web standards (). Dave Raggett of the W3C has developed even a tool which irons out typical made HTML errors automatically: HTML Tidy (www.w3.org/People/Raggett/tidy/ People/Raggett/tidy/>). The command line tools are available for numerous platforms; Windows users and Mac users can control it also above a graphic face. However, there is also other comfortable HTML-Checker [1].

9         Sources:

[1] Jens Jacobsen: Website-Konzeptionen, Addison Wesley, 2002

[2] Duden - Das Fremdwörterbuch, Bibliographisches Institut & F.A. Brockhaus, 2005

[3] Lothar Seiwert: Zeitmanagement, GU, 2002

[4] Rechenberg und Pomberger (HG): Informatik Handbuch, Carl Hanser Verlag, 2002

http://validator.w3.org/

http://www.w3.org/People/Raggett/tidy/