Ihr Auftritt im Internet
Wie sich Vereine im Internet präsentieren ...
Kapitel 4: Das Design
Ich habe es schon im vorherigen Kapitel erwähnt: Viel Inhalt hilft wenig, wenn man ihn nicht findet. "Design" sollte die Struktur eines Internetauftritts unterstützen und dient vor allem der Übersichtlichkeit. In diesem Kapitel geht es darum, wie man mit "billigen" Mitteln ein geeignetes Design realisiert. "Billig" deshalb, weil man bei jeder Grafik, die man verwendet, das Laden der Seite wieder ein wenig bremst. Eine einzige kleinere Grafik enthält wesentlich mehr Daten als ein mehrere Seiten langes Textdokument! Meine Botschaft soll sein: Auch mit minimalen grafischen Anteilen läßt sich ein ansprechendes und professionell wirkendes Erscheinungsbild realisieren.
Navigation
Die erste Entscheidung betrifft die Art der Navigation. Hier gibt es mittlerweile zahlreiche mehr oder weniger gelungene Vorgehensweisen. Viele Homepage-Besitzer versuchen krampfhaft die klassische Navigation mit Hilfe eines einfachen zentralen Menüs zu umgehen und probieren es mit dem Gegenteil: Ein ausgetüfteltes Navigationssystem mit Javascript oder Java. Dadurch ist die Bedienung jeder Webseite meist wieder komplett anders, was die meisten Surfer eher irritiert als bei der Suche nach Informationen unterstützt.
Die Art der Navigation hängt aber auch vom Umfang der geplanten Seiten ab. Im folgenden sind einmal die wichtigsten Navigationstechniken aufgelistet:
- klassisches zentrales Menü: Die Startseite besteht im Prinzip nur aus dem Menü, das auf die einzelnen Kapitel der Webseite verweist. Diese Art von Menü ist besonders gut geeignet für kleinere Webauftritte, bei denen ein Kapitel nur aus einer einzigen Seite besteht, so dass keine tief verschachtelten Navigationswege entstehen.
- klassisches frame-basiertes Menü: Das Menü wird in einen gesonderten Frame verlagert, so dass dies immer sichtbar bleibt und jede Seite von überall abrufbar ist. Diese Technik ist weit verbreitet, bietet sie doch viele Vorteile. Mittlerweile besitzt wohl auch jeder einen frame-tauglichen Browser.
- umfangreichere Menüsysteme: Um sich von anderen abzuheben oder große komplexe Seiten zu bewerkstelligen denken sich Homepage-Besitzer immer neue Möglichkeiten zur Navigation in Webseiten aus.
Es gibt eigentlich keinen Grund mehr, ellenlange oder hoch komplexe Menüs auszutüfteln, da eine intelligente Strukturierung eines Internetauftritts dies meist vermeiden kann. Die eigenen Vorlieben spielen eine große Rolle, doch sollten Sie folgende Punkte beachten:
- Gestalten Sie ein Menü möglichst übersichtlich und einfach bedienbar.
- Bedenken Sie, dass nicht jeder Besucher die neuesten Techniken und eine Bildschirmauflösung von mehr als 800x600 besitzt.
- Das Starten von Java oder anderen neuen Technologien kostet meist Zeit
- Hochauflösende Grafiken und dynamische Menüs mögen zwar schick sein, vergrämen aber viele Besucher, die lange auf das Erscheinen dieser Menüs warten müssen. Geschwindigkeit ist im Netz immer noch oberstes Gebot.
Versuchen Sie also ein recht einfaches Menü mit geringen grafischen Mitteln oder am Besten rein texturell zu realisieren.
Frames
Wie bereits oben erwähnt hat sich der Hauptkritikpunkt an der Frametechnik mittlerweile relativiert: Es gibt kaum noch einen Browser, der diese Technik nicht beherrscht. Dagegen bieten Frames immense Vorteile: Bestimmte Elemente einer Webseite, die sich auf jeder Seite wiederholen sollen wie zum Beispiel Kopf- oder Fußzeilen sowie Navigationen, lassen sich in separaten Frames leicht realisieren. Dadurch müssen diese Bestandteile einer Seite weder jedesmal neu geladen noch für jede Seite neu erstellt werden.
Aber auch bei der Verwendung der Frametechnik sind ein paar wichtige Punkte zu beachten:
- Vermeiden Sie Scrollbalken, wo es nicht nötig ist. Dazu sollten Sie entsprechende Frameseiten so layouten, dass bei einer Auflösung von 800x600 erst keine solche unschönen Scrollbalken entstehen: Kürzen Sie Menüs, verkleinern Sie Kopf- und Fußzeilen.
- Kopf- und Fußzeilen, sowie Navigationen sind auch meist statische Elemente einer Seite, deren Ausdehnung feststeht. Verhindern Sie daher das Erscheinen von Scrollbalken und die Möglichkeit die Frames mit der Maus zu vergrößern oder verkleinern mit den entsprechenden HTML-Parametern der FRAME-Tags.
- Meist möchte man die Frames nicht so offensichtlich in den Vordergrund treten lassen. Die automatisch erscheinenden Balken zwischen den Frames sollten Sie daher verschwinden lassen. Eine professionelle Seite versucht, die Seite nach außen hin als eine Einheit erscheinen zu lassen, indem die Grenzen zwischen den Frames fließend sind.
Seitenlayout
Das Seitenlayout ist eines der wichtigsten Punkte, über das sich viel zu wenige WebMaster wirklich Gedanken machen. Das fängt bei den Farben für Hyperlinks an und hört bei der Seitenaufteilung noch lange nicht auf: Allgemeine Punkte, die Sie beachten sollte sind:
- Bemühen Sie sich um ein einheitliches Bild aller Seiten
- Benutzen Sie überall den gleichen Body-Tag, so dass die Text- und Hintergrundfarben identisch sind.
- Verwenden Sie für Textabschnitte immer die gleiche Schriftformatierung.
- Versuchen Sie auch Tabellen einheitlich zu formatieren.
- Vermeiden Sie unnötig große Lücken auf der Seite
- Text läßt sich mit dem ALIGN-Parameter wunderbar um Grafiken herum platzieren.
- Wählen sie angemessen kleine Fotos und Grafiken: Als Richtlinie empfehle ich eine maximale Seitenbreite von 250 Pixel (in der Höhe oder Breite, je nachdem). Je nach Bild kann es aber auch wesentlich kleiner sein.
Sie sollten sich gleich zu Anfang genaue Gedanken machen, wie Ihre einzelnen Seiten erscheinen sollen.
Farben
Legen Sie vorher fest, mit welchen Farben Sie Ihre Seiten gestalten wollen.
- Hintergrundfarbe
- Normale Schrift
- Farbe eines Links
- Die Farbe einer Überschrift
- Hervorgehobener Text
Egal ob bunt, oder mit nur wenigen Farben: Wichtig ist eine einheitliche Linie. Es bietet es sich geradezu an, die Vereinsfarben für das Layout zu verwenden. Doch gerade hier wird vieles völlig falsch angefangen. Gelb/Blau Pottwal währe schlecht beraten einen gelben Hintergrund mit blauer Schrift zu wählen und Grün/Weiß Entenhausen fährt mit weiß auf grün auch nicht besser. Geeigneter ist die Verwendung der Vereinsfarben in Überschriften oder in der Navigation. Die Lesbarkeit (erst recht beim Ausdruck) vermindert sich sehr stark, wenn man vom Ideal (schwarz auf weiß) abweicht.
Trotz 16 Millionen Farben, die Ihnen theoretisch zur Verfügung stehen, gibt es nur wenige, die im Internet auf jedem Computer auch gleich aussehen. Viele Zwischenfarben werden den Grundfarben im Netz nur angeglichen, so dass eine Kombination aus Grafik und Hintergrundfarbe auf dem einen Computer zwar ansehnlich und einheitlich aussieht, auf dem anderen aber gerade in den Augen beißt.
Hier finden Sie die Farbpalette, die Sie ohne Probleme verwenden können:
Farbpalette
Schrift, Größe und Schnitte
Wie bei den Farben gilt auch hier: Ein zu großes Durcheinander an verschiedenen Schriftarten, -größen und -schnitten (fett, kursiv, unterstrichen) führt zu einer unansehnlichen und unübersichtlichen Webseite. Legen Sie auf wenige fest und beachten Sie dabei folgende Punkte:
- Verschiedene Betriebssystem unterstützen verschiedene Schriftarten. Führen Sie also alle Schriftarten der Betriebssysteme auf, damit jeder Browser auch eine passende Schriftart findet.
- Unterstreichen Sie Text lieber nicht, da die Unterstreichung in der Regel bereits einen Hyperlink anzeigt.
- Definieren Sie sich für jeden Zweck genaue Schriftformatierungen, ähnlich wie bei den Vorlagen in Textverarbeitungen.
Beispiel:
- normaler Text (sanserif, schwarz, Größe 2)
- wichtiger Text (sanserif, fett, schwarz, Größe 2)
- Überschrift (sanserif, fett, blau, Größe 3)
Grafiken und Fotos
...