Yale C/AIM Web Style Guide

Überblick

Web-Grafik

Einführung

Farbbildschirme

Dateiformate für Grafiken

Interlaced GIF

Transparentes GIF

JPEG Grafiken

Zusammenfassung Formate

Illustrationen

Optimierung von Grafiken I

Optimierung von Grafiken II

Height & width Tags

Farbige Hintergründe

Imagemaps

Hintergrundfarben von Web-Seiten bieten Ihnen eine bandbreitenneutrale Möglichkeit, das Aussehen Ihrer Seiten durch das Hinzufügen von Grafiken zu verändern. Sie gestatten es Ihnen auch, die Lesbarkeit Ihrer Seiten zu verbessern, die Hintergrundfarbe so einzustellen, daß sie die Vordergrundelemente ergänzt und eine breite Kontextveränderung von einem Teil Ihrer Site zu einem anderen anzukündigen.
Hintergrundmuster und -bilder sind die problematischsten grafischen Elemente auf Web-Seiten. Beide Merkmale erhöhen die grafische Komplexität der Seiten, ohne dabei automatisch ihre Lesbarkeit zu verbessern. Die schlechte Auswahl der Hintergrundgrafiken ist für einige der häßlichsten Seiten des Webs verantwortlich. Wenn sich die Hintergrundkomposition jedoch in den Händen erfahrener und kundiger Grafikdesigner befindet, können Seiten herauskommen, die in ihrer grafischen Wirkung genauso faszinierend sind wie Multimedia-CD ROMs.

Wie man die Farben der Seitenelemente verändert
Netscape gestattet es Ihnen, eine spezifische Farbe für Hintergrund, Text und Hypertext-Links Ihrer Web-Seite anzugeben. Dadurch wird es möglich, vom grauen oder weißen Standardhintergrund abzugehen, ohne große Grafiken herunterladen zu müssen. Sie können mit Hilfe der einfachen HTML-Erweiterungsgruppe auch Farben anderer Seitenelemente auf Web-Seiten manipulieren. Diese Erweiterungen können die effizienteste Methode sein, Ihren Seiten ein charakteristisches Aussehen zu geben. Das rührt daher, daß der Browser alle Farbänderungen durchführt, so daß Ihre Leser nicht untätig vor dem Bildschirm sitzen müssen, während Sie ihnen komplexe Grafiken schicken.
Die Auswahl der Hintergrundfarbe ist ganz einfach, wenn es sich um Layoutprogramme zur grafischen Gestaltung von Web-Seiten handelt, die nach dem WYSIWYG Prinzip (What You See Is What You Get) arbeiten. Leider ist das Aussuchen einer Farbe ohne eine dieser Web-Seiten-Bearbeitungsprogramme eine Tortur, für die sich nur ein Fanatiker begeistern kann. Die Farbe ist im Tag im Hexadezimalcode angegeben, wobei die sechs Elemente die Rot-, Grün- und Blauwerte ergeben, aus denen die Farbe gemischt wird. Im Tag ist diesem Hexadezimalcode immer ein # vorangestellt (#RRGGBB). Da die neue Generation der WYSIWYG-Seiteneditoren diese ganze Prozedur für uns übernimmt, wollen wir hier nicht detailierter auf die Farbauswahl des hexadezimalen RGB eingehen.

In der nachstehenden Illustration sehen Sie die Hexadezimalcodes einiger Hintergrundfarben:

Background color swatches.

Es ist ganz einfach, die HTML-Erweiterungen für die Veränderung von Hintergrund-, Text- und Linkfarben zu verwenden: man fügt dem BODY-Tag am Beginn des HTML-Codes für die Seite nur einige wenige Erweiterungen an. Dieses spezielle Tag ergibt einen weißen Hintergrund:

<BODY BGCOLOR="#FFFFFF">

