Die Zeiten ändern sich schnell

Dieser Artikel ist älter als 6 Jahre — im Internet eine sehr lange Zeit. Eventuell ist der Inhalt beziehungsweise sind die getroffenen Aussagen nicht mehr aktuell.

Strukturierung von Webseiten

Was unterscheidet heute eigentlich noch die ganzen Websites im Internet? Natürlich der Inhalt, und das Aussehen. Klar dem ist sicher so. Doch die Struktur der meisten Seiten und damit auch gewisser Inhaltselemente ist doch immer wieder gleich. So finden wir auf allen Seiten einen Titel, eine Navigation, ein Logo, ein Copyright-Hinweis, etc. Schauen wir uns einmal genauer an, was Webseiten heutzutage gemeinsam haben.

Wie können Webseiten strukturiert werden?

Im Rahmen meines Projektes zur Neugestaltung des Layouts meiner Websites und der Erstellung zweier Webpräsenzen [1] für Freunde von mir, kam die Frage auf Welche Elemente müssen oder sollten auf aktuellen Webseiten vorhanden sein?

Gerade in Hinblick auf die Webseiten-Gestaltung mit YAML und auf die Lektüre der little boxes kam mir daher die Idee, wenn immer wieder die gleichen Elemente auf Webseiten verwendet werden, ob es nicht möglich sei, die Generierung von Webseiten zu vereinheitlichen und als Baukastensystem zu erstellen. Dazu müssen aber erst die Elemente definiert werden und einige Ausgangsbedingungen geklärt werden. Viele Websites werden heute mit Hilfe von CMS oder Blog-Systemen erstellt. Diese möchte ich auch berücksichtigen.

Wie werde ich vorgehen: Ich möchte zunächst eine Grundstruktur (in HTML) erstellen. Dabei sollen alle Struktur- und Inhaltselemente bereits berücksichtigt werden, die für die Gestaltung einer modernen Standardwebsite heute benötigt werden. Diesen strukturellen Aufbau erläutere ich in dem vorliegenden Artikel. In weiteren Artikeln wird dann beschrieben, wie aus dieser Grundlage eine standardisierte Vorlage erstellt werden kann, die mithilfe von CSS für den Einsatz im Internet ein Layoutdesign erhält und entsprechend formatiert wird. Weiter soll dann ein komplettes und komplexes Template erstellt werden, welches sich flexibel für weitere Websites verwenden lassen kann.

Doch zunächst zurück zur Grundstruktur einer Webseite. Und zwar betrachten wir da nur den sichtbaren Teil, also den Teil, der im HTML-Dokument zwischen den <body>…</body>-Tags notiert wird. Wenn also im folgenden vom Kopfbereich einer Webseite gesprochen wird, ist dies nicht zu verwechseln mit dem Kopfbereich des HTML-Dokuments, der zwischen <head>…</head> notiert wird, sondern weist lediglich auf einen speziellen Bereich des gesamten sichtbaren Bereich hin.

Schauen wir uns also die einzelnen Elemente innerhalb des sichtbaren Bereichs an. Jede Webseite ist nach meiner Auffassung mehr oder weniger gleich bzw. ähnlich aufgebaut. Beim Betrachten der einzelnen Elemente soll dabei zwischen Struktur- und Inhaltselementen unterschieden werden.

Die einzelnen Elemente werden dabei durch das (X)HTML Strukturelemente <div> mit entsprechenden id="" oder class="" Attributen gekennzeichnet. Zu berücksichtigen ist dies zunächst einmal für die Versionen HTML 4.01 und XHTML 1.*. Bei Verwendung des aktuellen HTML 5 Standards sind weitreichendere Möglichkeiten zur Strukturierung der Webseite gegeben. Diese werde ich in einem weiteren Artikel zusätzlich erläutern.[2]

Grundstruktur einer Webseite

Grundstruktur einer Webseite

Strukturelemente

Meine bisherigen Vorlagen beruhen meist auf Standardvorlagen des YAML-Frameworks oder wurden mit dem YAML-Builder erstellt. Die Struktur dieser Seiten soll als Ausgangspunkt betrachtet werden.

Grob lassen sich alle Webseiten zunächst einmal in drei maßgebliche Bereiche aufteilen: Kopfbereich[3], Hauptinhalt, Fußbereich. Dabei nimmt der Kopfbereich weitere Elemente, wie die Top-Navigation, den Titel der Website und -untertitel, gegebenenfalls ein Logo und die Hauptnavigation auf. Der Fußbereich hält allgemein gültige Informationen wie zum Beispiel einen Copyright-Hinweis oder eine Wiederholung des Navigationsbereiches bereit. Der Hauptbereich enthält die eigentlichen Inhalte der einzelnen Webseiten, die gleich noch genauer zu betrachten sind.

Betrachtung der einzelnen Bereiche

Der Kopfbereich

Der Kopfbereich wird durch die Tags <div id="header" role="banner">…</div> begrenzt.[4] Innerhalb dieses Bereiches werden zwei weitere <div>-Container erstellt: <div id="logo">…</div> und <div id="site_title">. Ersterer nimmt das Logo der Website in Form eines <img>-Tags auf. Der zweite den Titel der Website innerhalb eines <h1>-Tags mit der ID site_title.

Kopfbereich

Kopfbereich

Der Fußbereich

Der Fußbereich wird durch die Tags <div id="footer" role="contentinfo">…</div> notiert. Er nimmt ein weiteres <div>-Tag auf, in dem die Hauptnavigation als Endnavigation in einfacher Layoutform wiederholt wird (<div id="end_nav" role="navigation">…</div>). Ebenso habe ich mich dazu entschieden drei <p>-Tags einzuschließen, die die Informationen über das Copyright, das Layoutdesign und die Layoutvorlage (Framework) beinhalten. Diese werden nicht nochmals gesondert durch ein <div>-Tag eingeschlossen.

Fußbereich

Fußbereich

Der Hauptinhaltsbereich

Der eigentliche Inhalt wird zwischen die Tags <div id="main">…</div> gesetzt. In diesem Bereich werden nun die eigentliche Inhalte der Webseite gestaltet. Doch welche Elemente sind dies? Wir wollen nun die ersten Überlegungen anstrengen, welche Standardelemente im Hauptinhaltsbereich einer Webseite enthalten sein müssen. Dabei beschränken wir uns jedoch weiterhin zunächst nur auf die Strukturelemente.

Sicherlich kann man festhalten, dass alle Seiten einer Website eine Überschrift, also den Titel der jeweiligen Webseite beinhalten, dieser unterscheidet sich im Allgemeinen vom Titel der Website. Selten wird der Inhalt über die ganze Breite des Bildschirms dargestellt. Häufiger wird versucht ein Spaltenlayout mit zwei oder drei Spalten zu erzeugen. Dies bedeutet wir haben ein <h1>-Tag dem über die ID der Wert des id="page-title" zugewiesen wird (<h1 id="page_title">…</h1>). Ebenso werden drei weitere <div>-Tags notiert, die die drei Spalten darstellen sollen (dies wird über spezielle Formatierung mit CSS erreicht). Die <div>-Tags erhalten die IDs „left_column“, „middle_column“ und „right_column“. Wird nur ein zweispaltiges Layout verwendet, fällt die ID „middle_column“ weg (<div id="left_column">...</div>, <div id="middle_column">...</div>, <div id="right_column">...</div>). Die IDs müssen so nicht unbedingt benannt werden, sondern könnten sich auch an einen konkreten Inhalt anpassen. Denkbar wäre zum Beispiel die IDs „side_navigation“, „content“ und „sidebar“. Ich werde hier zunächst die ersteren nehmen, da sie inhaltlich neutraler sind. Die Bezeichnungen der IDs werden wir uns in konkreten Layouts genauer betrachten.

Hauptbereich

Hauptbereich

Weitere Strukturelemente

Der Aufbau unserer Seite steht nun grundlegend fest und wir könnten anfangen unsere Inhalte einzugeben. Schaut man sich auf modernen Webseiten jedoch um, stellt man fest, dass weitere Strukturelemente sich häufig wiederholen. Fangen wir wieder oben an:

Top-Navigation

Meist noch vor dem Kopfbereich oder als erstes Element des Kopfbereiches wird die sogenannte Top-Navigation notiert (<div id="topnav" role="contentinfo">...</div>). Sie enthält Links, zu wichtigen Informationen für die Besucher, die nicht direkt den Inhalt oder das Thema der Website betreffen. Dazu zählen zum Beispiel das Impressum, eine Kontaktseite oder auch die Seite für die Anmeldung eines geschützten Bereiches für Mitglieder oder Administratoren. Diese Links sollten sich ebenfalls in der Endnavigation wieder finden.
Sollten Sie eine Webseite in mehreren Sprachen anbieten, so kann die Top-Navigation auch einen Sprachschalter bzw. die Links zu den jeweiligen Startseiten der unterschiedlichen Sprachen aufnahmen.

Hauptnavigation

Der Hauptnavigationsbereich, der unumstritten zum Kopfbereich einer Webseite gehört, liegt normalerweise ebenso innerhalb des umschließenden <div>-Tags. Häufig wird jedoch aufgrund spezieller Layoutgestaltung dieser Bereich auch außerhalb des eigentlichen <div>-Tags für den Kopfbereich notiert. Dabei wird es meistens im Anschluss an <div id="header">…</div> notiert, er kann jedoch auch davor liegen.

