Lesbarkeit und mobile Darstellung verbessern: Was wirklich zählt

Warum Lesbarkeit kein Designthema ist, sondern ein Umsatzthema

Viele Unternehmen denken bei „Lesbarkeit“ an Ästhetik – schöne Schriften, ansprechende Farben, ein gelungenes Layout. Das ist aber nur die halbe Wahrheit. Lesbarkeit und mobile Darstellung verbessern bedeutet in der Praxis: Nutzer länger auf der Seite halten, Vertrauen aufbauen und letztlich mehr Anfragen oder Käufe erzielen. Wer das als reine Designfrage abtut, verschenkt Potenzial an der falschen Stelle.

Die Realität im Web sieht so aus: Menschen lesen Webseiten nicht wie ein Buch. Sie scannen. In wenigen Sekunden entscheiden sie, ob ein Inhalt für sie relevant ist – oder ob sie wegklicken. Studien zum Nutzerverhalten zeigen immer wieder dasselbe Muster: Der Blick wandert zuerst zur Überschrift, dann zu Zwischenüberschriften und fettgedruckten Begriffen, dann zu Bildern. Fließtext wird erst dann wirklich gelesen, wenn die ersten Signale stimmen. Wer das versteht, gestaltet seine Inhalte nicht für sich selbst, sondern für den Scanner.

Das Gehirn will es leicht: Kognitive Leichtigkeit als Designprinzip

Der Nobelpreisträger Daniel Kahnemann beschreibt in seinem Buch „Thinking, Fast and Slow“ das Konzept der kognitiven Leichtigkeit. Das Gehirn bevorzugt Inhalte, die es mit möglichst wenig Energie verarbeiten kann. Textwüsten – also lange Absätze ohne Unterbrechung, ohne Struktur, ohne visuelle Ankerpunkte – signalisieren dem Gehirn unbewusst: „Das hier kostet viel Aufwand.“ Die typische Reaktion darauf ist nicht Konzentration, sondern Wegklicken.

Das klingt hart, ist aber die Realität. Ein Blogartikel mit drei Schachtelsätzen pro Absatz, ohne Zwischenüberschriften und ohne Fettungen, verliert seine Leserschaft – auch wenn der Inhalt eigentlich ausgezeichnet ist. Der Inhalt kommt nie an, weil die Verpackung das Signal „zu anstrengend“ sendet, bevor der erste Satz fertig gelesen wurde.

Die Lösung ist kein Kompromiss in der Tiefe der Inhalte, sondern ein bewusstes Gestalten der Struktur. Absätze mit maximal drei bis vier Sätzen schaffen visuelle Leichtigkeit. Kurze, direkte Sätze ersetzen verschachtelte Konstruktionen. Und Zwischenüberschriften funktionieren nicht als bloße Trenner, sondern als echte Wegweiser: Wer einen Artikel nur überfliegt, soll allein durch das Lesen der H2- und H3-Überschriften verstehen, worum es geht.

Typografie: Legibility und Readability sind zwei verschiedene Dinge

In der Typografie gibt es eine wichtige Unterscheidung, die im Alltag oft durcheinandergebracht wird: Legibility beschreibt, wie gut einzelne Buchstaben einer Schriftart erkennbar sind – das ist eine Eigenschaft des Schriftdesigns selbst. Readability beschreibt, wie gut ein Gesamttext lesbar ist – also wie Zeilenabstand, Satzlänge und Absatzstruktur zusammenspielen. Eine gute Website braucht beides, und keines davon ersetzt das andere.

Welche Schriften für Web-Fließtexte geeignet sind

Für Fließtexte im Web sind serifenlose Schriften (Sans-Serif) die erste Wahl. Schriften wie Arial, Roboto oder Open Sans sind auf Bildschirmen gut lesbar, weil sie klare Formen haben und auch in kleineren Größen noch eindeutig erkennbar sind. Serifenschriften wie Times New Roman waren lange Zeit ein Problem, weil geringe Pixeldichten die feinen Serifen unscharf machten. Auf modernen Retina- und OLED-Displays ist das zwar Geschichte – trotzdem bleibt die Empfehlung: Serifenschriften für kurze, markante Überschriften einsetzen, für längere Fließtexte lieber bei Sans-Serif bleiben.

