Yale C/AIM Web Style Guide

Überblick

Page Design

Einführung

Grafikgestaltung 100

Ausgewogenheit der Seiten

Design-Gitternetze für Seiten

Sicherheitsbereiche für Grafiken

Kopfzeilen

Typographie I

Typographie II

Schriftarten

Einheitlichkeit

Grundlegendes zu Tabellen

Länge der Seiten

Plattform-
übergreifende Fragen

Frames

Komplexe Tabellen

Gamma-Einstellungen des Monitors
Bei der Computer-Bilddarstellung und bei Display-Bildschirmen bezieht sich der Ausdruck Gamma auf den Kontrastgrad zwischen den mittleren Grauwerten eines Bildes. Die technische Bedeutung von Gamma spielt hier keine Rolle, während die visuelle Auswirkung einer Änderung der Gammawerte leicht ersichtlich ist. Wenn Sie mit Adobe Photoshop arbeiten, öffnen Sie ein Bild mit einer durchschnittlichen Farb- und Kontrastpalette und verändern die Gammaeinstellungen mit Hilfe der Steuerung Levels (Details finden Sie im Photoshop-Handbuch). Die Bilder verändern sich selbst bei nur geringfügigen Manipulationen der Gammaeinstellungen. Diese Überlegungen spielen eine besonders wichtige Rolle, wenn man Bilder mit sehr umfangreichen Grauskalen (wie zum Beispiel medizinisch-diagnostische Bilder oder nuancenreiche Schwarz-Weiß-Fotos) oder auch Bilder mit kritischen Farbwerten anzeigt (wie kunstgeschichtliche Bilder oder klinische medizinische Fotos).
Die Standard-Gammaeinstellungen für Macintosh- (Zielgammawert 1,8) und Windows-Monitore (Zielgammawert 2,2) sind ziemlich unterschiedlich. Das kann zu unangenehmen Überraschungen führen, wenn man seine Bilder als erstes auf der je anderen Plattform sieht. Mac-Benutzer sehen ihre Bilder auf Windows-Bildschirmen viel dunkler und konstrastreicher, während Windows-Benutzer ihre Bilder auf Mac-Bildschirmen flach und ausgewaschen sehen. Die meisten Web-Designer entscheiden sich für den Mittelweg. Sie hellen die Bilder etwas auf, wenn sie auf einem Macintosh arbeiten und verdunkeln sie geringfügig und verstärken die Kontraste ein wenig, wenn sie mit Microsoft Windows arbeiten.
Wenn Sie mit Adobe Photoshop arbeiten, können Sie die Bedienerkonsole Gamma verwenden, die mit Photoshop mitgeliefert wird, und die es Ihnen ermöglicht, mit den Gammaeinstellungen Ihres Monitors zu experimentieren. Um auf einem Macintosh das Windows-Display zu simulieren, stellen Sie den Zielgammawert auf 2,2 und den Gamma-Einstellungsgleitschieber auf -43 ein. Diese Einstellungen speichern Sie dann.

Dialog box from the Macintosh version of the

In der Windows-Version von Photoshop bezieht sich die Gamma-Steuerung nur auf Bilder innerhalb der Photoshop-Fenster, nicht auf das gesamte Display wie beim Macintosh. Die Standard-Gammaeinstellung für die Windows-Version von Photoshop beträgt 1,8 (wie beim Mac). Wenn Sie sich ansehen wollen, wie Ihre Grafiken aussehen werden, sobald sie sich nicht mehr in Photoshop, sondern im Windows-Web-Browser befinden, können Sie das Photoshop-Displaygamma Windows Photoshop auf 2,2 verstärken (damit es dem normalen Wert des Windows-Betriebssystems entspricht).

