Skip to main content

Aufbau einer Homepage

8. Aufbau und Gestaltung von Websites

Ganz egal, für welche der beiden beschriebenen Varianten Sie sich entscheiden – die Basis Ihres Erfolgs muss auf jeden Fall immer eine gut durchdachte und schön gestaltete Website sein. Deshalb gehe ich im Folgenden zunächst darauf ein, welchem grundsätzlichen Aufbau eine Website folgen sollte. Dabei kommen auch einige rechtliche Grundlagen zur Sprache, die Sie beachten müssen, wenn Sie Besitzer einer Website sind. Wie Sie Texte für das Internet erstellen und eine nutzerfreundliche Navigation einrichten, werden wir anschließend besprechen. Zu guter letzt werden wir noch ein besonders wichtiges Kapitel aufschlagen: die Wirkung der eingesetzten Farben.

Nun aber zurück zum Anfang – zum grundsätzlichen Aufbau einer Website.

a. Die wichtigsten Funktionen einer Website

Zusammengefasst sollte eine Website folgende Kriterien erfüllen:

übersichtlicher, hierarchischer Aufbau

ordentliche Seitenstruktur

Zielerreichung mit nur wenigen Klicks

leserorientierte Texte

Hervorhebung von für den Leser besonders wichtigen Informationen

Damit die Erfüllung dieser Kriterien erfüllt werden können, muss die Website zunächst einige grundlegende Elemente enthalten.

Hierzu gehören vor allem:

eine aussagekräftige Startseite

eine Seite mit tiefergehenden Informationen und Inhalten

eine Seite mit der Kontaktadresse oder einem Kontaktformular

ein Impressum

Diese Seiten können und sollten dann natürlich noch um weitere Funktionen erweitert werden, je nachdem, wie umfangreich die Seite werden soll und welche Ziele Sie damit verfolgen.

i. Selbsterklärende Struktur

Die Website sollte grundsätzlich so aufgebaut werden, dass der Besucher alles, wonach er sucht, sofort finden kann, ohne dass er lange darüber nachgrübeln muss. Geben Sie hierfür beispielsweise Schaltflächen und Links möglichst prägnante Bezeichnungen, sodass die Navigation leicht fällt.

Bedenken Sie: Wenn es Ihnen nicht gelingt, eine übersichtliche Struktur zu schaffen, werden Ihre Besucher die Seite wahrscheinlich bald wieder verlassen.

Deshalb sollten Sie die Inhalte Ihrer Website in verschiedene Bereiche einteilen. Das bedeutet, dass ein hierarchischer Aufbau wichtig ist. Gliedern Sie Ihre Inhalte in Kategorien, Themen und Unternehmen – je nachdem, wie umfangreich sie sind.

Wie Sie Ihre Website dann im Einzelnen gestalten, bleibt natürlich Ihnen selbst überlassen.

Beachten Sie dabei jedoch nach Möglichkeit folgende Regeln:

Wie auffällig eine Seite bzw. ein Bereich gestaltet wird, hängt davon ab, wie wichtig er im Vergleich zu anderen Informationen ist.

Vermeiden Sie zu viele Aspekte auf Ihrer Seite, die die Aufmerksamkeit des Besuchers fordern. Setzen Sie lieber einen bewussten Akzent auf die wichtigste Stelle auf der entsprechenden Seite.

Die eingesetzten Überschriften sollten sich in Bezug auf ihre Formatierung deutlich vom Rest des Textes abgegrenzt werden. Dies ist beispielsweise durch eine abweichende Schriftgröße oder –farbe zu erreichen.

ii. Weitere Funktionen

Je umfangreicher eine Seite wird, desto unübersichtlicher wird sie automatisch für den Leser. Deshalb sollten mit wachsender Datenmenge einige weitere Navigationshilfen für den Benutzer eingefügt werden. Die Grafik zeigt Ihnen einige gängige Benutzerhilfen:

Internet-Projekt-Seitenaufbau

Mehr über diese verschiedenen Funktionen erfahren Sie später im Kapitel „Bequemlichkeit durch Navigationshilfen“.

iii. Individuelle Funktionen

Je nach dem Verwendungszweck der Website können diese Funktionen nun um weitere, individuelle Funktionen erweitern. So kann man beispielsweise ein Forum einbauen, in dem sich die Besucher austauschen können. Ebenfalls möglich ist eine Chatfunktion für die schnellere und bequemere Kommunikation. Auch Shop-Systeme und passwortgeschützte Benutzerbereiche können eingerichtet werden.

b. Rechtliche Grundlagen

Jeder Websitebetreiber muss verschiedene rechtliche Grundlagen beachten. Eine besondere Bedeutung kommt zum einen der Impressumpflicht zu, zum anderen gilt auch dem Datenschutz ein besonderes Augenmerk.

