3

actualis-Kurs: Online-Redaktion
Layout und Präsentation

Nach der Journalismus-Einführung im 1. Teil und den Charakteristiken des Online-Textes im 2. ist der 3. Teil des Kurses Online-Redaktion der Gestaltung eines Online-Textes gewidmet.

Da das Lesen am Bildschirm relativ mühsam ist, muss die Gestaltung die Text-Aufnahme möglichst gut unterstützen. Zudem erwarten die Site-Besucher ein attraktives Layout.

Der Kursteil "Layout und Präsentation" bietet folgende Inhalte:

  1. Schrift, Typographie, Farben
  2. Textelemente
  3. Anker und Navigation
  4. Seitenlayout
  5. Bilder und Multimedia

3.1


Schrift, Typographie, Farben

Viel zu wenige Web-Designer spielen mit der Typographie. Versalien (Grossbuchstaben), Farben und Grössenunterschiede tragen bei sorgfältigem Einsatz viel zur Attraktivität einer Site bei - ohne die Modems mit grossen Datenmengen zu belasten! Aber Achtung: Die User können dem Gestalter ins Handwerk pfuschen.

Schrifttypen

Die edel aussehenden Serifen-Schriften wie die klassische Times haben am Bildschirm nichts zu suchen. (Serifen sind die kleinen Strichlein am Ende der einzelnen Linien eines Buchstabens. Das grosse I hat beispielsweise in einer Serifenschrift oben und unten zwei kleine Querbalken.)

Serifenschriften erleichtern auf Papier das Lesen. An den Bildschirmen heutiger Qualität können die feinen Serifen noch nicht präzise genug dargestellt werden. Sie behindern dadurch den Lesefluss.

Geeignete Schriften für Online-Texte sind Arial auf Windows-PCs und Geneva für Macs (bei der Seitenprogrammierung können beide Schriften vorgegeben werden. Jeder Computer wählt die erste, die er darstellen kann).

Serifenschriften können höchstens für Titel verwendet werden, zum Beispiel für den Namen des Site-Inhabers im Kopf der Seite.

Leider können die Site-Besucher ihren Browser so einstellen, dass er nicht die vorgegebenen Textschriften darstellt, sondern eine frei gewählte. Dadurch untergraben sie die Bemühungen des Seitenprogrammierers.

Typographie

Wie der Schrifttyp lässt sich auch die Grösse der Grundschrift durch die Browser-Einstellungen verändern. Dieser Text ist in der Normalgrösse 3 programmiert, der Titel über diesem Absatz (Typographie) um 1 Stufe höher in der Grösse 4 und die Überschrift zum Kapitel 3.1 in Grösse 5.

Macs, die häufig für die Seiten-Programmierung verwendet werden, stellen die Schriften meist etwas kleiner dar als Windows-PCs.

Texte in ihrer Vollversion sollten immer in der Standardgrösse programmiert werden. Sie können sonst kaum gelesen werden. Macs stellen Web-Text übrigens generell etwas grösser dar als Windows-PCs.

Tabellen, Übersichten oder auch Kürzesttexte wie Anrisse auf einer Titelseite (vgl. Kap. 1.3) können indes auch um eine Stufe kleiner formatiert werden.

An Formatierungen bleibt in Online-Texten nur die Fettschreibung zum Hervorheben von Wörtern.

Unterstreichen ist tabu, da dies im Internet traditionell für Web-Links verwendet wird.

Kursivschrift erschwert das Lesen sehr. Teilweise wird die Kursivschrift für direkte Aussagen von Auskunftspersonen in Artikeln verwendet. Sofern diese Aussagen nur kurz sind, macht dies als Gestaltungselement durchaus Sinn. Auch in Printmedien werden häufig direkte Aussagen und insbesondere Kommentare kursiv gesetzt. Auf Letzteres sollte man bei Online-Texten verzichten.

Farben

Als Textfarbe ist für längere Dokumente einzig Schwarz oder allenfalls eine sehr dunkle Farbe geeignet. Generell sollten längere Texte dunkel auf hellem, aber nicht ganz weissem Grund stehen.

Ein weisser Hintergrund blendet zu sehr und ermüdet das Auge, ein zu schwacher Kontrast aber ebenso. Orange Schrift auf Gelb ist kaum lesbar. Völlig ungeeignet für längere Texte sind auch Bilder oder Strukturen als Hintergrund. Sie erschweren das Lesen zusätzlich.