Standard-Textgrößen
IAllgemein gilt, daß die Bildschirmschriftgrößen in Windows (3.1, Win95 und WinNT) um etwa zwei Grade größer erscheinen als in den entsprechenden Macintosh-Versionen. Das bedeutet, daß eine 12-Punkt-Times-Schrift auf einem Macintosh eher wie eine 14 Punkt Times New Roman-Schrift auf einem Windowsgerät erscheint. Wenn Sie keinen Zugang zu einem Rechner des anderen Betriebssystems haben, verwenden Sie den HTML-Tag FONT SIZE am oberen Rand Ihrer Seite, um die Schriftgröße für eine kurze Seitenansicht zu verändern:



Mac-User sollten <FONT SIZE="+2"> probieren.
Windows-User sollten <FONT SIZE="-2"> probieren.

Browser-Varianten
Jeder Web-Browser interpretiert HTML-Tags ein wenig anders. Tabellen-, Form-, Grafikpositionierungs- und Ausrichtungs-Tags funktionieren bei jeder Marke oder jeder Version des Web-Browsers unterschiedlich. Normalerweise fallen diese Nuancen nicht unbedingt ins Gewicht, können aber bei sehr präzisen oder komplexen Seitenlayouts zu bösen Überraschungen führen. Zum Zeitpunkt der Erstellung dieses Handbuchs sind die beiden wichtigsten Web-Browser Netscape Navigator 3.0 und Microsoft Internet Explorer 3.0 (2.0 auf Macs). Beide unterstützen inzwischen HTML 3.0, die Original Netscape-Erweiterungen für HTML des Jahres 1995, und Javascript, Java. Außerdem haben sie eine weitgehend kompatible Plug-in-Architektur gemeinsam. Sie sollten jedoch der Implementierung eines dieser neuen Features erst dann trauen, wenn Sie Ihre Web-Seiten auf dem Bildschirm gesehen und sich davon überzeugt haben, daß sie in jedem Browser zuverlässig funktionieren.

Veränderungen des Grafik-Offset
Versuchen Sie auf keinen Fall, eine Grafik so in Ihre Seite einzubauen, daß sie genau mit einem Seitenhintergrundbild übereinstimmt. Die Unterschiede im Offsetbereich machen es zu einem hoffnungslosen Unterfangen. Der Offset ist der eingebaute Rand, den der Web-Browser automatisch zwischen dem Rand des Browserfensters und den Grafiken erstellt, die Sie auf Ihrer Seite plazieren:

Diagram explains graphic offsets in browser window.

Wenn der Browser-Offset verschiedener Browsermarken und Hardwareplattformen feststünde und einheitlich wäre, wäre das Problem wohl in den Griff zu bekommen. Bedauerlicherweise scheinen aber die Abstände zu den vertikalen und horizontalen Offsets bei jedem Browser ein wenig anders zu sein. Das bedeutet, daß man, selbst wenn man seine Vorder- und Hintergrundbilder in der spezifischen Marke und Version seines Web-Browsers perfekt ausgerichtet hat, nicht damit rechnen darf, daß die Bilder auch auf einem anderen Bildschirm in perfekter Ausrichtung erscheinen. Selbst innerhalb ein- und derselben Firma ist der Offset uneinheitlich, wie bei den verschiedenen Plattformversionen von Netscape, die allesamt geringfügig verschiedene Offsets ergeben.
Zum Glück hat Microsoft dieses Problem erkannt und den Microsoft Explorer 3.0 nun um eine Unterstützung für die beiden neuen HTML-Tags erweitert. Die Tags LEFTMARGIN und TOPMARGIN gestatten eine direkte Kontrolle über die Rand-Offsets. Netscape hat sich ihrerseits offensichtlich vorgenommen, diese Tags in der 4.0-Version des Netscape Navigator zu unterstützen. Detaillierte Abhandlungen zu diesen Themen finden Sie bei Siegel (1996) oder Weinman (1996).

Referenzen

Apple Computer, Inc. 1992. Macintosh human interface guidelines. Reading, MA: Addison-Wesley.

Microsoft Corporation. 1992. The Windows interface: An application design guide. Redmond, WA: Microsoft Press.

Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books.
www.killersites.com

Weinman, L. 1996. Designing Web graphics. Indianapolis: New Riders.
www.lynda.com
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.