i. Bereitstellen eines Impressums

Seit 2002 ist es für jeden Websitebesitzer Pflicht, ein Impressum (auch: Anbieterkennung) bereit zu halten.

Folgende Inhalte müssen enthalten sein:

Name, Anschrift, Telefonnummer und Email-Adresse des Inhabers

geschäftsführende Gesellschafter oder Vertretungsberechtigter, wenn der Betreiber keine natürliche Person ist

Registernummer des Handelsregisters u. ä.

Umsatzsteueridentifikationsnummer

zuständige Behörden (sofern eine aufsichtspflichtige Tätigkeit vorliegt)

ii. Datenschutz im Internet

Sobald ein Websitebesucher irgendwo auf der Website persönliche Daten hinterlässt, erfolgt eine Erfassung der personenbezogenen Daten. Gerade bei der Anmeldung für geschlossene Benutzerbereiche oder bei der Anmeldung zu einem Newsletter gibt man Namen, Emailadressen oder die Anschrift an.

Diese persönlichen Daten unterliegen dem Datenschutz nach BDSG, sodass der Websitebetreiber für einen ausreichenden Schutz dieser Daten zu sorgen hat. Gleichzeitig muss er dem Besucher Auskunft darüber erteilen, warum und in welchem Umfang die Daten gespeichert werden. Sollen diese an Dritte weitergegeben werden, muss dies unbedingt offen gelegt werden.

c. Die Bedeutung der Startseite

Die Startseite sollte in der Lage sein, auf einen Blick zu vermitteln, worum es auf der Website geht und welches Ziel sie verfolgt. Hierfür werden natürlich auch wieder einige gestalterische Elemente eingesetzt. Allerdings sollte man sich bei der Gestaltung immer einer Sache besonders bewusst sein: sie sollte möglichst vielen Besuchern gefallen. Dies bedeutet aber auch, dass man die eigenen Wünsche vielleicht auch mal ein wenig in den Hintergrund stellen will.

Rein aus gestalterischer Perspektive sollten Sie es wenigstens auf der Startseite vermeiden, lästige Pop-Ups einblenden zu lassen. Gewöhnlich enthalten diese ohnehin nur Werbung. Da der Besucher diese jedoch nicht selbst abgefragt hat und sie ihm ungefragt angezeigt wird, kann sie schnell abschreckend wirken. Zudem führt dies häufig dazu, dass die Besucher so genannte Pop-Up-Blocker einsetzen, damit ihnen diese Fenster nicht mehr angezeigt werden. Dies verhindert aber unter Umständen auch die Anzeige von eigenen, Informationen beinhaltenden Pop-Ups.

Wenn Sie Ihre Startseite mit Text füllen möchten, denken Sie daran, dass Sie diese auch bereits an den Keywords orientieren, die für Ihre Website und den von Ihnen verfolgten Zweck relevant sind. Wie Sie passende Keywords finden, zeigen wir Ihnen in Band 2 dieser Reihe „Arbeiten mit den Google Webmastertools“. Da die Suchmaschinen beim Einlesen Ihrer Website wie jeder andere Leser auch bei der Startseite beginnen, ist es besonders wichtig, dass diese die relevanten Begriffe enthält.

Übrigens eignet sich die Startseite – besonders deren Kopfbereich – ganz besonders gut, um den Slogan eines Unternehmens darzustellen. Hier auf der Startseite wird er von jedem Besucher gelesen. So erreichen Sie gezielt die gewünschte Klientel.

d. Die Texte für Ihre Website

Wenn Sie Artikel für eine Internetseite schreiben, sollten Sie sich stets dessen bewusst sein, dass hier andere Regeln anzuwenden sind als bei einem Text, der in den Printmedien erscheinen soll. Prinzipiell ist hier nämlich die Aufmerksamkeit des Lesers wesentlich geringer. Nur ein Bruchteil aller Besucher liest die Texte auch komplett. Ein „Überfliegen“ der Texte ist hier üblicher.

Gleichzeitig haben Sie allerdings auch die Möglichkeit, den Besucher über gestalterische Möglichkeiten in den Bann zu ziehen. So können passend gewählte Grafiken oder Videos die Aufmerksamkeit des Lesers erregen. Beim Einfügen von solchen Medien sollten Sie jedoch stets bedenken, dass es auch Besucher geben könnte, bei denen diese nicht angezeigt werden. In einem solchen Fall sollten alternative Texte erscheinen, die den Inhalt der Medien beschreiben.

i. Formalitäten

Um einen optisch ansprechenden Text für eine Website zu gestalten, sollte man sich außerdem an einige wichtige Formalien halten.

