Seitengestaltung            

Der Bildschirm als Informationsträger unterscheidet sich vom klassischen Printmedium in vielerlei Hinsicht. Deshalb sollte man sich vor der Gestaltung von Webseiten über diese Unterschiede und die daraus ableitbaren Konsequenzen für die Seitengestaltung Gedanken machen.

Text

Bei gedruckten Texten dominiert Schwarz auf dem weißen Hintergrund. Auf dem Bildschirm überstrahlt das Weiß des Hintergrundes die Zeichen (starke Kontraste). Dies wird verschärft durch die (schlechte) Pixelauflösung der Zeichen auf dem Bildschirm, der in der Regel nur 72 Bildpunkte pro Inch darstellen kann, während ein gedruckter Text eine Auflösung von 1200 bis 2400 Bildpunkte pro Inch hat. Die Lesbarkeit von Texten am Bildschirm wird zudem erschwert aufgrund der Entfernung zwischen Auge und Bildschirm.

Aus den beschriebenen Unterschieden lassen sich folgende Anforderungen für die Textgestaltung am Bildschirm ableiten:

Harte Schwarz-weiß-Kontraste sollten vermieden werden. Dies kann über abgetönte Hintergründe oder eine etwas hellere Schriftfarbe erreicht werden. Der Kontrast darf dabei allerdings nicht verloren gehen.

Aufgrund der Entfernung zwischen Auge und Bildschirm sollten größere Schriftgrade als bei konventionellen Lesetexten gewählt werden, wo man von 8 - 12 pt ausgeht.

Hypertext

Traditionelle Texte haben einen linearen Aufbau. Der Lesevorgang gestaltet sich sequentiell, lediglich der Sprung des Auges zu einer Fußnote hebt dessen Linearität auf. In Hypertextsystemen werden Daten in kleine Einheiten zerlegt, die über Links miteinander verknüpft sind. Links können ein Navigieren durch die hierarchische Struktur des Hypertextdokuments ermöglichen (Abb. 1, vor, zurück, Anfang) oder Querverweise darstellen, die auf einer inhaltlichen Beziehung zwischen den Seiten beruhen (Abb. 2).
 

Aus all dem resultiert eine nichtlineare Textstruktur. LeserInnen können mit Hilfe der Hyperlinks/Querverweise ihre eigenen Wege gehen.

Bei der Erstellung von Texten für die Bildschirmdarstellung genügt es also nicht, umfangreiche Lesetexte einfach nach HTML zu konvertieren. Vielmehr müssen große Datenmengen strukturiert, in Module zerlegt, Querverbindungen gefunden und Hierarchien gebildet werden. Eine gute Hypertextseite bildet eine Einheit, die einfach durchgearbeitet werden kann. Wenn möglich sollten logisch zusammenhängende Informationen so segmentiert werden, daß sie in jeweils einen Bildschirm passen (idealerweise), mehr als zwei bis drei Bildschirme sollten pro Einheit nicht erstellt werden.

Nur so bleibt die Übersicht am Bildschirm erhalten, ein Scrollen über viele Bildschirmseiten kann ebenso wie der Ausdruck der Bildschirmseiten vermieden werden.

Angaben zur Autorenschaft und zum Zeitpunkt der letzten Änderung stehen am Seitenende. Ergänzt werden diese Angaben durch eine E-Mail-Adresse und/oder einen Link auf die Seite des Autors.

Benutzerführung

Ein Buch wird durchgeblättert, gewünschte Seiten können mittels Inhaltsverzeichnis oder Index ermittelt und aufgeschlagen werden. Bei der Aufbereitung von Dokumenten fürs Web müssen auf dem Bildschirm selbst Navigationsinstrumente zur Verfügung stehen, die vom Benutzer eindeutig identifizierbar sind.

