Jump to main content
University Computer Centre
Planning

Planning and Structuring websites

Before websites are created, they should be planned:

  • What content should be created? How can these web pages be well structured and arranged for the audience? Can I orientate myself on good examples?
  • These considerations should result in the content menu and a set of web pages linked there.

Guidelines for structuring a website

The web author is faced with the task of logically structuring the information to be presented, i.e. dividing it into individual web pages and arranging them in a menu structure that makes sense to the reader and is consistent. If possible, this content structure should be discussed with the person responsible for the content before implementation.

For some types of web pages there are recommendations regarding the structure of the menu:

The following guidelines apply to the structuring of web pages (e. g. for a professorship, a project or an department):

  • Clear structuring through content-defined groups for displayed content (e. g. central pages of a professorship or a project)
  • Clarity through flat hierarchy: a maximum of two levels in the navigation, a maximum of seven menu items per level
    • Level one of the menu hierarchy is always visible.
    • Level two is only displayed for the currently selected menu item on level one or if a page on level two has been navigated to.
    • a web page exists for each menu item.
  • One frame configuration (i.e. one config file) per defined group
  • Clear differentiation of content areas through consistent adherence to navigation rules:
    • within a group by menu entries in the navigation menu,
    • change of groups only via references in the text of the page
An example of a navigation with a maximum of two levels
To illustrate a meaningful structuring, a comparison with a book is used at this point.
  • A book is to be understood as a group of web pages that belong together in terms of content.
  • There can be a preface that does not have to be included in the table of contents. This could be, for example, an introductory page for a group of web pages. → Menu is then collapsed.

In a book there are

  • a table of contents, in which all chapters and sections are listed one below the other with the page number → content menu on the left for navigation to the web pages
  • chapters, the first level of navigation → the top page from a group of web pages
  • sections, the second level of navigation → the remaining web pages in the group
  • references, a reference/link appearing on a page in the text to another book which already describes the intended content in detail or contains further information

Presentation of the structuring using the example of a book: The table of contents of the book (→ menu of the website) is defined in a single frame definition (→ file config.inc).
Illustration of structuring using the example of a book

The book example used in the above image in analogous implementation in the design of the website:
Exemplary implementation of a table of contents

Mapping the contents to filenames

Once the structuring considerations are complete, the next step is to map the content to files and folders (directories). This also needs to be well thought out, because the file or folder names become part of the website address (URL). This document address may have to be printed later or announced on the phone.

  • Choose concise file names - all lower case letters or numbers, no special characters, umlauts, spaces or similar.
  • We recommend the file extension .html. PHP code is also interpreted in these files, so the file name does not have to end with .php.
  • Later renaming is time-consuming, as this requires changes in your documents and those of other (perhaps unknown) authors. Search engine results will then no longer be valid.
  • One project = one folder: In each folder create a "start file" index.html or index.php.
  • Store documents with special access rights in a separate folder → access control.
  • It is best to store images in a subfolder called images - this increases the overview.
Possible structure

Once these considerations have been made, you can proceed to implementation. The requirement is that you have write access to a folder in the web space.