Archiv für den Tag: 19. Februar 2013

Texten fürs Web

In der Praxis wird oft bereits bestehender Content der Einfachheit halber für den Webauftritt wiederverwertet. Warum ein Text, der als Print verfügbar ist, nicht – wie gerne praktiziert – 1:1 ins Web übernommen werden soll, erklärt sich jedoch durch das Leseverhalten am Bildschirm.

Das Lesen am Bildschirm unterscheidet sich stark vom Lesen von Printprodukten. Das besagt eine Studie von Jakob Nielsen (Usabilityexperte, Schriftsteller). Er hat herausgefunden, dass ein Großteil der Internet-Nutzer (79%) den Text einer neu geöffneten Seite lediglich scannen, anstatt Wort für Wort zu lesen.
Dass sich aus diesen Erkenntnissen (im Gegensatz zu Printprodukten) andere Anforderungen für das Texten von Webinhalten ergeben, liegt auf der Hand. Folgende Übersicht stellt wichtige Kriterien vor, die bei der Konzeption von Web-Texten zu beachten sind:

Aufbau: Nicht linear aufbauen

Im Print-Bereich (Zeitungen, Zeitschriften) werden Texte mit dem Ziel geschrieben linear, also von vorne nach hinten gelesen zu werden. Ein klassischer linearer Aufbau à la „Einleitung, Argumentation und Folgerung“ funktioniert im Web nicht. Die Leser haben es meist eilig und keine Zeit oder Geduld, langen Gedankengängen zu folgen, um erst am Ende des Textes mit der Message belohnt zu werden. Deshalb wird hier die Reihenfolge umgekehrt, der Web-Text soll mit der Message beginnen. Der Vorteil: Der interessierte Leser weiß sofort, um was es geht. Er kann selbst entscheiden, ob er weiter lesen möchte.

Darstellung: Strukturieren

Damit der Leser die für ihn relevanten Informationen im Text schneller findet, soll der Text gut strukturiert sein. Langer Fließtext erschwert die schnelle Informationsaufnahme. Durch die Unterteilung des Textes nach Themenblöcken in kurze Absätze und das Einfügen von untergeordneten Überschriften ist es dem Leser möglich, die Inhalte schneller zu erfassen.
Es ist erwiesen, dass das Lesen am Bildschirm für die Augen anstrengender ist als das Lesen auf Papier. Die Folge ist, dass der Lesefluss am Bildschirm um ein Viertel verlangsamt ist.
Länge: Kurz halten

Lesen am Bildschirm stellt eine Belastung für die Augen dar. Um den Leser nicht unnötig zu strapazieren, sollen Texte auf Websites daher nicht zu lang sein. Weniger ist also mehr. Sollte sich der Text nicht weiter kürzen lassen, bietet es sich an, ihn in einzelne Blöcke zu unterteilen und auf mehreren Seiten zu präsentieren. Eine Printversion sollte dem Leser zusätzlich zur Verfügung stehen.

Stil: Einfach und verständlich schreiben

Der Leser soll den Inhalt des Textes leicht und richtig verstehen können. Kurze, einfache Sätze, knappe Formulierungen und das Vermeiden von Fachjargon sind hier hilfreich. Kann der Einsatz einer fachspezifischen Terminologie nicht vermieden werden, ist es sinnvoll zusätzlich ein Glossar anzubieten.

Kontext: Mehrwert schaffen

Das Web bietet die Möglichkeit der Vernetzung von Inhalten. Für den Besucher einer Seite stellt es einen enormen Mehrwert dar, wenn er davon Gebrauch machen kann. Deshalb ist es wichtig durch geeignete Verlinkungen einen Kontext herzustellen. Der eigentliche Inhalt wird dadurch wertvoller. Durch das Herstellen interner Querverbindungen zwischen verschiedenen Inhalten oder durch den Verweis auf (qualitative) externe Inhalte wird vernetztes Denken unterstützt.

Allgemeine Class-Angaben

Über Ergänzungen durch Class-Angaben kann das Layout optimiert werden, das Aussehen von Tabellen und Listen, Abstände oder Positionierung von Bildern.

Class-Angaben können im Editorfenster von Imperia u?ber den Icon ID/Class (Bild 1) verwendet werden, direkt im gewünschten Bereich in den Quelltext (Bild 2) geschrieben werden aber auch, indem in den Eigenschaften (Bild 3) (Bilder, Tabellen,etc.) im Quelltext der gewu?nschte Bereich ergänzt wird.
Beispiele: <p> oder <table>

Beispiele zur Bild-Formatierung: das Bild soll 100% der Inhaltsfläche einnehmen

Bildschirmfoto 2013-02-19 um 14.38.54
Bild 1 (Editor, ID/Class)

Bildschirmfoto 2013-02-19 um 13.45.44
Bild 2 (im Quelltext)

Bildschirmfoto 2013-02-19 um 13.47.06
Bild 3 (über Bildeigenschaften)

Auswahl der Bereiche:

  • Flexible Bilder
  • Tabellen
  • Tabellenzellen
  • Überschriften und Texte
  • Trennlinien
  • Abstände zwischen den Bereichen
  • Breiten auf verschiedene Bereiche anwendbar
  • Listen

Flexible Bilder

<img>

  1. bild100 ? das Bild wird u?ber den gesamten Inhaltsbereich dargestellt
  2. bild50-links ? das Bild wird linksseitig zu 50% im Inhaltsbereich dargestellt
  3. bild50-rechts ? das Bild wird rechtsseitig zu 50% im Inhaltsbereich dargestellt
  4. bild30-rechts ? das Bild wird rechtssseitig zu 30% im Inhaltsbereich dargestellt
  5. bild30-links ? das Bild wird linksseitig zu 30% im Inhaltsbereich dargestellt

Tabellen

<table>

  1. tabelle100 ? die Tabelle wird u?ber den gesamten Inhaltbereich dargestellt
  2. tabelle-weiss ? die Tabelle hat weiße Zellen mit hellgrauen Trennlinien
  3. tabelle-weiss100 ? die weiße Tabelle wird u?ber den Inhaltsbereich dargestellt
  4. tabelle-grau ? die Tabelle hat graue Zellen mit weißen Trennlinien
  5. tabelle-grau100 ? die graue Tabelle wird u?ber den Inhaltsbereich dargestellt
  6. ohne-rahmen ? die Tabelle hat keine sichtbaren Trennlinien
  7. ohne-rahmen100 ? die Tabelle wirdu?ber den Inhaltsbereich dargestellt
  8. tabelle-zentriert ? der Text ist in der Tabelle zentriert
  9. tabelle-zentriert100 ? die zentrierte wird Tabelle u?ber den Inhaltsbereich dargestellt

Tabellenzellen

<td><th>

  1. rechtsbuendig ? Text rechtsbu?ndig
  2. linkssbuendig ? Text linksbu?ndig
  3. zentriert ? Text zentriert
  4. grau ? grauer Hintergrund
  5. halb ? Zellenbreite auf 50%
  6. drittel ? Zellenbreite auf 32%
  7. viertel ? Zellenbreite auf 25%

Überschriften und Texte

<h1><h2><h3><h4><h5><p>

  1. grau ? grauer Hintergrund
  2. unterstrich ? feine hellgraue Unterstreichung

Trennlinien

<hr>

  1. linie-grau ? 1px Zwischenlinie in hellgrau
  2. linie-blau ? 1px Zwischenlinie in blau
  3. linie-orange ? 1px Zwischenlinie in rot
  4. linie-grau-breiter ? 2px Zwischenlinie in hellgrau
  5. linie-blau-breiter ? 2px Zwischenlinie in blau
  6. 6. linie-orange-breiter ? 2px Zwischenlinie in rot

Abstände zwischen den Bereichen

  1. abstand-unten ? Abstand nach unten von 20px
  2. abstand-oben ? Abstand nach oben von 20px
  3. abstand-unten5 ? Abstand nach unten von 5px
  4. abstand-oben5 ? Abstand nach oben von 5px
  5. abstand-unten10 ?  Abstand nach unten von 10px
  6. abstand-oben10 ? bewirkt Abstand nach oben von 10px
  7. abstand-unten30 ? Abstand nach unten von 30px
  8. abstand-oben30 ?  Abstand nach oben von 30px
  9. abstand-unten40 ? Abstand nach unten von 40px
  10. abstand-oben 40 ?  Abstand nach oben von 40px
  11. abstand-unten50 ? Abstand nach unten von 50px
  12. abstand-oben 50 ? Abstand nach oben von 50px

Breiten auf verschiedene Bereiche anwendbar

z.B. Tabellen, Tabellenzellen, Textabschnitte, Bilder <table><th><td><p><img>

  1. breite100 ? Weite 100%
  2. breite50 ?  Weite 50%
  3. breite33 ? Weite 33%

Listen

<ul>

  1. pfeil ? Pfeil als Auflistungszeichen
  2. liste-ohne-bullet ? Liste ohne Vorzeichen
  3. buchstaben ? Buchstabenanordnung bei Aufzählung (ol)
  4. stz ? grauer Hintergrund