Dokumentieren in Hypermedien

Ziel und Zielgruppenorientierung

Bevor man herangeht eine Website zu produzieren, müssen einige bedeutende Fragen geklärt werden. Erst nachdem diese Fragen geklärt sind, kann man sich über das Design der Website Gedanken machen. Die zwei wichtigsten sind:

1. Was soll mit dieser Web-Präsenz erreicht werden?
2. Welches Publikum möchte ich ansprechen?

Die 1. Frage dient überhaupt als Grundlage für die Entwicklung einer Website . Folgende Ziele könnte man z.B. verfolgen:

• Verkauf eines Produktes
• Darstellung eines Produktes in einem guten Licht
• Information über ein bestimmtes Thema/Produkt
• Unterhaltung
• Etc.

Auf einer Website, auf der unterhalten werden soll, eignen sich eher grafische Menüs, Flash-Animationen, Streaming-Videos, etc. Wenn dagegen rasches Auffinden von Informationen das Ziel der Webpräsenz darstellt, sind Textmenüs gegenüber grafischen Menüs vorzuziehen. Videos und Flash-Animationen eignen sich allerdings hervorragend für Produktpräsentationen oder Ähnliches. Dennoch ist dazu zu raten, derartige Animationen in der Hierarchie weiter unten anzusetzen. Auf Splash-Screens (Inhaltslose Einstiegsseiten) sollte bei „ernsthaften“ Websites verzichtet werden. Diese verzögern auf überflüssige Weise das Auffinden von Informationen.

Ist diese Frage einmal geklärt, ist als nächstes zu hinterfragen, welches Publikum angesprochen werden soll bzw. welche potentiellen LeserInnen man hat. Besteht die Zielgruppe beispielsweise eher aus Gelegenheitsnutzern ist es wichtig, dass die Website einen gut strukturierten Einstieg hat und auch sonst durch detaillierte Anweisungen diese LeserInnen geführt werden. Für diese NutzerInnen sind grafische Menüseiten, Überblicks¬seiten, Hierarchiebäume, Icons, Glossare, FAQs wichtige Elemente. Professionelle, geübte NutzerInnen hingegen könnte durch viele Zwischenschritte, die den Informationszugriff verzögert, verärgert werden. Profis schätzen eher Textmenüs und verzichten gerne auf grafische, aufgeblähte Seiten, die den Download nur verzögern. Des Weiteren ist auch darauf zu achten, welche Bandbreite das Zielpublikum zur Verfügung hat. Viele Internet-BenutzerInnen besitzen zwar schon breitbandige Internetanbindungen, dennoch gibt es noch zahlreiche NutzerInnen die ein normales Telefonmodem besitzen und eher negativ auf riesige Flash-Animationen, Videos udgl. reagieren. Abgesehen von der zur Verfügung stehenden Band¬breite ist der vordergründige, plumpe Einsatz von Techniken mittlerweile bei vielen NutzerInnen verpönt. Grundsätzlich kann man sagen, dass der Trend eher zu schlankem Design mit hintergründiger Technik geht.

Weiters ist zu beachten, dass potentielle LeserInnen auch aus anderen Ländern sein könnten. Ist dies der Fall, könnten beispielsweise die Webdokumente in einer weiteren Sprache angeboten werden. Es ist allerdings darauf zu achten, dass Farben, Symbole, Zeichen etc. in einem anderen Land eine andere Bedeutung haben können.

Farben und Schriften

Für die Darstellung von Schriften auf Monitoren muss man auf Helligkeit und Kontrast achten. Farben mit ähnlicher Helligkeit oder Sättigung, die dicht nebeneinander liegen, erzeugen ein „Flimmern“ (z.B. gesättigtes blau und gesättigtes rot nebeneinander, siehe [1])

Für die Hintergrundgestaltung ist natürlichen Pastelltönen sowie hellen Grau- und Erdtönen, gegenüber schrillen, gesättigten Primärfarben der Vorzug zu geben. Abgesehen von Bereichen, die besonders hervorgehoben werden sollen. Für die Schrift sollte man dunklere Farbtöne verwenden, die sich deutlich vom hellen Hintergrund abheben. Für die Darstellung der Schrift von Webdokumenten eignet sich z.B. ein nicht zu helles grau besser als schwarz, weil es angenehmer zu lesen ist. Bietet man allerdings Texte zum Ausdruck an, ist es besser wenn dafür Texte auch in schwarz zur Verfügung gestellt werden, da dies auf Papier besser zu lesen ist.

