Website erstellen lassen: Der Ablauf vom Text bis zum Launch

Website erstellen lassen: Der Ablauf vom Text bis zum Launch

Das Konzept steht: Zielgruppe, Wettbewerb und Struktur sind geklärt, wie ich hier am Beispiel meiner Kundin Susanne beschrieben habe. Jetzt beginnt die Umsetzung: Aus Stichpunkten werden fertige Texte, aus Ideen ein Bildkonzept, aus der Struktur eine technische Website, die auch gefunden wird.

In diesem Artikel zeige ich dir meinen Ablauf von Text bis Launch, wieder am Beispiel von Susanne Möpert, Ernährungsberaterin für Frauen in den Wechseljahren: Content, Suchmaschinenoptimierung, Design, Technik und der letzte Feinschliff vor dem Launch.

Content-Strategie: Texte strukturieren, Headlines formulieren

Wenn die Struktur steht, fülle ich sie nicht einfach mit Text. Ich überlege, welche Inhalte welche Aufgabe übernehmen. Die Architektur gibt den Rahmen vor, aber der Content entscheidet, ob eine Website Erfolg hat.

Bei der Ernährungsberaterin Susanne bedeutet das: Welche Themen gehören auf die Startseite – und welche nicht? Was muss eine Besucherin sofort verstehen, damit sie weiß, dass ihr auf dieser Website geholfen werden kann. Wie findet die Besucherin die für sich wichtigen Informationen?

Lange Texte teile ich in appetitliche, leicht verdauliche Happen. Wir sind von Natur aus bequem, lange Textpassagen am Bildschirm lesen die wenigsten zu Ende. Diese Einteilung visualisiere ich dadurch, indem ich die Website in unterschiedlich farbigen Segmenten oder Blöcken teile. Das erleichtert das Lesen unterschiedlicher Bereiche.

Content-Strategie: Bilder ergänzen die Texte

Bildsprache finden

Welche Bildsprache Susannes Website trägt, also der Wechsel zwischen ihren eigenen Marktfotos, dem beauftragten Fotoshooting und den bewusst eingesetzten Stockfotos zum Thema Lebensmittelindustrie, habe ich im Konzept-Artikel beschrieben. Hier geht es um den nächsten Schritt: Wie werden aus diesen Entscheidungen fertige, technisch saubere Bilder auf der Website?

Als ausgebildete Fotografin sehe ich das besonders deutlich.

* Ein Bild kann Atmosphäre schaffen.
* Es kann Nähe herstellen.
* Es kann Professionalität zeigen.
* Falsch gewählt kann es aber die Aussage verwischen.
* Auch professionelle Fotos müssen für den Webbereich bearbeitet werden
* Wichtig sind Dateigröße, Dateimaße, Dateinamen und Alternativtext.

Bilder richtig bearbeiten und Dateinamen ändern

Die Fotos spielen in mehrfacher Hinsicht eine wichtige Rolle auf Websites. Das wird leider immer wieder unterschätzt. Die Punkte Atmosphäre und Professionalität habe ich bereits angesprochen. Es ist das, was die Besucherin vorn auf der Webseite sieht. Aber wie sieht es im Backend der Website aus? Denn Fotos müssen für die Website optimiert werden: Dateigröße, Dateinamen, Alternivtexte, Keywords. Leider sehe ich immer wieder viel zu große Dateigrößen: Fotos mit einer Dateigröße von über 100 KB verlangsamen die Ladezeit der Website. Auf vielen Websites sehe ich sogar mehr als 1 MB. Hier wurde offensichtlich das Foto direkt aus der Kamera bzw. dem Handy in die Website geladen. Das ist nicht nur nervig für Menschen, die die Website auf dem Handy öffnen und ewig lange warten müssen, bis die Seite geladen ist, sondern es beeinflußt auch die Suchmaschinenplatzierung. Wie du die vermeidest, habe ich in diesem Artikel beschrieben.

Content-Strategie bedeutet für mich deshalb nicht „viel Inhalt“, sondern gezielter Inhalt.

Suchmaschinenoptimierung – von Anfang an mitgedacht

Suchmaschinenoptimierung beginnt für mich nicht mit einem Plugin und auch nicht mit einer Liste von Keywords. Sie beginnt in dem Moment, in dem wir über Zielgruppe und Inhalte sprechen. SEO ist für mich Haltung und Denkweise.

Bei der Ernährungsberaterin Susanne stellte sich früh die Frage: Wie suchen ihre potenziellen Kundinnen eigentlich? Geben sie „Ernährungsberatung Wechseljahre“ ein? „Hormonbeschwerden“? „Gewichtszunahme ab 50″? Oder sehr konkrete Symptome wie „Schlafprobleme Wechseljahre was hilft“, „Was hilft mir bei Hitzewallungen“, „Welche Ernährung hilft mir bei Kopfschmerzen“?

Was wir mittlerweile auch von Anfang an mitdenken müssen: Immer mehr Menschen geben ihre Suchanfrage nicht in Google ein, sondern geben ganze Sätze in einer KI wie ChatGPT ein.

Diese Überlegungen beeinflussen bereits die Struktur. Wenn wir wissen, dass viele Frauen mit konkreten Beschwerden suchen, kann es sinnvoll sein, diese Themen klar zu benennen – nicht versteckt im Fließtext, sondern sichtbar in Überschriften und eigenen Abschnitten.

Suchmaschinenoptimierung heißt für mich: Die Sprache meiner Kundin mit der Sprache ihrer Zielgruppe abzugleichen.

Später kommen technische Aspekte hinzu: saubere Überschriftenstruktur, sinnvolle Seitentitel, Meta-Beschreibungen, Ladezeiten. Aber die Grundlage entsteht schon in der Konzeptphase.

Konkret heißt das bei Susanne: Jede Überschrift (H1, H2, H3) folgt einer klaren Hierarchie, keine Überschrift wird nur wegen der Formatierung vergeben, sondern weil sie eine echte Gliederungsebene markiert. Der Seitentitel, der bei Google als schwarze Überschrift erscheint, enthält den wichtigsten Suchbegriff der Seite, zum Beispiel „Hitzewallungen“ und „Wechseljahre“ statt nur „Angebot“. Die Meta-Beschreibung darunter ist kein Fülltext, sondern eine kurze Einladung: Sie beantwortet in ein bis zwei Sätzen, was die Besucherin auf der Seite erwartet. Die Ladezeit hängt eng mit den Bildern zusammen, dazu mehr im Abschnitt zur technischen Umsetzung.

Webdesign – Stimmung, Farbe und Typografie

Typografie: Schrift als wichtiges Gestaltungsmoment

Form follows Content. Auch bei Websites.

Erst wenn Struktur, Inhalte und Suchbegriffe geklärt sind, beginne ich mit der gestalterischen Ebene. Dafür lege ich ein Moodboard an.

Ich sammle visuelle Eindrücke, Farbwelten, Bildstimmungen, Typografie-Beispiele. Die Basis ist wieder das, was wir zuvor strategisch erarbeitet haben.

Für die Texte auf Websites verwende ich meistens Google-Fonts, die ich natürlich lokal einbinde, damit die Seite DSGVO-konform bleibt. Dafür nutze ich keine der üblichen Plugin-Lösungen, sondern eine einfache PHP-Anweisung von Sonia Rieder. Der Vorteil: Anders als ein echtes Plugin braucht sie keine Updates. Wie die Schriften lokal eingebunden werden, habe ich hier beschrieben.

Für die Fließtexte und Headlines auf Susannes Website habe ich mich für die Schriften Lato und Abel entschieden. Beide Schriften sind Grotesk-Schriften, das heißt, sie haben keine Serifen. Dadurch wirken die Textblöcke ruhig und sachlich. Auf Schreibschriften, wie sie oft auf Beratungsseiten insbesondere für Frauen zu sehen sind, habe ich bewußt verzichtet, um den professionellen und sachlich informierenden Charakter der Website zu unterstreichen.

Akzente habe ich in den Headlines und schmalen Teasern gesetzt: Die Headlines erhalten die Farben Grün und Lila, die Schriften in den Teasern die Schrift Abel, da wir hier wenig Platz haben und die Abel sehr schmal läuft.