Invers-Schriften, also hell auf dunklem Grund, sind schlecht lesbar, selbst wenn sie fett gesetzt werden. Für längere Texte sind sie nicht geeignet. Auf der Homepage selbst und auf Seiten mit wenig Text sind sie vertretbar und können bestimmte Wirkungen erzeugen, insbesondere das Thema des Mediums grafisch umsetzen. Invers-Schriften müssen fett gesetzt werden.

Bei Titeln, Links und anderen speziellen Textelementen stehen dem Designer alle Möglichkeiten offen. Trotzdem sollte dieser sich nicht vergessen, weniger ist mehr. Ein mögliches Beispiel sind die in dieser Site verwendeten roten Versalien in der linken Spalte. Sie sind ein rein gestalterisches Element und helfen, den Text zu gliedern.

Links verlangen besondere Beachtung. Standardmässig eingestellte Browser stellen sie blau und unterstrichen dar und ändern die Farbe eines Links, nachdem er angeklickt wurde. Damit wird ein Link stark hervorgehoben und erhält fast stärkere Beachtung als ein Titel. Das ist kontraproduktiv, denn es verleitet zum Klicken statt zum Lesen und damit häufig sogar zum Verlassen der Site. Dieses Dilemma wurde hier so umgangen, dass statt des standardmässigen Blaus ein abgedunkelter Blauton gewählt wurde, der weniger hervorsticht. Es ist das selbe Dunkelblau wie in den oberen und seitlichen Rahmen der Site.

3.2


Textelemente

Wie oben erwähnt, können Textelemente typographisch hervorgehoben werden. Weitere Möglichkeiten bieten Tabellen, Ausrichtung, Listen und die Kombination mit Bildelementen.

Generell stellen Browser sowohl Fliesstexte wie auch Titel linksbündig dar. Das garantiert ein optimales Bildschirmlesen und sollte folglich nur ausnahmsweise durchbrochen werden - gerade die gekonnt eingesetzten Ausnahmen aber bringen Spannung ins Erscheinungsbild (auf dieser Site z.B. die rechtsbündigen roten Versalien).

Eine Sonderstellung nimmt der Mediums-Titel im Seitenkopf ein. Bei dessen Gestaltung ist nahezu alles möglich, und Designer stellen ihn oft als Bild-Datei (Gif oder Jpeg) auf die Seiten. Denn nur so ist gewährleistet, dass er durch alle Browser genau gleich dargestellt wird. Das ist im Sinn eines Corporate Designs und der Markenpflege besonders wichtig. Er drückt ja auch in erster Linie ein Image eines Mediums aus und dient der Wiedererkennung, nicht der Nachrichten-Vermittlung.

Bei Artikel-Titeln stehen zur Hervorhebung primär typographische Mittel im Vordergrund, insbesondere Grösse und Fettschrift, eventuell auch Farbe. Obertitel (Spitzmarken), Unter- und Zwischentitel sollen deutlich kleiner sein als der Haupttitel und weniger stark betont werden.

Wie bereits erwähnt, dürfen Titel nie unterstrichen werden, es sei denn, sie sind verlinkt. Aber selbst in diesem Fall kommen immer mehr Online-Medien vom etwas altbacken aussehenden Unterstreichen weg. Auf Zeitungs-Homepages finden sich nur selten unterstrichene Titel-Links. Wichtig ist dann jedoch, dass die selbe Titelformatierung nur für verlinkte Überschriften verwendet wird. Die User klicken sonst vergebens auf nicht verlinkte Elemente.

Der Lead wird meist fett hervorgehoben. Er sollte nicht zu lang sein, weil er sonst visuell ein zu grosses Gewicht erhält. Das wird bei einzelnen Medien dadurch aufgefangen, dass statt des harten Schwarz' bloss eine dunkle Farbe verwendet wird, die den Text etwas leichter erscheinen lässt.

Bildlegenden gehören zum Bild - auch optisch. Ist ein Bild links im Textrahmen platziert, steht die Legende am besten rechts daneben und wird linksbündig gesetzt. Rechtsbündig wird die Legende formatiert, wenn sie links neben dem Bild steht. Zentrierte Bilder verlangen nach eingemitteten Legenden.