Teaser

Innerhalb des Hauptinhaltsbereiches wird oft, noch bevor die einzelnen Spalten beginnen, ein sogenannter Teaser-Bereich eingefügt. Dieser kann kurze Abrisse der aktuellen Neuigkeiten mit entsprechenden Links zu den einzelnen Artikeln, oder Linklisten zu Unterthemen der eigentlichen Hauptbereiche enthalten.

Extended Bereich

Zwischen dem Hauptinhaltsbereich und dem Fußbereich wird oftmals noch ein sogenannter Zusatzbereich eingeschoben (<div id="extended" role="contentinfo">…</div>). Dieser nimmt häufig zusätzliche Informationen zur Präsenz auf. Hier kann zum Beispiel eine sogenannte Tag-Cloud Platz finden oder Links zu entsprechenden RSS-Feeds oder weiterführenden oder interessanten Webseiten.

Gesamtstruktur

Mit den nun bereits gesammelten Strukturelementen haben wir eine umfangreiche Webseite gestaltet, die uns zahlreiche Möglichkeiten eröffnet. Selbstverständlich hat die bis jetzt erstellte Seite noch kein Layout, stellt also nur die Struktur, das Grundgerüst, jeder Webseite dar. Um die Gesamtstruktur zu vervollständigen möchte ich prüfen, ob es weitere Elemente gibt, die auf modernen Websites immer wieder auftauchen. Sie müssen zwar nicht unbedingt struktureller Art sein, sondern bedienen eher übliche Inhalte.

DOM

DOM

Inhaltselemente

Betrachtung der einzelnen Inhaltselemente

Suchfeld

Ein Suchfeld ist heute innerhalb der gängigen Websites und auf allen Webseiten fast immer zu finden. Meistens werden sie von den verwendeten Blogsystemen oder dem CMS zur Verfügung gestellt. Wichtig ist dabei, dass das Suchfeld nur Verwendung finden sollte, wenn man auf seiner Website auch eine Suche implementiert hat. Die Position des Suchfeldes ist sehr unterschiedlich. Ich bevorzuge das Suchfeld innerhalb des Kopfbereiches zu setzen, so dass es schnell gefunden werden kann. Eine andere häufige Variante ist das Platzieren innerhalb einer der Spalten, die für die Side-Navigation oder die Sidebar verwendet werden.

<div id="search" role="search">
<form id="suche" method="post" action="suche.php">
<label for="q">Finden</label>
<input name="q" id="q" size="20" type="text">
<input class="hideme" value="Los!" id="submit" name="submit" type="submit">
</form>
</div>

Breadcrumb-Navigation

Die „Brotkrumen“-Navigation soll dem Besucher einer Webseite anzeigen, wo er sich gerade innerhalb der Website befindet. Dies ist vor allem für komplexere Websites hilfreich, die eine Vielzahl von Bereichen, Kapiteln und untergeordneten Seiten aufweisen. Die Breadcrumb-Navigation kann entweder innerhalb des Kopfbereiches am Ende oder innerhalb des Hauptbereiches ganz am Anfang gesetzt werden.

<div id="breadcrumb" role="breadcrumb">
Sie sind hier:
<ul>
<li>Kapitel</li>
<li>Unterkapitel</li>
<li>Bereich</li>
<li>Seite</li>
</ul>
</div>

Side-Navigation

Innerhalb eines der Hauptbereiche eines Webauftritts, der über die Hauptnavigation erreichbar ist, können weitere untergeordnete Seiten vorhanden sein. Diese einzelnen Seiten werden dann meist über eine sogenannte Side-Navigation angesteuert. Die Side-Navigation wird normalerweise in einer der (äußeren) Spalten des Hauptinhaltsbereiches gefunden werden (<div id="side_nav" role="navigation">…</div>).

Skiplink Navigation

Die Skiplink Navigation ist normalerweise auf Webseiten nicht zusehen. Eine Skiplink Navigation ist hauptsächlich für Nutzer von Screenreadern. Da diese keine formatierte Darstellung sehen, sondern nur die lineare Inhalte wiedergeben können, wird mit Hilfe der Skiplink Navigation ermöglicht einzelne Bereiche direkt anzuspringen. Für den Standardnutzer einer Webseite, werden sie meistens mit Hilfe von CSS Styles ausgeblendet. Ich stelle normalerweise Skiplinks für die Bereiche Navigation, eigentlicher Inhalt und Zusatzinformationen bereit. Die Skiplinks werden als erstes nach dem <body>-Tag notiert. Sie werden nicht nochmals zusätzlich in ein <div>Tag gesetzt, da sie sowieso im Layout nicht sichtbar sind. Das umgebende <ul>Tag erhält jedoch als ID den Wert „skiplinks“.