Kontrast ist kein Detail – er ist Pflicht

Einer der häufigsten Fehler, den man in österreichischen Unternehmenswebseiten findet, ist mangelnder Kontrast. Hellgrauer Text auf weißem Hintergrund sieht auf dem Designermonitor vielleicht elegant aus – auf dem Handy-Display in der S-Bahn oder unter direktem Sonnenlicht ist er praktisch unlesbar. Die Empfehlung lautet: sehr dunkles Grau auf hellem Hintergrund, niemals Hellgrau auf Weiß für Fließtext. Das ist nicht nur eine Frage des Komforts, sondern auch der Barrierefreiheit – ein Thema, das seit der EU-Richtlinie zur Web-Barrierefreiheit zunehmend auch rechtlich relevant wird.

Visuelle Anker unterstützen die Lesbarkeit zusätzlich. Bullet Points und nummerierte Listen helfen, parallele Informationen schnell zu erfassen. Fettungen wichtiger Schlüsselbegriffe geben dem Scanner die Möglichkeit, in Sekunden zu erkennen, ob ein Abschnitt für ihn relevant ist. Der Fehler dabei: alles fetten. Fettung verliert ihre Wirkung, wenn zu viel davon eingesetzt wird. Besser: gezielt und sparsam.

Mobile Darstellung ist kein abgespecktes Desktop-Erlebnis

Über die Hälfte des Web-Traffics in Österreich kommt heute vom Smartphone – Tendenz weiter steigend. Wer sein Desktop-Layout einfach 1:1 auf das Mobilgerät überträgt, verschlechtert die Lesbarkeit drastisch. Kleiner Bildschirm, Daumensteuerung, mehr Ablenkung in der Umgebung: Das Nutzungsverhalten auf dem Smartphone unterscheidet sich grundlegend vom Lesen am Computer.

Schriftgröße, Zeilenabstand und das Ein-Spalten-Prinzip

Die Mindest-Schriftgröße für Fließtext auf Mobilgeräten liegt bei 16 Pixel. Darunter müssen Nutzer entweder zoomen oder das Gerät sehr nah ans Gesicht halten – beides ist ein Abbruchsignal. Der Zeilenabstand sollte auf mobilen Ansichten etwa 140 bis 150 Prozent der Schriftgröße betragen. Das klingt technisch, hat aber einen konkreten Effekt: Wer Zeilen zu eng setzt, springt beim Lesen ungewollt in die falsche Zeile – das kostet Energie und Nerven.

Das Layout selbst sollte auf Smartphones nach dem Ein-Spalten-Prinzip funktionieren: Inhalte fließen linear nach unten, kein horizontales Scrollen. Horizontales Scrollen ist eines der größten Usability-Probleme auf Mobilgeräten und führt fast immer zu sofortigem Abbruch. Mehrspaltige Desktop-Layouts müssen für die mobile Ansicht also zwingend in eine Spalte umgebrochen werden.

Weißraum, Touch Targets und Pop-ups

Weißraum – also Abstände zwischen Absätzen, Überschriften und Bildern – wird oft als verschwendeter Platz betrachtet. Das ist ein Irrtum. Weißraum ist ein visuelles Pausenzeichen. Er gibt dem Auge Orientierung und dem Gehirn die Möglichkeit, das Gelesene kurz zu verarbeiten. Wer Weißraum auf mobilen Seiten streicht, um „mehr Inhalt sichtbar zu machen“, erzielt das Gegenteil: Der Inhalt wirkt verdichtet und anstrengend.

Klickbare Elemente – also Buttons und Links – sollten auf Touchscreens eine Mindestgröße von 48×48 Pixeln haben. Das entspricht ungefähr der Fläche, die ein Daumen beim Antippen trifft. Werden Buttons oder Links zu klein oder zu dicht aneinandergereiht, entstehen Fehlklicks. Das kostet Nutzern Geduld und kostet dir im schlimmsten Fall eine Anfrage oder einen Kauf.

Pop-ups und Cookie-Banner sind auf dem Smartphone besonders kritisch. Wenn ein Banner den gesamten Viewport blockiert und der Schließen-Button schwer zu treffen ist, verlassen viele Nutzer die Seite sofort. Das ist kein Komfortproblem – das ist ein direkter Eingriff in deine Conversion Rate. Sorge dafür, dass solche Elemente auf dem Smartphone gut bedienbar sind und den Inhalt nicht vollständig verdecken.

