Inhalt

1. Grundprinzipien für das Design elektronischer WWW-Dokumente
2. Dokumentdesign: Regeln für die einzelne "Seite"
3. Serverdesign: Das größere Ganze
4. Optimale Performanz von Graphiken
5. Technische Feinheiten: Tips und Tricks zu HTML
• Typische Designfehler und HTML-Fallen

• Literatur: Hinweise auf verwendete und weiterführende Quellen
• Impressum

siehe auch:

• Detaillierte Verzeichnis- und Dateistruktur des FASK-Servers
• Dokumentvorlagen für die
• benutzerfreundliche formatierte Eingabe in Word/RTF und anschließende Konvertierung in HTML mit dem RTFtoHTML-Converter 3.0
• entsprechende Vorlage zur Erstellung von Seiten mit den Editorfunktionen von Netscape Navigator Gold (aktuelle Version: 3.0)
• direkte Eingabe in HTML-Codierung (z.B. zur Nachbearbeitung fremder Seiten geeignet!)
• Selbst erstellte Unterlagen zu HTML sowie die "offiziellen" Netscape-WWW-Dokumentationen

Dieses Kapitel stellt einige Ansätze und Überlegungen zum Gestalten von Web-Seiten zusammen, die sowohl auf unterschiedlichen Quellen (allesamt elektronisch im Volltext verfügbar) als auch eigenen Erfahrungen beim Aufbau des FASK-Servers beruhen.

Trotz aller Bemühungen, alle wichtigen Quellen und Faktoren zu berücksichtigen (siehe Zusammenstellung der Literatur am Schluß), ist diese Zusammenstellung (und Bewertung) von Designprinzipien selektiv und subjektiv. Auch sind - v.a. aufgrund der knappen Ressourcen, insbesondere dem Faktor Zeit - mit Sicherheit nicht alle Forderungen auf dem Server des FASK optimal umgesetzt.

Aber gerade in dieser Diskrepanz zwischen ad-hoc in der Praxis erstellten Web-Dokumenten und wissenschaftlich-theoretischen Prinzipien und Anforderungen liegt vielleicht der Reiz dieser Form des elektronischen Publizierens. Denn noch zu oft wird im elektronischen Dokument das Papierdokument auch in den Elementen "nachgebildet", die die elektronische Nutzung eher einschränken bzw. so nicht zutreffen.

Denn medientypische Regeln und über Jahrhunderte herausgebildete klare Prinzipien wie beim "traditionellen" Medium Papier existieren in diesem neuen Medium so gut wie noch nicht. Ganz im Gegenteil - der Charakter und die optimalen Gestaltungselemente von elektronischen bzw. speziell Web-Dokumenten sind noch sehr unklar und somit ergibt sich ein weites Experimentierfeld, daß nicht nur den - oft damit betrauten - EDV-Technikern überlassen werden darf, sondern von den Anwendern selbst übernommen werden sollte.

1 Grundprinzipien für das Design elektronischer Dokumente

Zunächst soll auf einige grundlegende wissenschaftlich-theoretische Erkenntnisse hingewiesen werden, die für das praktische elektronische Publizieren im WWW m.E. von großer Bedeutung sind (und viel zu oft vernachlässigt werden)

• Benutzermodellierung: (basierend auf [ Luckhardt]).
  Die oberste Regel der Software-Ergonomie - also der Wissenschaft, die sich mit der optimalen Gestaltung von Computeranwendungen beschäftigt - lautet:
  "Der Benutzer soll wissen, was ihn erwartet!"
  
  Daher soll vor dem Entwurf überlegt werden:
1. Um welche Art von Informationsangebot handelt es sich?
• Ist es ein strukturiertes oder assoziativ - als Hypertext - aufgebautes Informationssystem, oder
• dient es lediglich der Unterhaltung?
  
2. Die Bestimmung der Zielgruppe hängt eng damit zusammen:
• Wer soll die Seiten benutzen, sich angesprochen fühlen?
• Welche Bedürfnisse, welches Vorwissen liegt vor?
• Welche Informationen sind für diese Zielgruppe - und nicht nur den Autoren - relevant und interessant?
• Umgekehrt ist natürlich auch zu beachten, was man über sich selbst aussagen will!
  

So ist es z.B. sehr wesentlich, daß ein (auch) für blinde Studierende entworfenes bzw. von diesen genutztes Web-Angebot nicht nur mit der neuesten Version des graphischen Netscape-Browsers, sondern auch mit dem text-orientierten Lynx-Browser dargestellt werden kann. Deshalb muß darauf geachtet werden, daß etwa die zahlreichen Netscape-spezifischen HTML-Erweiterungen nicht "sinntragend" eingesetzt werden, sondern lediglich der optischen Verschönerung von Seiten für sehende Benutzer dienen dürfen.

