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


Der Sicherheitsbereich für Grafiken von Web-Seiten wird durch zwei Faktoren bestimmt: die Mindestgröße der heute gebräuchlichen Bildschirme (640 x 480 Pixel) und die Breite des für das Ausdrucken verwendeten Papiers.

Die Bildschirmgröße
Die meisten Bildschirme, die heute für wissenschaftliche und geschäftliche Zwecke verwendet werden, haben eine Größe von 13 bis 15 Zoll (33 bis 38 cm). Diese kleineren Monitore sind oft auf die Anzeige eines 640 x 480 Pixel großen Bildschirms eingestellt. Web-Seitengrafiken, die die Breite dieser kleinen Monitore überschreiten, sehen amateurhaft aus und bringen vielen Benutzern Probleme, weil sie am Bildschirm sowohl horizontal als auch vertikal scrollen müssen, um das volle Layout Ihrer Seite zu sehen. Es ist lästig genug, in eine Richtung (nach unten) scrollen zu müssen. Das Scrollen in zwei Richtungen ist sehr mühsam.

Überlegungen zum Ausdruck
Selbst auf kleinen Bildschirmen können Grafiken angezeigt werden, die zu breit sind, um sie auf Papier im normalen Briefformat, in Legal Size oder auf A4 auszudrucken. Das Ausdrucken ist bei vielen Web-Seiten jedoch nur eine sekundäre Komponente. Sie sollten sich der Tatsache bewußt sein, daß Ihre Leser rechts 2 Zentimeter Ihres Layouts verlieren, wenn sie breite Seiten ausdrucken wollen. Seiten mit viel Text sollten immer so gestaltet sein, daß sie sich problemlos ausdrucken lassen, da die meisten Leser dies auch tun. Wenn sie zu breit sind, gehen am rechten Rand mehrere Worte jeder Textzeile verloren.
Die folgende Tabelle und die beigefügten Bildschirmbeispiele geben die Abmessungen für den Grafik-Sicherheitsbereich für Layouts an, die zum Ausdrucken geeignet sein sollen, und für Seitenlayouts, die die maximale Breite eines 640 x 480 Pixel-Bildschirms ausschöpfen sollen. Die Abmessungen gelten für die aktuellen Versionen (3.x) sowohl des Internet Explorers als auch des Netscape Navigators, wie für das MacOS so auch für das Windows 95 Betriebssystem.

Die Abmessungen des Grafik-Sicherheitsbereichs für Layouts, die gut ausdruckbar sein sollen, betragen:

Maximale Breite = 535 Pixel

Maximale Höhe = 295 Pixel

Die Abmessungen des Grafik-"Sicherheitsbereichs" für Layouts, die den Bildschirm optimal ausnutzen sollen, betragen:

Maximale Breite = 595 Pixel

Maximale Höhe = 295 Pixel

Bei den folgenden Grafiken handelt es sich um Ausdrucke von 640 x 480 Pixel-Bildschirmen, die die wichtigsten Web-Browser auf beiden Plattformen mit ihren Standardeinstellungen (Button-Leiste, Standort-Leiste etc.) zeigen. Die Abmessungsdaten der einzelnen Beispielbildschirme sind identisch. Wenn Sie sich die Beispiele einzeln ansehen, können Sie erkennen, daß die Start-Leiste und die Banner mit den Fenstertiteln die sichere vertikale Abmessung auf kleineren Windows 95-Bildschirmen erheblich beeinträchtigen. Kleine Mac-Bildschirme haben eine etwas kleinere horizontale Abmessung als die Windows-Versionen beider Browser.
Wenn wir neue Web-Sites gestalten, erstellen wir unsere Entwürfe manchmal auf Bildschirmausdrucken wie den oben gezeigten. Kopieren Sie einfach einen der obigen Bildschirme, löschen Sie die Abmessungsdaten im Live-Bereich des Browserfensters und schieben Sie eine Skizze Ihrer Webgrafik hinein. Auf diese Weise gehen Sie sicher, daß sie in den Sicherheitsbereich des Browserfensters paßt und können außerdem sehen, welche Auswirkung das Interface des Browsers auf das Gesamterscheinungsbild Ihrer Seitengrafik haben könnte. So gewinnen Sie eine realistischere Vorstellung, als wenn Sie Ihre Webgrafik auf einem leeren Hintergrund entwerfen.

Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.