Besondere Kurztexte wie Quotes, Kästen, (Link-)Listen usw. müssen ebenfalls hervorgehoben werden. Für sie stehen alle typographischen Hilfsmittel zur Verfügung wie Schriftgrösse, Farbe, Fettschreibung sowie Punktlisten. Dazu kommen die Veränderung des Textflusses (rechtsbündig oder zentriert) sowie das Einrücken. Hinzu kommen gestalterische Hilfsmittel wie Kästen (meist in Form einer anderen Hintergrundfarbe für eine Tabellenzelle) und (meist horizontale) Linien.

3.3


Anker und Navigation

Geübte Zeitungsleserinnen und -leser finden auf einer Seite innert Sekundenbruchteilen die wichtigen Artikel und die Passagen, die ihnen die echten News bringen. Besuchern von Online-Seiten fehlt dieser Überblick. Sie benötigen Navigationshilfen durch den Text und allfällige Nebentexte. Navigations-Konzepte für ganze Sites sind hingegen nicht Bestandteil dieses Kurses.

Vielen Online-Texten sieht man - je nach Betriebssystem -nicht an, wie lang sie sind und ob sie über ausgegliederte Nebenaspekte verfügen. Zwischentitel tauchen erst beim Scrollen auf und Fussnoten bringen oft überhaupt nichts, weil sie meist nicht verlinkt sind.

Die Navigationshilfen sollen also schon beim Aufstarten des Textes einen möglichst guten Überblick vermitteln, zeigen, worum es geht und was der Text beinhaltet. Sie sind eigentliche Inhaltsverzeichnisse. Durch Verlinkung bieten sie direkten Zugang zu einzelnen Themen.

Zwischentitel sind Teil der erwähnten Inhaltsverzeichnisse. Zwischentitel sollten am Anfang eines Texts aufgeführt werden. Am besten geschieht dies in Form einer verlinkten Liste, zum Beispiel neben oder gerade unter dem Lead. Diese Inhaltsverzeichnisse müssen möglichst ohne Scrollen sichtbar sein.

Links sollten aufzeigen, wohin sie führen. Damit weiss der Leser, ob er durch den Klick den Text oder sogar die Site verlässt und wie lange er allenfalls auf das gewünschte Dokument warten muss. Für die Deklaration stehen verschiedene Möglichkeiten offen:

  • explizites Erwähnen: siehe Kapitel 1 oder siehe Lexikon)
  • Angabe einer externen URL: (www.actualis.ch)
  • durch Logos, wie das z.B. das Web-Geschichts-Projekt <w3history> macht (interne Links werden folgendermassen gekennzeichnet: ).

Ob Links im gleichen Rahmen oder in einem eigenen geöffnet werden, hängt vom Zweck der Verlinkung, der inhaltlichen Distanz zum Text, von Marketing-Überlegungen und nicht zuletzt auch vom Geschmack ab:

  • Ein Nebenaspekt oder Hintergrund zum gerade angezeigten Text wird mit Vorteil in einem eigenen Fenster geöffnet. Denn die Lektüre des Haupttextes soll danach wieder aufgenommen werden. Das geschieht bei der Link-Programmierung durch die Erweiterung "_blank" als Zielrahmen-Befehl (Target). In dieser Site wird so immer das Lexikon geöffnet.
  • Linklisten sollten ebenfalls eigene Fenster öffnen, damit die Liste als Ausgangspunkt der Surftour erhalten bleibt.
  • Aus Marketing-Sicht sollten externe Links ebenfalls in eigenen Fenstern erscheinen, damit man den Site-Besucher nicht an die Konkurrenz verliert.
  • Von einem Inhaltsverzeichnis oder der Homepage aus müssen Links freilich im gleichen Fenster erscheinen, weil die Besucher erstens das erwarten und zweitens weil sonst viel zu viele Fenster geöffnet würden.

3.4


Seitenlayout

Hier geht es um das Layout von Texten und nicht von Web-Sites. Wichtig ist dabei die bereits erwähnte Farbgebung, die Breite der Textspalten und die Portionierung.

Die Breite von Textspalten sollte 500 bis 600 Pixel nicht übersteigen. Breiter laufende Texte sind schlecht lesbar, weil das Auge sich beim Zeilensprung verlieren kann. Zwar haben die Leserinnen und Leser immer die Möglichkeit, ihre Fenster zu verkleinern. Gutes Layout nimmt ihnen das aber ab.

Texte dürfen auch schmäler gelayoutet werden. Das verlangt aber ein vermehrtes Scrollen, was bei längeren Texten mühsam werden kann.