• Die Multilingualität ist ein weiterer, zielgruppenabhängiger Faktor: So müssen durchaus nicht alle Informationen unbedingt mehrsprachig bzw. in der Internet-Standardsprache englisch angeboten werden. In den Fällen, wo die Information aufgrund ihrer rein lokalen Bedeutung z.B. nur in deutsch angeboten wird, sollten aber zumindest international bzw. interkulturell verständliche Symbole verwendet werden, um auch nicht sprachkundigen eine Navigation von dieser Seite weg zu ermöglichen.
  
• Eine adaptive Benutzermodellierung ist der nächste Schritt in der zielgruppen-gerechten Informationspräsentation, indem die angebotene Information in Abhängigkeit von den besonderen Interessen zusammengestellt wird.
  Eine Differenzierung nach Benutzergruppen läßt sich durchaus noch manuell bewältigen, aber Fortschritte in der Softwaretechnologie zielen auf eine vollautomatische Anpassung ausgewählter Informationen an das gezeigte Benutzerinteresse (durch sog. Agenten). Ein erster Schritt in diese Richtung ist die automatische, dynamische Generierung von HTML-Seiten aufgrund bestimmter Benutzereingaben, wie sie etwa für Suchanfragen in weltweiten Suchsystemen (Bsp.: Lycos) oder lokalen Sammlungen wie Bibliothekskatalogen (Bsp.: Südwestdeutscher Bibliotheksverbund) typisch sind, ein weiterer automatische Filtersysteme (etwa von Mercury), die das gesamte Informationsangebot des WWW nach vorgegebenen Schlagwörtern auswerten.
  
• Medienadäquates Design
  Das elektronische Medium und speziell die durch das Prinzip der Markup Language (vgl. Kapitel 2.4) vorgegebenen spezifischen Designmöglichkeiten (und -grenzen) erfordern ein Umdenken bei der Gestaltung von Dokumenten gegenüber dem Design für eine gedruckte Darstellung.
  Denn es existiert nicht nur eine einzige, weitgehend standardisierte Umgebung beim Benutzer wie es das Papier[2] darstellt, sondern viele teilweise völlig unterschiedliche Rechnerkonfigurationen, Betriebssystem-platt-formen und auch individuell einstellbare Browser beim Benutzer sind zu berücksichtigen.
  Daher legt die HTML ein besonderes Gewicht auf die logische Formatierung, die erst am einzelnen Rechnersystem in eine konkrete Darstellung umgesetzt wird.
  
  Soll nun das Design auf eine Minimalkonfiguration abzielen, die alle oder möglichst viele Benutzer (bzw. Computersysteme) erfüllen oder kann die technische Austattung der anvisierten Zielgruppe eingeschränkt werden, ohne das Risiko einzugehen, zu viele "potentielle" Benutzer auszuschließen?
  
  Die zwei Hauptprobleme für das Design von Webseiten und -angeboten sind also (nach CAIM):
1. Den Benutzer/Leser derart durch eine komplexe Menge miteinander vernetzter Information führen, daß er sich optimal informieren kann.
2. Eine visuelle rhetorische Ausdrucksform mit den Möglichkeiten von HTML zu schaffen, die der interaktiven Darstellung auf Bildschirmen angemessen ist.
• Orientierungs- und Navigationshilfen
  Eine klare Strukturierung (zur Orientierung) und aussagekräftige Verweiselemente (als Text bzw. Symbole) sind grundlegend für die Benutzbarkeit eines Web-Angebotes.
  Die damit zusammenhängenden Fragen - etwa wieviel Erläuterungen zu einem Verweis gehören - werden in den folgenden Abschnitten mitbehandelt.

Die beste Designstrategie ist also, einige grundlegende Designprinzipien auf jeder Webseite umzusetzen. Viele dieser Prinzipien lassen sich vom gedruckten in das elektronische Medium übernehmen und sind in Standardwerken wie dem Chicago Manual of Style (1982) festgehalten.

2 Informationsstruktur: Das einzelne Dokument

Das wichtigste für ein gutes Informationsangebot - inwiefern es im Sinne der oben aufgeführten Diskussion um Informationsarten auch für Unterhaltungsangebote gilt, sei dahingestellt - ist der Inhalt, d.h. die Webseiten enthalten (auf Dauer) nicht nur eine Begrüßung ("Willkommen zu meiner/unserer Seite"), sondern echte, einzigartige und - zumindest für manche Leser - nützliche Information. Solche Information kann zwar neben anderem auch eine Sammlung von Verweisen auf Informationsquellen Dritter im WWW sein, sollte sich aber nicht unbedingt darauf beschränken.

• Die Informationsstruktur eines Dokumentes dient als Orientierungshilfe:
  Ein gut strukturiertes Dokument muß dem Nutzer jederzeit zeigen, wo er sich befindet und wie er von dort aus zu anderen Webseiten kommt.
  Dies bedeutet im einzelnen:
