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

Wie im traditionellen Druck werden auch bei qualitativ hochwertigen Web-Sites in der gesamten Site eine festgelegte Gruppe von Schrifteinstellungen eingehalten. Diese Einheitlichkeit verleiht ihr eine gewisse Eleganz und regt die Besucher zum Verweilen an. Hinsichtlich der Struktur eines Textes wird eine bestimmte Erwartung hergestellt. Wenn diese Erwartung durch eine schlampige, uneinheitliche Formatierung zerstört wird, ist die Benutzung der Site für den Betrachter nicht angenehm und er wird ihr möglicherweise für immer den Rücken kehren.

Das Einstellen eines Styles
Als erstes sollten Sie Einstellungen wie Schriften, Abstände zwischen den Absätzen, Größe der Untertitel und so weiter festlegen. Der zweite Schritt besteht dann darin, ein Stylesheet zu erstellen, das Ihnen hilft, diese Einstellungen während der gesamten Entwicklungszeit Ihrer Site beizubehalten. Das ist besonders bei großen Sites mit zahlreichen Seiten von Bedeutung, wie zum Beispiel bei diesem Handbuch. Zu Beginn des Projekts legten wir bestimmte Schrift- und Layouteinstellungen fest und bemühten uns sehr, sie während der Entwicklung einzuhalten.

Diagram of style manual style settings.

Die Aufrechterhaltung eines bestimmten Erscheinungsbildes ist mit den derzeitigen Authoring-Werkzeugen des Web nicht so leicht wie mit Seitenlayout-Programmen wie QuarkXpress oder Pagemaker. Die Überlegungen, die hinter ihrer Funktionsweise stecken, sind jedoch übertragbar. Es ist schließlich auf dem Bildschirm genauso wichtig, ein gutes und homogenes Layout zu haben, wie auf einer gedruckten Seite.

Hilfsmittel
Wir verwenden für das Verfassen unserer Web-Site BBEdit von Bare Bone Software. Die maßgeschneiderte Auswahl in der HTML Tool-Palette ist für die Erstellung von Styles besonders hilfreich. Sie können maßgeschneiderte Einstellungen definieren und diese dann auf Ihre Seiten anwenden. So können Sie zum Beispiel definieren, daß ein Gedankenstrich ( ) ein schwarzes Rechteck mit einer Länge von 14 Pixel, einer Höhe von 1 Pixel und einem vertikalen Abstand von 3 Pixel sein soll:


<IMG SRC="resourcen/black.gif" WIDTH="14" HEIGHT="1" VSPACE="3">

In der Dialogbox für maßgeschneiderte Einstellungen können Sie dieses Tag eingeben und es "Gedankenstrich" nennen. Jedes Mal, wenn Sie in Ihrem Text einen Gedankenstrich setzen wollen, brauchen Sie dann nur aus Ihrem Menü den Befehl zu wählen und dieses Tag wird eingefügt.

Referenzen

Bringhurst, R. 1992. The elements of typographic style. Washington: Hartley and Marks.

Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books. www.killersites.com
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.