Bei den Schriften in Webdokumenten muss man beachten, dass nicht jede Schriftfamilie für die Darstellung auf dem Bildschirm geeignet ist. „Times Roman“ ist zwar auf einem Ausdruck auf Papier gut lesbar, allerdings nicht die optimale Schrift auf Monitoren. Für den Monitor adaptierte Schriften wie „Times New Roman“ eignen sich zwar besser für die Darstellung am Bildschirm, sind aber dennoch für textlastige Webdokumente geeignet, die man eher ausdrucken würde, als auf dem Monitor lesen. Bildschirmschriften wie „Verdana“ und „Georgia“ eigenen sich am besten für Webdokumente. Grundsätzlich lässt sich sagen, dass für die Darstellung am Monitor serifenlose Schriften („Verdana“, „Georgia“, etc.) besser geeignet sind. Schriften mit Serifen („Times New Roman“, etc.) sind hingegen besser im Druckbereich aufgehoben. Bei der Schriftgröße ist zu beachten, dass dieselbe Schrift im Web-Browser auf einem Windows-Rechner zwei bis drei Punkte größer dargestellt wird, als auf einem Macintosh. Außerdem ist zu beachten, dass auf den unterschiedlichen Plattformen verschiedene Schriften installiert sind. Am besten ist es, wenn man bei der Font Angabe, immer auch eine Mac-Schrift wie z.B. Helvetica dazu nimmt. Z.B. Schriften

Außerdem ist bei Webdokumenten zu beachten, dass sie abhängig von den Computer und Bildschirmeinstellungen des/der NutzerInnen immer anders dargestellt werden. Will man ein halbwegs einheitliches Layout für alle NutzerInnen herstellen, nimmt man dazu unsichtbare Tabellen und/oder Cascading Style Sheets.

Bei der Erstellung von Webdokumenten ist auf die Einheitlichkeit der Schriften und Farben zu achten! Es sollten immer dieselbe Schriftfamilie, immer dieselben (wenigen!) Farben und Formatierungen für Hervorhebungen. Ansonsten wirkt die Website gleich unleserlich und sehr unprofessionell. Um eine Einheitlichkeit der Formatierungen zu erzielen, sollten am besten CSS verwendet werden.

Trennung von Form und Inhalt

Wie schon erwähnt ist es für Websites wichtig, dass eine einheitliche Gestaltung der Elemente wie Farben und Schriften gegeben ist. Um dies in einer optimalen Weise zu erhalten, ist es wichtig, dass Form und Inhalt voneinander getrennt sind. Dies erreicht man am besten mit Cascading Style Sheets. CSS funktionieren im Prinzip wie Formatvorlagen eines Textverarbeitungsprogramms. Ändert man z.B. den Font einer Formatvorlage, wird automatisch an jeder Stelle bei der diese Formatvorlage benutzt wurde durch den neuen Font ersetzt. Das heißt, man braucht nicht mehr umständlich den ganzen Text durchgehen und einzeln die Elemente ändern, sondern nur mehr die entsprechende Formatvorlage. Genauso verhält es sich bei Cascading Style Sheets. Alle Formatierungen, die in einem Stylesheet ausgelagert sind, können durch einen, einfachen unkomplizierten Schritt geändert werden. Augenscheinlich wird dieser Vorteil, wenn es sich um eine umfangreiche Website handelt.

Nicht nur für einzelne Formatierungen, sondern für das gesamte Layout eines Webdoku¬mentes eignen sich CSS hervorragend. Wie schon erwähnt, wird die Bildschirmseite ohne jegliche Formatierung der Seitenformate und -maße je nach Browser- und Computer¬einstellung des Nutzers anders wiedergegeben. Außerdem ist bei Grafiken zu beachten, dass sie noch auf den Monitor passen und nicht abgeschnitten sind. Wichtig ist es daher, um auch ein einigermaßen einheitliches Bild für LeserInnen der Website herzustellen, Seitenmaße zu beachten. Ausgehend von einem 17- oder 19-Zoll Monitor und dem daraus resultierenden Bildschirmbereich von 800 x 600 Pixel ergeben sich folgende sichere Abmessungen:

Printlayout:

Max. Breite = 560 Pixel Max. Höhe = 410 Pixel (sichtbar ohne scrollen)

Seitenlayout, das die Bildschirmoberfläche optimal ausnutzt: Max. Breite = 760 Pixel Max. Höhe = 410 Pixel (sichtbar ohne scrollen)

Beim Seitenlayout sind einige wichtige Regeln für die Textausrichtung zu beachten. Blocksatz soll in Webdokumenten nicht verwendet werden, da dadurch unregelmäßige Wortabstände produziert werden, die den Text am Bildschirm schwer lesbar macht. Außerdem sind zentrierte und rechtsbündige Text eher zu vermeiden. Ein zerklüfteter Text am linken Rand erschwert das Lesen eines Webdokumentes erheblich. Ein linksbündiger Text ist die beste Option für Webseiten.

Weiterführende Information: http://www.webstyleguide.com/page/dimensions.html

Literatur

Quellen

WEINMAN LYNDA, Insiderbuch.WebDesign.2,Zürich 2000

LYNCH J.PATRICK, HORTON SARAH, Hrsg. ROSDALE RAY M., Erfolgreiches Web-Design, München 1999

Weiterführende Links

• [2]
• [3]
• MUSSS-Moodle

Theorieteil: Skriptum

empfohlener Editor.

http://www.kompozer.net/

Einführung in das Arbeiten mit Kompozer:

http://students.idv.edu/~0455737/Projekt/anfaenger.html

http://students.idv.edu/~0455737/Projekt/fortge.html