Google crawlt zuerst die mobile Version – und das hat Konsequenzen

Hier ist ein Punkt, der viele überrascht: Google indexiert Webseiten seit dem Mobile-First-Index primär anhand der mobilen Version. Das bedeutet, dass die mobile Darstellung nicht nur für Nutzer wichtig ist, sondern auch für dein Ranking in der Google-Suche. Wer für mobile Geräte eine inhaltlich abgespeckte Version anbietet – also Texte kürzt oder Inhalte versteckt –, riskiert damit Einbußen in der Sichtbarkeit.

Die Lösung ist nicht, für Mobilgeräte andere Texte zu schreiben. Die Lösung ist, das Design anzupassen. Lange technische Details oder ausführliche Erklärungstexte können auf dem Smartphone in ausklappbaren Textbereichen (sogenannten Akkordeons) untergebracht werden – das hält das Layout übersichtlich, ohne Inhalte zu löschen. Google kann diese Inhalte trotzdem indexieren. Onpage-SEO und mobile Darstellung sind also kein Widerspruch, wenn man es richtig angeht.

Wie du deine Seiten testen und regelmäßig prüfen kannst

Der einfachste erste Schritt: Drücke in deinem Browser F12 (oder Rechtsklick → „Untersuchen“), dann das Smartphone-Symbol – und du siehst eine Simulation verschiedener Bildschirmgrößen. Das kostet nichts und zeigt dir sofort, ob dein Layout auf einem iPhone 12 oder einem günstigen Android-Gerät noch funktioniert.

Für systematischere Auswertungen gibt es weitere Tools. Die Google Search Console hat einen eigenen Bereich „Nutzerfreundlichkeit auf Mobilgeräten“, der konkrete Fehler auflistet – zum Beispiel zu kleinen Text, nicht angepasste Inhalte oder klickbare Elemente, die zu nah aneinander liegen. Screaming Frog kann dabei helfen, technische Darstellungsprobleme aufzuspüren und Seiten mit Problemen zu priorisieren.

Die wichtigste Gewohnheit ist aber eine ganz einfache: Jeden neuen Blogartikel und jede neue Unterseite vor der Veröffentlichung auf verschiedenen echten Geräten testen – nicht nur im Browser-Simulator. Ein echter Blick auf dem Smartphone zeigt oft Dinge, die der Simulator übersieht: zu kleiner Text, ungeschickt platzierte Pop-ups, Bilder, die nicht skalieren.

Bilder und Videos müssen flexibel mit der Bildschirmbreite skalieren. Ein Bild, das auf dem Desktop 1200 Pixel breit ist und auf dem Smartphone nicht responsive ist, erzeugt horizontales Scrollen oder wird abgeschnitten – beides ist ein sofortiges Abbruchsignal. Modernes Webdesign setzt hier auf flexible Einheiten statt fixer Pixelbreiten.

Lesbarkeit als fester Teil der Conversion Rate Optimierung

Lesbarkeit und mobile Darstellung verbessern ist kein einmaliges Projekt, das du einmal abhakst. Es ist ein fortlaufender Prozess, der regelmäßige Audits erfordert: Layout, Medien, Textfluss, Schriftgrößen – all das kann sich durch Updates, neue Plugins oder Browseränderungen verschieben. Wer hier einmal im Quartal kurz hinschaut, vermeidet böse Überraschungen.

Und noch etwas: Diese Arbeit zahlt sich messbar aus. Lesbarkeit ist kein Selbstzweck und kein Luxus für große Unternehmen. Sie zählt direkt zur Conversion Rate Optimierung. Wer Texte so strukturiert, Schriften so wählt und Layouts so baut, dass Nutzer ohne Anstrengung ans Ziel kommen – der bekommt mehr Anfragen, mehr Käufe und mehr Vertrauen. Bevor man irgendetwas optimiert, muss man verstehen, wie die eigene Zielgruppe Inhalte wahrnimmt. Das ist der Ausgangspunkt für jede sinnvolle Maßnahme.