Dies kann sprachlich und/oder grafisch (über Icons/Symbole) erfolgen. Die Icons sollten eindeutig sein, durchgängig benutzt und einheitlich positioniert werden. Alternativ zum Symbol sollte immer eine Textvariante, die denselben Informationsgehalt bietet, verfügbar sein (falls z. B. das Laden von Grafik im Browser deaktiviert wurde).

Style-Sheets

Bei (Print-)Lesetexten gilt, daß Serifenschriften (z. B. Times) besser lesbar sind als die serifenlosen (z. B. Arial, Helvetica). Aufgrund der Überstrahlung durch den Hintergrund und der Pixelauflösung der Zeichen erscheinen die feinen Aufstriche (Serifen) auf dem Bildschirm ausgefranst. Im Gegensatz zum Printmedium eigenen sich also serifenlose Schriften besser für das Lesen am Bildschirm.

Ein verminderter Zeichenabstand, also eine dichtere Laufweite und dickere Schriftstärken sind ebenfalls von Vorteil. Nicht alles konnte bisher bei der Seitengestaltung von WWW-Seiten eingesetzt werden, da die Schriftart und -größe in der Regel im Browser vom Empfänger der Daten eingestellt wird.

Stilvorlagen (Style-Sheets) liefern mittlerweile die Möglichkeit, dem Empfänger das eigene Schriftbild aufzuzwingen.

Stilmerkmale, die mit Hilfe von Style Sheets festgelegt werden können:

 

Um das Erscheinungsbild einer Webseite zu ändern, wird die Formatierung, die ein HTML-Tag bewirken soll, mit Hilfe eines Style Sheet definiert. Dadurch wird die Standardeinstellung des Browsers überschrieben.

Die Entwicklung dieser Spezifikationen und deren Implementierung stehen erst am Anfang und werden noch nicht von allen Browsern umgesetzt. Netscape 3.0 unterstützt im Gegensatz zum Microsoft Internet Explorer die Möglichkeiten, die der Style-Tag bietet, noch nicht.

 

Head

Der Kopfteil enthält Informationen über die Seite selbst, die zur Identifikation des Dokuments dienen:

Der Tag <Title> zeichnet den Text aus, der nach Aufruf der Seite in der Titelleiste des Browsers angezeigt wird. Wird die Seite den Lesezeichen (Bookmarks) hinzugefügt, so erscheint der Text in der Lesezeichenliste. Wollen Sie vermeiden, daß in Titelleiste und unter Bookmarks das nichtssagende "untitled" erscheint, dann sollten Sie unter <Title> einen möglichst kurzen und aussagekräftigen Text einfügen.

Meta-Informationen sind Elemente, die vom Browser nicht dargestellt, von Suchmaschinen aber gelesen werden. Sie dienen also dazu, dem Browser nicht darstellbare Informationen zum Zwecke der Identifikation, Indizierung und Katalogisierung von Dokumenten zu übergeben. Wenn Sie Wert darauf legen, daß ihre Dokumente durch Suchmaschinen eindeutig klassifiziert werden können, dann sollten Sie auf die Erstellung dieser Elemente (Meta-Tags) nicht verzichten (vgl. 3.4 Wie Robots suchen und wie sie gefüttert werden).

Bilder und Grafik

Der Druck eines Bildes ermöglicht aufgrund der hohen Auflösung eine hervorragende Bildqualtität. Die Qualität der Darstellung eines Bildes auf dem Bildschirm hängt von zweierlei Faktoren ab, der Auflösung /Qualität des Bildes und der Auflösung des Bildschirmes, der Ausstattung (Grafikkarte, Bildschirm) des Empfängers der Bilddaten. Wenn also in einer Datei über 16 Millionen Farben abgespeichert sind, bedeutet dies noch lange nicht, daß der Anwender diese Farben auch sehen kann. Viele Standard-PCs zeigen lediglich 256 Farben an. Bei besserer Ausstattung werden bis zu 64 000 Farben angezeigt.