Hierzu gehören unter anderem:

keine Ausnutzung der gesamten Seitenbreite

Anzahl der Zeichen pro Zeile zwischen 26 und 70 Zeichen

Einsatz eines Teasers bei langen Texten (Teaser = zusammenfassender Einleitungstext)

aktivierender Schreibstil

persönliche Ansprache des Lesers („Sie“ oder „Du“)

Einsatz serifenloser Schriftarten (z. B. Arial, Tahoma, Verdana)

Schriftgröße mindestens 10 pt

Hervorhebungen mithilfe des Fettdrucks

Vermeidung von Unterstreichungen (Nutzung nur für Verweise/Links)

Ausrichtung der Texte an der linken Seite („Flattersatz“)

ii. Schreibstil

Auch der Schreibstil sollte bestimmten Kriterien folgen, um die perfekte Lesbarkeit zu gewährleisten. Stets sollte die Objektivität gewahrt bleiben. Orientieren Sie sich beim Schreiben an den 6 W’s – Was? Wer? Wo? Wann? Wie? Warum? Mithilfe dieser Fragen können Sie sicher gehen, dass Sie beim Schreiben keine wichtigen Informationen vergessen. Verdeutlichen Sie Ihre Aussagen mit passenden Beispielen.

Halten Sie folgende Stilelemente ein:

keine Modalwörter (z. B. „vielleicht“)

Vermeidung von substantivierten Verben (z. B. „Identifikation“ durch „identifizieren“ ersetzen)

kurze Sätze

keine Schachtelsätze

Vermeidung von Fremdwörtern

keine Rechtschreib-, Grammatik- oder Kommafehler

Verschiedene Umfragen in der Vergangenheit ergaben, dass die meisten Menschen eine Website, die mit vielen Rechtschreib- oder Grammatikfehlern gespickt ist, unprofessionell und unglaubwürdig wirkt. Erst weit abgeschlagen bemängeln die Benutzer danach zu selten aktualisierte Inhalte. Daran dürften Sie schon erkennen, wie wichtig eine gute Rechtschreibung ist.

e. Bequemlichkeit durch Navigationshilfen

Sitemap: Dieses vollständige Inhaltsverzeichnis verweist auf die entsprechenden Seiten.

Index: Diese Stichwortliste (analog zu Büchern) enthält häufig verwendete Begriffe und Verweise auf die entsprechenden Seiten.

Suche: Die stichwortbasierte Suche nach Inhalten auf der Website ist vor allem für Seiten mit sehr umfangreichem Datenmaterial von Interesse.

Hilfe: Wenn die Homepage bestimmte Benutzerfunktionen zur Verfügung stellt, sollte auch erklärt werden, wie diese richtig benutzt werden.

FAQ: Um unnötige Anfragen von Websitebesuchern zu vermeiden, sollte man die am häufigsten gestellten Fragen (Frequently Asked Questions) bereits im Voraus beantworten.

Hilfsnavigation: Bestimmte Menüpunkte (z. B. Impressum, Kontakt, Sitemap) werden in ein extra Menü verschoben, sodass sie sich von den fachlichen Informationen der Website abheben.

Home-Button: Mithilfe dieses Buttons, der auf jeder Seite eingeblendet bleibt, kommt man automatisch immer wieder zur Startseite zurück.

f. Bedeutung von Navigationshilfen

Jeder, der im Internet surft und Webseiten besucht, hat dabei andere Vorlieben und auch immer andere Gewohnheiten, jeder hat einen individuellen Weg. Der eher unerfahrene Nutzer wird sich an einer Sitemap, dem Inhaltsverzeichnis einer Seite, orientieren. Derjenige, der genau weiß, was er will, wird eine seiteninterne Suchfunktion zu schätzen wissen. Und die Nutzer, die ohne ein bestimmtes Ziel auf der Seite sind, werden nach etwas Interessantem suchen. Gute Navigationshilfen unterstützen jeden der unterschiedlichen Besuchertypen.

g. Was eine perfekte Navigationshilfe auf jeden Fall enthalten sollte:

einen Seitentitel

eine Seitenüberschrift

einen übersichtlichen Navigationspfad

ein Inhaltsverzeichnis (Sitemap)

einen Index

Suchfunktion

weiterführende Hilfen

Antworten auf häufig gestellte Fragen (FAQ)

i. Seitentitel und Seitenüberschrift

Der Titel einer Webseite wird immer im Fenster des Browsers angezeigt und ist – wenn man so will – der Name der Seite. Die Überschrift der Seite kennzeichnet ihren eigentlichen Inhalt, sie sollte sich deutlich hervorheben und über dem Inhaltsverzeichnis stehen. Der Hinweistext auf eine andere Webseite sollte dem Seitentitel und auch der Seitenüberschrift in Größe und Aufmachung gleichen.

