The work of Chris for Staf 24: Moser Reisen

STAF 2 * Patrick Mendelsohn * Pierre Dillenbourg * Daniel Peraya * Daniel Schneider
Staf 21 * Staf 22 * Staf 23 * Staf 24 * Staf 25 * Staf 26

Practical course - Stage - Praktikum
II b
Project 2 for Staf 24 of Chris

Abstract

Projected, developed and implemented 2 web-sites:
www.rutschmann.ch: Hans Rutschmann Architekten AG, CH-8197 Rafz, Switzerland
A web-site for architects presenting new projects and realized projects.
www.moser-reisen.ch: Moser Reisen, CH-8416 Flaach, Switzerland
A web-site for a car travel company presenting the current offers.

My plans about my work for Staf 24
Project 1: www.rutschmann.ch: Hans Rutschmann Architekten AG, CH-8197 Rafz, Switzerland
Have a look at the current web projects of Chris

Project 2
www.moser-reisen.ch: Moser Reisen, CH-8416 Flaach, Switzerland

Goal: A web-site for a car travel company presenting the current offers
The intention was clear: developing and implementing a well functioning web-site that should present current offers of all 3 departments of the compay:
- Car travelling
- Travel agency
- Bus lines.
The stages of my work for this web-site
1
Gathering the wishes and the needs of the company and their staff for their new web-site
Mr. R. Moser, the CEO of the car travel department, explained me the goals of the project:
- Presenting the current offers as well as all 3 departments of the company.
- With pictures and short texts.
- Facilitating a first contact with the company thru the web.
- Not yet included: booking and selling travels thru the web. Might be added later.
- Introducing the staff working for the company.
2
Setting up the concept for this particular web-site
The concept I developed for the company follows these rules:
- The web pages have to focus the presented information to one single goal.
- Visiting surfers have to be welcomed by some elements of interactivity, e.g. responding elements within the pages.
- The graphic design of the web pages has to be nice but not too complicated.
Since the planned content turned out to be rather manifold, we divided it up into several sections:

For the entire company
- Homepage
- Overview: presenting all 3 departments with their sections and services
- Contact
- About US
- Hints

Car Travels Department
- New Offers
- Week Arrangements
- Short Trips
- City Trips
- Round Trips
- Seaside Travels
- Active Travels
- Thematic Travels
- Music Travels
- Oldtimer Trips

Travel Agency Department
- Individual Travels

Bus Lines Department
- Regular Bus Lines
- Special Trips
As a help for navigating the web-site the sections of the corresponding department are indicated on all main pages of that department (not on the sub-pages).
3
Developing first presentations
In order to make the discussions about selecting and presenting contents on the web pages easier I created some model pages to review together.
We decided about the fonts, the colours, the arrangement of the elements within the pages and the sequence of the pages.
4
Types of web-pages
This process ended up in small number of different types of pages - beside the homepage and the welcome/overview page:

Section main page
Giving an overview of that section and providing links to (coming) sub-pages.
Each section main page consists of several elements:
- Corporate logo: on click to overview page
- Department icon
- Section title
- Help button: on touch showing help (where needed).
- List of sections: on click to the chosen section
- Display field: where the informations are presented:
-- Pictures in a small format, providing links to the related sub-pages.
-- Rather short text informations related to these pictures
On some section main pages there are 2 pictures in the same frame available, to be selected with the mouse.
- Copyright indications

Sub-page
Showing more details with bigger pictures (and optional: giving a short text information).

Individual pages (main level)
About Us page (in preparation)
- Unique feature: interactive slide-show of the entire staff.
- Small personal page for each team member.
5
Adjusting the concept
As a result of the discussions concerning content and page types the concept got slightly modified.
During the development work we got additional ideas about contents and presentation forms.
6
Elements of interactivity
A web-site has to show some of the advantages of that medium.
Interactivity is the prime feature that can be realized on the web with reasonable effort.

Showing related contents by moving the mouse over the keywords
- The company and the 3 company departments
- The individual department and the sections of that department

Confirming the surfers choice
Telling the surfer that the page has recognized the current choice where to go.
By highlighting the link being touched by the mouse.

Alert messages by moving the mouse over the keywords
Indicating the preparation status of that page.
In order to prevent the surfer from clicking without result.

Help messages by moving the mouse over the help button
Expanding the entire help message at once.
Without clicking nor changing the page.

Multiple pictures by moving the mouse over the picture or the corresponding keyword
Displaying 2 or more pictures within the same picture frame.
- Outside and inside of the bus.
- Different buses. Different travel destinations.
- Displaying a first sight thru the telescope to see where the travel will go.
7
Administrating and keeping the web-site running well
That will be my task for now and for the near future.
There are still several aspects to be optimized.
And some parts will be recreated with new techniques of web engineering.

Chris Mueller (chris@prolingua.ch)

++41 (0)52 301 3301 phone
++41 (0)52 301 3304 fax

98 10 01