Nach Untersuchungen in amerikanischen Usability-Labors lesen bis zu 97 Prozent der Web-Besucher keine Texte. Kann man also im Web auf sprachliche Darstellungsmittel gleich ganz verzichten? Nein, denn die meisten Besucher befassen sich sehr wohl mit Textblöcken, wenn auch nur sehr kurz. Auf der Suche nach Stichwörtern des persönlichen Interesses lesen sie die Texte quer.
Während sich die Entwicklung von Web-Seiten auf multimediale Effekte konzentriert, wird die Textdarstellung meist recht stiefmütterlich behandelt. Für Texte werden kaum mehr Formatierungsanweisungen als zu Urzeiten des HTML verwendet. Dabei gibt es mit Cascading Stylesheets (CSS) die Möglichkeit, auf recht einfache Art Standards festzulegen und dabei wie bei Zeitungen und Zeitschriften das Leseverhalten zu berücksichtigen.
Und es sind nicht einmal Kenntnisse von CSS notwendig, denn Web-Editoren wie Netobjects’ "Fusion", Macromedias "Dreamweaver" oder Adobes "Golive" verbergen diese Formatierungsanweisungen hinter komfortablen Menüs. An einem Beispiel sollen im Folgenden einige wesentliche Möglichkeiten zur Textformatierung gezeigt werden.
So einfach wie eine Textverarbeitung
Fast jeder PC-Benutzer kennt die Arbeitsweise mit Dokumentvorlagen in der Textverarbeitung. Unabhängig vom aktuellen Text sind Vorlagen angelegt, die Formatierungsanweisungen wie Seitenränder, Schrifttypen und -größen enthalten. Für wiederkehrenden Schriftverkehr wird somit komfortabel ein einheitliches Erscheinungsbild eingehalten.
Nach dem gleichen Prinzip wurden in der Web-Beschreibungssprache HTML so genannte Cascading Stylesheets (CSS) eingeführt. Formatanweisungen müssen nicht mehr umständlich über die jeweiligen HTML-Tags angegeben, sondern können mit Hilfe von Textbausteinen, denen eine bestimmte Eigenschaftsliste zugeordnet ist, komplett eingefügt werden.
Der Vorteil liegt auf der Hand: Wesentliche Textelemente wie Lauftext, Überschriften und Listen sind zentral vorgefertigt. Wünscht man eine Änderung in allen Web-Seiten, so muss nur die Formatanweisung in der Vorlage geändert werden. Wer einmal die Schrifttypen einer komplexen Website von Hand angepasst hat, weiß, welcher Arbeitsaufwand auf diese Weise einzusparen ist.
Trotzdem sorgen Detailprobleme und vor allem die inkompatiblen Browser-Versionen für genügend Schweiß bei der Entwicklung von Web-Seiten. Bekanntlich haben sich Microsoft und Netscape in der Vergangenheit mehr um ihre eigenen Browser-spezifischen Erweiterungen Gedanken gemacht als um die Einhaltung von Standards. Von den zahlreichen Möglichkeiten, die CSS bieten, wird daher weiterhin nur eine Teilmenge von beiden Browsern korrekt dargestellt. Darum sind leider auch Stylesheets für die jeweiligen Browser-Versionen individuell einzustellen.
Wie bei vielen anderen Standardarbeiten in der Web-Entwicklung rechnet sich auch hier der Einsatz eines Web-Editors schnell. Die Definition von Stylesheets erfolgt komfortabel über Menüs und Auswahlfelder, womit unter anderem Tippfehler weitgehend zu vermeiden sind. Außerdem optimieren die Editoren je nach Präferenz den Ausgabecode für bestimmte Browser-Versionen. Sie bieten etwa die Möglichkeit festzulegen, welchen Grad an Kompatibilität zu den unterschiedlichen Browser-Typen man definieren möchte. Entwickler, die auf sehr alte Versionen wie den Internet Explorer 3.x oder Netscape 2.x und 3.x Rücksicht nehmen müssen, sind dabei jedoch stark eingeschränkt und können nur die klassische Formatierung mit HTML-Tags verwenden.
Unterschiede zwischen Windows-PC und Mac
Zwar helfen auch hier Web-Editoren, indem sie die Codierung im HTML-Quelltext durch Klicken mit der Maus ersetzen. Die Ausrichtung und Genauigkeit der Ergebnisse in den älteren Browser-Versionen ist jedoch nicht gewährleistet. Da sich aber die Anzahl der Nutzer dieser inzwischen veralteten Web-Clients im unteren einstelligen Prozentbereich bewegt, müssen nur noch wenige Entwickler auf sie Rücksicht nehmen.
Unabhängig von persönlichen Vorlieben sollte daher der HTML-Code immer für den Microsoft Internet Explorer ab Version 4 und für den Netscape Navigator ebenfalls ab Version 4 optimiert sein. Das bläht die Datenmenge und damit die Ladezeit zwar ein wenig auf - da vom Editor in vielen Fällen für Anweisungen immer mehrere Varianten generiert werden müssen -, sorgt aber andererseits für eine gewisse Sicherheit bei der Ausgabequalität am Bildschirm des Anwenders. Nur wer für Intranets entwickelt, in denen ein bestimmter Browser als Standard festgelegt ist, kann sich dann auch getrost auf dessen Eigenheiten beschränken.
Das Kreuz mit den Tabellen
Tabellen sind zwar eine sehr einfache, aber immer noch die grundlegende und wichtigste Möglichkeit für eine formatierte und gut positionierte Darstellung der verschiedenen Elemente einer Seite. Verschachtelte Tabellen erhöhen aber die Ladezeiten. CSS erlaubt nun, Grafiken und Schriften über Formatanweisungen sehr genau zu positionieren. Ausgereifte Editoren bieten hier die Möglichkeit, gleichzeitig CSS-Positionierung für den Explorer und Tabellen-Formatanweisungen für den Navigator zu verwenden. Das ist derzeit wohl der beste Kompromiss, um es beiden Browsern recht zu machen.
Und wie legt man mit Hilfe dieser Werkzeuge Textformate an? HTML-Standardformaten wie den Überschrift-Tags H1 bis H6 kann man bevorzugte Schriften, Größen und Auszeichnungen zuordnen. Im Sinne einer sauberen und übersichtlichen Arbeitsweise ist es aber sinnvoller, die Standardformate nicht zu manipulieren und stattdessen eigene Formate anzulegen.
Mit der Definition eines neuen Elements legt man eine neue CSS-Klasse an. Bei der Schriftgröße hat man die Wahl zwischen absoluten Maßen in Punkten und proportionalen Angaben in Prozent. Auch wenn die Kontrolle über die Ausgabe damit zum Teil verloren geht, sollte man sich immer für proportionale Angaben entscheiden. Danach berechnet der Browser selbst die darzustellende Schriftgröße - ausgehend von einer Standardschrift. Dies ist besonders wegen der unterschiedlichen Grundauflösung der Windows- und Mac-Bildschirme wichtig. Auf dem Mac-Monitor erscheinen die Schriften grundsätzlich etwa zwei Stufen kleiner als auf dem PC-Bildschirm. Weitere wichtige Formatanweisungen sind Ausrichtung, Zeileneinzug und Bildumlauf. Besonderen Wert sollten Entwickler auf die bisher kaum verwendete Eigenschaft "Zeilenhöhe" legen. Da im Standard-HTML nur die Grundabstände zur Verfügung stehen, haben sich dazu bisher nur wenige Designer wirklich Gedanken gemacht. Vom Printbereich her weiß man, wie wichtig dieser Abstand - im Fachjargon Durchschuss genannt - für den Lesefluss ist.
Denn je nach Abstand fällt es dem Auge leichter oder schwerer, den Anfang der neuen Zeile zu finden. Wie bei einer Zeitung können nun auch über CSS exakte Zeilenabstände definiert werden. Auch diese sollte man aber nicht in absoluten Werten, sondern möglichst in Prozent der gültigen Buchstabenhöhe angeben.
Für die Ausgabe am Bildschirm sollte man nach folgender Faustregel arbeiten: Bis zu einer Zeilenlänge von etwa 50 Zeichen beträgt der Zeilenabstand 120 Prozent. Bei längeren Zeilen gilt es, ihn sukzessive zu vergrößern.
Eine Formatierung mit CSS ist für eine einzelne oder mehrere Seiten einer Web-Präsenz möglich. Wie der Name "cascading" sagen will, gilt grundsätzlich die Erbfolge, das heißt, untergeordnete Seiten übernehmen die Formatdefinitionen von ihnen übergeordneten HTML-Dateien - und zwar so lange, bis auf einer Seite eine benutzerdefinierte Anweisung auftritt. Entsprechend können Web-Editoren unterschiedliche Gültigkeitsbereiche für die gesamte Site oder deren Teile angeben.
Diese Bereiche sind in den Dateien "site.css" und "style.css" abgelegt. Ein Referenz auf diese beiden Dateien befindet sich dann auf jeder HTML-Seite. Kleine Änderungen, die sich dann auf die Darstellung des gesamten Web-Auftritts auswirken, sind so später auch mit einem normalen Texteditor auszuführen.
Wieder verwendbare Vorlagen
Hat man einmal seine Grundformate aus Schriften, Größen, Zeilenhöhen, Einzügen und Initialen aufgebaut, so ist der erste wichtige Schritt zu einer besseren Lesbarkeit der Texte im Web gemacht. Die CSS lassen sich danach auch für andere Neuentwicklungen verwenden und ersparen dem Web-Designer künftig viel Arbeit.
www.netobjects.de/html/nf4.html
www.adobe.de/golive
www.macromedia.com/dreamweaver
* Heinz Peller ist freier Journalist in München.
TIPPS FÜR DEN WEB-AUTRITT
So werden Texte besser lesbar
Die beste Formatierung nützt nichts, wenn es ihr an sprachlicher Qualität mangelt. Im Web gilt mehr noch als anderswo: "In der Kürze liegt die Würze!" Daher gilt:
- einfache Sätze verwenden, kurze Textblöcke, simple Wortwahl, zusammengesetzte Wörter durch Bindestriche trennen;
- Schriftgrößen möglichst immer in Prozent statt in absoluten Größen anlegen, denn auf dem Mac-Bildschirm erscheinen die Schriften immer zwei Stufen kleiner als am PC-Bildschirm; die Schriftgröße für den Lauftext sollte immer Punktgrößen 10 bis 14 entsprechen;
- für die Standardschriften nur Schriftfamilien einsetzen, die möglichst jeder Anwender hat: Verdana und Arial für den PC, Helvetica und Geneva für den Mac;
- wenn möglich mit Cascading Stylesheets arbeiten und die Textdarstellung optimieren: Zeilenabstand mindestens 120 Prozent, Absätze durch Einzüge oder Initial kenntlich machen;
- schwarz auf weiß liest sich am besten, bunte Farbkombinationen in Text und Hintergrund sind sehr gefährlich; bei farbiger Schrift auf guten Kontrast achten und auch auf farbenblinde Besucher Rücksicht nehmen; als Texthintergrund für den Bildschirm eignet sich am besten ein etwas abgedunkeltes Weiß.