• Ein aussagekräftiger, aber nicht zu langer Titel (max. 20 Zeichen). Der Titel wird u.a. beim Ausdrucken und beim Abspeichern als Datei (Unix/Mac) oder Lesezeichen verwendet.
• Verweise auch innerhalb des Dokumentes einsetzen, z.B. um vom Ende an den Anfang eines längeren Dokumentes zu gelangen.
• Aussagekräftige Überschriften als Verweise auf die einzelnen Dokumentteile verwenden.
• Ein Feedback ermöglichen und zwar indem am besten direkt eine "aktive" E-mail-Adresse (mailto:name@adresse) angegeben wird.
• Auf jeder Seite das Datum der letzten Bearbeitung[3] und eine Kontaktadresse angeben, damit der Leser über den Stand der Seite informiert ist.
  Denn bekanntlich ist nichts älter als die Neuigkeit von gestern ....
• Im Interesse eines guten, informativen Designs ist es wichtig die (noch) nicht standardisierten HTML-Elemente vorsichtig einzusetzen.
  Deshalb:
• HTML-Erweiterungen nur einsetzen, wenn sie entweder von mehreren Browsern unterstützt werden (z.B. Tabellen), oder keine negativen Effekte mit sich bringen, wenn sie nicht unterstützt werden (z.B. Hintergrundfarben).
  
• Grundsätzlich sollte bei dem Text des Dokumentes eher angegeben werden, um was es sich handelt (logische Markierung) und nicht, wie es aussehen soll (physikalische Markierung). So ist z.B. für Adressenangaben die Markierung <address></address> der (bei Netscape) optisch gleichen Markierung <i></i> vorzuziehen.
  Der Vorteil der logischen Markierungen ist auch, daß einige Suchsysteme (wie Lycos) diese als semantische Indikatoren für ihre Indexierung verwenden und so die Suchbarkeit des Dokumentes wesentlich verbessern.
• Anstatt ein Logo "Enhanced for Netscape 3.0" o.ä. zu verwenden, lieber darauf achten, daß das Dokument auf allen bzw. verschiedenen Browsern lesbar ist und professionell wirkt.
  =>also besser sich gleich nach einigermaßen etablierten Standards richten!
• Strukturierungsmöglichkeiten ausnutzen:
  Überschriften und verschiedene Listenformate erlauben verschiedene Möglichkeiten der Gliederung des Textes.
  Bei Listen ist der Vorteil des WWW gegenüber anderen Internet-Informationssystemen (z.B. Gopher und WAIS) die Integration von Menüs und Fließtext. Daher können auch Verweiseinträge ausreichend umschrieben werden, wobei diese Erläuterungen aber nicht zu ausschweifend sein sollten.