Hintergrundfarben und Lesbarkeit
Die Veränderung des Seitenhintergrunds von grau zu weiß ist in Wirklichkeit die einzige Änderung des standardmäßigen Web-Seitenhintergrunds, die wir Ihnen empfehlen können, wenn Ihre höchste Priorität in einer guten Lesbarkeit des Bildschirms besteht. Die Lesbarkeit von Schrift auf einem Computerbildschirm wird bereits durch die niedrige Auflösung des Bildschirms beeinträchtigt. Der typische Macintosh- oder Windows-Computerbildschirm zeigt Text mit 72 bis 80 Punkten pro Zoll (etwa 5.200 Punkte pro Quadratzoll) an. Anders ausgedrückt, ist die Auflösung um fast 300 mal geringer als auf einer typischen Magazinseite (1.440.000 Punkte pro Quadratzoll). Schwarzer Text auf einem weißen oder sehr hellen Hintergrund ergibt die besten Gesamtergebnisse in Schriftkontrast und Lesbarkeit. Studien haben ergeben, daß von einem schwarzen Hintergrund viel schlechter gelesen werden kann als von einem weißen, selbst dann, wenn eine schwarze Schrift verwendet wird, um einen optimalen Kontrast zu erzielen. Farbige Hintergründe können eine Alternative zum einfachen Netscape-Grau sein. Voraussetzung ist allerdings, daß die Farben sehr gedämpft gehalten werden und ihr allgemeiner Sättigungsgrad gering ist. Pastellfarben, helle Grautöne und helle Erdtöne eignen sich am besten.

Netscape-Hintergrundmuster
Anfang 1995 ermöglichte es Netscape 1.1.N den Autoren der Web-Seiten, zur Bildung eines Hintergrundmusters kleine, verteilte GIF-Grafiken oder eine einzelne, große Grafik hinter der Web-Seite zu verwenden. Dieses Merkmal ist in den Diskussionen über Web-Designfragen umstritten. Seiten mit komplexen Hintergrundbildern haben viel längere Ladezeiten. Dazu kommt, daß Hintergrundmuster meist dazu führen, daß Seiten, die nicht sehr sorgfältig gestaltet sind, viel schwerer zu lesen sind.
Hintergrundmuster sind in Diskussionen über Web-Designfragen umstritten. Seiten mit komplexen Hintergrundbildern haben viel längere Ladezeiten. Dazu kommt, daß Hintergrundmuster meist dazu führen, daß Seiten, die nicht sehr sorgfältig gestaltet sind, viel schwerer zu lesen sind.

Example of legibility problems with background patterns.

Um für die Verwendung als Struktur geeignet zu sein, sollte eine Grafik eine kleine GIF- oder JPEG-Datei sein, im Idealfall höchstens 100 x 100 Pixel groß. Unserer Erfahrung nach lassen sich die JPEG-Hintergrundmuster geringfügig schneller laden als äquivalente GIF-Grafiken. Typische Grafiken, die für Hintergrundmuster verwendet werden, sind homogene Strukturbilder:

Examples of background patterns.

Hintergrundgrafiken werden in eine Web-Seite durch Netscape-spezifische Modifikationen des Standard-HTML-Tags BODY eingefügt:
<BODY BACKGROUND="example.jpeg">
Wenn Netscape das BACKGROUND-Tag sieht, verteilt es die Grafikdatei example.jpeg über die Seite und legt sie unter Text und Grafiken. Ältere Webbrowser, die keine Hintergrundbilder unterstützen, ignorieren das Hintergrund-Tag einfach und geben der Seite einen weißen oder grauen Standardhintergrund.
Wie Sie Hintergrundstrukturen einsetzen können, hängt davon ab, was Sie mit Ihrer Web-Site bezwecken, von der Zugangsgeschwindigkeit Ihres Zielpublikums und der Frage, ob der Multimedia/CD-ROM-Look, der immer stärker zum Stereotyp wird, mit den ästhetischen Zielen Ihrer Web-Site in Einklang steht. Es wäre kontraproduktiv, auf Seiten, die hauptsächlich von vielbeschäftigten Leuten genutzt werden, die nach arbeitsbezogenen Informationen suchen, umfangreiche oder optisch komplexe Hintergrundstrukturen zu verwenden. Die langen Ladezeiten, unprofessioneller ästhetischer Eindruck und schlechte Lesbarkeit würden sofort den Unwillen Ihrer Benutzer erwecken. In den Händen geschickter Grafikdesigner, die Web-Seiten erstellen, bei denen hauptsächlich die grafische Wirkung zählt, eröffnet die Verwendung von Hintergrundtexturen viele interessante Möglichkeiten der visuellen Gestaltung. Dies gilt vor allem für Universitäten und kommerzielle Organisationen, die über einen schnellen Zugang zum Netz verfügen und für die die Bandbreite nicht dasselbe große Problem wie für die Benutzer ist, die sich via Modem ins Netz einwählen.
Wir empfehlen das, wenn Sie nicht über eine professionelle Grafikausbildung oder über Erfahrung im Aufbau komplexer Grafikkommunikation verfügen und auf Hintergrundbilder oder Texturen verzichten. Die Gefahr, schwere funktionale und ästhetische Fehler zu begehen, ist einfach zu groß.
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.