Medien und insbesondere Printmedien verwenden für ihre Homepages gerne mehrere Textspalten. Das gibt ihnen die Möglichkeit, mehr Texte anzureissen und stellt optisch die Verwandtschaft mit der Presse dar. So profitieren die Online-Medien vom Image des Mutterhauses.

Das bewährt sich im Web - im Gegensatz zum Druck - nur für die Homepage selbst. Längere Texte dürfen nicht mehrspaltig gesetzt werden. Es müsste viel zu viel gescrollt werden. Häufig zu finden sind indes Randspalten (meist rechts vom Text) mit Links, dem unter 3.3 erwähnten Inhaltsverzeichnis oder ausgegliederten Nebenaspekten zum Haupttext.

Die Portionierung ist auf dem Web noch viel wichtiger als im Print. Textlastige Seiten brauchen Auflockerung. Die Texte müssen in kurze Absätze aufgeteilt werden (siehe Kapitel 2.3). Absätze müssen mit einer Absatzmarke (Return) beendet werden und nicht nur mit einer Zeilenschaltung. Nur so erhalten sie eine Leerzeile zwischen den Absätzen. Das gibt dem Layout "Luft zum Atmen" und erleichtert die Orientierung.

Bilder, Texteinschübe (z.B. Quotes ), Listen, Fettmarkierungen und andere Typographische Elemente lockern das Layout auf. Sie tragen viel zur Attraktivität einer Seite bei. Mehr zu den Bildern im folgenden Kapitel.

3.5


Bilder und Multimedia

Farben, Bilder und Logos sowie in jüngster Zeit Multimedia haben viel zur Popularität des Webs beigetragen. Denn bis zur Entwicklung des World Wide Webs und damit der modernen Browser Anfang der 90er Jahre war das Internet farblos und unbebildert (siehe die actualis-Internet-Geschichte). Es kommt jedoch auf das Mass und die Platzierung an.

Bei (Online-)Texten ist der Anfang besonders wichtig. Er entscheidet zusammen mit Titel und Bild darüber, ob sich das Publikum überhaupt auf den Text einlässt. Im "Kampf um die Leser" sind Bilder ein sehr wichtiges Instrument.

Bei Erscheinen eines Online-Artikels ist der 1. Eindruck entscheidend. Ein längerer Text gewinnt viel durch seine Bebilderung und erhöht die Wahrscheinlichkeit, dass jemand den Text wirklich liest oder zumindest grob überfliegt.

Bebilderte Seiten müssen das erste (oder vielleicht auch einzige) Bild am Textbeginn platziert haben. Nur der Titel (zusammen mit allfälligem Über- oder Untertitel) steht noch darüber oder daneben.

Sind mehrere Bilder vorgesehen, bringt das Spiel mit der Ausrichtung Leben in die Seite. Also: einmal rechts- dann wieder linksbündig platzieren. Zentrierte Bilder im Text drin wirken langweilig und unterbrechen den Lesefluss stark - eine gefährliche Einladung zum Ausstieg aus dem Text.

Mit Illustrationen sollte man indes nicht übertreiben. Die Seiten werden sonst datenmässig zu schwer und wirken optisch überladen. Aus den gleichen Gründen müssen die Bilder klein gehalten und in ihrer Datenlast komprimiert werden. Mehrere kleine und gut platzierte Bilder bringen mehr als ein grosses.

Wer mit grossen Bildern arbeiten möchte, stellt sie am besten als kleine sog. Thumbnails dar, die beim Anklicken in einer Gross-Version speziell heruntergeladen werden können.

Grafiken haben die selben Funktionen wie Bilder. Für die Platzierung gelten die selben Kriterien. Sie haben indes den grossen Vorteil, dass ihre Datenfracht meist deutlich kleiner ist als bei Bildern.

Logos haben entweder illustrierenden Charakter oder kennzeichnen eine Rubrik, eine Funktion oder vielleicht sogar einen Autor (z.B. beim US-Finanzmagazin TheStreet.com). Falls sie mehr als nur illustrierende Funktion haben, stehen sie meist zu Beginn des Texts oder Absatzes, den sie kennzeichnen sollen oder weisen bereits auf der Homepage darauf hin.

Bei Multimedia wie Videos und/oder Ton oder sogar einer permanenten Multimedia-Übermittlung (per Streaming-Verfahren) lohnt es sich, eine eigene Seite für den Einstieg anzulegen. Denn es ist unwahrscheinlich, dass jemand nach längerer Video-Betrachtung wieder zu einem Text zurückkehrt und ihn zu Ende liest.