Grafiken haben ein wesentlich höheres Datenvolumen als Textdateien. Je höher die Auflösung des Bildes, desto größer ist die Datei, desto länger dauert deren Übertragung im Internet. Auf Webseiten sollten also nur kleine und wenige Bilder vorhanden sein, v. a. Start-Seiten sollten nicht mit Bildern überfrachtet werden. Ansonsten kann davon ausgegangen werden, daß die Übertragung vom Anwender entweder abgebrochen wird oder ein Laden von Grafik deaktiviert wird.

Will man auf ein großes Bild nicht verzichten, dann kann eine verkleinerte Version (Thumbnail) versehen mit Angaben zur Datenmenge als Link zum eigentlichen Bild dienen, das bei Bedarf auf einer separaten Seite geladen werden kann.

Literaturhinweise zur Seitengestaltung:

 

Links zu klassischer Typographie / Printtypographie:

 

Grafikformate im Web

Um das Datenvolumen von Grafiken zu minimieren, werden diese in komprimierter Form gespeichert und übertragen. Zwei Dateiformate für Grafiken haben sich im WWW durchgesetzt und können von allen Browsern angezeigt werden: GIF und JPEG

GIF

Das GIF-Format wurde von Compuserve für den Online-Einsatz entwickelt und kann maximal 256 Farben pro Datei speichern. Anstatt alle Bits der Datei abzuspeichern, wird nur die Anzahl der aufeinanderfolgenden gleichen Bits abgespeichert und so eine Komprimierung erreicht.

Es eignet sich also besonders für Grafiken mit großen einfarbigen Flächen ohne Verläufe und Bilder, die nicht mehr als 256 Farben benötigen (v. a. auch für Buttons, Symbole, Cliparts etc). Wenn das Bild es zuläßt, dann kann es auch mit nur 16 oder zwei Farben abgespeichert werden.

Der aktuell gültige Standard des GIF-Formats ist das "89er-Format", das über die Komprimierung hinaus drei Möglichkeiten bietet, die es für den Einsatz auf Webseiten besonders attraktiv macht:

Grundsätzlich kann eine der in der Grafik vorhandenen Farben als transparent definiert werden. I.d.R. wird dies auf den Hintergrund angewandt. Hat also z.B. die Web-Seite einen grauen Hintergrund und die darauf positionierte Grafik einen weißen, dann wirkt dies störend. Wird der Hintergrund der Grafik in einen transparenten umgewandelt, dann erzielt sie auf jedem Hintergrund eine optisch ansprechende Wirkung.

 

In der Online-Fassung dieses Artikels finden Sie Beispiele für die beschriebenen Möglichkeiten.

 

JPEG

 

Das JPEG-Format kann pro Bild bis zu 16,7 Millionen Farben speichern. Daher eignet es sich v. a. für Fotos und Grafiken mit fein abgestuften Farbverläufen. Das Abspeichern einer Datei in einer Auflösung von 16,7 Millionen Farben bedeutet allerding nicht, daß der Empfänger dieser Bilddatei die Farben auf seinem Bildschirm auch sehen kann, denn das hängt von dessen Bildschirmauflösung ab. Die gängigen Werte liegen heute zwischen 256 und 64000 Farben.

JPEG hat aufgrund seines Komprimierverfahrens ein Minimum an Datenaufkommen. Deshalb bietet es nur bei größeren Bildern (mehr als 80*80 Pixel) Vorteile. Die Stärke der Kompression kann je nach Bedarf variiert werden. Je höher der Kompressionsfaktor, desto schlechter die Bildqualität.

Beim der Umwandlung ins JPEG-Format können i. d. R. zwei Werte bestimmt werden:

 

Web-Adressen

 

Screendesign

 

Style Sheets

 

Grafiksammlungen im WWW

 

Backgrounds

 

Clipart-Server

 

Grafik-Verweise

 

Image-Map (anklickbare Grafik, die mehr als einen Link enthalten kann)