Der typische Besucher: Durchschnittlich bleiben Besucher erstmal nicht länger als drei Sekunden auf unserer Seite. Wenn der Besucher danach nichts findet, dass ihm interessiert oder die Seite ganz einfach noch nicht geladen ist, dann wechselt er die Seite. Du glaubst, das gibt es nicht? Dann beobachte dich selbst: Ziemlich jeder verfällt in dieses Muster. Was können wir dagegen tun?
Heute geht es, wie die Überschrift schon sagt, um Struktur innerhalb unserer Webseite. Nicht nur unserer Startseite, sondern alles, alles was auf dem Server liegt. Dies ist vor allem wichtig, wenn wir große Projekte umsetzen möchten, da es schnell unaufgeräumt werden kann.
Das Beste: Wenn wir eine übersichtliche Verzeichnisstruktur erstellen. Dies hilft uns, Inhalte nicht nur Seitenweise zu strukturieren, sondern auch die globale Webseite.
Aus unserer erarbeiteten Struktur (auf dem vorherigen Beitrag) erstellen wir die „Verzeichnisstruktur“. Dabei müssen wir auch bedenken, dass wir diese so gestalten sollen, dass jederzeit neue Inhalte dazukommen können. (Da wir unsere Seite ja nicht für immer gleich lassen und diese durchgehend optimieren/erweitern werden.)
Flache Verzeichnisstruktur.
Jede Webseite liegt ja auf einem Webserver. Dieser hat für jede Domain ein „Stammverzeichnis“. Beispielsweise für „domii.net". Sobald wir diese aufrufen gelangen wir auf die Datei „index.html“.
Wenn man also auf domii.net/index.html befindet man sich auf der Startseite. Danach kann man sich im Menü weiter navigieren zu den verschiedenen Themen. Natürlich gibt es für viele Themen weitere Unterpunkte. Diese Unterseiten können danach auf der URL domii.net/Inhalt1/unterseite1/ erreicht werden. Oder aber auch domii.net/inhalt2/seite1.
Diese Art von Struktur hört sich schonmal sehr gut an.
Welche Schwachstellen hat dieses Verzeichnisstruktur?
Dafür stellen wir uns für, dass wir den Inhalt2 beispielsweise dem Inhalt6 aus irgendeinem Grund unterordnen müssen, da es dort vom Thema/Inhalt her besser passt.
Dafür legen wir bei Inhalt6 noch ein Unterverzeichnis an. Und so verschachteln wir unsere Themen immer weiter. Gehen wir davon aus, dass wir im Menü aber keine „Sub-Navigation“ haben, also keine Unterpunkte im Menü sehen.
Um also zu Inhalt2 zu kommen, müssen wir erst auf Inhalt6 gehen und haben dann die Möglichkeit zum Inhalt2 und dessen Unterpunkte zu gelangen. Dies kann schnell unübersichtlich werden, also ACHTUNG.
Bei der Planung sollte man also beachten, dass wirklich ausreichend Platz für alle Menüpunkte vorhanden ist. Nachdem wir unsere Inhalte ausgearbeitet haben und wir wissen, welche Inhalte dort sein sollen, brauchen wir ein Verzeichnis, indem diese Seite aufscheinen.
Dabei sollten wir beachten, dass wir eine flache Verzeichnisstruktur haben. Es sollten alle Inhalte für den Besucher gut erkennbar sein. Wir haben ja nur ca. 3 Sekunden Zeit, um den Besucher diese zu zeigen. Sollte da etwas für ihn dabei sein, wird er sicherlich länger verbleiben.
Unsere Struktur
Um dir die Verzeichnisstruktur besser zu erklären, hab ich für unser „erste-Webseite“ mal eine Verzeichnisstruktur erstellt.
Das Bild ist zwar nicht das allerschönste, ich hoffe aber trotzdem, dass es anschaulich ist.
Meine kurze Erklärung:
Wir sehen links das Hauptverzeichnis auf dem Webserver. Da habe ich mal ein Schema der Ordner. Im Hauptverzeichnis haben wir folgende Ordner/Dateien:
| Bedeutung | |
|---|---|
| index.html | Startseite unserer Webseite |
| src | src = source = Quelle. Dies ist ein Ordner für unsere Dateien, wie Bilder/Grafiken, CSS-Dateien, Javaskript-Dateien (Was das ist kommt später) |
| Portfolio | Ein Ordner für unsere Inhalte. Beispielhaft eben für Portfolio/Galerie. Er muss aber nicht vorhanden sein. |
| Rechtliches | Ordner für mpressum, Kontakt und eventuell AGB's. Damit unser Impressum dann auf domii.net/rechtliches/kontakt.html zu finden ist. |
| Themen | Ordner für weitere Inhalte. Natürlich können wir alle Ordner anders nennen. Ein Beispiel für eine URL wäre dann: domii.net/themen/steemit.html |
Natürlich können wir alle Ordner auch anders nennen. Damit wollte ich dir nur eine Richtung zeigen, wie ich meine "erste-Webseite" organisieren würde.
Der src-Ordner
| Bedeutung | |
|---|---|
| img | Ablage für unsere Bilder und Grafiken. Hier können wir alle Bilder abspeichern. In unseren HTML-Seiten können wir diese dann jederzeit einbinden. |
| js | Ablage für unsere JavaSkript-Dateien. Natürlich haben wir bisher noch kein JavaSkript gebraucht, dies werden wir erst in späteren Beiträgen lernen. Trotzdem können wir uns schon einen Platz reservieren und den Ordner schonmal anlegen. |
| style | Ablage für unsere CSS-Dateien. Hier kommt unsere style.css-Datei hin. Wenn wir mehrere HTML-Dateien haben, können wir jedes Mal auf diese Datei verweisen. |
Für viele Webdesigner ist die Verzeichnisstruktur nicht sehr wichtig. Ich jedoch halte sehr viel davon. Wenn man sich erstmal eine zurechtlegt hat man es später viel einfacher. Die Seite ist dadurch später viel leichter erweiterbar und für Fremde (oder für den "Autor" selbst) sehr leichter nachvollziehbar.
Mehr Wissen!
Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas Interessantes für dich dabei:
- Planung und Zielgruppe. - Internet-Basics #12
- Farben: Was muss man dabei beachten? - Internet-Basics #11
- HTML&CSS: Bilder - Internet-Basics #10
- HTML5-Elemente: header, nav, footer uvm. ... - Internet-Basics #9
- HTML: DIV und SPAN-Elemente - Internet-Basics #8
Meine Schlussworte: Wie immer würde ich mich riesig über Feedback in einem Kommentar freuen.
Ich hoffe natürlich, dass dir mein Beitrag gefallen hat. Leider habe ich letztens eine Rückmeldung bekommen, dass ich mehr Praxis vom "Webdesign" machen soll. Keine Sorge, es wird sehr bald wieder mehr davon geben. Ich wollte heute einfach zeigen, wie wichtig die Verzeichnisstruktur ist.
DANKE!