Content richtig formatieren

Über die richtige Anordnung von Bildern in Artikel, um eine Störung des Leseflusses zu unterbinden, hatte ich ja schon an anderer Stelle berichtet. Diesen Artikel möchte ich einem anderen nicht zu vernachlässigenden, aber in der Praxis häufig stiefmütterlich behandeltem Punkt widmen: Content richtig formatieren.

Anders als im SEO-Blog von SEO-United gehe ich hierbei aber nicht auf SEO-Faktoren ein, sondern betrachte rein optische Merkmale. Denn diese Merkmale sind es, die die Besuchsdauer eines Besuchers nicht unerheblich beeinflussen.

Content richtig formatieren – Gute Lesbarbarkeit

Eine Seite ist umso attraktiver (abgesehen von den angebotenen Informationen), je besser ein Besucher sie lesen kann. Ist ein Text optisch einfach aufzunehmen, so verursacht das beim Rezipienten ein angenehmes Gefühl; Er verweilt länger. Das Gegenteil ist denkbar einfach: Je mehr sich ein Leser anstrengen muss um einen Text zu lesen, umso schneller wird er „flüchten“ und die Seite verlassen.

Vor allem bei Designanpassungen und dem Erstellen von Texten sollte man genau das berücksichtigen: Texte müssen (optisch) gut lesbar sein.

Gute Formatierungen vs. böse Formatierungen

Die Entscheidung, ob etwas gut oder nicht gut ist, ist aber häufig von subjektiven Faktoren abhängig. Was der Eine gut lesen kann, kann der Andere vielleicht schon nicht entziffern. Wo der Eine seinen Kopf von links nach rechts bewegen muss, da kann der Andere den ganzen Text aus einer Position erfassen.

Doch hängt dieser Eindruck auch von technischen Umständen ab, die man als Webseitenbetreiber wahrlich nicht beeinflussen kann. Die Bildschirmgröße, bzw. Auflösung spielt dabei wohl die größte Rolle.

Nichts desto trotz gibt es einige Faktoren, die unabhängig von persönlichen Geschmäckern und technischen Voraussetzungen einen Text gut oder schlecht lesbar machen. Zunächst ein optisches Beispiel. Entscheide einmal selbst, welchen Text du (unabhängig davon welche Farben und Formen dir besser gefallen) auf Anhieb besser lesen kannst.

Zugegeben: Natürlich ist das jetzt etwas plakativ und sicherlich auch übertrieben. Aber du siehst den Unterschied: Ein eigentlich vollkommen gleicher Text kann je nach Formatierung ganz anders wirken. Das eine Mal ist er schnell erfassbar und auch lesbar, beim anderen Mal müssen die Augen schon stark zusammengekniffen werden und man erkennt erstmal gar nichts. Dabei: Der Text ist gleich, die Überschrift ist gleich, selbst die Breite der einzelnen Beispiele ist auf’s Pixel genau gleich. Nur wird eben unterschiedlich mit diesen Informationen umgegangen. Auf richtig abgefahrene Farben oder beknackte Schriftarten (wie Comic Sans MS) habe ich vollkommen verzichtet.

Dieses Wissen richtig einzusetzen ist für den Erfolg des eigenen Webprojekts unbedingt notwendig.

Tipps: Richtig Formatieren

Im Laufe der Jahre habe ich mit meinen Webprojekten, aber auch durch Besuche auf anderen Blogs und Webseiten jede Menge Erfahrungen gesammelt und glaube behaupten zu können, was gut ist und was nicht. Auch hat ein Selbstversuch vor einigen Monaten die Erkenntnis gebracht (auch wenn der statistische Fehler wahrscheinlich relativ hoch wäre), dass es für die Besuchsdauer und Absprungrate sehr wohl ausschlaggebend ist, wie ein Text formatiert und eine Seite aufgebaut ist.

Ich möchte daher einmal auf die in meinen Augen wichtigsten Faktoren eingehen. Wer eine kurze, komprimierte Liste meiner Erfahrungen will, der findet die am Ende.