<ul id="skiplinks">
<li><a class="skip" href="#nav">Direkt zur Navigation springen (Drücken Sie "Return").</a></li>
<li><a class="skip" href="#main">Direkt zum Inhalt springen (Drücken Sie "Return").</a></li>
<li><a class="skip" href="#extended">Direkt zum Zusatzinhalt springen (Drücken Sie "Return").</a></li>
</ul>

Weitere Inhaltselemente

Neben diesen gängigen Inhalten gibt es auch Inhalte, die zwar öfters anzutreffen sind, jedoch nicht unbedingt notwendig sind.

Following

Gerade auf Blogs wird oft angeboten neben der eigentlichen Webseite entweder die RSS-Feeds zu abonnieren oder den aktuellen News bei Facebook, Google+, Twitter und anderen Social Networks zu folgen. Diese werden meist in Form von ungeordneten Aufzählungslisten dargestellt, die in den einzelnen Listenelementen neben dem Link eine Grafik mit den bekannten Logos der einzelnen Dienste aufweist.

Tag Cloud

Die Tag-Cloud (zu deutsch: Schlagwort-Wolke) ist eine ungeordnete Liste der Sclagwörter, die am häufigsten innerhalb einer Website Verwendung finden. Das Besondere daran ist, dass die Liste nicht Eintrag-für-Eintrag untereinander steht, sondern fortlaufend dargestellt wird. Dabei werden Schlagwörter je nach Anzahl ihrer Verwendung in unterschiedlichen Größen dargestellt. Tag-Clouds sind in heutigen Blogs üblich.

Aktuelle Kommentare

Dieser Bereich wird ausschließlich auf Blogs geführt. Da aber heutzutage eine Vielzahl von Webseiten in Blogform vorliegen, soll es hier Erwähnung finden. Aktuelle Kommentare ist eine ungeordnete Liste mit einer zu definierenden Anzahl der letzten Kommentare zu unterschiedlichen Artikeln der Website.

Ergebnisse

Es ist eindeutig, dass sich immer gleiche oder zumindest ähnliche Elemente sowohl struktureller als auch inhaltlicher Art auf modernen Webseiten heutzutage wiederholen.
Die oben genannten Elemente sollen hier nochmals im Überblick aufgelistet werden (die Reihenfolge spiegelt meine persönliche Vorliebe der Anordnung wider).

  • Kopfbereich
    • Skiplinks
    • Suche
    • Top Navigation
    • Logo
    • Titel der Website (ggf. Untertitel)
    • Hauptnavigation
  • Inhaltsbereich
    • Breadcrumb
    • Titel der Webseite
    • Teaser
    • 2-3 Spaltenelemente
      • Side-Navigation
      • Aktuelle Kommentare
    • Zusatzbereich (Extended)
      • Following
      • Tag-Cloud
  • Fußbereich
    • Endnavigation
    • Copyright, Layout, Framework(s)

Aussicht

Wie geht es nun weiter? Nachdem wir nun die Struktur unserer Webseite entwickelt haben, geht es darum die Feinheiten der Struktur herauszuarbeiten. Dabei werde ich im folgenden Artikel beschreiben, wie ich nun auf diese Struktur ein passendes Stylsheet erstelle, so dass neben der Struktur auch ein modernes Aussehen also Layout erfolgt. Hier werde ich mir das YAML-Framework zu nutzen machen. Gegebenenfalls sind in diesem Schritt nochmals Anpassungen an der Struktur zu machen. Ist das erfolgt, habe ich eine Vorlage (Template), dass ich für meine weiteren Websites verwenden kann.

Fußnoten

  1. Zur Erläuterung der Unterschiede Website, Webpage, Homepage siehe Artikel Website, Webpage, Homepage oder Internetpräsenz? (zurück zum Text)
  2. Der Artikel existiert noch nicht. (zurück zum Text)
  3. Der Kopfbereich sollte nicht mit dem Kopfbereich des HTML-Dokumentes also dem Bereich zwischen <head> und </head> verwechselt werden. (zurück zum Text)
  4. Das Attribut role="" erkläre ich an anderer Stelle. Der Artikel existiert jedoch noch nicht. (zurück zum Text)
Marc Koschel

Über Marc Koschel

Fotograf • Musikhörer • Blogger • Denker • Kaffeetrinker
— Marc Koschel lebt bei Mannheim und bloggt seit 2001 über digitale Workflows

Dieser Unterhaltung fehlt Ihre Stimme