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.
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.
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.
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.
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?
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.
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.
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.
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.
Fotos und Grafiken sind auf Websites ein Dauerbrenner. Immer wieder landen Website-Bilder falsch in der Mediathek: zu groß in den Abmessungen, zu schwer in der Dateigröße oder im falschen Format. Dazu fehlen oft sinnvolle Dateinamen und Alt-Texte, zwei Punkte, die für SEO und Barrierefreiheit zählen.
Wenn du deine Website-Bilder optimieren willst, bearbeitest du die Bilder am besten noch vor dem Upload nach WordPress. Mit ein paar Handgriffen lädt deine Website schneller, Google versteht deine Bilder besser und seheingeschränkte Menschen verstehen, welche Motive auf deinen Fotos abgebildet sind.
Website-Bilder optimieren: das Wichtigste in Kürze
Website-Bilder für WordPress optimierst du am besten vor dem Upload: Bring sie auf die Pixelbreite, in der sie angezeigt werden, komprimiere sie und speichere sie als WebP. Jedes Bild bekommt einen sprechenden Dateinamen und nach dem Upload in WordPress einen Alt-Text. Komprimierung und Umwandlung kann ein Plugin automatisch übernehmen.
Die folgenden sechs Fehler sehe ich bei Kundinnen-Websites am häufigsten.
Fehler 1
Die Pixelmaße passen nicht zum Einsatzort
Hat dein Foto mehr als 3.000 Pixel Breite? Fotos vom Handy oder aus der Kamera sind oft 4.000 Pixel breit oder mehr. Diese Pixelzahl brauchst du für den Druck, für eine Website ist sie zu viel. Wie groß dein Bild sein muss, hängt vom Einsatzort ab. Für ein kleines Begleitbild im Text reichen 900 bis 1.200 Pixel Breite, kleine Bilder dürfen noch schmaler sein. Das Headerbild (auch Herobild genannt) läuft dagegen oft über die ganze Breite des Displays und braucht deutlich mehr Pixel, damit es auf großen Monitoren scharf bleibt.
Oft wird nach „dpi“ gefragt. Für deine Website spielt das keine Rolle. Ob dein Bild mit 72 oder 300 dpi gespeichert ist, sieht der Browser nicht, er zeigt Pixel an. Entscheidend sind Breite und Höhe in Pixeln, die dpi-Angabe zählt erst beim Druck.
Wie viele Pixel braucht dein Bild?
Die Breite hängt von der Layoutbreite deiner Seiten ab. Angenommen, dein Inhaltsbereich ist 1.200 Pixel breit. Damit meine ich den Bereich, in dem deine Texte laufen bzw. bei einem zweispaltigen Format Text + Bild. Ich meine also nicht den Bereich von Displayrand zu Displayrand. Diese Layoutbreite kannst du übrigens auf deiner Website global einstellen, damit sie für alle Seiten gilt.
Bei der Gelegenheit: Bilder sind ein wichtiger Bestandteil deines Contents, der schon vor der Umsetzung der Website mit dem Konzept der Website überlegt werden sollte. Es ist also sinnvoll, auch die Anzahl, die Art und die Größe der Bilder gut zu überlegen. > Erfahre hier mehr darüber, wie du ein Website-Konzept erstellst
Nehmen wir nun als Beispiel ein Seitenlayout von 1200 Pixel, das zwei Spalten hat. Links der Text und rechts ein Bild. Wenn deine Texte nun über knapp die Hälfte von 1200 Pixel laufen sollen, weil neben dem Text ein Bild steht, rechnest du die Abstände von Layoutrand zu Text (wenn der Text auf einer Hintergrundfarbe steht, braucht er ja etwas Luft) und den Abstand zwischen Text und Bild dazu. Du rechnest also (Ja, beim Bau einer Website gehört einiges an Rechenarbeit dazu):
1.200 Pixel – 600 Pixel für den Text – 20 Pixel Abstand vom Text zum Layoutrand – 20 Pixel Abstand zwischen Text und Bild = 560 Pixel Bildbreite. Die Zwischenräume kannst du natürlich frei wählen, die Spaltenbreiten sind zumindest im Divi-Theme vorgegeben.
Allerdings schneidest du das Bild besser nicht auf 560 Pixel zurecht, aus folgendem Grund:
Warum die doppelte Breite oft besser aussieht
Viele Laptops und fast alle Smartphones haben hochauflösende Displays, bei Apple heißen sie Retina-Display. Sie stellen auf derselben Fläche doppelt so viele Pixel dar. Ein 560 Pixel breites Bild wirkt dort leicht weich oder sogar pixelig.
Deshalb lade das Bilder für die Spalte in diesem Beispiel mit rund 1.200 Pixel Breite hoch, auch wenn die Spalte halb so breit ist. Die Ladezeit leidet darunter nicht, denn WordPress schickt jedem Gerät automatisch die passende Größe (mehr dazu weiter unten). Für Google gibt es einen weiteren Grund: Damit ein Bild in Google Discover oder als große Vorschau erscheint, empfiehlt Google mindestens 1.200 Pixel Breite.
Ein kurzes Wort zum Seiten-Layout und ein praktisches Beispiel: Das Layout für meine Blogartikel habe ich mit 1.150 Pixelbreite eingerichet. Etwas schmaler als das Grundlayout, weil ich hier weniger Bilder einsetze, dafür viel Fließtext. Und lange Texte auf dem Bildschirm lesen sich leichter, wenn sie schmaler laufen. Deshalb habe ich an den Seiten Zwischenräume zwischen Hintergrund und Text eingegeben, in diesem Fall pro Seite links und rechts 60 Pixel. Falls du mehr darüber wissen möchtest, wie breit Textzeilen laufen sollten (was sich auf das Seitenlayout auswirkt), dann lies hier meinen Blogartikel > Website-Texte lesbar gestalten.
Das ergibt für meine Bilder folgende Rechnung, wenn sie über die gesamte Layout-Breite laufen sollen:
1.150 – 2x 60 = 1.030 Pixel Breite für die Bilder.
So erkennst du in WordPress die Dateigröße
Manchmal ist es sinnvoll, direkt in der WordPress-Installation zu schauen, ob die Bilder optimal sind. Das kannst du hier natürlich auch machen: Auf der linken, schwarzen Leiste des WordPress-Menüs (wenn du auf deiner WordPress-Website eingeloggt bist), siehst du oben den Punkt „Medien“. In diesem Bereich findest du alle deine Bilder, die du in WordPress hochgeladen hast. Klicke nun auf das Bild, das du untersuchen möchtest. WordPress öffnet das Bild in einem neuen Fenster, in dem du oben rechts die wichtigsten Informationen zum Bild findest. Also Dateiformat, Dateigröße, Datum der Erstellung bzw. des Hochladens und Name der Datei.
Sonderfall Headerbild
Für das Headerbild wählst du 1.920 Pixel Breite, für große und hochauflösende Monitore bis zu 2.560 Pixel. Die Höhe bestimmst du selbst. Ich verwende meist Panoramaformate, zum Beispiel 1.920 × 600 Pixel. Panorama deshalb, damit man beim Öffnen der Website auf größeren Monitoren nicht nur Bild sieht, sondern auch unterhalb des Bildes den oberen Teil des Inhaltsbereichs der Website. Ziel soll ja sein, dass die Besucher auf der Seite weiter nach unten scrollen. Ausnahme: Layouts mit einem Hintergrundbild über die gesamte Bildschirmfläche. Hier braucht das Bild mehr als 1.000 Pixel Höhe, für Retina-Displays eher 2.000.
Was WordPress mit deinen Bildern macht
Sobald du ein Bild in die Mediathek lädst, erstellt WordPress mehrere Kopien in verschiedenen Größen: standardmäßig mit 150, 300, 768, 1.024, 1.536 und 2.048 Pixel. Falls du dich jetzt wunderst: Diese unterschiedlichen Bildmaße findest du nicht in der Mediathek deiner WordPress-Installation. Erst wenn du z.B. per FTP die Verzeichnisse deiner Installation untersuchst, findest du im Verzeichnis „uploads“ (im Verzeichnis „wp-content“) alle Bilder, also auch die Duplikate der Originalbilder in den unterschiedlichen Pixelmaßen. Beim Aufruf der Seite bekommt jedes Gerät die Version, die zu seinem Display passt. Dein Smartphone lädt also kein 2.000-Pixel-Bild, wenn 400 Pixel reichen. Schlau, oder?
Drei dieser Größen (Vorschaubild, Mittel, Groß) stellst du im Dashboard unter „Einstellungen > Medien“ ein. Viele Themes legen weitere Größen an, Divi zum Beispiel eine ganze Reihe eigener Formate. Deshalb wächst der Upload-Ordner bei Divi-Websites schnell, ein Grund mehr, Bilder vor dem Upload zu verkleinern. Ist dein Original breiter als 2.560 Pixel, verkleinert WordPress es automatisch und hängt „-scaled“ an den Dateinamen. Das Original bleibt trotzdem auf dem Server und belegt Speicherplatz.
Fehler 2
Die Dateigröße ist zu hoch
Ist dein Foto größer als 200 KB oder sogar 1 MB? Auch nach dem Verkleinern der Pixelmaße ist die Datei oft noch schwer im Sinne von > viel KB. Der nächste Schritt heißt Komprimierung: Ein Programm entfernt Bildinformationen, die das Auge kaum wahrnimmt. So schrumpft ein Foto von 330 KB auf 70 KB, und du siehst keinen Unterschied.
Beim Speichern wählst du eine Qualitätsstufe. Zwischen 75 und 85 Prozent liegt meist der beste Kompromiss aus Qualität und Dateigröße. Ich nutze für Beispielbilder in Blogposts sogar stärkere Komprimierungen, da es hier nicht so sehr auf die Qualität der Bilder ankommt.
Wie klein die Datei wird, hängt vom Motiv ab. Je detailreicher und farbiger ein Bild, desto größer die Datei. Schwarzweißbilder sind meist kleiner als Farbbilder desselben Motivs. Als Richtwert gilt: Bilder im Text unter 150 KB, Headerbilder bis etwa 200 KB.
Warum das so viel ausmacht? Das Headerbild ist meist das größte Element, das beim Aufruf deiner Seite sichtbar wird. Google misst, wie schnell es erscheint (Largest Contentful Paint, kurz LCP). Dieser Wert gehört zu den Core Web Vitals, und Google berücksichtigt ihn beim Ranking. Übrigens: Diesen Wert und andere kannst du mit Googles Tool > Pages Speed Insights messen. Das empfehle ich dir sogar, denn die Ladezeiten sind eines der vielen Rankingkriterien bei Google. Lädt deine Seite zu lange, wirkt sich das nachteilig auf deine Website-Position aus. Und Menschen, die deine Website besuchen, sind genervt.
Fehler 3
Das Dateiformat passt nicht
JPG, TIFF, PNG, HEIC, PSD, RAW, SVG, WebP, AVIF … Und das sind nur einige Beispiele. Beim Speichern bieten dir manche Programme eine lange Liste an Dateiformaten an. Das kann verwirren. Wenn du deine Website-Bilder optimieren willst, kommen nur die Formate infrage, die jeder Browser lesen kann. Damit bleiben sechs für deine Website übrig: JPG, WebP, AVIF, PNG, GIF und SVG. Für Fotos brauchst du davon meist nur ein Format.
WebP, AVIF und JPG: die Formate für Fotos
Alle drei Formate stellen über 16 Millionen Farben dar und komprimieren Fotos stark. JPG ist der Klassiker, wahrscheinlich am bekanntesten (denn das Format kommt auch aus der Kamera oder dem Handy) und es funktioniert überall. WebP ist leider immer noch nicht so bekannt. Es erreicht bei gleicher Bild-Qualität etwa 25 bis 35 Prozent kleinere Dateien (bezogen auf die KB-Zahl). WordPress unterstützt es seit Version 5.8. (im Jahr 2026 ist bereits Version 7+ aktuell). Für die meisten Websites ist WebP heute die beste Wahl.
AVIF komprimiert oft noch stärker. WordPress kann es seit Version 6.5, sofern dein Server das Format verarbeitet. Frag im Zweifel bei deinem Hoster nach. JPG brauchst du weiterhin für Vorschaubilder, die beim Teilen auf Social Media erscheinen: Dieses Format zeigen alle Plattformen zuverlässig an.
PNG: für Bilder mit Transparenz
PNG stellt ebenfalls Millionen Farben dar und kann zusätzlich Transparenz. Für Fotos ist es trotzdem ungeeignet, weil die Dateien sehr groß werden.
Transparenz, was ist das nun wieder? Du hast es bestimmt schon gesehen: Das Foto einer Blüte, die „frei geschnitten“ ohne Hintergrund auf Text oder einem anderen Bild liegt. Das funktioniert nur mit Bildformaten, die Transparenzen unterstützen. JPGs kennen keine durchsichtigen Bereiche. Stellst du ein Motiv frei, schneidest also den Hintergrund weg und speicherst das Bild als JPG, dann füllt das JPG die leere Fläche mit einer Farbe, meist Weiß. Auf einem farbigen Seitenhintergrund siehst du dann einen weißen Kasten um dein Motiv.
Die Fotoreihe unten zeigt das an einem verwelkten Blatt. Freigestellt und als JPG gespeichert, steckt es in einem weißen Kasten. Als PNG oder WebP liegt das Blatt direkt auf jedem beliebigen Hintergrund, denn auch WebP kann Transparenz, bei deutlich kleinerer Datei.
Animationen auf Websites: das GIF
GIF brauchst du nur für bewegte Bilder, etwa eine winkende Katze oder diese blinkenden Werbebanner, die jeder kennt. GIF kann nur 256 Farben darstellen und erzeugt trotzdem riesige Dateien. Ein kurzes Video im MP4-Format oder ein animiertes WebP ist ein Bruchteil davon groß.
SVG für Logo und Icons
SVG ist ein Sonderfall, denn es ist ein Vektorformat. JPG, PNG, GIF, WebP und AVIF bestehen aus Pixeln, SVG besteht aus mathematisch berechneten Kurven. Deshalb bleibt eine SVG-Grafik in jeder Größe gestochen scharf.
Einen Haken gibt es: WordPress blockiert SVG-Uploads standardmäßig, weil SVG-Dateien schädlichen Code enthalten können. Doch hier gibt es Umwege: Mit dem Plugin Safe SVG kannst du das SVG trotzdem sicher hochladen, es prüft jede Datei beim Upload.
Welches Format wofür?
Fotos: WebP, oder AVIF, falls dein Server es unterstützt
Vorschaubild für Social Media: JPG
Bilder mit Transparenz: WebP oder PNG
Logo und Icons: SVG, wenn die Grafik in einem Vektorprogramm entstanden ist, sonst PNG
Animationen: kurzes Video oder animiertes WebP statt GIF
Fehler 4
Der Dateiname ist nicht websicher
Die Pixelzahl wurde reduziert, das Bild komprimiert – nun fehlt nur noch der Dateiname. Viele, die ihre Website-Bilder optimieren, machen ausgerechnet im fast letzten Schritt einen großen Fehler: falsche Zeichen im Dateinamen. Die können nämlich dazu führen, dass Server, Betriebssystem oder Browser ein Bild nicht finden. Die Bilder auf der Website werden einfach nicht angezeigt. Die BesucherInnen sehen nur ein kleines, hässliches Platzhalter-Icon. Oder eine leere Fläche. Damit das nicht passiert, gibt es für das Web Grundregeln:
Die Grundregeln für Dateinamen
keine Umlaute und kein ß
keine Sonderzeichen
keine Leerzeichen
nur Kleinbuchstaben
Wörter mit Bindestrich trennen
In 8 Schritten zur selbstgebauten Website
Mein Fahrplan zeigt dir in einfachen Worten, was du für den Start deiner Website wirklich brauchst. Melde dich hier an und du erhältst den Fahrplan als Geschenk in dein Postfach und als Download.
Warum Bindestrich und kein Unterstrich?
Google liest den Bindestrich als Worttrenner, den Unterstrich nicht. Aus schneiderin_mueller wird für Google ein einziges Wort.
Und warum Kleinbuchstaben?
Die meisten Webserver laufen unter Betriebssystem Linux und unterscheiden Groß- und Kleinschreibung. Für sie sind Haus.jpg und haus.jpg zwei verschiedene Dateien. Ein falscher Buchstabe im Link genügt, und das Bild fehlt. Spaßeshalber hab ich hier einen kleinen Test gemacht:
WordPress ersetzt Leerzeichen beim Upload automatisch durch Bindestriche. Auf den Rest verlässt du dich besser nicht.
Fehler 5
Der Dateiname sagt nichts über das Bild
IMG_3519.jpg. Mit solchen oder ähnlichen Bezeichnungen kommen Fotos aus der Kamera, und so landen sie oft in der Mediathek. Das ist aus zwei Gründen ungünstig:
Erstens findest du das Foto später kaum wieder. Ich suche Bilder auf meinem Rechner per Schlagwort, und img-2537.jpg hilft mir wenig, wenn ich das Selfie vom letzten Waldspaziergang brauche.
Zweitens liefert der Dateiname Google einen Hinweis auf den Bildinhalt. Laut Google ist dieser Hinweis schwach, deutlich wichtiger sind der Alt-Text und der Text rund um das Bild. Ein beschreibender Dateiname kostet dich trotzdem nur Sekunden. Außerdem findest du das Bild in der Mediathek von WordPress schneller, wenn der Dateiname passt.
Bleiben wir beim Beispiel der Schneiderin: Sie hat eine Website und zeigt dort mit einem Foto, wie sie Maß nimmt bei einer Kundin. Der passende Dateiname lautet dann: schneiderin-mueller-nimmt-mass.webp. Steht das Foto direkt neben dem Text über ihre Maßanfertigung, erkennt Google den Zusammenhang am besten.
Fehler 6
Der Alt-Text fehlt (Alternativtext)
Den Alt-Text vergibst du nach dem Upload, in der WordPress-Mediathek oder direkt im Bildmodul. Das Feld für den Alt-Text, genauer den „Alternativtext“, findest du wieder, wie oben beschrieben, unter den Informationen zum Bild. Dort gibst du einfach deinen Text ein. Er erfüllt zwei Aufgaben:
Menschen, die blind oder stark sehbehindert sind, nutzen Screenreader. Das Programm liest den Alt-Text vor, so erfahren sie, was auf dem Bild zu sehen ist. Außerdem nutzt Google den Alt-Text, um das Bild zu verstehen und in der Bildersuche einzuordnen.
So schreibst du einen guten Alt-Text
Beschreib in einem Satz, was zu sehen ist, zum Beispiel: „Schneiderin Anna Müller misst die Schulterbreite einer Kundin.“
Ein Keyword passt hinein, wenn es zum Bild gehört. Keyword-Listen im Alt-Text schaden mehr, als sie nützen.
Rein dekorative Bilder wie Linien oder Hintergrundmuster bekommen einen leeren Alt-Text. Der Screenreader überspringt sie dann.
Eine Falle aus der Praxis: Änderst du den Alt-Text später in der Mediathek, übernimmt ein bereits eingefügtes Bild die Änderung nicht automatisch. In Divi hat das Bildmodul ein eigenes Feld für den Alt-Text. Prüf nach dem Einfügen, ob dort etwas steht.
Das Gesetz zur Barrierefreiheit
Seit Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Ein typisch deutsches Wortungetüm, dessen Inhalt aber wichtig ist. Es betrifft vor allem Onlineshops und digitale Dienstleistungen für VerbraucherInnen. Kleinstunternehmen mit Dienstleistungen sind ausgenommen. Alt-Texte gehören trotzdem auf jede Website.
Zusammenfassung und wichtige Hinweise
Welche Bildgröße ist optimal für WordPress?
Als Faustregel gilt: Inhaltsbilder zwischen 1.200 und 2.000 Pixel Breite, Headerbilder bis 2.560 Pixel, und jedes Bild möglichst unter 150 KB. Die Werte im Einzelnen:
Optimale Bildgröße für deine Website: die Übersicht
Einsatz
Breite
Format
Dateigröße (Richtwert)
Headerbild, volle Displaybreite
1.920–2.560 px
WebP
bis ca. 200 KB
Bild über die volle Inhaltsbreite
doppelte Layoutbreite, höchstens 2.560 px
WebP
bis 150 KB
Bild neben dem Text
900–1.200 px
WebP
unter 100 KB
Kleines Bild, Porträt
600–800 px
WebP
unter 60 KB
Beitragsbild / Social-Media-Vorschau
1.200 × 630 px
JPG
ca. 100 KB
Logo, Icons
–
SVG, sonst PNG
wenige KB
Die 1.960 px in der zweiten Zeile gelten für deine Layoutbreite. Falls sich die nach dem Relaunch geändert hat, passt du den Wert noch an.
Zwei Punkte, die fast alle vergessen
Das Headerbild sollte sofort laden
WordPress lädt Bilder seit Version 5.5 erst, wenn BesucherInnen zu dem Bereich scrollen, in dem die Bilder eingebunden sind. Dieses Verhalten nennt man Lazy Loading, was enorm Ladezeit spart. Beim Headerbild bewirkt es das Gegenteil, denn dort soll das Bild sofort erscheinen.
Neuere WordPress-Versionen nehmen das erste große Bild deshalb automatisch vom Lazy Loading aus. Viele Cache- und Performance-Plugins überschreiben diese Einstellung aber wieder. Prüf in deinem Plugin, ob das erste Bild ausgenommen ist.
Standortdaten aus Handyfotos entfernen
Handyfotos speichern oft unsichtbar den Aufnahmeort, als GPS-Daten in den Metadaten. Ein Foto aus deinem Garten oder deiner Praxis verrät so im Zweifel deine Adresse. Viele Komprimierungstools entfernen diese Daten automatisch, aber nicht alle. Wenn du wie ich mit dem Mac arbeitest, findest du diese Daten in der Vorschau unter Werkzeuge > Informationen einblenden.
Tools: So bearbeitest du deine Bilder vor dem Upload
Website-Bilder optimieren mit einem Programm
Ich arbeite heute mit Affinity (vormals viele Jahre in Photoshop, doch das ist mir mittlerweile zu massig geworden). Mit Affinity erledige ich alles in einem Durchgang: Bild zuschneiden, Pixelmaße reduzieren, komprimieren, als WebP speichern und sinnvoll benennen.
Diese Programme eignen sich auch für Einsteigerinnen:
Affinity: seit Ende 2025 kostenlos mit einem Canva-Konto, Profi-Funktionen ohne Abo, für Mac und Windows
GraphicConverter: sehr gut, ich nutze es gelegentlich, allerdings gibt es das nur für den Mac
Handy-Apps gibt es ebenfalls reichlich. Ich finde Bildbearbeitung auf dem kleinen Display mühsam, für dich kann es trotzdem eine Alternative sein.
Website-Bilder optimieren mit einem Online-Tool
Squoosh (von Google, kostenlos): Du siehst Original und komprimierte Version nebeneinander und probierst WebP und AVIF direkt aus. So bekommst du schnell ein Gefühl für Qualität und Dateigröße. Squoosh verarbeitet die Bilder in deinem Browser, sie landen auf keinem fremden Server.
iLoveIMG: zuschneiden, verkleinern, komprimieren, in JPG oder WebP umwandeln, drehen. Du kannst sogar Text einfügen, etwa als Wasserzeichen.
Plugins: So optimierst du Bilder direkt in WordPress
Ein Optimierungs-Plugin übernimmt einen Teil der Arbeit beim Upload. Es verkleinert Bilder auf eine Maximalbreite, komprimiert sie und wandelt sie in WebP oder AVIF um. Zuschneiden und Umbenennen bleibt deine Aufgabe.
Ich empfehle ShortPixel Image Optimizer. Gute Alternativen sind Imagify, EWWW Image Optimizer oder Converter for Media. Nutze nur eines dieser Plugins, zwei gleichzeitig komprimieren doppelt und kommen sich in die Quere.
Ordnung: So behältst du den Überblick über deine Bilder
Auf dem Rechner
Was hat Ordnung mit Bildoptimierung zu tun? Erst mal nichts. Sie hilft dir aber, sofort das richtige Bild zu finden, und das spart Zeit und Nerven. Und sind beide erstmal am Ende, passieren schnell Fehler (wer kennt das nicht).
Ich lege für meine Website-Bilder Ordner nach Einsatzort an:
Header
Beiträge
Anleitungen
private Fotos
Selfies
Unterordner, etwa nach Hoch- und Querformat, helfen zusätzlich. Was auch immer du anlegst: Eine gute Struktur ist die halbe Miete. Für größere Bildbestände gibt es Verwaltungsprogramme wie Adobe Lightroom.
In der WordPress-Mediathek
Die Mediathek in WordPress ist meiner Meinung nach ziemlich grottig. Sie kennt nur zwei Arten von Ordnung: Bilder in Monatsordnern oder alle auf einem Haufen. So oder so suchst du dir nach kurzer Zeit einen Wolf.
Plugins wie Real Media Library oder FileBird bringen Ordner in die Mediathek. So sortierst du Bilder nach Themen und behältst den Überblick.
Ist die Mediathek schon voller Altlasten? Mit Media Cleaner findest du Bilder, die nirgends verwendet werden. Vorsicht bei Page Buildern wie Divi: Das Plugin erkennt nicht jedes eingebundene Bild zuverlässig. Mach vorher ein Backup und prüf jede Datei, bevor du sie löschst.
Mit Enable Media Replace tauschst du ein Bild gegen eine neue Version aus. Die URL bleibt gleich, alle Seiten mit diesem Bild zeigen automatisch die neue Datei. An dieser Stelle ein wichtiger Hinweis, den viele Websitebetreiber vergessen: Jedes Bild hat eine eindeutige URL. Was ist das nun wieder? Ein Beispiel: Alle Bilder, die du über WordPress hochlädst, landen in einem Unterordner vom WordPress-Content. Das ist wie oben beschrieben der Ordner „uploads“. Demnach erhält mein Bild für das Blatt oben folgende eindeutige URL: „https://constanzestraub.de/wp-content/uploads/website-bilder-optimieren-blatt-mit-hintergrund.webp“.
Deshalb ist dieses Tool praktisch, wenn du alte Bilder nachträglich optimierst.
Das waren die wichtigsten Fakten und häufigsten Fehler zum Thema Website-Bilder. Wenn du Fragen hast oder wenn dir der Artikel gefallen hat, freue ich mich über einen Kommentar von dir 🙂
WordPress ist das Programm, mit dem du eine Website baust. Dafür hat WordPress alle grundlegenden Funktionen „an Bord“.
Das Theme legt das Design und die Optik deiner Website fest und beeinflusst einige Funktionen von WordPress.
Ein Pagebuilder ist ein Tool, das den Aufbau einer Website leichter macht. Manche Themes haben einen Pagebuilder integriert (so wie „Divi“)
Plugins erweitern WordPress um zusätzliche Funktionen. Manche Funktionen sind wichtig. Sie sorgen u.a. für die Sicherheit und Ladegeschwindigkeit der Website.
Keine besonders originellen Antworten.
Und irgendwie etwas trocken und abstrakt.
Nichts für visuell denkende Menschen.
Deshalb hab ich eine Art Übersetzung überlegt.
Eine, die das Thema verständlich macht, ohne mit Technik zu langweilen.
Falls du jetzt die Stirn runzelst: Keine Sorge, der Titel diese Artikels soll dich nicht in die Irre führen. Am Ende der Geschichte sage ich dir, mit welchem Theme ich arbeite und welche Plugins du WIRKLICH brauchst.
Lass mich dir ein Bild malen
Stell dir drei neu gebaute Häuser vor.
In eines der Häuser möchtest du einziehen.
Dazu schaust du dir Haus für Haus an.
Du schließt die Haustür von Haus Nummer eins auf.
Schon im Flur siehst du, dass mit dem Haus etwas nicht stimmt:
Der Fußboden ist ein grauer, kalter Betonboden.
Das Haus ist kalt, denn im Haus gibt es keinen einzigen Heizkörper.
Die Küche ist leer. Aus den nüchternen Wänden ragen die nackten Wasserrohre. Wasseranschluss, Stromanschluss und Rohre sind zwar verlegt, aber die Einrichtungen und Anschlüsse fehlen: Spülbecken, Herd, Kühlschrank und Schränke gibt es nicht.
Auch das Bad hat nur die offenen Wasseranschlüsse und einen Ablauf für die Toilette. Waschbecken, Dusche und ein WC: Fehlanzeige.
Licht gibt es natürlich auch nicht: An der Decke baumeln die nackten Stromkabel.
Ziemlich unwohnlich also.
Du ahnst es vielleicht:
Dieses leere Haus ist WordPress, genauer deine WordPress-Installation.
Ohne Theme, ohne Plugins.
Nur das nackte WordPress.
Du kannst dich in diesem Haus aufhalten, du hast sogar einen Schlüssel für die Haustür, die du abschließen kannst. Du kannst deine Sachen mitbringen und in den Räumen ablegen.
Aber wohnen kann man diesen Aufenthalt nicht nennen.
Diesem Haus fehlt die Grundausstattung:
Heizkörper, Küchenschränke, Herd, Spülbecken, WC, Dusche, Waschbecken.
Erst mit dieser Grundausstattung kann das Haus als „Wohnung“ bezeichnet werden.
Das sagt sogar Wikipedia 😉
So machst du WordPress „wohnlich“: mit einem Theme
Also schaust du dir das zweite Haus an.
Du schließt wieder die Tür auf.
Dieses Haus sieht schon ganz anders aus:
Auf dem Fußboden wurde ein einfaches, aber schickes Klicklaminat verlegt. Das macht einen warmen und gepflegten Eindruck.
Die Küche ist vollständig eingerichtet. Mit Küchenschränken, Arbeitsplatte, Spüle, Herd und sogar einen Kühlschrank gibt es. In den Schränken findest du Tassen, Gläser und Teller.
Auch das Bad ist vollständig: Darin findest du eine Dusche mit Schiebetüren, ein Waschbecken und nebenan ein Stand-WC. Die Wände und der Fußboden sind mit weißen Fliesen bedeckt.
Und natürlich hat das gesamten Haus moderne Flachheizkörper unter den Fenstern.
Die Grundausstattung einer Wohnung ist also schon mal da.
Doch nicht nur das: Mittlerweile dämmert es und du siehst keine Details mehr. Du tippst auf den Lichtschalter und siehe da: Licht. In diesem Haus hängt in jedem Raum eine flache Deckenleuchte. Elegant geht anders, aber du kannst alles sehen. Das ist ja die Hauptsache.
Du gehst weiter:
In einem Raum findest du ein Bett und daneben ein Nachttisch mit einer kleinen LED-Lampe drauf. Im nächsten Raum stehen zwei Sessel, ein kleiner Hocker als Beistelltisch und eine Stehlampe. Im dritten Raum steht ein kleiner Esstisch mit zwei Stühlen.
Zwar ist dieses Haus immer noch nicht der Knaller. Aber wenn du Purist bist, reicht diese Einrichtung völlig: Du kannst dir einen Tee machen, dich auf dem Sessel ausruhen, im Bett die Nächte verbringen und für’s Frühstück setzt du dich an den Tisch.
So, jetzt kommt das Theme ins Spiel:
Dieses rudimentär eingerichtete Haus ist dein kostenloses Standard-Theme.
Nicht besonders schick und sehr einfach gestrickt.
Wenn du dein individuelles Design hinbekommen möchtest, brauchst du Zeit, Geduld und musst vielleicht etwas Technikkenntnisse haben, denn das Theme ist nicht so einfach zu handhaben.
Aber es reicht völlig aus, um damit einen einfach gestalteten Blog zu starten.
Jetzt denkst du sicher: Da geht natürlich mehr.
Und, weil wir ja malen wollen:
Du möchtest nicht nur „irgendwie“ wohnen.
Du möchtest es gemütlich haben, du möchtest deine Wohnung geniessen!
Also gehst du ins Haus Nummer drei.
In diesem Haus findest du das, was eine Wohnung erst so richtig behaglich macht: Teppiche auf den Fußböden, Bilder an den Wänden, Vorhänge an den Fenstern, passend zu den Sesseln eine gemütliche Coach, eine Musikanlage, um richtig schön zu chillen, weiche Kissen und ein hübsches Plaid auf dem Sofa, damit du dich wohlig zurücklehnen und dich einkuscheln kannst, während du dein Lieblingsbuch liest.
An der Wand steht ein cooles Echtholzregal für deine Bücher. Und gegenüber steht eine schicke Landhaus-Kommode, auf der eine stylische Tischlampe steht, die deinen Raum in warmes und gemütliches Licht taucht.
Die Wände haben einen Farbanstrich. Im Esszimmer steht ein einladender, großer Holztisch mit sechs gepolsterten Stühlen. Der Tisch bietet viel Platz und lädt dazu ein, mit Freunden stundenlang gemütlich zu brunchen.
Auch Küche und Bad sind tippitoppi: In der Küche sind moderne Einbaumöbel mit Schubladenelemente, in denen alles seinen festen Platz hat und die beim Schließen wie von Zauberhand leise zufahren. Hier findest du Küchenhelferchen, mit denen du ruckzuck deine Lieblingssachen machen kannst: Kaffee, Smoothies, Toast, Tee oder Kuchen. Eine Spülmaschine ist natürlich ebenfalls vorhanden – damit du deine Zeit nicht mit dem lästigen Abwasch verschwenden musst.
Diese Wohnung hat alles, wonach du dich sehnst, wenn du kaputt von der Arbeit kommst und dich einfach nur in den Kissen rekeln willst, um Vivaldis Vierjahreszeiten zu lauschen.
Das ist dein Premium-Theme, das viele zusätzliche Funktionen hat. Mit diesem Theme bekommst du deine Website schneller und einfacher nach deinem Geschmack hin als mit einem kostenlosen Standard-Theme.
Mit dem Pagebuilder baust du ruckzuck deine Seiten
Doch dieses 3. Haus hat noch mehr zu bieten.
Zu diesem Haus gehört ein Team von Helfern.
Du hast also nicht nur eine exquisite Wohnungseinrichtung, sondern zusätzlich Hilfe für deinen Haushalt:
eine Köchin, die dein Mittagessen zubereitet,
eine Haushaltshilfe, die deine Wohnung in Schuss hält und
eine Fachkraft, die deine Fenster putzt
Du hast endlich mehr Zeit für deine Hobbys.
Du brauchst keine lästige Hausarbeit machen.
Das ist dein Theme mit Pagebuilder
Der Pagebuilder nimmt dir viel Aufbau-Arbeit ab und hilft dir, Zeit zu sparen.
Die Entscheidung ist gefallen:
Haus Nummer 3 ist es. Hier ziehst du ein.
Nun fehlt dir fast nichts mehr zum Glück in deiner Wohnung.
Oder?
Plugins bringen wichtige Funktionen mit
Fast.
Denn dir fällt ein, dass du ein paar Erweiterungen für dein schickes Haus brauchst:
Du möchtest dich vor Einbruch absichern. Und du brauchst einen Schutz vor Sonneneinstrahlung, damit es im Sommer nicht zu heiß wird in der Wohnung. Also lässt du dir eine Aussenjalousie installieren.
Ein Gartenhäuschen fehlt dir auch noch. Damit du Rasenmäher, Werkzeuge und Fahrräder unterstellen kannst. Deshalb holst du dir vom Baumarkt eines der netten Holzhäuschen, die es als Bausatz gibt.
Außerdem fehlt noch ein gut sichtbares Nummerschild am Garteneingang, damit Besucher dich schnell finden und ein großer Briefkasten, damit der Postbote mit einem Blick sieht, wo er deine Briefe einwerfen darf.
Und schwups: Schon hat deine WordPress-Installation 4 Plugins bekommen.
Du siehst: Es ist gar nicht soooo kompliziert 😉
Mit diesem Theme arbeite ich
Ich arbeite seit Jahren mit dem Theme Divi.
Divi stammt vom Anbieter „Element Themes“. Divi ist ein Theme mit integriertem PageBuilder und wird ständig weiterentwickelt.
Mit so einem PageBuilder kannst du die einzelnen Elemente einer Seite ruckzuck zusammen bauen. Denn der Pagebuilder hat fertig programmierte Module, die du nur noch „zusammenstecken“ brauchst. Wie die Steine eines Lego-Hauses.
Übrigens: Viele sagen mir, dass sie Divi getestet haben und damit nicht zurecht gekommen sind.
Ich fand die Arbeit am Divi zu Anfang auch holperig. Immer wieder bin ich gestolpert. Und tatsächlich: Noch vor wenigen Jahren war Divi etwas sperrig – Anfänger konnten schon mal ihre liebe Not mit dem Divi haben.
Inzwischen ist das Theme richtig gut geworden. Es wurde schneller und es wurden Funktionen eingebaut, die richtig Gold wert sind. Einmal das Theme kennengelernt, können Laien ihre Seitenelemente ohne Probleme ruckzuck zusammenbauen.
Diese 4 Plugins brauchst du wirklich
Was ist ein Plugin?
Ein Plugin ist eine technische Erweiterung der Grundprogrammierung von WordPress.
Leider stellen Plugins immer wieder DIE Schreckgespenster von WordPress dar. Ganz zu unrecht. Denn im Gegensatz zu anderen Systemen kannst du auswählen, welche Plugins du installierst und welche nicht. Das ist ein riesiger Vorteil. Denn je mehr Plugins im System installiert werden, desto „schwerer“ wird das System – die Ladezeit der Website wird immer länger. Das stört den Besucher der Website und ist deshalb auch ein Rankingfaktor von Google. Außerdem: Die Website wird anfälliger für Störungen.
Viele Websitebetreiber nutzen leider zu viele Plugins.
Hier also meine Empfehlungen für die wichtigsten Plugins.
Du brauchst vor allem:
Etwas zum Verkürzen der Ladezeit: Damit deine Website schnell lädt, gibt es gute Plugins.
Ein Plugin, um Spams zu minimieren, falls du ein Kontaktformular hast.
Regelmäßige Backups: ein Plugin für deine BackUps ist super wichtig.
Sicherheit: ein PlugIn für die Sicherheit deiner Installation ist wichtig.
SEO: Sinnvoll ist immer ein Plugin zur Suchmaschinenoptimierung.
Bei Google Schriften: Die müssen aus rechtlichen Gründen lokal geladen werden. Dafür gibt es Plugins.
Vielleicht noch das ein oder andere Plugin zusätzlich. Als Beispiel: Falls du viele Bilder auf deiner Website hast, lohnt sich noch ein Plugin, das den Ladevorgang von Bildern optimiert.
So nutzt du Google Fonts DSGVO-konform – einfach und schnell umsetzbar
Eine Anleitung, wie du Google Fonts auf deiner Website lokal einbindest und Abmahnungen verhinderst
Nutzt du Google Fonts?
Falls du jetzt mit den Achseln zuckst:
„Öh – was sind Google Fonts?“
Oder wenn du nicht weißt, ob du Google Fonts für deine Website nutzt:
Dann wird es höchste Zeit.
Zeit, daß du dich um das Thema „Schriften auf deiner Website“ kümmerst.
Der Hintergrund: Laut eines Urteils des LG Münchens vom Januar 2022 ist die Nutzung von Google Fonts unter bestimmten Umständen rechtswidrig. Die Folge: In den letzten Wochen wurden etliche Abmahnungen an Websitebetreiber verschickt. Weil sie die Google Fonts nicht DSGVO-konform nutzen.
Aber keine Sorge:
In diesem Artikel zeige ich dir:
wie du Google Fonts lokal – also DSGVO-konform – einbindest,
welche Möglichkeiten außer Google Fonts du hast, Schriften auf deiner Website zu nutzen.
Google Fonts ist ein Verzeichnis von mehr als 1400 Schriftarten, die wir für unsere Website nutzen dürfen. Fonts ist ein anderer Begriff für Schriften.
Google Fonts sind sogenannte Webfonts. Diese Art der Schriften wurde entwickelt, damit Texte auf Internetseiten oder Apps einheitlich dargestellt werden können.
Jetzt nerve ich etwas. Mit einem kleinen Ausflug in die Geschichte:
In den Anfangsjahren des Internets hat man nur eine Handvoll Schriften gehabt: Arial, Tahoma, Times und Palatino waren solche Kandidaten. Über die Schönheit der Schriften kann man streiten — aber sie waren zu 99,9 Prozent aller Rechner vorinstalliert. So konnten die Websitebetreiber sicher sein, dass die Texte der Website vernünftig angezeigt werden.
Überall auf der Welt.
Tja, lang ist’s her. Das war im Internet-Steinzeitalter.
Inzwischen sind Websites anspruchsvoller geworden. Und mit den mobilen Geräten sind neue Anforderungen gekommen. Deshalb werden heute auf den meisten Websites und in Apps Webfonts eingesetzt.
Für Websitebetreiber sind diese Schriften eine schicke Sache: Es ist ziemlich einfach, mit schönen Schriften eine Website aufzupeppen. Websites können mit Webfonts einen individuellen Stil bekommen. Selbst Scriptschriften sind möglich. Scriptschriften sind Schriften, die aussehen wie von Hand geschrieben.
Was wäre eine DIY-Seite oder eine Kosmetik-Seite ohne Scriptschriften.
Natürlich gibt es noch andere Hersteller bzw. Vertreiber von Webfonts – wie Linotype, Adobe oder Typekit. Hier bezahlst du für die Schriften die Lizenzen. Dafür hast du unter Umständen eine Schrift, die seltener auf anderen Websites zu sehen ist. Womit du deiner Website eine noch individuellere Note gibst.
Unter welchen Umständen ist die Nutzung von Google Fonts problematisch?
Google Fonts können lokal oder dynamisch auf Websites genutzt werden. Problematisch ist die Verwendung von Google Fonts, wenn du sie dynamisch in deine Website einbindest.
Was bedeutet dynamische Nutzung?
Bei der dynamischen Nutzung von Google Fonts liegen die Schriftdateien auf dem Server von Google. Bei jedem Besuch einer Website, die die Schriften dynamisch nutzt, geht eine Anfrage an den Google Server. Dazu werden Daten des Besuchers der Website an den Google Server in den USA gesendet.
Das Urteil des Landgerichts München von Januar 2022 zur dynamischen Nutzung von Google Fonts auf einer Website.
Und genau DAS ist das Problem: Beim Öffnen einer Website, die Google Fonts dynamisch nutzt, wird die IP-Adresse des Website-Besuchers an den US-Server gedendet. Für viele wohl keine große Sache. Dumm nur: Die IP-Adresse zählt zu den personenbezogenen Daten. Und personenbezogene Daten dürfen nur mit einer „qualifizierten Einwilligung“ des Besuchers der jeweiligen Website in die USA übermittelt werden. So heißt es im Juristendeutsch.
So kam es, wie es kommen musste: Gegen die Übermittlung seiner IP-Adresse hat ein Besucher einer Website gegen deren Websitebetreiberin geklagt. Das Landgericht München hielt die Klage „ganz überwiegend für begründet“. Die Betreiberin der Website wurde dazu verurteilt, an den Kläger 100 Euro Schadenersatz zu zahlen.
In den Entscheidungsgründen des Urteils heißt es unter anderem:
„Die unterlaubte Weitergabe der dynanischen IP-Adresse des Klägers durch die Beklagte an Google stellt eine Verletzung des allgemeinen Persönlichkeitsrechtes in Form des informationellen Selbstbestimmungsrechts nach § 823 Abs. 1 BGB dar. Das Recht auf informationelle Selbstbestimmung beinhaltet das Recht des Einzelnen, über die Preisgabe und Verwendung seiner personenbezogenen Daten zu bestimmen.“
Quelle: LG München, Urteil vom 20.01.2022 – Az. 3 O 17493/20
Abmahnungen bei dynamischer Nutzung von Google Fonts
Das Urteil des Landgerichts zeigt, dass die „simple“ dynamische Einbindung von Schriften auf einer Website keine Bagatelle ist. Denn: Die dynamische Einbindung von Schriften ohne Einwilligung des Websitebesuchers ist ein Verstoß gegen das Datenschutzgesetz.
Vielleicht hast du davon gehört oder gelesen. Denn das Thema wurde bereits in diversen Newslettern beschrieben: In den letzten Wochen haben einige Websitebetreiber Abmahnungen erhalten, weil sie Google Fonts dynamisch nutzen.
So nutzt du Google Fonts DSGVO-konform
Du kannst natürlich einen entsprechenden Banner für so eine Einwilligung einrichten. Das aber hat einige Nachteile.
Ich halte es für sinnvoller, die Schriften lokal einzubinden. Vor allem deshalb, weil das relativ einfach machbar ist. Bei dieser Einbindung sind alle auf der sicheren Seite: die BesucherInnen deiner Website und du.
Was ist eine lokale Einbindung?
Die Schrift, die auf deiner Website angezeigt wird, befindet sich dort, wo auch deine Website gespeichert ist. Also auf deinem (angemieteten) Webspace. So können keine Daten an den Google Server übertragen werden.
Was kannst du tun, wenn du wegen der Nutzung von Google Fonts abgemahnt wirst?
Eine schlechte Idee ist: nichts tun. Denn mit Sicherheit hat der Abmahner ein Screenshot deiner Website angefertigt.
Rausreden ist also nicht. Und auch wenn „nur“ gemahnt wurde: Eine anschließende Klage ist immer noch möglich.
Was du als erstes machen solltest:
Prüfe, ob deine Schriften tatsächlich dynamisch eingebunden sind.
Wenn du feststellst, dass bei der Einbindung der Schriften Daten der Besucher übertragen werden können: Jetzt solltest du schnell handeln, um den Schaden zu begrenzen.
Dann ist der nächste Schritt: Das Laden der Schriften vom Google Server deaktivieren. Wie das geht, erkläre ich unten. Außerdem erkläre ich, wie du deine Lieblingsschrift lokal einbindest.
Wie gehst du mit dem Abmahnschreiben um?
Zunächst: Meine Einschätzung ist keine Rechtsberatung. Die kann und darf ich nicht leisten. Hier gebe ich lediglich wieder, wie ich mich verhalten würde.
Ich würde dann das Schreiben ignorieren, wenn zu dem Zeitpunkt, als der Abmahner deine Website besucht haben will, die Schriften bereits lokal eingebunden waren.
Wenn der Abmahner recht hat, wenn die Schriften tatsächlich dynamisch eingebunden waren: Auf keinen Fall würde ich den geforderten Geldbetrag zahlen. Denn: Aus meiner Sicht sind Seitenbetreiber nicht verpflichet, lediglich auf eine Aufforderung wegen eines Verstoßes der DSGVO eine Geldzahlung zu leisten. Denn der Vorwurf müsste zunächst juristisch geprüft werden. So jedenfalls meine Kenntnis. Heißt: Der Anspruchsteller müsste zunächst klagen.
Das kann er zwar wie gesagt immer noch. Doch so einfach ist das nicht. Denn der Kläger trägt vor Gericht die Beweislast. Der Kläger muss also zunächst gut argumentieren. Zudem müssen die Gerichtsgebühren im Voraus bezahlt werden.
Man kann über die Abmahnungen bestimmt unterschiedlicher Meinung sein. Mit Sicherheit haben die Abmahner recht: Personenbezogene Daten müssen geschützt werden. Die Frage ist aber, ob man unbedingt klagen muss. Ich vermute, dass mit der Abmahnwelle nicht wenig Leute versuchen, sich auf möglichst schnellem Weg ein kleines Taschengeld zu verdienen. Dabei spielen sie mit der Verunsicherung, Angst oder Unkenntnis mancher Websitebetreiber.
So prüfst du, welche Schriften auf deiner Website aktiv sind
Die Schriftart und die Art der Einbindung ist bei jeder Website anders. Bei WordPress wird das vom Theme oder dem Childtheme erledigt. Und wo genau die Schrift zu finden ist, das kann bei jedem Theme anders aussehen. Deshalb kann ich hier keine allgemein gültige Antwort geben, an welcher Stelle du in deinem WordPress deine Schrift findest.
Mach es einfach: Du kannst mit deinem Browser feststellen, welche Schrift du nutzt.
Dafür öffnest du deine Website im Browser Chrome oder Firefox. Ich nutze Chrome, weil ich die Handhabung dort einfacher finde. Im Browser nutzt du einfach die Entwicklerkonsole (heißt so, ist aber nicht kompliziert).
Öffne deine Website in Chrome.
Wenn deine Website im Browser angezeigt wird, klicke mit der rechten Maustaste auf einen beliebigen Bereich der Website
Dort, wo du klickst, öffnet sich ein Kontextfenster
Klicke im Kontextfenster auf „Untersuchen“
Dein Browserfenster wird geteilt und in einem Bereich wird ein Fenster mit dem Elementangaben deiner Webside angezeigt. Das ist die Entwicklerkonsole.
Klicke oben in der horizontalen Leiste auf den Reiter „Quellcode“ (oder Sources)
In dem weißen Feld siehst du verschiedene Angaben. Wenn du dort die Angabe „fonts.gstatic.com“ findest, dann weißt du: Google Fonts werden vom Google Server geladen. Im selben Fenster kannst du die Schriften erkennen, die vom Google Server auf deine Website geladen werden.
Klick auf den kleinen Pfeil vor fonts.gestatic.com
Darin findest du einen Ordner mit der Bezeichnung „s“
Den Ordner kannst du auch öffnen, darin befinden sich die Schriften.
Anleitung: So bindest du Google Fonts DSGVO-konform lokal in deine WordPress-Website ein.
Schritt 1:
Schriften überprüfen
Überprüfe wie oben beschrieben, welche Schriften du auf deiner Website geladen hast.
Schritt 2:
„google-font-helper“ ist dein Helferchen:
Schriften aussuchen und laden
CSS kopieren
Schriften aussuchen, auswählen und Downloaden:
Der google-webfont-helper ist wunderbar übersichtlich aufgebaut und selbsterklärend: In der linken Spalte wählst du deine Schrift, auf der rechten Seiten werden die verschiedenen Schriftschnitte angezeigt. Hier kannst du die Schrift runterladen.
Um die Schrift zu finden, kannst du entweder scrollen oder oben links den Namen der Schrift eingeben.
Wähle auf der rechten Seite deine gewünschten Schriftstärken aus. Wichtig sind die Einstellungen in dem Feld:
Select charsets Select styles
Unter Select charsets ist „latin“ vorausgewählt. Diese Einstellung wird in den meisten Fällen richtig sein – sofern du keine anderen Sprachen auf deiner Website anbietest.
Unter „Select styles“ wählst du die Schriftstärken, die du für die Texte auf deiner Website vorgesehen hast. Nicht jede Schrift hat alle Styles: Die Roboto als Beispiel hat 12 Styles, die Lato nur 10 Styles. Ich finde, dass 3 Styles ausreichen. Sonst wird die Gestaltung schnell chaotisch. Schau gern in meinem Artikel zum Thema Gestaltung der Website.
CSS kopieren:
Wenn du die Schriftstärken ausgewählt hast, werden dir im grauen Feld darunter die CSS-Angaben und Verlinkungen zur Schrift automatisch angelegt. Für diesen Schritt wählst du die Option „Best Support“ (ist in der Regel voreingestellt).
Falls du dich wunderst, dass die Schriften mehrfach angezeigt werden: Die Schriftdateien werden in verschiedenen Formaten erstellt. Das ist wichtig, damit alle unterschiedlichen Browser auf diversen Systemen die Schriften richtig anzeigen können.
Diese CSS-Angaben kopierst du in deine Zwischenablage.
Download der Schriften:
Die Schriften kannst du unter Punkt 4. auf der Seite downloaden. Die Schriften landen dann in einem gezippten Ordner auf deinem PC. Wie der Ordner heißt, wird auch auf dem Download-Button angezeigt.
Schritt 3:
Plugin laden und Schriften lokal einbinden
Es gibt verschiedene Plugins, mit denen du deine Schriften lokal einbinden kannst. Ich nutze „Fonts-lokal“ von Sonia Rieder (www.webtimiser.de). Fonts-lokal ist ein kleines, aber sehr feines Plugin.
Fonts-lokal
Schritt 4:
Schrift und CSS ins Plugin setzen
Das Plugin entzippst du nach dem Download. Wichtig für dich sind jetzt die beiden Ordner
fonts css
In dem Ordner „fonts“ liegen bereits Schriften als Beispielschriften. Diese Schriften löscht du einfach und ersetzt sie durch deine Schriften. Wähle alle deine Schriftformate aus deinem geladenen Schriftordner und schiebe sie in den Ordner „fonts“ innerhalb des Plugin-Ordners „Fonts-lokal“.
Deine kopierten CSS-Angaben (die du noch in der Zwischenablage hast) musst du noch in die Datei „local-fonts-style.css“ im Ordner „css“ des Plugins einsetzen. Die Datei enthält bereits CSS-Code. Dieser Code steht dort nur als Beispiel und du kannst auch dies löschen und durch deinen Code ersetzen (den du vom google-webfont-helper hast).
Wichtig! Was du zur Datei local-Fonts-style.css wissen musst:
Die Datei local-fonts-style.css ist eine einfache Textdatei, die du mit einem Texteditor öffnen kannst. Achtung: Du kannst die Datei nicht mit einem Schreibprogramm wie Word öffnen und bearbeiten.
Tipp: Als Windows-Nutzer kannst du „Editor“ oder „Notepad“ nehmen.
Mac-Nutzer nutzen „TextEdit“. Ich nutze dafür das Codeprogramm „CotEditor“.
Schritt 5:
Plugin installieren
Sind Schriften und CSS-Code in deinem Plugin? Dann kannst du das Plugin einfach über das Backend von WordPress unter „Plugins“ installieren. Wichtig: Dazu musst du das Plugin vorher als Zip-Datei packen.
Alternativ kannst du das fertige Plugin (den Ordner Fonts-lokal mit deinen Schriften) per FTP in den Ordner plugins in deinem WordPress-Verzeichnis hochladen („wp-content“ > „plugins“).
Und wieder aufpassen: Über FTP darfst du das Plugin nicht zippen!
Falls du nicht weißt, wie du ein FTP-Zugang einrichtest oder falls du wissen möchtest, wie du per FTP Dateien in deine WordPress-Installation laden kannst: Ich hab dazu eine schöne Anleitung am Beispiel des Hosters „Allinkl“ geschrieben, lies hier.
Schritt 6:
Google Fonts in WordPress deaktivieren
Das Plugin hat zwar den Befehl programmiert, dass Google Schriften nicht geladen werden sollen.
Aber sicher ist sicher: Die Google Fonts solltest du noch deaktivieren. Im Divi kannst du ganz einfach über einen Button Google Fonts deaktieren.
Dazu gehst du in deinem WordPress-Dashboard auf den Menüpunkt
Divi
Theme-Optionen
Google Schriftarten verwenden >
Google Fonts => hier den Button deaktivieren.
Welche anderen Möglichkeiten gibt es, Schriften auf einer Website zu nutzen?
Puh, das war jetzt doch ganz schön viel.
Aber vielleicht stellst du ja eine ganz andere Frage:
Muss ich unbedingt Google Fonts nehmen?
Nö.
Du kannst andere Webfonts nehmen.
Oben hab ich schon andere Schriftenhersteller erwähnt. Fonts von anderen Anbietern zu kaufen kann sich durchaus lohnen, wenn du Wert legst auf eine besonders gestaltete Schrift.
Wenn dir wichtig ist, dass die Schrift dieselbe ist, die du auch für dein Logo und dein gesamtes Corporate Design nutzt, kann eine gekaufte Schrift sinnvoll sein. Schriften sind wichtige Gestaltungsmerkmale deines Brandings, deiner Marke als UnternehmerIn.
Ein völlig entgegengesetzter Ansatz ist, überhaupt keine Schriften zu kaufen oder zu laden.
Wie das geht? Du nutzt einfach Systemschriften.
Was sind Systemschriften?
Wie der Name schon sagt: Systemschriften gehören zum System (wer hätte das gedacht).
Ob PC oder Smartphone: Jedes Computersystem braucht Schriften, damit der Mensch das System bzw. die Programme darin anwenden kann. Dabei hat jedes System seine eigene Schrift: Windows-Rechner nutzen Segoe UI, Android-Geräte nutzen Roboto, Ubunto nutzt Ubunto und so weiter.
Das bedeutet für deine Website natürlich, dass die Texte auf deiner Website je nach System ein wenig anders aussehen.
Ist aber nicht wirklich ein Problem.
Sofern du keine ausgefallene Schrift nutzen möchtest, sind die Unterschiede der einzelnen Schriften nicht so gravierend, dass sie die Gestaltung deiner Website völlig über den Haufen schmeißen. Und wenn du in der Hinsicht eher Purist bist, kann es sich lohnen, die Texte deiner Website mit den Systemschriften anzeigen zu lassen.
Noch ein Vorteil: Die Ladezeit der Website wird beschleunigt.
Wie wende ich Systemschriften an?
Das ist ganz einfach: Schritt 1 ist natürlich, dass du die Verwendung von Google Fonts auf deiner Website deaktiviert hast. Wie das beim Divi funktioniert, habe ich oben beschrieben. Anschließend bindest du in deinen Stilangaben einfach den Code ein, der dafür sorgt, dass die jeweiligen Systemschriften geladen werden. Im Theme Divi setzt du den Code direkt im style.css deines Child-Themes ein oder einfach im >
Divi > Theme Optionen > ganz unten im schwarzen Feld „Eigene CSS“.
Diesen Code setzt du dort ein:
body { font-family: -apple-system,BlinkMacSystemFont,“Segoe UI“,Roboto, Oxygen-Sans,Ubuntu,Cantarell,“Helvetica Neue“,sans-serif; }
Übersicht: Nützliche Plugins und Links, mit denen du Google Fonts DSGVO-konform lokal einbindest
WhatFont Fontanello
Beide Tools sind schöne Helfer, wenn man auch zwischendurch wissen möchte, welche Schrift in welcher Stärke und Größe auf einer Website genutzt werden. WhatFont ist eine Erweitung für den Browser Chrome, Fontallo ist die Erweiterung für Firefox.
Google web font helper
Eine hilfreiche Plattform, um Google Fonts mit den dazugehörigen CSS-Dateien zu laden. Hier kannst du die Schriften in allen notwendigen Formaten erhalten (eot, svg, ttf, woff, woff2).
Fonts-lokal
Ein schönes Plugin von Sonia Rieder (webtimizer.de), wenn du deine Schriften lokal hosten möchtest.
Google Fonts Checker
Hier kannst du prüfen, ob du Google Fonts auf deiner Website nutzt und welche Schriften auf deiner Website geladen werden,
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.
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.
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.
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.
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:
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.
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.
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.