[button color=“red“ url=“#liste“ text=“Direkt zur Liste“]

Farben und Seitenaufbau

Wichtig ist zunächst, eine Dinge beim grundsätzlichen Seitenaufbau zu beachten.

Um wirklich alle Bildschirmgrößen abzudecken, sollte das Seitenlayout nicht breiter als etwa 960 Pixel sein; Dafür gibt es ja auch gute Gridsysteme, z.B. 960.gs. Doch diese Überlegung ist für die Lesbarkeit von Texten noch gar nicht so relevant. Viel wichtiger ist hier, die Textbreite zu begrenzen, damit die Augen des Betrachters nicht immer den ganzen Bildschirm „scannen“ müssen.

In meinen Erfahrungen hat sich eine Textbreite von etwa 660 Pixel immer bewährt. So ist sowohl auf kleinen, als auch auf größeren Bildschirmen der Text in seiner Breite sofort zu erfassen. Wichtig zudem: Zu den Seitenrändern immer einen kleinen Abstand von etwa 10 Pixeln einhalten.

Des Weiteren sollte das gesamte Layout aber auch zentriert sein um eben unterschiedlichen Displaygrößen gerecht zu werden und den Text immer sofort im Blickpunkt des Betrachters anzuzeigen.

Ebenso wichtig: Zwischen der Hintergrundfarbe des gesamten Layouts und der Hintergrundfarbe des Textbereichs sollte ein guter, aber nicht zu starker Kontrast herrschen. Ein leichtes Grau (etwa #c2c2c2) für den Seitenhintergrund und ein neutrales Weiß (#ffffff) liefert bei mir die besten Ergebnisse.

Weiß ist als Texthintergrund ohnehin die wahrscheinlich beste Wahl und liefert den besten Kontrast bei nahezu allen Schriftfarben; Von hellgrauer Schrift oder weißem Text sei einmal abgesehen.

Schriftart, Schriftfarbe, Schriftgröße

So wichtig wie das richtige Layout ist auch die Wahl der richtigen Einstellungen für die Schrift. Schriftart, Schriftgröße und Schriftfarbe spielen hierbei eine entscheidende Bedeutung. Eines vorweg:  Von hübschen Schriftarten, die auf lokalen Rechnern nicht immer vorhanden sind und deren Verwendung daher von Google Fonts o.ä. unterstützt werden muss, halte ich persönlich nichts: Verlangsamt die Seite nur und der Mehrwert für die Besucher ist nicht der größte.

Schriftart

Als Schriftart eignen sich besonders Serif-Schriften und aus dem umfangreichen Angebot dieser Schriftarten dürfte vor allem „Times New Roman“ die richtige Wahl sein. Dafür gibt es vor allem zwei Gründe: Serifen-Schriftarten sind grundsätzlich besser lesbar; Die kleinen Füßchen an den einzelnen Buchstaben geben eine unsichtbare Linie vor, das „Verrutschen“ zwischen Zeilen wird so vermieden. Times New Roman ist zudem eine Standardschriftart auf allen gängigen Betriebssystemen und kann so immer angezeigt werden.

Schriftgröße

Auch bei der Schriftgröße sollte man dem Besucher/Leser etwas Gutes tun und sie nicht zu klein wählen. Eine Times New Roman sollte daher im normalen Text immer eine Größe von etwa 12 Pixeln haben. Sinnvoll kann übrigens auch die Angabe in „em“ sein, weil Pixel nicht überall gleich groß sind. Mehr zu diesem schwierigen Thema hier.

Schriftfarbe

So viel ist bei der Schriftfarbe nicht zu beachten. Eigentlich nur eine Sache: Ein hoher Kontrast. Daher ist bei weißem Hintergrund etwa immer eine schwarze Schrift empfehlenswert. Mit all zu bunten Farben sollte man hier nicht experimentieren, der Text sollte nicht zu einer optischen Spielerei verkommen.

Überschriften

Experimentieren kann man in Grenzen dafür bei den Überschriften. Hier sind eigentlich keine Grenzen gesetzt. Beachten sollte man jedoch zunächst, dass Schriftarten der Überschriften auch zum Text passen. Verwendet man im Text eine Serifen-Schrift, kann in den Überschriften eine serifenlose (Helvetica, Verdana, Arial z.B.) verwendet werden. Die Schriftfarben sollte aber sowohl beim Fließtext, als auch in den Überschriften gleich sein.

Die Schriftgrößen der Überschriften hingegen müssen sich deutlich vom Fließtext unterscheiden, um als Überschriften überhaupt wahrgenommen zu werden. Bei der Festlegung der Schriftgrößen sollte man dann aber auch die HTML-Hierarchie (H1 bis H6) beachten und dementsprechend anpassen.

Links

Links im Fließtext sollten mit einer anderen Farbe kenntlich gemacht werden. Diese Farbe sollte dann stark von der Schriftfarbe des umgebenden Fließtexts abweichen, ein kräftiges Rot kann beispielsweise Wunder wirken. Links auch unterstrichen anzeigen zu lassen kann sinnvoll sein, ist bei einer deutlich abweichenden Farbe aber nicht notwendig. Eine Spielerei hingegen ist die Verwendung von Symbolen, die Links je nach Art kennzeichnen: Überflüssig.

Ansonsten sind Links aber im gleichen Format wie der Fließtext zu halten.

Komprimierte Liste

Hier noch einmal wie versprochen alle Tipps stark komprimiert:

• Seitenlayout: maximale Breite von 960 Pixeln
• Textbereich: maximale Breite von 660 Pixeln
• Abstand zum Seitenrand des Textbereichs: 10 Pixel
• Layout zentriert
• Seitenhintergrund: helles Grau, z.B. #f2f2f2
• Texthintergrund: weiß, #ffffff
• Serifen-Schriftart, vorzugsweise „Times New Roman“
• Schriftgröße 12 Pixel (bzw. em-Pendant)
• Schriftfarbe: Hoher Kontrast; Empfehlenswert etwa schwarz bei weißem Hintergrund
• Überschriften deutlich größer
• Hierarchie bei Überschriften (H1 bis H6) auch bei deren Schriftgröße berücksichtigen
• Links sollten farblich stark vom Fließtext abweichen

Fazit Content richtig formatieren

Wer diese Tipps beherzigt, wird – davon bin ich fest überzeugt – bei Werten wie Besuchsdauer oder Absprungrate durchaus Verbesserungen feststellen. Doch es sei auch gesagt: Je nach Ausrichtung der Website kann es manchmal kleine Unterschiede geben. Hier gilt es zu experimentieren.

Das Wichtigste jedoch ist dabei immer: Nicht nach eigenem Geschmack arbeiten, sondern durch die Brille des Lesers schauen und sich die Frage stellen, wie der wohl am besten lesen kann. Dann wird’s klappen!

Was vergessen? Dann bitte einen Kommentar! 🙂