Insgesamt habe ich die Schrift bewußt groß gesetzt mit großem Zeilenabstand, damit die Texte flüssig zu lesen sind. Durch den Zeilenabstand wirken die Textblöcke zudem leicht und luftig.

Farben: Die richtige Farbwahl unterstützt die Aussage der Texte

Bei der Ernährungsberaterin stellt sich zum Beispiel die Frage: Welche Farben unterstützen ihre Aussage? Mit welchen Farben kann ich die Besucherinnen abholen? Welche Farben passen zum Angebot und sorgen für Vertrauen?

Soll sie mit warmen Naturtönen arbeiten oder mit reduzierten, aber eindeutigen Farben? Was lässt sich als primäre Farbe definieren und welche Farbe wählen wir für Buttons – die auffällig, aber nicht zu knallig sein sollen, um nicht vom Thema abzulenken?

Das Moodboard ist keine Spielerei, sondern hilft uns, Entscheidungen zu treffen. Auf dieser Grundlage entwickle ich dann das visuelle Konzept: Farbpalette, Schriftkombination, Grundlayout, Bildsprache. [Welche 9 Fehler besonders häufig gemacht werden, hab ich hier beschrieben.](https://constanzestraub.de/website-richtig-gestalten/)

Design ist für mich die Übersetzung der Strategie in eine visuelle Sprache. Wenn die Architektur steht und die Inhalte klar sind, erfüllt das Design seine eigentliche Aufgabe: die Aussagen der Inhalte verstärken.

Die Farbentscheidung auf Susannes Website war relativ schnell getroffen: Wir wollten eine Farbe haben, die frisch wirkt, den Bereich „Gesundheit“ und „gesunde Ernährung“ abdeckt und gleichzeitig beruhigend wirkt. Deshalb lag die Farbe Grün nahe, die diesen Bereich sehr gut widergibt. Wir haben uns für zwei helle, leicht abgestufte Grüntöne und Weiß entschieden, um damit die unterschiedlichen Textbereiche zu segmentieren.

Als Akzentfarbe für die Buttons und Links hatte Susanne sich für ein kräftiges Lila entschieden, fast schon Pink, der sehr gut zum weiblichen Bereich passt. Gleichzeitig ist diese Farbe eine Kontrastfarbe (komplementär), die sich klar vom umgebenden Grün absetzt und damit schnell gesehen wird.

Mit der Wahl dieser reduzierten Farbsprache hat Susanne ein relativ ruhiges Umfeld auf ihrer Website erhalten. Ruhe ist hier wichtig, da einige Besucherinnen mit körperlichen Leiden und vielleicht Schmerzen zu ihr kommen. Die Wechseljahre sind eine sehr besondere Phase im Leben einer Frau, in der es auch unruhig zugeht. Eine dezente Farbgebung wirkt dann eher beruhigend. Außerdem setzt Susanne farbenfrohe Fotos ein von bunten Gemüsen und Obst, die mit der reduzierten Farbwelt gut harmonieren.

Technische Umsetzung der Website

Die technische Umsetzung ist relativ unabhängig vom Inhalt. Relativ, denn ein Shop als Beispiel benötigt bestimmte technische Voraussetzungen. Eine Website mit Blog braucht ein dynamisches System. Eine weitere Überlegung ist, ob die Websitebetreiberin als Laiin die Website nach der Fertigstellung selber editieren möchte. Ein Pagebuilder könnte dann die richtige Wahl sein. Welche Plattform für dein Projekt sinnvoll ist, habe ich hier ausführlicher beschrieben.

Für diejenigen, die ganz am Anfang stehen und wissen möchten, was WordPress überhaupt ist, habe ich diesen etwas humorvollen Artikel geschrieben.

Ich arbeite ausschließlich mit WordPress, in der Regel mit dem Theme Divi. WordPress ist sehr flexibel, ebenso das Theme Divi. Ich kann beliebige Erweiterungen hinzufügen, egal ob technische oder gestalterische Erweiterungen (CSS). Viele Websitebetreiber nutzen fertige Seiten-Layouts. Die gibt es bei mir nicht. Es gibt bei mir keine „Website von der Stange“. Jede Seite entsteht aus dem zuvor entwickelten Konzept.

Auch technische Grundlagen gehören dazu: saubere Seitenstruktur, klare Überschriftenhierarchie, sinnvolle Permalinks, Bildgrößen, Dateibezeichnungen, Ladezeiten. Vieles davon ist später nicht sichtbar. Aber es entscheidet darüber, wie nachhaltig die Website funktioniert.

Dafür setze ich auf eine feste Auswahl bewährter Plugins, statt bei jedem Projekt neu zu suchen: Real Cookie Banner für den Cookie-Hinweis, falls nötig, Perfect Images für die Bildoptimierung, Rank Math SEO oder Yoast SEO für die Suchmaschinenoptimierung, WP Armour gegen Spam über einen Honeypot, WP Mail SMTP für zuverlässigen Mailversand, WP-Sweep zum Aufräumen der Datenbank und UpdraftPlus für die wichtigen Backups von WordPress und der Datenbank. Als Sicherheits-Plugin hat sich Wordfence Security bewährt. Für die lokale Einbindung von Google-Fonts nutze ich kein Plugin, sondern eine schlanke PHP-Anweisung von Sonia Rieder, die im Gegensatz zu einem Plugin keine Updates braucht. Für die Auswertung nutze ich Koko Analytics und nicht Google Analytics, weil ich der Meinung bin, dass Koko datenschutzkonformer ist. Koko speichert keine personenbezogenen Daten, nutzt keine Dienste von Drittanbietern und erfasst lediglich aggregierte Zahlen. Das bedeutet, dass ich die Leistung meiner Website verfolgen kann, ohne Besucherprofile zu erstellen oder Nutzer im Internet zu verfolgen.

Die Technik folgt bei mir immer dem Konzept. Sie löst nichts, was vorher nicht geklärt wurde. Und genau deshalb steht sie in meinem Prozess fast am Ende.

Usability-Tests und Mobil-Optimierung

Wenn die Website technisch steht, ist sie noch nicht fertig. Jetzt beginnt die Phase, in der ich prüfe, wie sie sich tatsächlich anfühlt – und wie sie auf verschiedenen Geräten funktioniert. Ich teste die Seiten auf mehreren Bildschirmgrößen auf originalen Geräten, nicht nur simuliert im Programm: auf Desktop, Tablet (hoch und quer) und Smartphones.

Eine Website wird heute überwiegend auf dem Smartphone gelesen. Diese Tatsache denke ich im gesamten Konzept mit. Manche Unstimmigkeiten fallen erst jetzt auf. Diese Feinjustierung gehört für mich genauso zum Prozess wie die strategischen Vorüberlegungen.

Typische Beispiele, die mir dabei fast auf jeder Website begegnen: Schriften sind auf dem Smartphone oft zu groß und müssen angepasst werden. Außerdem teste ich auch auf dem Pad, in meinem Fall dem iPad, ein weiteres beliebtes Arbeitsgerät, das von vielen Webdesignerin leider vergessen wird. Hier teste ich auch Hoch- und Querformat, die sich stärker unterscheiden, als man denkt: Im Hochformat ähnelt die Darstellung einem großen Smartphone, im Querformat eher einem kleinen Monitor, und beides braucht eigene Anpassungen.

Bei umfangreicheren Menüs wird die Navigation in der Queransicht des iPads oft ein Problem: sie bricht um. Die Folge ist oft genug, dass man die einzelnen Links im Menü nicht mehr sauber ansteuern kann. Bei Susanne war das kein Problem, ihre Navigation hat nur fünf Links. Aber bei umfangreicheren Websites gehört das zu den Punkten, die ich in diesem Schritt korrigiere. Unter Umständen kann das bedeuten, die Schrift in der Navigation zu ändern: entweder einen schmal laufenden Font zu wählen, hierfür eignen sich die Condensed-Schriften sehr gut, wie als Beispiel die Roboto Condensed. Oder man wählt die Schrift kleiner, damit kein Umbruch entsteht.

Wie lange dauert die Erstellung der Website bis zum Launch?

Wie lange dieser gesamte Ablauf dauert, hängt stark davon ab, wie weit die Texte schon vorbereitet sind. Bei einer kleineren Website wie der von Susanne rechne ich mit vier bis acht Wochen von der Konzeptphase bis zum Launch. Muss ich die Texte selbst noch verfassen, dauert es entsprechend länger.

Abschluss

Wenn du merkst, dass du zwischen Selbermachen und Abgeben schwankst: Genau an diesem Punkt steige ich mit meinen Kundinnen ein, in jeder Phase, die du brauchst. [Hier geht es zu meinem Angebot.](https://constanzestraub.de/website-und-logo-aus-einer-hand/) Oder vereinbare gleich ein kostenloses Kennenlerngespräch mit mir.

→ Zum Kennenlerngespräch

Fazit: Vom Konzept zur fertigen Website

Text, Bilder, Suchmaschinenoptimierung, Design, Technik, Usability-Tests: Sechs Bereiche, die auf den ersten Blick unabhängig voneinander wirken. Bei Susanne griffen sie ineinander, weil jede Entscheidung auf dem Konzept aufbaute, das vorher stand. Die Farbwahl folgte der Zielgruppe, die Bildsprache folgte den Texten, die Struktur der Navigation folgte der Informationsarchitektur.
Genau das unterscheidet eine Website mit Konzept von einer Website ohne: Nicht die einzelnen Bausteine sind das Besondere, Text, Farbe und Technik gibt es überall. Entscheidend ist, dass sie alle dieselbe Sprache sprechen.

FAQ zur Website-Erstellung

**Welche Farbe passt zu meiner Website?**
Ausgangspunkt ist nie die Lieblingsfarbe, sondern die Zielgruppe und die Aussage. Bei Susanne stand die Frage: Welche Farbe wirkt beruhigend und passt zum Thema Gesundheit? Die Antwort war Grün, dazu eine Komplementärfarbe als Kontrast für Buttons und Links. Zwei bis drei Farben reichen für eine stimmige Website völlig aus.

**Welche Schriftart soll ich nehmen?**
Serifenlose Schriften wirken sachlich und modern, Serifenschriften eher traditionell und elegant. Wichtiger als die Wahl selbst: Nicht mehr als zwei Schriften kombinieren, und im Fließtext geht Lesbarkeit immer vor Kreativität.

**Es gibt tausend Plugins, welche brauche ich wirklich?**
Die meisten Websites brauchen eine kleine, feste Grundausstattung, keine hundert Plugins: eines für Sicherheit, eines für Backups, eines für Suchmaschinenoptimierung, eines für Bildoptimierung. Ich arbeite mit einer festen Auswahl, statt bei jedem Projekt neu zu suchen, das erspart auch dir spätere Kompatibilitätsprobleme.

**Welches WordPress-Theme sollte ich verwenden?**
Ich arbeite ausschließlich mit Divi. Der Grund: Es ist flexibel genug für jedes Konzept, ich muss also nie das Theme wechseln, wenn sich die Anforderungen ändern. Für Einsteigerinnen ist wichtig: Ein Theme sollte langfristig gepflegt werden, sonst entstehen später Sicherheitslücken.

Website Konzept – Definition, Beispiel und strategische Grundlagen

Website Konzept – Definition, Beispiel und strategische Grundlagen

Ein Website Konzept entscheidet darüber, ob eine Website Orientierung gibt oder verwirrt.Für mich als Webdesignerin heißt das: Das Konzept klärt für mich und für die Kundin die Struktur, das Angebot und die Zielgruppe. Bevor ich auch nur einen Gedanken an Gestaltung und Technik verliere.

Warum ein Website Konzept Stress vermeidet

Als ich vor über 20 Jahren zusätzlich zum Printdesign anfing, Websites für Kunden umzusetzen, musste ich erst einmal Lehrgeld zahlen. Ich habe intuitiv gearbeitet. Iterativ. Und ich dachte, das reicht.

Was brauche ich? Was habe ich? Eine kurze Skizze reicht doch. Die Idee und das Layout hatte ich im Kopf. Ein Konzept? Wieso das denn?

Blöd nur: Während ich schon an der Technik saß, kamen neue Design-Ideen. Dann fiel mir eine Textänderung ein. Oder der Kunde lieferte neue Texte. Ein Bild hier, ein Absatz dort. Und plötzlich passte die Struktur nicht mehr. Also zurück an den Code. Ich bin hin- und her gesprungen zwischen Inhalt, Gestaltung und Technik.

Ergebnis: Stress. Und Zeitverlust.

Heute weiß ich: Nicht die Technik war das Problem. Nicht das Design. Nicht einmal der Inhalt. Es fehlte die Architektur davor. Und genau das ist die konzeptionelle Grundlage.

  • Es trennt Denkprozesse voneinander.
  • Es bündelt Entscheidungen.
  • Es schafft eine logische Reihenfolge.

Seitdem starte ich kein Projekt mehr ohne diese gedankliche Vorarbeit.

Ein Website Konzept ist die strategische Grundlage einer Website. Es legt fest,

  • für wen die Seite gedacht ist,
  • welche Inhalte im Mittelpunkt stehen und
  • wie Besucher durch die Website geführt werden.

Stell dir vor, du möchtest dein Traumhaus bauen. Würdest du einfach zum Baumarkt fahren, wahllos Ziegel, Fenster und eine schicke Haustür kaufen und auf der grünen Wiese anfangen zu mauern? Wohl kaum. Du hättest vermutlich erst einmal einen Bauplan.

Genau das ist ein Website-Konzept. Es ist die gedankliche Vorarbeit, bevor das erste Design-Element gewählt oder die erste Zeile Programmcode geschrieben wird.

Was ist ein Website-Konzept eigentlich?

Ein Website-Konzept (oft auch Homepage-Konzept oder Website-Konzeption genannt) ist das Fundament deiner Seite. Hier klären wir die strategischen Grundlagen, lange bevor wir uns über Farben, Schriften oder technische Spielereien wie Pagebuilder Gedanken machen.

In dieser Phase stellen wir uns die wirklich wichtigen Fragen:

  • Die Zielgruppe: Wer soll sich hier angesprochen fühlen?
  • Die Zielgruppe bestimmt die Sprache: wissenschaftlich, sachlich, locker?
  • Welche Inhalte stehen im Mittelpunkt?
  • In welcher Reihenfolge sollen die Inhalte gesehen werden?
  • Welche Fragen müssen in wenigen Sekunden beantwortet werden?
  • Welche Informationen können später kommen?

Man kann ein Konzept nicht direkt sehen – so wie man das Fundament eines Hauses nicht sieht, wenn es erst einmal steht. Aber du merkst sofort, wenn das Konzept fehlt: Die Seite wirkt unruhig, die Botschaft schwammig, Bilder verwirren, Texte führen in die Irre – und der rote Faden fehlt völlig.

Website Konzept: Zwei Beispiele aus der Praxis, ein Vorgehen

Dass ein gutes Konzept nicht kompliziert sein muss, zeige ich anhand zweier bestehenden Websites, beide Kundinnen von mir. Es ist die Website von Chiara Rieß, Psychotherapeutin, die in Lüneburg eine Praxis für Kinder- und Jugendlichenpsychotherapie führt. Und von Susanne Möpert, sie ist Ernährungsberaterin für Frauen in den Wechseljahren. Bei beiden war die Zielgruppe klar. Und falls du jetzt denkst: Wozu brauche ich dann ein Website Konzept? Meine Antwort: Bei beiden musste ich genau hinschauen, wie Sprache und Konzept aussehen sollen, denn beide unterscheiden sich vollständig.

Auf den ersten Blick wirken beide Seiten fast schon radikal schlicht: Du findest dort keine Downloads, keine komplexen Verkaufs-Funnel, nicht einmal Blogartikel. Und genau diese Schlichtheit zeigt perfekt, was ein gutes Konzept eigentlich leistet. Es ist wie bei einem gut geplanten Bungalow: Alles ist auf einer Ebene, ohne Stolperfallen. Beide Websites funktionieren für ihren Zweck. Warum?

website konzept chiara riess beispiel

Warum „einfach machen“ hier nicht funktioniert hätte und wie das Website Konzept beim Aufbau hilft

Bei Chiara Rieß schien die Zielgruppe klar. Dennoch mussten wir uns Fragen stellen: Menschen, in diesem Fall Eltern, kommen oft mit einer großen Last an Sorgen auf die Website. Jugendliche dagegen spüren vielleicht eher Widerstand, Scham oder ziehen sich zurück. Kinder kommen vielleicht mit Ängsten. Die einen brauchen sofort Hilfe, die anderen wollen erst einmal ganz vorsichtig aus der Distanz gucken, wer da eigentlich hinter der Praxistür steckt.

Die richtigen Fragen, die wir für unser Website Konzept stellen:

  • Wie bauen wir Vertrauen auf? Eltern und Jugendliche müssen sich sofort sicher fühlen. Wie erreichen wir das?
  • Struktur: Wo ist die Praxis? Wie läuft das Erstgespräch ab?
  • Was ist die Gewichtung der Website? Die Kontaktinformationen müssen so leicht zu finden sein wie der Lichtschalter neben der Tür.

Bei Susanne, der Ernährungsberaterin für Frauen in den Wechseljahren, klingt die Zielgruppe ebenfalls zunächst klar. Doch auch hier stelle ich weitere Fragen.

  • Wie alt sind diese Frauen?
  • In welchem Umfeld leben sie?
  • Stehen sie mitten im Berufsleben oder in einer Phase des Umbruchs?
  • Kommen sie mit akuten Beschwerden wie Schlafproblemen, Gewichtszunahme oder Hitzewallungen – oder suchen sie präventive Begleitung?
  • Wollen sie medizinisch fundierte Erklärungen oder eher praktische, alltagstaugliche Lösungen?

Diese Differenzierungen entscheiden darüber, wie die Website später klingt, welche Beispiele gewählt werden, welche Begriffe wir verwenden und wie tief wir in konkrete Themen einsteigen. Eine berufstätige Frau, die zwischen Job, Familie und eigener Gesundheit jongliert, liest anders als eine Frau, die Single ist und Zeit hat, sich intensiv in Fachliteratur einzulesen.

Zielgruppe und Positionierung

Bevor wir also Farben und Schrift definiert haben, musste das Website-Konzept diese harten Nüsse knacken:

  • Der erste Kontakt: Wer soll sich beim Öffnen der Seite als Erstes „gemeint“ fühlen?
  • Die Atmosphäre: Wie schaffen wir es, über den Bildschirm eine Hand zu reichen und Vertrauen aufzubauen?
  • Die Sprache: Wie viel Fach-Chinesisch ist nötig, um Kompetenz zu zeigen, und wie viel Gefühl brauchen wir, um die Menschen wirklich zu erreichen?

Der Realitätscheck: was die Mitbewerber sagen

Nachdem die Zielgruppe geklärt ist, schaue ich zur Seite: die Mitbewerber. Nicht um zu kopieren, sondern um das Spielfeld zu verstehen, auf dem sich meine Kundinnen bewegen. Denn jede Branche hat ihre unausgesprochenen Regeln, die sich auf Websites spiegeln.

Bei der Ernährungsberaterin heißt das konkret: Ich google „Ernährungsberatung Wechseljahre“, „Ernährungsberaterin Hormonbeschwerden“, auch regional. Ich sehe mir an, wer gut sichtbar ist, wie diese Websites aufgebaut sind und welche Sprache dort gesprochen wird.

Muster erkennen

Sehr schnell erkenne ich Muster. Bestimmte Begriffe tauchen immer wieder auf: „ganzheitlich“, „nachhaltig“, „natürlich“, „im Einklang mit deinem Körper“. Das sind keine falschen Begriffe – aber wenn alle sie verwenden, werden sie beliebig, austauschbar. Auch die Bildwelt wiederholt sich: lachende Frauen mittleren Alters, Kräuter, Teetassen, viel Grün.

Passt unsere definierte Zielgruppe in dieses Bild – oder setzen wir bewusst einen anderen Akzent? Wenn alle weich und „wohlfühlig“ auftreten, kann es sinnvoll sein, stärker auf Klarheit und Struktur zu setzen. Mit einer eindeutigen Positionierung machen wir konkrete Türen auf und laden bewußt nur bestimmte Frauen ein. Die Positionierung ist dann kein Zufall, sondern eine bewusste Entscheidung.

Suchbegriffe finden

Aus denselben Fragen ergeben sich später auch die Suchbegriffe: Wer nach „Schlafprobleme Wechseljahre“ statt nach „Ernährungsberatung“ sucht, formuliert sein Problem anders als seine Lösung. Die Sprache der Zielgruppe ist die Sprache, mit der sie auch bei Google sucht.

Auch bei Chiara war der Blick auf andere Praxen Teil der Vorarbeit. Wie treten andere Therapeutinnen in Lüneburg mit ähnlichen Angeboten auf? Die Therapeutinnen-Websites in Lüneburg, die wir uns angesehen haben, zeigen ähnliche Elemente: ruhige Praxisbilder, damit Patienten auf die jeweiligen Praxisräume eingestimmt werden, und eine Farbgebung, die Ruhe und Zuversicht ausstrahlt. Diese Parallelen übernehmen wir bewusst, weil sie funktionieren.

Differenzierung durch Bildsprache

Der Unterschied liegt woanders: Chiara hat sich auf ihren Fotos bewußt für eine legere Kleidung entschieden, anders als auf vergleichbaren Seiten üblich. Kein Business-Kostüm, das auf Kinder eher distanziert wirken könnte. Außerdem haben wir auf der Startseite ein Foto eingesetzt, das sie zusammen mit einem Kind abbildet (von hinten fotografiert). Damit zeigt sie das aufmerksame, zugewandte und verstehende Gespräch mit dem Kind, wichtig für die Vertrauensbasis. Gleichzeitig weiß die Besucherin: Hier geht es um mein Kind.

Ziel und Funktion mit dem Website Konzept bestimmen

Bevor ich über Seiten spreche, kläre ich mit meiner Kundin zuerst eine grundlegende Frage: Wofür ist diese Website eigentlich da?

Das klingt banal. Ist es aber nicht. Viele antworten spontan: „Na ja, ich will gesehen werden.“ Oder: „Ich möchte Informationen bereitstellen.“ Ich frage weiter, welche Seiten wir brauchen, wie wir Inhalte gewichten, welche Angebote im Zentrum stehen, und welche Handlung am Ende vorbereitet wird.

Ohne diese Klarheit könnte ich später ein schönes Layout bauen – aber keine Website, die gezielt arbeitet und unternehmerisch funktioniert. Die Website ist kein Selbstzweck. Sie hat eine Aufgabe. Und diese Aufgabe definieren wir, bevor irgendetwas gestaltet wird.

Bei Chiara war die Aufgabe glasklar: Vertrauen aufbauen, und zwar bei einer Zielgruppe, die mit großer Sorge oder mit Scham auf die Seite kommt. Kein Blog, keine Downloads, keine Marketingsprache – die Funktion dieser Website ist ausschließlich, Sicherheit zu vermitteln und den ersten Kontakt zu erleichtern.

Anders Susanne: Sie wollte nicht nur ihre unterschiedlichen Angebote zeigen, sondern vor allem einen Newsletter integrieren, damit sie über ein Geschenk an ihre Kundinnen (dem sogenannten „Freebie“) neue Kundinnen gewinnen kann.

Website Konzept Beispiel Newsletter Susanne Möpert

Struktur und Navigation im Website Konzept klären

Die Struktur einer Website verständlich planen

Struktur bedeutet: Hierarchie schaffen. Bei beiden Websites ist die Navigation bewußt reduziert gehalten.

Bei Chiara haben wir uns gefragt: Was muss nach ganz links, was ist zweitrangig? Für Eltern ist die Frage nach den „Kosten & Ablauf“ oft zentral. Dieser Punkt stand in der ersten Überlegung noch auf der Startseite. Bis uns klar wurde: Nein, „Kosten & Ablauf“ ist von zentraler Bedeutung und muss deshalb in die Navigation. Und zwar an einem prominenten Platz relativ weit links.

Die Hierarchie der Website beginnt nämlich schon beim Menü: Welcher Menüpunkt gehört an erste oder zweite Stelle? Welcher kann ganz nach rechts (in unserer westlichen Kultur lesen wir von links nach rechts). Und wohin gehören Menüpunkte, die den Besucher zunächst nicht interessieren, wie das Impressum?

  • Welche Inhalte sind zentral, welche untergeordnet?
  • Wie hängen die Seiten logisch zusammen?
  • Gibt es Inhalte, die über ein Untermenü erreichbar sein können?
  • Ist ein komplexes Menü nötig oder ist eine radikale Reduktion sinnvoller?

In der Hauptnavigation auf Chiaras Website finden wir nur sechs Punkte: Start, Psychotherapie, Kosten & Ablauf, Yoga, Über mich und Kontakt. Keine verschachtelten Untermenüs, in denen man sich wie in einem Raum mit 6 Türen verloren fühlt.

Gerade bei sensiblen Themen ist Klarheit das wichtigste Fundament. Zu viele Wahlmöglichkeiten erzeugen Unsicherheit – und wer unsicher ist, verlässt die Website wieder. Jeder Bereich der Website hat eine klare Aufgabe:

  • Psychotherapie erklärt, wie gearbeitet wird.
  • Kosten & Ablauf sorgt für das sichere Gefühl, zu wissen, was auf einen zukommt.
  • Yoga ist ein schöner Bonus, der aber sauber auf einer eigenen Seite steht.
  • Über mich gibt der Besucherin die Gelegenheit, der Therapeutin virtuell die Hand zu schütteln.
  • Kontakt ist die offene Tür, durch die man leicht eintreten kann.

Diese Ordnung ist kein Zufallsprodukt, sondern das Ergebnis intensiver Überlegungen.

Susannes Navigation ist sogar um einen Punkt schlanker: Start, Mit mir arbeiten, Über mich, Kontakt. Auch das war eine bewußte Entscheidung. Sie hat all ihre Angebote auf der Seite „Mit mir arbeiten“ untergebracht. Hier kann die Besucherin sofort mit ihr Kontakt aufnehmen und findet die Angebote übersichtlich auf einer Seite, ohne klicken zu müssen.

Da alle Angebote ineinander greifen, konnten wir hier auf Untermenüs verzichten und sie so überschaubar halten. Die Buttons führen zu ihrer Mailadresse oder zu einem Online-Kalender. Ihr Ziel: Newsletter-Leserinnen gewinnen. Wenn diese groben Inhaltsbereiche feststehen, beginne ich mit der eigentlichen Strukturarbeit: Welche dieser Inhalte gehören in die Hauptnavigation? Was ist zentral, was untergeordnet?

Websitestruktur und Informationsarchitektur visualisieren

Nun sind die Ziele und die Zielgruppe klar. Beide Kundinnen hatten erste Textfragmente, aus denen hervorging, was wo wie auf den einzelnen Seiten verteilt wird. Um die Verteilung der Text zu visualisieren, gehe ich oft ganz oldschool vor: mit Farbstift auf Papier.

Ich arbeite bewusst analog. Auf Papier sehe ich die gesamte Struktur auf einen Blick. Ich kann Bereiche einkreisen oder streichen, ohne dass ich in einem Programm in Ebenen und Module denken muss. Die Zusammenhänge erschließen sich mir so viel unmittelbarer. Außerdem arbeite ich in dieser Phase noch eng mit den Kundinnen zusammen.

Websitestruktur ausdrucken

Tipp: Die gescrollte Website auf Papier

Manchmal baue ich mir sogar eine ganze Webseite aus Papier zusammen: Wenn einzelne Textfragmente einigermaßen klar sind, drucke ich sie aus. Gerade mit der Startseite kann so eine Arbeit sinnvoll sein, denn die Startseite ist anderes als andere Seiten viel modularer und aus unterschiedlichen Bereichen aufgebaut. Ich schneide also die einzelnen Absätze aus, lege sie auf den Boden oder Tisch und verschiebe sie, bis die Reihenfolge stimmt. Danach klebe ich sie untereinander zusammen, bis eine „gescrollte“ Website entsteht.

Warum das sinnvoll sein kann: Am Bildschirm siehst du immer nur einen Ausschnitt. Das kann verwirren oder dazu führen, dass man Teile übersieht. Man scrollt in der Seite nach unten und vergißt, was denn nun oben stand. Hab ich alles schon erlebt. Auf dem Boden siehst du alles auf einmal. Das kann vor allem bei der Startseite helfen, die Übersicht zu behalten und alle wesentlichen Punkte einzuordnen.

Informationsarchitektur bedeutet für mich, Ordnung in Inhalte zu bringen. Eine klare Hierarchie zu schaffen. Besucherinnen sollen intuitiv verstehen, wo sie sich befinden, was wichtig ist, wie sie weiterkommen und wie sie Kontakt aufnehmen.

Zwei Websites bei unterschiedlichen Angeboten

Anders als bei Susanne, die in ihrem Angebot mit Kochkursen und Ernährungsberatung in einem Themenbereich bleibt, sieht das bei Chiara anders aus: Sie ist neben ihrer Expertise als Psychotherapeutin ausgebildete Yogalehrerin und bietet regelmäßig Yoga-Retreats an.

Damit beide Bereiche nicht verschwimmen, hat sie einen anderen Weg gewählt: zwei Websites. Für ihr Yogaangebot habe ich ihr einen Onepager erstellt auf einer Subdomain. Dort finden Besucher ihre Yogatermine. Auf der Website für Psychotherapie wird ihr Yogaangebot ebenfalls erwähnt, da sie Yoga als therapeutisches Mittel anbietet. So bedient sie zwei Zielgruppen: Die Frauen (und Männer), die gern Yoga ausüben und ihre Patienten, die sie mit Yogaübungen therapeutisch unterstützen kann. Auch das ist eine Struktur-Entscheidung: was zusammengehört, und was besser getrennt bleibt.

Was die Trennung bewirkt hat

Die Trennung der beiden Bereiche Psychotherapie und Yoga ermöglichte, dass wir ihr Yogaangebot gezielt optimieren und bewerben konnten. Über Mundpropaganda wurde ihr Angebot mit den Yogaterminen weitergegeben und hatte auch neue Frauen angesprochen. Das Ergebnis: Über ihre Yoga-Website schreibt Chiara Rieß: „5 x mehr Yogaanfragen seit dem Launch der Website.“

Wie sich das Website Konzept in der Sprache zeigt – das Ergebnis einer gelungenen Planung

Bei Chiara war der Startseitensatz eine Herausforderung: Sie darf keine Heilversprechen machen, möchte ihre Patienten aber dennoch mit einer emotionalen Sprache abholen. Und ein „Herzlich Willkommen“ wäre Platzverschwendung. Auch hier war unsere erste Überlegung: Wie geht es den Besucherinnen und Besucher ihrer Website? Was ist ihr Problem? Mit welchen Sorgen suchen sie eine Psychotherapeutin für ihr Kind?

Meine Überlegung: Was geht in einem Menschen vor, der eine psychische Last trägt? Wie fühlen sich Eltern, die sich Sorgen um ihr Kind machen? Was beobachten Eltern an ihren Kindern, wenn es sich anders verhält als sonst? So überlegte ich einen Satz für die Startseite und damit den Türöffner für Chiaras Besucher: „Wenn Lachen stiller wird“. Eine besorgte Mutter könnte sich angesprochen fühlen und denken: „Stimmt, mein Sohn lacht viel seltener als früher.“ Das Konzept gibt hier die Richtung vor: Erst bauen wir eine menschliche Verbindung auf, danach liefern wir die sachlichen Fakten.

Fachbegriffe nur gezielt und sparsam einsetzen

Auf der Seite „Psychotherapie“ finden sich Fachbegriffe wie EMDR oder I.B.T. Aber sie erschlagen niemanden. Chiara zeigt Fachkompetenz, aber wir übersetzen sie in eine Sprache, die Eltern auch dann noch verstehen, wenn sie vor Sorge kaum einen klaren Gedanken fassen können. Auch bei „Kosten & Ablauf“ war uns absolute Klarheit wichtig. Erstgespräch, Dauer, Honorar – alles ist schnell zu finden.

Bei der Ernährungsberaterin zeigt sich dieselbe Konzept-Entscheidung im Text. Viele Texte auf Websites entstehen aus der Perspektive: „Was kann ich?“ Ich frage stattdessen: „Was braucht deine Kundin, um das Gefühl zu haben, verstanden zu sein?“

Auch hier suchen wir wieder die Probleme der Besucherinnen, um die richtige Sprache zu finden. Was quält Frauen in den Wechseljahren besonders häufig? Vier von Fünf Frauen in dieser Phase kennen Hitzewallungen, viele Frauen kennen Kopfschmerzen oder Schlafmangel aus eigenem Erleben. Und wer kennt nicht Filmszenen, in denen Frauen am Handtrockner ihre Achseln trocknen.

Gerade Hitzewallungen können bei Frauen zu einer einschlägigen Erfahrung werden. Körperliche Reaktionen werden als noch unangenehmer wahrgenommen, wenn die Frauen davon in der Öffentlichkeit überrascht werden und sich dem völlig ausgeliefert fühlen. Mein Vorschlag: „Stell dir vor, du bist im Meeting, und die Bluse bleibt trocken.“ Nicht allgemein „Ernährungsberatung“, sondern eine konkrete Situation, die sofort verstanden wird – genau wie bei Chiara zuerst das Gefühl, dann die Fakten.

Und das möchte ich all meinen Kundinnen und Kunden mitgeben: Fühle dich in die Haut der Menschen ein, die du ansprechen möchtest mit deiner Website.

Ein wichtiger Teil im Website Konzept: die Bildsprache

Auch das Bildkonzept folgt dieser Logik. Deshalb denke ich von Anfang an die Bilder mit.

Ich notiere mir früh, welche Atmosphäre entstehen soll. Für die Ernährungsberaterin heißt das: Stockfotos nur dann, wenn sie eine Alternative bieten zu selbst fotografierten Bildern. In ihrem Fall wollten wir die Zutaten für eine gesunde Ernährung mit Appetit machenden Fotos zeigen, mit Fotografien von frischen Gemüse vom Markt. Die Fotos setzen ein wichtiges Signal: Wohlfühlen beginnt bei der richtigen Ernährung. Ich bin gegenüber Stockfotos eher skeptisch. Dennoch ist hier ein Fall, in dem wir sie – gut gewählt – auf der Startseite einsetzen können.
website konzept susanne moepert beispiel

Auf der Seite „Über mich“ gibt es einen Absatz zu Problemen in der Lebensmittelindustrie. Susanne hat viele Jahre in der Lebensmittelbranche gearbeitet und weiß, was dort gut und was dort schief läuft. Deshalb war es ihr wichtig, auch mal Dinge beim Namen zu nennen. Die Bilder zu diesem Abschnitt sind ebenfalls Stockfotos, doch sie illustrieren diesen Themenbereich sinnvoll, ohne wie Fremdkörper zu wirken.

Alle anderen Bereiche, in denen es um sie und um ihre Beratung geht, zeigt sie mit Fotos, für die sie eine professionelle Fotografin beauftragt hat. In dieser Fotosession ist sie planvoll vorgegangen: Die Fotografin fotografierte sie in verschiedenen Beratungssituationen, am PC arbeitend und auf dem Markt, während sie frisches Obst und Gemüse einkauft.

website konzept susanne moepert stockfotos

Chiaras hatte sich von einer Freundin fotografieren lassen zusammen mit einer ihrer Töchter. Dadurch sind lebendige Gesprächssituationen entstanden, die genau das transportieren sollen, was ihr wichtig ist: Der lockere, ungezwungene Zugang zu ihren jungen Klienten.

Als ausgebildete Fotografin sehe ich das besonders deutlich.

  • Ein Bild kann Atmosphäre schaffen.
  • Es kann Nähe herstellen.
  • Es kann Professionalität zeigen.
  • Falsch gewählt kann es aber die Aussage verwischen.

Website Konzept vs. Sitemap vs. Website Strategie

Diese Begriffe werden oft in einen Topf geworfen, dabei haben sie ganz unterschiedliche Aufgaben im Bauplan:

Begriff Worum geht es? Das Ziel
Website Konzept Struktur, Gewichtung, Besucherführung Klarheit
Sitemap Reine Liste aller Seiten Orientierung
Website Strategie Das „Warum“ hinter der Seite Geschäftliches Ziel

Stell es dir so vor: Die Strategie beantwortet die Frage, warum du überhaupt baust (wohnen oder arbeiten?). Die Sitemap ist die Liste der Baumaterialien. Und das Konzept ist der architektonische Plan, der festlegt, in welcher Reihenfolge man die Räume betritt.

Ohne Strategie fehlt die Richtung, ohne Konzept herrscht Chaos in der Bude.

Welche Bestandteile gehören in ein Website Konzept?

Ein Konzept ist keine bunte Zeichnung, sondern ein Paket aus bewußten Entscheidungen:

  • Zielgruppe: Wer steht vor der Tür und was brennt diesen Menschen auf der Seele?
  • Kernangebot: Was ist das Herzstück und was ist nur Beiwerk?
  • Struktur: Welche Seiten brauchen wir wirklich, um die Geschichte zu erzählen?
  • Tonalität: Reden wir förmlich im Anzug oder einfühlsam auf Augenhöhe?
  • Transparenz: Wo finden die Besucher die Infos, die ihnen die Angst vor dem nächsten Schritt nehmen?

Wie umfangreich ist ein Website Konzept – und wie lange dauert es?

Ein Website-Konzept ist kein 30-seitiges Werk. Bei einer kleinen Website reicht oft eine Handvoll Notizen und eine Skizze auf Papier. Entscheidend ist nicht die Seitenzahl des Dokuments, sondern die Klarheit im Kopf.

Je verzweigter das Angebot, je mehr Zielgruppen oder je komplexer die Struktur, desto mehr Zeit braucht die Vorarbeit. Diese Zeit zahlt sich aus: Sie erspart dir später endlose Korrekturschleifen und teure Umbaumaßnahmen an der fertigen Website.

Typische Fehler bei der Website-Konzeption

Oft wird versucht, es jedem recht zu machen. Das sieht man der Website an:

  • Alle sollen angesprochen werden.
  • Nebenangebote werden gleichrangig platziert.
  • Die Startseite wird überladen.

Oder das Design wird vor der Struktur entschieden. Was immer dann passiert, wenn man fertige „Branchen-Layouts“ für seine Website wählt. Dann werden die Inhalte dem Design angepasst, obwohl sie vielleicht ein völlig anders Umfeld brauchen, weil die Aussage des Textes von einem anderen Design besser unterstützt werden würde.
Was ich auch oft sehe: Ausgerechnet die Startseite enthält zu viele Informationen und Grafiken. Das führt dazu, dass den Besuchern nicht klar ist, was eigentlich wichtig ist. Oder sie brauchen zu lange, um die für sie relevanten Informationen zu finden. Das Ergebnis wirkt unruhig – nicht weil die Designerin gepatzt hat, sondern weil das Fundament wackelt.

Fazit: Was ein gutes Website Konzept ausmacht

Ein Website Konzept ist kein theoretisches Dokument für die Schublade. Es ist die unsichtbare Architektur, die deine Besucher leitet. Im Beispiel der Therapeutin sehen wir: Die Ruhe und Klarheit der Seite ist kein Zufall des Designs, sondern das Ergebnis von Planung.

Nach dem Konzept folgt die Umsetzung. Das heißt: Wie aus dieser Struktur fertige Texte, Design und eine technische Website werden, beschreibe ich in Website erstellen lassen: Mein Ablauf von Text bis Launch, wieder am Beispiel der Ernährungsberaterin Susanne.

Häufige Fragen zum Website Konzept

Website-Texte lesbar gestalten – 9 typische Fehler bei Lesbarkeit und Typografie

Website-Texte lesbar gestalten – 9 typische Fehler bei Lesbarkeit und Typografie

Ob WordPress, Squarespace oder Wix: Jede Website lebt von ihren Texten. Die besten Inhalte nützen dir aber wenig, wenn das Lesen anstrengt. Auf vielen Websites sehe ich dieselben Fehler bei Lesbarkeit und Typografie, und fast immer behebst du sie mit wenigen Handgriffen. Viele dieser Fehler entstehen, weil vor der Gestaltung niemand ein > Website-Konzept entwickelt hat. Mit ein bisschen Einfühlungsvermögen und den richtigen Werten machst du es deinen Leserinnen und Lesern deutlich leichter.

Website-Texte lesbar gestalten: das Wichtigste in Kürze

Diese Werte sorgen dafür, dass deine Texte gern gelesen werden:

  • Zeilenlänge: 50 bis 75 Zeichen inklusive Leerzeichen
  • Schriftgröße im Fließtext: mindestens 16 Pixel, besser 18 Pixel
  • Zeilenabstand: das 1,5- bis 1,7-Fache der Schriftgröße
  • Absätze: höchstens drei bis fünf Zeilen
  • Kontrast zwischen Schrift und Hintergrund: mindestens 4,5 : 1
  • Fließtext linksbündig, nie im Blocksatz

Fehler 1

Die Zeilen sind zu breit

Viel zu breite Textblöcke sehe ich ständig. Breit laufende Zeilen lesen sich extrem anstrengend, ich bekomme davon Kopfschmerzen. Probier es selbst aus: Halte ein DIN-A4-Blatt quer vor deine Augen, etwa 50 Zentimeter entfernt, so wie vor deinem Monitor. Wandere mit den Augen die obere Kante des Blatts entlang, von Blattspitze zu Blattspitze, von links nach rechts und wieder zurück, ein paar Mal hintereinander.

Das ist Schwerstarbeit für die Augen. Und genau das verlangst du von deinen Leserinnen, wenn deine Zeilen über die ganze Bildschirmbreite laufen. Beim Tennis bewegst du den Kopf von links nach rechts. Vor dem Monitor macht das niemand.

Übrigens: Übliche Monitore sind weitaus breiter als ein Din-A4-Blatt. Leider machen viele den Fehler, ihre Website für ihr viel kleineres Notebook zu optimieren. Das Problem: Auf dem nächst größeren Display laufen die Textzeilen 40 cm breit…

Wie breit darf eine Zeile sein?

Früher lautete die Empfehlung: nicht breiter als 800 Pixel oder etwa 20 Zentimeter. Das Problem dabei: Pixel ist nicht gleich Pixel. Auf einem hochauflösenden Display sind 800 Pixel deutlich schmaler als auf einem älteren Monitor. Verlässlicher ist die Zahl der Zeichen pro Zeile.

Außerdem hängt die Lesbarkeit auch von der Größe und Art der Schrift ab. Eine breit laufende Montserrat in 28 Pixel Höhe liest sich angenehmer als eine schmal laufende Roboto Condensed in 17 Pixel Höhe, auch wenn die Zeile dieselbe Breite hat.

Gut lesbar sind 50 bis 75 Zeichen inklusive Leerzeichen. Dafür gibt es in CSS eine eigene Einheit: ch entspricht ungefähr der Breite eines Zeichens. Ungefähr, weil natürlich nicht alle Zeichen gleich breit sind (ein t ist schmaler als ein M). Mit max-width: 70ch; begrenzt du die Zeile auf rund 70 Zeichen, egal auf welchem Display. In Divi trägst du die Angabe im Textmodul unter Erweitert > Benutzerdefiniertes CSS > Hauptelement ein. Die Zeile passt sich der Schriftgröße automatisch an, du musst nichts nachrechnen.

Fehler 2

Textwüsten – zu wenig Absätze

Oft gesehen, besonders auf Magazinseiten: Die Textblöcke haben zu wenig Absätze. Texte nehmen auf den meisten Websites den größten Teil der Fläche ein. Umso erstaunlicher, wie wenig Aufmerksamkeit die Absätze bekommen. Riesige Textblöcke ohne Gliederung machen jede Seite unübersichtlich, die berüchtigten Textwüsten. Lesen am Bildschirm ist anstrengend, und auf Websites wird anders als in Büchern eher gescannt als gelesen.

Gliedere deine Texte deshalb in kurze, leicht verdauliche Happen: Absätze mit höchstens drei bis fünf Zeilen, alle drei bis vier Absätze eine Zwischenüberschrift. So erkennen deine Leserinnen auf einen Blick, wo sie einsteigen wollen. Auch Listen helfen:

  • Listen bringen Abwechslung in den Text.
  • Listen lockern lange Seiten auf.
  • Listen bleiben gut im Gedächtnis.
  • Google übernimmt gut strukturierte Listen gern in die Suchergebnisse.

Fehler 3

Schriften, die das Lesen erschweren

Vorbei die Zeiten, als Websites mit drei oder vier Schriften auskommen mussten. Mit Google Fonts steht dir heute eine riesige Auswahl zur Verfügung. Wer die Wahl hat, hat die Qual: Die meisten Websitebetreiberinnen sind keine Designerinnen und greifen zu Schriften, die im Fließtext schwer zu lesen sind.

Ein wichtiger Hinweis vorab: Binde Google Fonts lokal ein, sonst verstößt deine Website gegen die DSGVO. Wie du Google Fonts DSGVO-konform einsetzt, habe ich im Artikel > Google Fonts DSGVO-konform einbinden beschrieben.

Schmale und sehr feine Schriftschnitte

Manche Schriften sind sehr schlank geschnitten, etwa die Condensed-Schnitte vieler Schriftfamilien. Ich finde sie schick, sie wirken edel. Im Fließtext sind sie eine Katastrophe, besonders für Augen ab 50. Ebenso problematisch sind sehr feine Schnitte, oft als „Thin“ oder „Light“ bezeichnet. Auf Papier sehen sie elegant aus, auf dem Display verschwimmen die dünnen Linien. Für Überschriften und kurze Teaser können schmale Schnitte gut funktionieren, für längere Texte nimm einen normalen Schnitt.

Website-Texte lesbar gestalten: schmal geschnittene Schriftwebsite texte lesbar gestalten extra fein

Script-Schriften

Script-Schriften sehen aus wie von Hand geschrieben. Sie wirken nahbar und bringen eine persönliche Note in den Text. Zu vielen Branchen passen sie wunderbar. Ihr Haken: Sie sind oft miserabel lesbar. Neulich las ich auf einer Website eine wunderschön geschwungene Überschrift. Aber: Ich konnte auf den ersten Blick nicht erkennen, ob ein Buchstabe ein f oder ein s war. Ich kam ins Stocken und musste mehrmals lesen. Es war ein s.

Wer fünf Sekunden braucht, um eine Überschrift zu entziffern, verliert wertvolle Zeit, bevor er überhaupt erfährt, worum es geht. Setz Script-Schriften deshalb sparsam ein, für einzelne Akzente, nie im Fließtext.

Website-Texte lesbar gestalten: Scriptschriften

Serifen-Schriften, besser als ihr Ruf

Lange galt die Regel: Serifenschriften gehören auf Papier, am Bildschirm sind sie schwer lesbar. Das stimmte zu Zeiten grob auflösender Monitore. Auf heutigen Displays funktionieren gut gemachte Serifenschriften auch im Fließtext, viele Zeitungen setzen sie online ein. Voraussetzung ist eine ausreichende Schriftgröße. Wichtiger als die Frage „Serife oder nicht“ ist eine andere Regel: Kombiniere höchstens zwei Schriften, eine für Überschriften und eine für den Fließtext. Und: Setze den Fließtext mit Serifenschriften nicht zu klein.

Website-Texte lesbar gestalten: Serifenschriften

Fehler 4

Formatierungen, die das Lesen erschweren

Auf einer Website mit Rezepten musste ich vor einiger Zeit einen Text lesen, der in sechs längeren Absätzen kursiv gesetzt war. Ich habe drei Anläufe gebraucht, um ihn zu erfassen. Natürlich war das Rezept nicht schwer zu verstehen. Aber ich hatte Mühe, den Text lesen zu können. Denn: Im längeren Fließtext ist Kursivschrift das reinste Augenpulver.

Ähnlich anstrengend sind ganze Absätze in Fettschrift oder in Großbuchstaben. Hinzu kommt die Wirkung solcher Formatierungen: Hervorhebungen wirken nur, wenn sie selten sind: Ist alles fett, ist nichts mehr wichtig. Und unterstrichene Wörter halten Leserinnen auf Websites für Links. Hebe nur einzelne Begriffe fett hervor, sparsam und gezielt.

Website-Texte lesbar gestalten: Kursiv geschnittene Schrift

Fehler 5

Zu kleine Schrift und ungünstiger Zeilenabstand

Was nützt das schönste Layout, die besten Bilder und der hilfreichste Inhalt, wenn die Schrift kaum zu lesen ist? Auf vielen Websites ist die Schrift zu klein oder der Zeilenabstand zu eng. Junge Augen kommen damit zurecht, ältere nicht. Gib deine Texte deshalb auch Menschen über 50 zum Testen. Auch wenn du selbst in diesem Alter bist: Du kennst deine Inhalte und kannst deshalb alles lesen. Nicht aber deine Besucher: Sie sind neu auf deinen Texzen und bemerken Probleme, die dir selbst nicht auffallen.

Für den Fließtext gilt als Untergrenze 16 Pixel, angenehmer sind 18 Pixel. Auf dem Smartphone bleibt die Schrift gleich groß, denn du hältst das Handy näher vor die Augen. Beim Zeilenabstand liegt der gute Bereich beim 1,5- bis 1,7-Fachen der Schriftgröße. Ist er zu eng, kleben die Zeilen aneinander und das Auge rutscht in die falsche Zeile. Ist er zu weit, zerfällt der Text in einzelne Streifen, und deine Leserinnen müssen unnötig scrollen. Überschriften brauchen weniger Abstand, dort reicht das 1,1- bis 1,3-Fache.

Fehler 6

Komplizierte Sätze, die die Lesbarkeit vermindern

Zugegeben, dieser Punkt betrifft weniger die Gestaltung als den Inhalt. Trotzdem gehört er hierher: Mit deinen Formulierungen entscheidest du mit darüber, wie gern deine Besucherinnen lesen. Du wirkst nicht schlauer oder professioneller, wenn du Thomas-Mann-Schachtelsätze baust oder Fachbegriffe wie ein Wissenschaftler verwendest. Bei komplizierten Sätzen passiert nur eins: Du wirst nicht verstanden. Worauf es ankommt:

  • Einfachheit: kurze Sätze, kurze Wörter, überflüssige Fachbegriffe vermeiden
  • Satzbau: ein Gedanke pro Satz, das Wichtigste an den Anfang
  • Prägnanz: viele Verben und anschauliche Bilder machen den Text lebendig und verständlich

Lesbarkeit messen: der Flesch Reading Ease

Für die Lesbarkeit von Texten gibt es sogar ein wissenschaftliches Maß, den Flesch Reading Ease. Er berechnet aus Satzlänge und Silbenzahl einen Wert, der zeigt, wie leicht ein Text zu lesen ist. Deinen eigenen Text prüfst du kostenlos auf fleschindex.de. Falls dich das Thema interessiert und du tiefer darin einsteigen möchtest, kann ich dir Bücher zu diesem Thema empfehlen: „Deutsch für junge Profis“ von Wolf Schneider und „Das Leben und das Schreiben“ von Stephen King. Ja, DER Stephen King, der von „Carrie“ und „Shining“. Horrorfilm-Fan bin ich nicht gerade, das Buch empfehle ich trotzdem gern.

Fehler 7

Zu wenig Kontrast

Hellgraue Schrift auf weißem Grund sieht modern aus und ist für viele Augen eine Zumutung. Genauso schwierig sind bestimmte Farbkombinationen, etwa gelbe Schrift auf rotem Grund oder Hellblau auf Dunkelblau. Du weißt nie, wie gut die Augen deiner Leserinnen sind, egal ob deine Zielgruppe junge Eltern sind oder Menschen im Ruhestand.

Als Maßstab gelten die internationalen Richtlinien für Barrierefreiheit (WCAG): Normaler Text braucht einen Kontrast von mindestens 4,5 : 1 zum Hintergrund, große Überschriften mindestens 3 : 1. Deine Farbkombination prüfst du kostenlos mit dem Contrast Checker von WebAIM. Du gibst Schrift- und Hintergrundfarbe ein und siehst sofort, ob der Kontrast reicht.

Barrierefreiheit ist seit Juni 2025 auch ein rechtliches Thema: Das Barrierefreiheitsstärkungsgesetz gilt vor allem für Onlineshops und digitale Dienstleistungen für Verbraucherinnen. Lesbare Kontraste gehören aber auf jede Website. Was du bei Bildern für die Barrierefreiheit tun kannst, liest du in meinem Artikel Website-Bilder optimieren.

Website-Texte lesbar gestalten: farbiger Text auf farbigem Hintergrund

Fehler 8

Zu viele unterschiedliche Farben

Wie oft habe ich Websites gesehen, die aussehen wie zugeklebte Litfaßsäulen: hier ein Bild, da eine Grafik, knallbunt und überladen. Die Elemente einer Website haben zwei Aufgaben:

  • die Leserinnen informieren
  • die Leserinnen beim Lesen führen

Und was haben nun Farben mit der Lesbarkeit zu tun? Form follows function: Die Inhalte sind der Maßstab für die Gestaltung, für Texte, Bilder, Farben, Schriften und Weißraum. Wenn deine Texte umgeben sind von zu vielen farbigen Elementen oder die Schriften selbst viele unterschiedliche Farben haben, werden die Lesenden maximal verwirrt. Die Einordnung der Inhalte fällt schwer, die Lesenden werden abgelenkt.

Zwei bis drei Farben reichen für eine stimmige Website, dazu eine Akzentfarbe für Buttons und Links. Sparsam eingesetzt, strukturieren Farben die Seite und führen das Auge. Zu viele Farben und Bilder ermüden. In Nullkommanix sind deine Leserinnen von der Reizflut übersättigt und verlieren das Wesentliche aus den Augen. Du möchtest, dass sie deine Texte lesen und dein Angebot verstehen. Manchmal ist weniger mehr.

Fehler 9

Blocksatz und zentrierter Fließtext

Blocksatz sieht ordentlich aus: Alle Zeilen enden bündig, links wie rechts. Im Buch funktioniert das, weil dort Silbentrennung und sorgfältiger Satz die Abstände ausgleichen. Eine intensive Arbeit, für die es nicht umsonst Profiprogramme gibt. Auf Websites fehlt das. Der Browser zieht die Wortabstände auseinander, bis die Zeile voll ist, und es entstehen Löcher im Text. Untereinander liegende Lücken bilden sogar senkrechte weiße Bahnen, im Druck heißen sie Gießbäche. Im Beispielbild siehst du einige der Gießbäche mit einem roten Punkt markiert.

Auf dem Smartphone wird es noch schlimmer: Bei schmalen Zeilen mit wenigen Wörtern reißen die Lücken besonders weit auf. Da kann es schon mal passieren, dass in einer Zeile zwei Wörter stehen, links und rechts, dazwischen eine riesige Lücke. Setz deinen Fließtext deshalb linksbündig. Der unregelmäßige rechte Rand stört nicht, er hilft dem Auge sogar, die nächste Zeile zu finden. Dasselbe gilt für zentrierten Fließtext. Für eine Überschrift oder ein kurzes Zitat ist er in Ordnung. Bei mehreren Zeilen muss das Auge an jedem Zeilenanfang neu suchen, wo es weitergeht.

website texte optimieren giessbach

Fazit: Lesbarkeit ist Gestaltung

Lesbare Website-Texte entstehen aus vielen kleinen Entscheidungen: Zeilenlänge, Schrift, Schriftgröße, Zeilenabstand, Kontrast und Satzbau. Jede einzelne wirkt unscheinbar. Zusammen entscheiden sie darüber, ob deine Besucherinnen bleiben und lesen oder nach wenigen Sekunden wieder gehen. Gute Gestaltung beginnt beim Konzept und endet nicht beim Design. Sie zeigt sich darin, wie mühelos deine Besucherinnen deine Texte lesen.

Du möchtest Website und Texte aus einer Hand, lesbar gestaltet und auf deine Zielgruppe abgestimmt? Buch dir ein kostenloses Erstgespräch.

Du willst deine Website selbst bauen und dabei begleitet werden? In meinem 1:1-Website-Mentoring „Website Gold“ zeige ich dir, wie.

FAQ zur Lesbarkeit von Website-Texten