ii. Navigationspfad

Um dem Nutzer den Besuch der Webseite so angenehm wie eben möglich zu machen, sollte es neben der eigentlichen Navigation auch einen so genannten Navigationspfad geben. Im Englischen heißt dieser Navigationspfad „Breadcrumb“, also Brotkrumenpfad, und ist eine Anspielung auf das Märchen von Hänsel und Gretel. Die beiden haben im Wald Brotkrumen verstreut, um den Rückweg nach Hause zu markieren. Ähnlich verhält es sich mit einem Navigationspfad. Der Besucher muss immer genau verfolgen können, woher er gekommen ist und wohin er gehen wird.

Einen Navigationspfad als Orientierungshilfe findet man meist auf sehr umfangreichen Webseiten, die mehrere Unterseiten haben, die nicht auf direktem Weg von der Startseite aus zu erreichen sind.

Der größte Vorteil eines Navigationspfades besteht darin, dass der Nutzer neben der Haupt- und Nebennavigation einen schnellen und effektiven Weg zum eigentlichen Ziel hat. Platziert wird der Navigationspfad am besten weit oben auf einer Webseite und er sollte auch einen entsprechenden Titel haben. Zum Beispiel: „Sie befinden sich hier…“ – das erleichtert dem Nutzer die Suche. Die Schriftgröße des Navigationspfades sollte kleiner sein als die eigentliche Schriftgröße der Webseite. Mithilfe des Navigationspfades findet der Nutzer nicht nur den Weg zu den Unterseiten, sondern auch, ähnlich wie Hänsel und Gretel, auch den Weg wieder zurück zur Startseite.

iii. Die Sitemap

Eine Sitemap ist nichts anderes als ein Inhaltsverzeichnis mit Hinweisen auf Unterseiten und Links. Sinnvoll ist eine Sitemap bei einer Webseite, die sehr umfangreich ist und wo die einzelnen Verweise auf interne und auch externe Seiten ohne Inhaltsangabe schnell unübersichtlich werden. Eine gute gemachte Sitemap sollte deutlich gekennzeichnet sein und in überschaubarer Form die einzelnen Elemente aufführen.

iv. Index

Bei einer umfangreichen Webseite ist es durchaus sinnvoll, neben der Sitemap auch einen Index, eine alphabetisch geordnete Stichwortliste anzubieten. Der Index dient einer noch besseren Orientierung.

v. Suchfunktion

Damit der Besucher einer Webseite auch das Gesuchte schnell und unkompliziert findet, ist eine Funktion zur internen Suche auf der Website in Listenform optimal.

vi. Antworten auf häufig gestellte Fragen (FAQ)

Frei übersetzt heißt FAQ (Frequently Asked Questions) häufig gestellte Fragen zu einer Webseite. Dabei ist es wichtig, dass sowohl die Fragen als auch die Antworten so knapp und genau formuliert sein sollten wie möglich. Sortiert ist diese Fragen-/Antwortliste nach der Häufigkeit der gestellten Fragen. Die Frage, die am häufigsten gestellt wurde, steht auf der Liste ganz oben.

vii. Die Bedienung der Computertastatur

Viele Menschen kommen aus unterschiedlichen Gründen nicht so gut mit einer Computermaus zurecht und bedienen ihren PC deshalb ausschließlich mit der Tastatur. Damit auch diese Form der PC-Bedienung ohne Probleme funktioniert, gibt es eine Tastatur-Steuerung. Innerhalb dieser Steuerung gibt es für die Tastatur Kurzbefehle, die so genannten Shortcuts, die eine Bedienung schneller machen und auch erleichtern.

Noch einfacher wird es, wenn neben den Shortcuts auch die Reihenfolge des Tabulators festgelegt ist. Beide Elemente helfen dabei, die Navigation über die Tastatur zu beschleunigen. Das Schwierige dabei ist nur, dass alle bekannten Browser unterschiedliche Kurzbefehl-Funktionen haben.

Im Einzelnen sehen die Tastenkombinationen für die Aktivierung der Shortcuts wie folgt aus:

Internet Explorer: Alt + Zahl + Enter

Firefox: Umschalt + Alt + Zahl

Opera: Umschalt + Esc + Zahl

Safari: Alt + Zahl

(Die Variable „Zahl“ steht in diesem Zusammenhang für die Nummer des Shortcuts.)

Erschwerend kommt hinzu, dass zum Beispiel bei Firefox alle Tasten gleichzeitig gedrückt werden müssen, bei Opera und Internet Explorer werden die ersten beiden Tasten zusammen und danach erst die dritte Taste gedrückt.


Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *