Wie du mehr Leser bekommst – durch Textgestaltung

500 Zeilen und kein Absatz? Solche massiven Textwände wirken stinklangweilig – und keiner will sie lesen. So machst du’s besser:


  • - aktualisiert am 6. Januar 2019
  • 23 Kommentare
  • Lesezeit: 5 Minuten

Gegen eine Wand zu rennen, ist ziemlich unschön.
Im Internet ist das nicht anders als im Real Life – und das heißt, dass deine Besucher einen Artikel lieber schnell wegklicken, als gegen eine massive Wand aus Buchstaben rennen zu müssen.

Gerade am Bildschirm lesen wir Texte in der Regel nicht mehr aufmerksam von A bis Z. Wir überfliegen sie – und nur wenn wir etwas Interessantes finden, bleiben wir hängen und lesen genau.
In Zeiten von schier unendlichen Informationen ist das schlicht und ergreifend die einzige Möglichkeit, relevante Inhalte zu finden und tunlichst wenig Zeit mit uninteressanten Dingen zu verschwenden.

Augen zu! (na, fast 😉 )

Kneif deine Augen mal so weit zusammen, bis du einen Text nur noch als schwarze Streifen wahrnimmst. Damit kannst du das Textlayout beurteilen, ohne vom Inhalt abgelenkt zu werden.
Und dann vergleich mal diesen Prototypen eines Artikels…

Textgestaltung - unstrukturierter Inhalt

… mit diesem:

Textgestaltung - strukturierter Inhalt

Na, welcher ist leichter zu überfliegen?

Du siehst: Zeilenumbrüche und Absätze machen schon verdammt viel aus, um den Text in kleine Häppchen aufzuteilen. Durch die Unterteilung mit Zwischenüberschriften wird die Struktur des Textes deutlich.
Und Gestaltungselemente wie Aufzählungen, Illustrationen oder hervorgehobene Passagen helfen dem Auge zusätzlich.

Bringen wir mal noch ein paar verschiedene Farbtöne mit ins Spiel…

Textgestaltung - strukturierter Inhalt

… und der Text wird gleich nochmal angenehmer zu erfassen.

Wie kannst du Texte strukturieren?

Die wichtigsten Mittel hast du gerade schon in Aktion gesehen:

Unterteile deinen Artikel durch Zwischenüberschriften.

Das hilft nicht nur deinen Besuchern beim Lesen, sondern kann auch beim Schreiben verdammt hilfreich für den logischen Aufbau des Inhalts sein.

In der Regel verwendest du eine h1 für den Titel deines Beitrags, als Zwischenüberschriften fungieren h2, h3 und so weiter.

<h1>Haustiere</h1>
   <h2>Hunde</h2>
   ...
      <h3>Labrador</h3>
      <h3>Pudel</h3>
   <h2>Katzen</h2>

In WordPress musst du dafür nicht extra in die Quellcode-Ansicht wechseln, sondern kannst die gewünschte Formatierung einfach für den jeweiligen Abschnitt auswählen:

Text formatieren in WordPress

Wie genau so eine h3 dann ausssehen soll, legst du natürlich im Stylesheet fest.

Füge Absätze und Zeilenumbrüche ein.

Sobald du einen Gedankengang beendet hast, solltest du einen neuen Absatz beginnen. Für kleinere „Sinneinheiten“ bietet sich ein einfacher Zeilenumbruch an:

<p>blah blah blah.<br>
blah blah blah blah, blah!</p>
<p>blubb blubb blubberdiblubb.</p>

Hebe wichtige Stichpunkte hervor.

Fette Schreibweise ist hier dein Mittel der Wahl:

Zitronenfalter falten <strong>keine Zitronen</strong>!

Nutze Aufzählungslisten

Es muss nicht immer nur Fließtext sein. 😉
Aufzählungen sind prädestiniert dafür, Informationen übersichtlicher aufzulisten – entweder unsortiert mit Punkten oder als durchnummerierte Liste:

  • Elmo
  • Graf Zahl
  • Krümelmonster
<ul>
   <li>Elmo</li>
   <li>Graf Zahl</li>
   <li>Krümelmonster</li>
</ul>
  1. Tiffy
  2. Samson
  3. Oscar
<ol>
   <li>Tiffy</li>
   <li>Samson</li>
   <li>Oscar</li>
</ol>

Ein Bild sagt mehr als tausend Worte

Abbildungen lockern deinen Text auf und können ihn verständlicher machen.
Und Katzenbilder verbessern natürlich grundsätzlich alles! 😀

Katze mit Tennisball
<img src="catcontent.jpg" alt="Katze mit Tennisball">

Anstatt einfach nur das Bild einzubinden, kannst du auch noch einen Schritt weiter gehen und es mit einer Bildunterschrift ausstatten.
Dann bietet sich das HTML-Element figure an, um den ganzen Block aus Bild + Unterschrift zu umschließen. Die Beschriftung selber steht in einem Tag namens figcaption.
WordPress erzeugt dieses Konstrukt übrigens automatisch, wenn du ein Bild mit Beschriftung einbindest. 🙂

Katze mit Tennisball
Catcontent vom Feinsten…
<figure>
   <img src="catcontent.jpg" alt="Katze mit Tennisball">
   <figcaption>Catcontent vom Feinsten...</figcaption>
</figure>

Zitate

Ein kurzes, knackiges Zitat bereichert deinen Artikel nicht nur inhaltlich, sondern lockert mit der richtigen Gestaltung auch den Fließtext auf.

Beliebt ist es derzeit zum Beispiel, eine größere Schrift zu verwenden, vielleicht auch eine andere Schriftart und / oder Farbe, den Zitatblock etwas einzurücken und vielleicht auch mit großen Anführungszeichen zu arbeiten:

Geduld verlieren heißt Würde verlieren

Tiruvalluvar (2. oder 3. Jhd. v. Chr.), tamilischer Dichter

Den Autoren solltest du natürlich dabei nennen, dafür gibt es mit cite sogar ein eigenes Tag:

<blockquote>
   Geduld verlieren heißt Würde verlieren.
   <cite>Tiruvalluvar (2. oder 3. Jhd. v. Chr.), tamilischer Dichter</cite>
</blockquote>

Damit du die Anführungszeichen so stylen kannst, schreibst du sie nicht direkt mit in den Text. Stattdessen fügst du sie über die CSS-Eigenschaften :before bzw. :after an das Zitat an:

blockquote:before, 
blockquote:after {
   color: #ddd;
   font-family: "Noto Serif", serif;
   font-size: 6em;
}

blockquote:before {
   content: open-quote;
   margin-right: .1em;
}

blockquote:after {
   content: close-quote;
   margin-left: .1em;
}

Trennlinien

Wenn du verschiedene Textteile stärker voneinander abgrenzen möchtest als nur durch einen Absatz, dann kannst du auf eine einfache Trennlinie zurückgreifen:


<hr>

Das kann etwa für das Fazit am Ende eines Artikels sinnvoll sein.

Bunte Boxen

Manchmal bietet es sich an, bestimmte Passagen besonders hervorzuheben: beispielsweise Infoboxen oder die Zutatenliste innerhalb von Rezepten.

Schön finde ich es, wenn der Hintergrund dezent farbig hinterlegt ist, vielleicht noch mit einer farbigen Umrandung gestaltet:

Infoboxen fallen gleich ins Auge.

Hierfür kannst du einfach ein Div mit einer bestimmten Klasse verwenden, die du im Stylesheet formatierst:

<div class="infobox">Infoboxen fallen gleich ins Auge.</div>
.infobox {
   padding: 1em;
   margin: 2em 0;
   background: #e1f3f5;
   color: #278b98;
   font-size: 18px;
   line-height: 1.5;
}

Tipp: anstatt jedesmal den HTML-Code für die Box einzutippen, kannst du dir das Leben mit einem entsprechenden Shortcode leichter machen.

Code-Beispiele

Dieser Artikel ist das beste Beispiel dafür: auch Codeblöcke sorgen für Abwechslung bei der Gestaltung.
Du kannst sie entweder nur über das code-Tag einbinden (wenn du sie formatieren möchtest, zusammen mit dem pre-Tag) oder auch ein Plugin zum Syntax-Highlighting verwenden.

Die einfache Variante sieht so aus:

h2 {
   color: #888;
   font-family: "Open Sans", sans-serif;
   font-size: 5em;
}

Social Plugins

Mittlerweile gibt es eine ganze Reihe von Plugins, mit denen du Soziale Netzwerke in einer wie auch immer gearteten Form direkt in deinen Artikel integrieren kannst.
Ein Beispiel dafür ist Better Click to Tweet, das ich ja auch hier auf blog-tutorials.de verwende:

Blogger aufgepasst: Tipps & Tricks zur Textgestaltung Klick um zu Tweeten

Auch SignUp-Boxen für Newsletter können mitten im Artikel platziert werden.

Fazit

Es gibt unheimlich viele Möglichkeiten, wie du durch Textgestaltung deutlich mehr aus deinen Artikeln herausholen kannst!
Sie werden angenehmer zu lesen und wirken nicht so erdrückend und langweilig wie eine massive schwarze Textwand ohne jegliche Unterbrechungen.
Deine Leser werden es dir danken! 🙂

Habe ich etwas vergessen? Fallen dir noch weitere Elemente ein, mit denen Beiträge strukturiert & aufgelockert werden können?

    Kommentare

  1. Fee am 6. Juni 2015 um 15:42:

    Super Post, einige Tricks davon kannte ich noch gar nicht. Der Post wird auf jeden Fall fest in meiner Lesezeichenliste abgespeichert – danke dir, liebe Anne! 🙂

    Alles Liebe,
    Fee von Floral Fascination

  2. Täbby am 6. Juni 2015 um 18:19:

    Oh danke!
    Ich meine, eigentlich war mir ja klar, das Textwände nicht gut sind, aber im Moment setze ich das noch gar nicht wirklich um und es ist doch echt nett, das mal so vor Augen geführt zu bekommen.
    Liebe Grüße

  3. Marc am 7. Juni 2015 um 0:09:

    Richtig! So muss das sein! Den Tipp mit dem Augen zukneifen finde ich super. Sollte man direkt mal ein Plugin schreiben: text2schwarzebalken ☺
    Ach… und ganz ehrlich: Die Sache mit den Überschriften bei WordPress war mir gar nicht bewusst. Ich mache das tatsächlich immer im Code ?
    Danke für die Tipps,
    Marc

  4. Anna am 7. Juni 2015 um 15:54:

    Sehr guter Post! Danke dafür! 🙂
    Mag deinen Blog voll 🙂

    Liebste Sonntagsgrüße!
    Anna

  5. Sarah am 7. Juni 2015 um 17:57:

    Hallo Anne,

    vielen lieben Dank für diesen super Beitrag. Wie immer sehr, sehr hilfreich.

    Viele liebe Grüße
    Sarah

  6. Bee am 8. Juni 2015 um 13:12:

    Hallo Anne,
    Jetzt weiß ich endlich wie die Infokästen funktionieren und auch Trennlinien. Danke. Das ist sehr hilfreich.
    Liebe Grüße, Bee

  7. Julia am 8. Juni 2015 um 17:51:

    Dieser Beitrag war, wie immer, top! Hat mir ein paar Aha-Erlebnisse beschert. Vielen Dank dafür!

    Werde ich demnächst versuchen anzuwenden!

  8. JuliaKnight am 8. Juni 2015 um 21:26:

    Jetzt muss ich nochmal ganz doof nachfragen. Ich ärgere mich seit einiger Zeit darüber, dass in meinem Theme die blockquote Funktion nicht funktioniert >_< Wie das Ganze aussehen soll, lege ich ja im Stylesheet fest oder? Müsste ich dann da einfach den von dir hier gezeigten Code einfügen?

    Liebe Grüße
    Julia

    • Anne am 9. Juni 2015 um 6:42:

      Hallo Julia,

      genau – denn ich nehme mal an, das HTML für die blockquotes wird bei dir ja weiterhin erzeugt, oder? Dann fehlt tatsächlich einfach nur ein bisschen Styling. 🙂

      • JuliaKnight am 10. Juni 2015 um 18:32:

        Also wenn ich im Blogposteditor auf das entsprechende Zeichen klicke, dann setzt es die Codes für die blockquote, richtig. Aber soweit ich das überbicken konnte, ist im Stylesheet nichts dafür definiert, hatte den Code jetzt mal reinkopiert, aber es bleibt dennoch so, wie es war (also nüscht) – hast du eine Idee, woran das liegen könnte?

  9. Bea am 10. Juni 2015 um 15:11:

    Ein sehr toller Artikel, gefällt mir sehr gut und ist wirklich lehr- und hilfreich.

    Ich werde mir sicher einiges zu Herzen nehmen.

    Liebst, Bea von http://beautymeetscoco.blogspot.de

  10. Sarah am 11. Juni 2015 um 22:22:

    Wirklich hilfreicher und interessanter Beitrag.
    Das ein oder andere werde ich bestimmt in Zukunft berücksichtigen und übernehmen können 🙂

    Liebst
    Sarah

  11. sayuri am 13. Juni 2015 um 13:44:

    toller Artikel. vieles ist mir bei deinen Artikeln schon aufgefallen, aber so bündig erklärt ist top.

    Was ich aber fragen wollte.
    Ich hatte bei uns in der Uni im HTML Kurs gelernt das man schreibt (hoffen der Kommentar zerfetzt jetzt nicht)

    was ist den nun richtig.?

    • sayuri am 13. Juni 2015 um 13:45:

      ok es wird nur ausgeblendet mmh. hoffe du siehst das im backend was ich meine.

      • Anne am 13. Juni 2015 um 17:57:

        Hej,
        mh, da wurde in deinem Kommentar leider was verschluckt – waren da evtl. spitze Klammern drum? Lass die bitte einfach mal weg, ich weiß dann hoffentlich trotzdem, was du meinst. 🙂 Sorry für die Umstände!

        • Sayuri am 22. Juli 2015 um 0:01:

          huch total vergessen hier zu antwoten
          Also die { sind einfach nun die spitze klammer 😉

          {br /}

          • Anne am 24. Juli 2015 um 7:16:

            Ah. 🙂
            Du meinst diesen Slash / ? – In HTML4 brauchten die Standalone-Elemente, die also alleine stehen und nicht aus einem einleitenden und einem ausleitenden Tag wie {a} und {/a} (mit spitzen Klammern, du weißt schon 😉 ) bestehen, diesen ausleitenden Slash.
            Seit HTML5 ist das nicht mehr nötig. Die alte Schreibweise ist zwar noch gültig, aber du kannst den Slash auch weglassen. 🙂

  12. Jürgen am 18. Juni 2015 um 13:07:

    Hi,
    bin aufgrund eines kritischen Kommentars von Dir auf Deine Seite gekommen.

    Stöbere jetzt so herum und freu mich grad rießig 🙂

    Danke Dir!

  13. Miriam Rogers am 28. August 2015 um 19:15:

    Danke, danke, danke! Genau sowas habe ich gesucht! Und endlich hat es mal jemand verständlich erklärt 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.