• Typographie in Web-Dokumenten ist ein großes Problem, da sie einerseits nicht so genau festgelegt werden kann, wie für das Papier (z.B. kann kein bestimmter Zeichensatz vorgegeben werden), andererseits aber für die Lesbarkeit und den Gesamteindruck sehr wichtig ist. Deshalb gilt:
• Auf wenige Überschriften- und Hervorhebungsarten beschränken, damit die Betonung der entsprechenden Stellen auch zur Geltung kommt.
  So wirken die niedrigeren Überschriftsebenen wesentlich ruhiger als <h1>, daß auf den Gesamttitel (im Text) beschränkt werden kann (Aber daran denken: Als gültiger HTML-Code darf keine Ebene übersprungen werden!
• Mit typographischen Elementen wird auch das gesamte Erscheinungsbild der Seite bestimmt. Daher sollte eine Webseite immer gleich aufgebaut sein.
• Zur Auflockerung des Textes sehr gut geeignete Elemente, die aber den Text nicht übermäßig betonen, sind die Markierungen <blockquote></blockquote> und unnumierte Aufzählungen.

3 Navigationsstruktur: Aufbau eines WWW-Angebotes

Die einzelnen Dokumente (oder Webseiten) sind Mosaiksteine, die durch hierarchische oder Querverweise zu einem mehr oder weniger vernetzten Gesamtangebot verbunden werden.
In diesen größeren Rahmen fallen Überlegungen wie:

• Gesamtorganisation: Eine klare Struktur kann durch verschiedene Möglichkeiten dem Leser (Neuling wie "Gauerdast") das Informationsangebot leichter zugänglich und damit interessanter machen.
  Wichtige Elemente sind (im Vergleich zum Buch, dem Printmedium):
• Inhaltsverzeichnis wie im gedruckten Buch, wobei - im Gegensatz dazu - verschiedene Detailebenen oder von der Interessenlage abhängige Gewichtungen optimal auf den Nutzer eingehen können;
• Durchsuchbarer Gesamtindex, daß durch die Volltextsuche (im Gegensatz zum aus Schlagwörtern bestehenden Buchregister) und Kombinationsmöglichkeiten eine wesentlich genaueres Suchergebnis ermöglicht.
  Eine Suche kann sich dabei auf ein bestimmtes Dokument (Markierung ISINDEX), ein lokales Informationsangebot (etwa mit dem Harvest-Indexierungssystem) oder das ganze Internet (vgl. Suchmaschinen, Anhang G) erstrecken.
• Liste der Neuigkeiten, so daß ein regelmäßiger Besucher auf einen Blick sehen kann, was sich geändert hat. Ändern sich nur einzelne, aber wesentliche Textteile innerhalb eines Dokumentes, so kann diese Änderung auch durch eine entsprechende Graphik hervorgehoben werden.
  Inzwischen gibt es auch Dienste im Internet, die automatisch die Veränderung bestimmter Seiten registrieren und daraufhin eine entsprechende e-mail an den Benutzer schicken.
• Dokumentgröße und -aufteilung:
• Die einzelnen Webseiten sollten nicht zu kurz sein - es muß sich inhaltlich lohnen, sie aufzurufen -, aber dürfen auf keinen Fall zu lang sein. Bei etwa 32 Kilobyte liegt das absolute, teils auch technisch bedingte Maximum. Empfohlene Werte sind 10 Bildschirmseiten ( UMD) oder 3-4 gedruckte DIN A4-Seiten ( CAIM).
  Für kürzere Seiten spricht auch, daß so die hohe Aktualität elektronischer Dokumente besser umgesetzt werden kann.
• Eine andere Frage ist, ob Fußnoten am Ende des Hauptdokumentes erscheinen ausgelagert werden, und ob alle Fußnoten in eigenen Dateien oder in einer gemeinsamen Datei gespeichert werden. Dies hängt allein von den Präferen-zen (und dem möglichen Bearbeitungsaufwand) des jeweiligen Autors ab.
• Relativ kurze Absätze erleichtern das Lesen am Bildschirm.
  HTML bietet eine zusätzliche Möglichkeit zur Auflockerung mit dem Element <hr>, dem waagerechten Strich.

Insgesamt sollten ein Dokument als Webseite nur so lang sein, wie es sein muß und v.a. in einer vernünftigen Zeitspanne geladen werden (Dies bedeutet also: Je mehr Bilder, desto weniger Gesamtext). Für eine optimale elektronische Darstellung sollte man lieber nach Möglichkeiten suchen, das Dokument sinnvoll aufzusplitten (etwa die einzelnen Kapitel eines Aufsatzes) und zusätzlich eine zusammenhängende, druckfertige Version anbieten (etwa als Postscript- oder PDF-Datei).

• Verweise sind die Grundelemente der Navigation und ein besonderes Merkmal von Webseiten. Eine Besonderheit und ein wesentlicher Vorteil des elektronischen Mediums, insbesondere WWW, gegenüber dem Papier ist die Möglichkeit, daß der Leser vom System bzw. Dokument dabei unterstützt wird, sich seinen eigenen Weg durch die angebotene Information zu finden und dabei nur die Stellen aufzusuchen, die ihn wirklich interessieren. Soweit die Theorie - in der Praxis sind diese Überlegungen oft nur schwierig und mit zu großem Zeitaufwand umzusetzen.
  Jedenfalls sollte das Design von HTML-Seiten die Möglichkeiten der Verweise betonen ( CAIM).
  
  Einige wichtige Faktoren für Verweise sind:
• Dokumentinterne Verweise können durch ein # oder ähnliches Zeichen markiert werden, um sie deutlich von externen Verweisen zu unterscheiden.
• Das Ziel des Verweises soll deutlich beschrieben sein.
• Besondere Arten von Verweisen jeweils deutlichals solche kennzeichnen, etwa
• Fußnoten in eckige Klammern setzen, anstatt sie nur hochzustellen;
• Im Text erwähnte Mail-Adressen und Newsgroups aktiv verweisen (mit mailto: bzw. news:)
• Verweise lassen sich besser verwalten, wenn sie deutlich nach ihrer Art unterschieden werden. Neben Fußnoten sind häufig Klassen von Verweisen ( CGH, CAIM):
• Navigierende Verweise: Eine Einbettung des Dokumentes in seine Umgebung ist zwingend notwendig, da man nie weiß, über welchen spezifischen Verweis (auch von fremden Dokumenten) der Leser auf die einzelne Webseite gelangt ist. Im Falle der Baummetapher gehört hier etwa der hierarchische Verweis auf das oder die übergeordnete(n) Dokument(e) hin. Dabei sollte aus den eben genanten Gründen vermieden werden, von "Zurück zur ..." zu reden - zurück kommt man nur mit der "Back"-Funktion (in so ziemlich jedem Browser vorhanden).
• Menüverweise stoßen entsprechend tiefer in die Hierarchie vor und verzweigen von einem Hauptdokument zu verschiedenen untergeordneten Webseiten. Graphische Varianten (wie etwa bei der Home Page der us-amerikanischen Regierung) sind dabei wesentlich zeitaufwendiger zu laden und sollten daher von einer rein textbasierten Variante begleitet werden.
• Externe Verweise zu völlig anderen Dokumenten. Damit läßt sich das eigene Dokument in das weltweite Informationssystem WWW einbetten, aber man gerät auch in Gefahr, den Leser erstmal zu verlieren. Deshalb ist es oft besser (wie auch hier angewendet), zunächst auf einen eigenen Bereich im eigenen Dokument zu verweisen (die klassische "Literaturliste"), von wo aus der Leser bei Bedarf zu den zitierten Dokumenten springen kann.
• Register tauchen im WWW als zwei Arten auf: Der maschinell erstellte Volltextindex und das manuell zusammengestellte Register mit wichtigen Begriffen. Bei großen Dokumenten hilft zusätzlich ein systematisches Inhaltsverzeichnis den gewünschten Bereich zu finden.
• Konsistenz (auch als "Designrahmen" ( CAIM) bezeichnet) ist ein wichtiger Faktor sowohl für eine leichte Nutzbarkeit als auch eine bessere Pflege des Informationsangebotes. Wichtig ist, daß HTML eben nicht die Möglichkeiten klassischer DTP-Systeme zur Verfügung stellt (bzw. stellen will), die eine minutiöse Kontrolle des Aussehens erlauben.
  Enstprechende Elemente sind:
• Kopf- und Fußzeilen (analog zu denen im gedruckten Element) können als Graphiken oder Text wichtige Orientierungsinformation (wo befindet sich der Leser, wann und von wem wurde das Dokument geschrieben/bearbeitet?) enthalten.
  Als konkrete Angabern sollten enthalten sein: Verweise auf die übergeordneten und ggf. verwandte Dokumente, URL des aktuellen Dokumentes, Autor und Datum der letzten Bearbeitung.
• Graphische Elemente: Ein einheitliches graphisches Erscheinungsbild - ob es nun gleichartige Farben, Größe oder Position der Bilder bzw. Symbole auf allen Seiten sind - steigert den Wiedererkennungsswert des Angebotes und zeigt, daß das Angebot zusammengehört.
  Dadurch kann ein gewisser persönlicher Stil geschaffen werden, der das eigene Angebot aus der schnell und unüberlegt zusammengeschusterten Masse der Server heraushebt.
• Beständige Adressen: Da die Seiten und ihre URL-Adressen von vielen Seiten gelesen und - z.T. ja auch automatisch in Suchmaschinen - verwiesen werden, ist es wichtig, von Anfang an sich eine ausbaufähige Verzeichnisstruktur zu überlegen. Wenn einzelne Adressen oder Dateinamen später geändert werden, ist es wichtig, die alten Adressen gültig zu erhalten (in UNIX steht dazu ein link-Befehl zur Verfügung: ln -s NeuerName Verweis). Allerdings sollte die Änderung trotzdem an die wichtigsten Suchsysteme gemeldet werden.
• Metaphern sind in der Software (-Ergonomie) ein beliebtes Werkzeug, um nicht nur eine konsistente Informationsstruktur zu schaffen, sondern dem Leser auch verständlich zu vermitteln, indem die Serverstruktur mit altbekannten Umgebungen verglichen wird. Typische Metaphern sind das (elektronische) Buch, ein Gebäude oder ein Baum (nach CGH), wobei sich eine optimale Anwendung immer nach dem zugrundeliegenden Informationstyp richtet.
• Die einfachste Metapher ist das Buch, bei dem das Dokument bzw. die Information in Kapitel, Seiten und Sonderteile wie Inhaltsverzeichnis und Register aufgeteilt wird. Auf der anderen Seite erscheinen Sammlungen von Bücher als (elektronische) Bibliotheken, die durch Kataloge erschlossen werden.
  Die Grenzen dieser Metapher liegen in dem Verständnis einer "Seite" als kleinster Einheit, da das elektronische Medium vom Papier her nützliche Hilfsmittel wie Seitenzahlen nicht bieten kann.
• Ein weitere Metapher basiert auf Gebäuden und gliedert die Information in -inhaltsbezogene - Räume, zusammengehörende Flure und sogar virtuellen Städten. Fortschritte in der 3D-Technik - etwa mit der Implementierung der Virtual Reality Markup Language (VRML) - lassen diese Metapher immer perferkter werden. Heute beschränken sich die Navigationsmöglichkeiten allerdings oft noch auf den Wechsel von zweidimensionalen Grundrissen zu der dazugehörigen (textuellen) Information.
• Die dritte Metapher, der kontrollierte wachsende Baum, ist optimal mit Dateisystemen zu verbinden und daher recht einfach umzusetzen (und durchzuhalten). Hier wird die Information so strukturiert, wie die dazugehörigen Dateien in hierarchischen Verzeichnissen abgelegt sind.
  Diese Organisation ist für den Anfang zur Verwaltung optimal, da die Information so präsentiert wird, wie sie tatsächlich gespeichert ist.
• Für alle Metaphern gilt als Grundatz:
• Ein Haupteinstiegspunkt sollte verfügbar sein (entsprechend der Hauptseite von Servern oder einzelnen Unterangeboten), an dem das Gesamtangebot übersichtlich dargestellt wird. Je nach Umfang des Angebotes kann das eine von Hand erstellte, systematische Liste oder eine durchsuchbare Datenbank sein.
• Mehrere Wege zum selben Inhalt anbieten. Unterschiedliche Benutzer haben andere Vorkenntnisse und Informationsbedürfnisse. Trotzdem kann dieselbe Information für sie von Nutzen sein, auch wenn sie auf verschiedenen Wegen danach suchen.

4 Grafiken und Gesamterscheinungsbild

Neben dem Text sind Grafiken der zweitwichtigste Bestandteil eines Web-Dokumentes, das ja theoretisch noch eine ganze Reihe weiterer Medien (Audio, Video) bzw. Dateitypen (Animationen, etc.) einschließen kann.

Die im Dokument integrierte Darstellung von Grafiken scheinen für viele Webdesigner auch die Hauptattraktion des Webs zu sein, da dies der wesentliche Unterschied zu anderen Internetdiensten ist.
Hierbei ist jedoch Vorsicht geboten!

Als Grundregeln für den Einsatz von Bildern gelten also:

• Nicht nur, daß sorgfältig unter den eigenen Bedingungen (Bildschirmgröße, Browser) formatierte Text- und Bildkombinationen bei anderen Benutzern volkommen anders dargestellt werden können, auch ist es inzwischen erwiesen, daß die meisten Benutzer beim Browesen wegen der langen Übertragungszeiten die Anzeige von Bildern abschalten. Deshalb sollte immer auch ein Alternativtext angegeben werden, der die Bedeutung des (nicht geladenen) Bildes angibt.
  Die genau plazierte Darstellung von Bildern auf einer Web-Seite läßt sich am besten kontrollieren, wenn man das Bild in eine Tabelle (ohne Randdarstellung) einbettet.
• Die sehr beliebten farbigen Punkte und Linien, die gerne statt der monoton schwarzen Gegenstücke verwendet werden, haben den Nachteil, daß sie nicht angezeigt werden, wenn die Bildübertragung abgeschaltet ist. Auch sonst vergeht mehr Zeit für den Verbindungsaufbau als die eigentliche Übertragung der oft kleinen Dateien. Ein Ausweg ist die Nutzung zentraler Verzeichnisse, so daß jedes wiederverwendete Bild nur einmal geladen werden muß.
• Auf der anderen Seite sollten besonders große Bilder nicht direkt in das Hypertextdokument eingebettet, sondern über ein kleines Symbol (und ggf. eine Größenangabe) verwiesen werden. So weiß der Benutzer, was ihn erwartet und kann selbst entscheiden, ob er die Wartezeit auf sich nehmen will.

Eine Optimierung der graphischen und multimedialen Fähigkeiten von Webseiten läßt sich durch folgende Techniken erreichen (einige davon sind allerdins auf Netscape begrenzt):

• Optimale Größe der in das Dokument integrierten Graphiken (sog. Inline-Images).
  Es ist sehr ärgerlich und mühsam für die Benutzer, wenn bei dem Seitendesign von zu großen Bildschirmen ausgegangen wird. Sowohl auf Macintosh- als auch Windows-Rechnern wird das Netscape-Fenster automatisch auf eine Breite von ca. 500 Pixel formatiert, da auf den meisten 13-15"-Bildschirmen 640x480 Pixel dargestellt werden. Dies ergibt eine nutzbare Breite von 475 Pixel für Graphiken.
• Zeilenweiser Aufbau der Bilder (Interlaced) ist nur mit GIF-Grafiken möglich. Durch diese Technik entsteht schon wärehnd des Ladens eine schnelle Vorschau auf das Bild, die dem Benutzer auch sehr schnell den Zugriff auf enthaltene Verweise ermöglicht.
• Niedrigauflösende GIF-Graphiken sind eine andere Methode um dem Leser sehr schnell eine grobe Darstellung zu präsentieren, wobei diese Grafiken dann später - sofern (Rechen- und Lade)zeit vorhanden ist - durch qualitativ hochwertige Varianten ersetzt werden.
• Höhen- und Breitenangaben für Graphiken: Für Netscape (ab 2.0) und HTML 3.2-fähige Browser kann die Größe einer Graphik im IMG-Tag spezifiziert und so die Ladezeit deutlich verringert werden, da der Browser nicht erst die Graphik analysieren muß. Ältere Browser ignorieren die Angaben, so daß sie auf keinen Fall schaden.
  Diese Werte lassen sich auch einsetzen, um eine größere Graphik, auf die verwiesen wird, als Symbol in ein HTML-Dokument einzubetten. Dazu werden die Größenangaben auf relativ geringe Werte (z.B. 72x72) gesetzt.
  Die Größe einer Grafik hängt auch wesentlich von der Farbtiefe ab, also wieviele bits pro pixel (von 1bit=schwarz/weiß bis 24bit=Millionen Farben) eingesetzt werden. GIF unterstützt eine spezielle Farbskala bis zu 8bit (=256 Farben).
  Alternativ dazu kann Netscape aber der Version 2.0 JPEG auch komprierte JPEG-Dateien lesern und damit sehr schnell laden, was v.a. bei einer höheren Farbtiefe sinnvoll ist.
• Grundsätzlich eignet sich JPEG allerdings eher für Fotos und GIF für Zeichnungen und Logos.

5 Technische Feinheiten: Tips, Tricks und Fehlerquellen

5.1 "Technische" Tips und Tricks

• Auf die Portabilität zwischen Serverplattformen achten.
• So ist es sinnvoll, bei allen Dateien den Dateityp anzuhängen (z.B. .gif, .jpg oder .html), auch wenn das jeweilige Betriebssystem es nicht erfordert.
• Ein wichtiger Punkt ist auch die Benennung: UNIX und damit UNIX-basierte Server unterscheiden Groß- und Kleinbuchstaben, so daß um unnötige Probleme zu vermeiden der Dateinamen entweder nur in Groß- oder Kleinbuchstaben geschrieben wird.
• Ferner erlaubt jedes Betriebssystem unterschiedliche Sonderzeichen in den Dateinamen (Macintosh, aber nicht Unix und Windows z.B."/"), so daß nur die Buchstaben a-z (ohne Umlaute), Ziffern (0-9) sowie Punkt und Bindestrich verwendet werden sollten.
• Die Länge des Dateinamens sollte 32 Zeichen nicht überschreiten, bei DOS/Windows 3.x-basierten Dateisystemen ist man sogar auf 8+3 Zeichen beschränkt.
• Fertige HTML-Dateien, die z.B. von anderen Servern heruntergeladen und gespeichert wurden (bei dem Befehl Save As die Option Source nicht vergessen!) können auch mit Word bearbeitet werden, z.B. um die Kopf- und Fußteile aus der Dokumentvorlage hinzuzufügen. Dabei müssen Zeilenumbrüche, Umlaute und andere Sonderzeichen aber von Hand kodiert werden (siehe Liste). Über eine spezielle Dokumentvorlage WWW-HTML.dot des Fachbereiches stehen dafür auch Makros zur Verfügung.
  
• Eine Formatierung als Tabelle eignet sich nicht nur für "klassische" tabellarische Daten, sondern auch als gezieltes Kontrollinstrument für ein bestimmtes Seitenlayout. Aber: (Noch) nicht alle Browser können Tabellen korrekt darstellen! (aus NCSA)
  
• Ein Feedback aus Formularen kann auch ohne cgi-Skript ausgewertet werden, wenn als Action mailto: mit der e-mail Adresse und den Teilen der gewünschten Information angegeben werden.
  <form action="mailto:name@adresse">... </form>
• Die von Netscape in der Version 2.0 eingeführten Forms zur Aufteilung des Bildschirmes in verschiedene Teile sind aus verschiedenen Gründen zu vermeiden bzw. sehr vorsichtig einzusetzen:
1. Sie sind eben Netscape-spezifisch und damit von vorneherein für viele Benutzer (und alle Blinden, die ja keine andere Wahl als Lynx haben) unzugänglich - es sei denn der gesamte Inhalt wird in der Markierung <Noframe> wiederholt.
2. Frames bringen eine Reihe unnötiger Designschwierigkeiten mit sich, wenn man über den eigenen Tellerrand (bzw. Browser) hinausdenkt - Deshalb Vorsicht.
3. Die Navigation widerspricht der sonstigen Verfahrensweise, da die gesamte Frame-Menge für Netscape (in der Version 2.0) als eine Seite zählt und die Verweise innerhalb der Frame-Menge nicht aufgezeichnet werden.
   Auch die Orientierung innerhalb des Angebotes wird bei mehr als zwei Frames sehr kompliziert - und bei zwei Frames kann man bald besser das künftige Standard-HTML-Element <banner> einsetzen (im Moment in Netscape noch nicht implementiert!).

5.2 Typische Designfehler und Probleme mit HTML

Die folgende Liste ist eine (ungeordnete) und bei weitem nicht vollständige Aufzählung von bekannten Problemen bei der Erstellung von Seiten.
Spezielle Hinweise zur Arbeit mit dem Konvertierungsprogramm RTFtoHTML oder einem der Editoren Netscape Gold 3.0 bzw. Microsoft Internet Assistant finden sich in dem jeweiligen Teil von Anhang C.
Quellen (außer eigener - schmerzlicher - Erfahrung): NCSA, UMD, CGH

• Bei einer direkten Eingabe von HTML-Tags muß darauf geachtet werden, daß sich keine Markierungen überschneiden. Die Auszeichnung <h1><a href="test"> Test</h1></a> ist z.B. ungültig, da die beiden Endemarkierungen in der falschen Reihenfolge stehen.
• Die Browser ignorieren mehrere Absatzmarken und Leerzeichen hintereinander, es sei denn, sie sind in einem formatierten Text (<pre></pre>) enthalten.
• Die Markierung <br> und <p> werden nicht zusammen verwendet.
• Die Markierung <p> wird außerdem nicht vor Listenelementen (<li>), Überschriften (<h#>), Trennlinien (<hr>, Adressen (<address></address>), Zitaten (<blockquote></blockquote>) oder formatierten Text (<pre></pre>) gesetzt werden, da diese schon ein Absatzende implizieren.
  Dagegen werden in einer Definitionliste statt mehrerer Marken für Einträge (<DD>) mehrere Absätze mit <p> getrenn.
• Die Markierungen für Überschriften (<h#></h>) sollen nicht als Ersatz für <font size=#> verwendet werden um Absätze größer und fett darzustellen.
• Die häufigsten Fehler bei den Entitäten genannten Sonderzeichen sind:
• Das abschließende Semikolon fehlt:
  Richtig ist &uuml; statt &uuml für das Zeichen Ü;
  Dieser Punkt ist v.a. deswegen zu beachten, weil u.a. Netscape diesen Fehler erkennt und korrigiert - aber nicht alle anderen Browser sind dazu auch in der Lage!
• Die genaue Schreibweise ist zu beachten:
  Richtig ist &quot; und nicht &quote; für ein Anführungszeichen;
• Es sind keine zusätzlichen Leerzeichen notwendig:
  Richtig ist &quot;&lt;P&gt;&quot; zur Darstellung von "<P>"
• Bei der Angabe von URL-Adressen sind folgende Fehler zu vermeiden:
• Wenn ein bestimmtes Verzeichnis und keine konkrete Seite referenziert wird, sollte auch der letzte Schrägstrich angegeben werden:
  http://www.fask.uni-mainz.de/cafl/, nicht http://www.fask.uni.mainz.de/cafl
• Immer den vollständig auflösbaren Domain-Namen des Servers verwenden:
  http://www/~krueger/ bezieht sich auf den lokalen Server des Benutzers (falls vorhanden), nicht auf den Server des Anbieters wie http://www.fask.uni-mainz.de/~krueger/
• Bei Referenzen auf Dokumentteile ( mit #Target) ist auf die genaue Schreib-weise dieser Referenzziele zu achten (Groß-/Kleinschreibung wird hier übri-gens NICHT unterschieden), da sonst das Ziel nicht gefunden werden kann.

• Quellenhinweise (Verwendete elektronische Literatur)

NCSA

A Beginners`s Guide to HTML. revised April 1996, http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

CAIM

P.J. Lynch: C/AIM WWW Style Manual, Rev. 2. September 1995, http://info.med.yale.edu/caim/Manual-1.html

CGH

J. Tilton: Composing Good HTML, Version 2.0.5., http://www.cs.cmu.edu/afs/cs.cmu.edu/Web/People/tilt/cgh/

Checklist

The HyperTerrorist Checklist of WWW Design Errors
Posted by: jorn@mcs.com, Date: Jan 05 1996 11:47:41 CST to alt.hypertext, comp.infosystems.www.authoring.misc,

Luckhardt, Heinz-Dirk

Homepages: begrüßt man so seine Gäste. (Version 2.0 vom 14.3.1995)
http://www.phil.uni-sb.de/FR/Infowiss/papers/hompart.html

UMD-Tips

University of Maryland at College Park Libaries: Style Guide for Authors of Web Pages (Version vom 4.6.1996), http://www.itd.umd.edu/UMS/UMC/BOARD/style_guide.html

• "Further Reading" (Weiterführende elektronische Literatur)
Ciolek, Dr. T.M.:
Quality Info. Systems - Catalogue of Potent Truisms. ANU, Rev.: 19 Apr 1996), http://coombs.anu.edu.au/SpecialProj/QLTY/QltyTruisms.html

[1] : Dieses Dokument ist auch in anderen Dateiformaten verfügbar!

[2] : Selbst für die dem Papiermedium sehr ähnliche Overhead-Präsentationsfolie sind ja ganz eigene Designregeln zu berücksichtigen (etwa größere Schrift, weniger Text ...).

[3] : Hier kann ein typisches interkulturelles Problem auftauchen: Wenn man das Datum nur numerisch (4/10/96) wird es in Europa und USA unterschiedlich interpretiert. Deshalb besser den Monat ausschreiben (10. April .96 oder 4. Oktober 96) oder die invertierte Computerschreibweise (96-10-4) verwenden!

Die URL-Adresse dieser Seite ist: http://www.fask.uni-mainz.de/cafl/kurse/komm/komm-25.html

Erstellt von F. Krüger (e-mail: krueger@nfask2.fask.uni-mainz.de) im Rahmen der Vorlesung Telekommunikation.