Tipps, Tricks uvm.
Genau diese Frage klären wir jetzt hier.
1. Aufbau und Struktur
I. Überschriften: Klarheit und Hierarchie
In WordPress werden die Überschriften nach H1, H2, H3 usw. sinnvoll sortiert und klassifiziert. Dabei ist der H1-Tag für den Titel des Beitrags reserviert, während H2 und H3 für Unterüberschriften und wichtige Abschnittsüberschriften verwendet werden. Dies hilft insbesondere den Suchmaschinen und Lesern, die Struktur deines Artikels schnell zu erfassen.
Überschriften müssen auch für Menschen mit Einschränkungen zugänglich gemacht werden. Um die Struktur einer Webseite daher auch für Screenreader lesbar zu machen, können sog. ARIA Labels verwendet werden. ARIA steht für „Accessible Rich Internet Applications“ und ermöglicht das Hinzufügen von Navigations-Landmarken, Javascript-Widgets, Formular Hinweisen und Fehlermeldungen.
💡 Mehr Informationen zur Barrierefreiheit von WordPress kannst du hier nachlesen.
II. Inhaltsverzeichnis: Schneller Zugriff und Übersicht
Der größte Vorteil an einer intuitiven Navigation ist, dass es den Lesern ermöglicht wird, leicht zur vorherigen Seite oder einem zuvor gelesenen Artikel zurückzukehren. Insbesondere bei verknüpften Themen oder weiterführenden Inhalten bei Preisseiten, Blogbeiträgen etc. ist das besonders sinnvoll und hilfreich.
Die Navigation wird entweder durch Menüleisten oder Inhaltsverzeichnisse übernommen. Bei längeren Texten und Blogbeiträgen ist ein Inhaltsverzeichnis ein Muss und eine nützliche Ergänzung der Navigation. Das Inhaltsverzeichnis verbessert zudem die Benutzerfreundlichkeit deiner Artikel erheblich, indem es Lesern ermöglicht, direkt zu den Abschnitten zu springen, die sie am meisten interessieren.
Zur Erstellung von Inhaltsverzeichnissen hast du bei WordPress verschiedene Möglichkeiten:
- Du erstellst dir selbst ein Inhaltsverzeichnis
- PageBuilder wie Elementor bieten dir die Möglichkeit, automatische Inhaltsverzeichnisse zu erstellen
- Du verwendest Plugins, die dir spezifische Inhaltsverzeichnisse erstellen
Beispiel: Inhaltsverzeichnis erstellen mit Elementor
Wenn du dir über deinen PageBuilder ein Inhaltsverzeichnis erstellen lassen möchtest, gibt es zum Beispiel bei Elementor die Option, dir einfach den Block „Table of Content“ in deinen Beitrag zu setzen. Dieser generiert dir automatisch über die vorhandenen Überschriften ein Inhaltsverzeichnis, welches du individuell gestalten und anpassen kannst.
Vorteile
- unterstützt Rank Math
- funktioniert mit allen gängigen PageBuildern wie Gutenberg, Elementor, WPBakery
- viele Konfigurationsmöglichkeiten
- verschiedene Zähler-Formate, wie Dezimal, numerisch und römisch.
- eigener Inhalts-Block beim Gutenberg Block Editor
Preis: kostenlos bei WordPress und ab 49 $ pro Jahr.
III. Schriftarten: Lesbarkeit und Ästhetik
In WordPress gibt es diverse Möglichkeiten, Schriftarten anzupassen, sei es durch dein Theme oder durch zusätzliche Plugins, wie beispielsweise ‚Easy Google Fonts‘. Wichtig ist, eine Schriftart zu wählen, die leicht lesbar ist und gut zum Gesamtdesign deiner Webseite passt.
💡 TIPP
Vermeide extravagante Schriftarten, besonders für den Haupttext, und stelle sicher, dass die Schriftgröße angemessen ist. Wir empfehlen, auf serifenlose Schriften zurückzugreifen.
IV. Absätze: Klarheit und Fokus
Absätze schaffen damit nicht nur deinen Augen überschaubare Einheiten, sondern halten auch die Konzentration des Lesers aufrecht und ermöglichen es so, die Inhalte besser zu erfassen. Erhält jeder Gedanke sozusagen ein eigenes kleines Kapitel, ist es außerdem einfacher für viele Menschen, die Inhalte kurz zu überfliegen und einzusortieren.
Tipps für Absätze:
- jeder Absatz erhält einen eigenen Gedankengang oder Konzept
- Absätze brechen den Text auf, um ihn verständlicher zu machen und Gedankengänge von einander abzugrenzen
- Durch gezielte Absatz- und Zeilenumbrüche kannst du die Aufmerksamkeit deiner Leser aufrechterhalten und Aussagen mehr Kraft verleihen bzw. effektiver vermitteln.
Kurze und prägnante Absätze fördern insbesondere auch den Fokus auf das Wesentliche zu legen und zwingen den Autor, quasi präzise Aussagen zu treffen. So kannst du es auch vermeiden, überflüssige Inhalte, Füllwörter und Abschweifungen in den Text einzubauen.
Kurz um: klare Absätze und Strukturen innerhalb des Fließtext fördern die Lesbarkeit und Benutzerfreundlichkeit deiner Inhalte.
V. Lesezeit anzeigen
Um die Lesezeit bei WordPress zu integrieren, gibt es einige verschiedene Möglichkeiten. Um die Lesezeit bei WordPress anzeigen zu lassen, hast du verschiedene Optionen:
- Integration über den Shortcode
- Integration über den PHP Code, den du in der passenden Theme Datei einbaust
- Integration über ein Plugin
Die einfachste Methode ist die Verwendung eines Plugins, das die Lesezeit automatisch in deinem WordPress hinterlegt. Ein beliebtes Plugin zur Anzeige der Lesezeit ist hierbei ‚Reading Time WP‘.
Funktionen
- zeigt die Lesezeit von Beiträgen an
- verschiedene Einstellungsmöglichkeiten zur Anzeige der Lesezeit
- einfache Handhabung über dein WordPress Dashboard
- verschiedene Darstellungs-Optionen
Preis: kostenlos bei WordPress
💡 TIPP
Für noch mehr Flexibilität bei den Einstellungen deiner Lesezeit kannst du auch Shortcodes verwenden. Dieser lautet [rt_reading_time]
2. Layout und Design
I. Farbgestaltung: Klarheit und Komfort
Die Farben sollten so gewählt werden, dass sie einen hohen Kontrast zwischen Hintergrund und Text bieten. Hebt sich die Farbe der Schrift nicht genug von ihrem Hintergrund ab, wird der Text sehr schwer lesbar. Das kann vor allem für Menschen mit Beeinträchtigungen, wie beispielsweise Seh- und Rot-Grün-Schwäche, zum Problem werden. Deshalb empfiehlt es sich, hier auf einen hohen Kontrast zwischen Textfarbe und Hintergrund zu setzen, so bleibt deine Webseite zusätzlich auch bei hoher Sonneneinstrahlung auf dem Handy oder dem Computer gut lesbar.
Verwendest du z.B. eine dunkle Schrift auf einem hellen Hintergrund (wie bei uns auch), ist es wichtig, Farben zu wählen, die für die Augen angenehm zu erkennen sind. Um einen schlechten Farbkontrast zu vermeiden, solltest du auf Farben setzen, die sich komplementär ergänzen. Eine rote Schrift auf grünem Hintergrund oder gelbe Schrift auf weißem Hintergrund wird nicht gut lesbar sein.
💡 TIPP
Für deine normale Webseite empfehlen wir daher eine schwarze oder dunkelgraue Schrift auf weißem Hintergrund oder weiße Schrift auf schwarzem Hintergrund.
Wenn du deine Webseite gerne farbiger gestalten möchtest und dir mit den Kontrasten nicht sicher bist, kannst du über den Contrast Checker die Lesbarkeit der Farben überprüfen.
II. Barrierefreiheit: Inklusivität und Zugänglichkeit
Folgende Tipps helfen dir dabei:
- Verwende Sans Serif Schriften wie „Arial“ in Größe 16.
- schreibe in einfacher Sprache und kurzen Sätzen
- achte darauf ALT-Texte bei Bildern zu hinterlegen, die das Foto ausreichend erklären
- Integriere ein Tabindex-Attribut, damit deine Leser sich mit der Tabulator Taste orientieren können
- Erstelle Formulare mit Labels und klaren Call-to-Action-Buttons
Bei der Zugänglichkeit deiner WordPress Webseite können dir auch Plugins wie ‚WP Accessibility‚ dabei helfen, die Barrierefreiheit auf deiner Webseite umzusetzen, indem sie Funktionen wie Schriftgrößenanpassung und Kontrast Optionen bereitstellen.
Funktionen
- ALT-Texte hinzufügen
- Hinzufügen von „Mehr lesen“-Verlinkungen
- Medien ohne ALT-Texte finden
- Hinzufügen von Sprach- und Textrichtungsattributen zu Ihrem HTML-Attribut hinzu
Preis: kostenlos bei WordPress
III. Nachtmodus: Augenschonung und Anpassungsfähigkeit
Dieser Modus reduziert die Helligkeit und den Kontrast der Seite, was das Lesen bei geringem Licht angenehmer macht und die Augen schont. Einige WordPress-Themes bieten integrierte Nachtmodus-Optionen an, die meist im Bereich Design oder direkt im Widget-Panel zu finden sind. Bei WordPress selbst kannst du den Dark Mode Button direkt in der oberen Admin-Menüleiste finden.
- Klicke auf eine Seite, die mit Elementor erstellt wurde
- Klicke in der linken Menüleiste auf das Burger Menü
- Gehe hier auf Benutzereinstellungen
- Klicke bei Oberflächen Theme auf Dunkel (s. Bild rechts)
- Dark Mode Einstellung nach Uhrzeit
- automatischer Dark Mode bei dunkel bevorzugtem Theme
- unterschiedliche Dark Mode Switch Buttons
- einfaches verändern der Webseite Farben im Dark Mode
- Benutzerdefinierte Farbfunktionen
- Unterstützung aller gängigen PageBuilder
Preis: kostenlos bei WordPress und ab 39 $ pro Monat
IV. Responsives Design: Flexibilität über verschiedene Geräte
Aber was genau bedeutet eigentlich ein responsives Design?
Unter dem responsiven Design versteht man gemeinhin, dass jede Internetseite je nach Bildschirmgröße angepasst dargestellt werden muss, um die Besucherfreundlichkeit zu gewährleisten. Das bedeutet, du musst deine Webseite für Mobilgeräte, Desktop und Tablet manuell anpassen, dass diese überall richtig angezeigt wird.
Mittlerweile haben viele WordPress-Theme eine automatische responsive Anpassung an verschiedene Bildschirmgrößen, um so eine optimale Lesbarkeit und Benutzererfahrung auf Smartphones, Tablets und Desktops zu gewährleisten. Bei PageBuildern, wie Elementor, musst du diese allerdings manuell einstellen bzw. anpassen.
💡 TIPP
Achte darauf, ein Theme auszuwählen, das responsiv ist.
Worauf gilt es bei der Erstellung eines responsiven Designs zu achten?
Bei WordPress gibt es für die Erstellung responsiver Designs mehrere Schlüsselelemente, die du beachten musst. Auf folgende Aspekte solltest du also unbedingt achten:
- Fluid Grids – verwende prozentuale Maßeinheiten statt festen Pixelwerten, um die Elemente flexibler auf deiner Webseite einzubinden. Darüber ermöglichst du eine dynamische Anpassung an unterschiedliche Bildschirmbreiten
- Flexible Einbindung von Bildern und Medien – Auch hier solltest du auf die flexible Anpassung an den Bildschirm achten. Verwende dazu CSS-Techniken ‚max-width: 100%‘.
- Anpassung an verschiedene Geräte – Media Queries sind ein zentrales Werkzeug im responsiven Design. Sie ermöglichen es dir, CSS-Regeln zu definieren, die auf bestimmte Geräte- oder Bildschirmeigenschaften zugeschnitten sind.
- Breakpoints – Lege Breakpoints fest, um Layoutänderungen bei bestimmten Bildschirmgrößen zu steuern. Typische Breakpoints können für Mobiltelefone, Tablets und Desktops eingerichtet werden.
- Anpassungsfähige Textgrößen – Verwende skalierbare Einheiten (wie em oder rem) für die Schriftarten, um die Lesbarkeit auf verschiedenen Geräten zu gewährleisten.
- Umfassendes Testen: Teste deine Webseite auf verschiedenen Geräten und Browsern, um sicherzustellen, dass sie überall gut funktioniert und richtig dargestellt wird.
3. Inhalte und Interaktive Elemente
I. Grafiken, Bilder und Videos einbinden
Zur grundlegenden Verbesserung der Lesbarkeit, kannst du auf folgende Tipps achten:
Qualität und Relevanz
Wähle hochwertige und thematisch passende Bilder, Grafiken oder Videos aus. Diese sollten den Text visuell unterstützen und gegebenenfalls Inhalte nochmal aufgreifen, erklären oder darstellen.
Optimierung für Web
Die Bilder und Grafiken auf deiner WordPress Webseite müssen komprimiert und optimiert werden. Darunter fällt die Verringerung der Dateigrößen über Plugins wie TinyPNG und auch Lazy Load Optimierungen, zur Verbesserung deiner Webseitengeschwindigkeit.
Responsives Design
Inhalte sollten sich automatisch an die verwendete Bildschirmgröße anpassen. Das unterstützt die Benutzerfreundlichkeit und Wahrnehmung deiner Webseite.
Beschriftungen und Alt-Texte
Hinterlege bei allen medialen Inhalten Beschreibungen und Alt-Texte. Insbesondere die Alt-Texte sollten Bilder erklären, um diese auch für Menschen mit Einschränkungen zugänglich zu machen. Bei den Bildbeschreibungen kannst du aber auch Geheimtipps oder Hinweise einbauen. Die Hinterlegung von Informationen unterstützt übrigens auch dein SEO.
Videos einbetten
Beim Einbinden von Videos empfiehlt es sich, diese über Plattformen wie YouTube zu hinterlegen, anstatt Videos direkt auf dem Server oder deiner WordPress Mediathek einzubauen. Das optimiert nicht nur deine Ladezeit, sondern ist zudem auch noch ein bisschen Stromsparender.
II. Lazy Load
Lazy Loading hilft dir nun bei dem Besuch deiner Webseite, die Ladezeit trotz vieler Mediendateien so gering wie möglich zu halten, indem die unterschiedlichen Bilder und Videos nicht alle gleichzeitig geladen werden. Diese werden nun erst bei Bedarf im Hintergrund vollständig geladen, was die Ladezeit deiner Webseite deutlich verbessern kann.
Mittlerweile ist die Lazy Load Funktion bei WordPress automatisch im Core integriert, allerdings gibt es auch viele Plugins, mit deren Hilfe du Lazy Load zusätzlich bei WordPress implementieren kannst. Denn nicht jedes Lazy Load Tool bietet dieselben Funktionen an. Grundsätzlich ist Lazy Load für alle Art Bilder, Videos und Skripte interessant.
Ein sehr beliebtes Plugin ist „Lazy Load by WP Rocket“, das Bilder, Videos und iframes unterstützt.
Ein absoluter Pluspunkt bei Lazy Load von WP Rocket ist, dass es vollständig kostenlos bei WordPress angeboten wird.
Vorteile
- bereits bei WP Rocket Caching integriert
- vollumfänglich kostenlos
- Fokus auf Bilder, Videos & iframes
- unterstützt die Core Web Vitals
Preis: kostenlos bei WordPress
‼️ Achtung
Manchmal können sich verschiedene Lazy Load Tools aber auch blockieren und die Performance deiner Webseite verschlechtern. Hier gilt es also individuell zu schauen, was für deine Webseite wirklich geeignet ist und welche Inhalte du mit Lazy Load wirklich verbessern kannst.
Seit dem Core Update zu WordPress 5.0 hat WordPress die Lazy Load Funktion im Core integriert. In unserem letzten Beitrag rund um Lazy Load erklären wir dir in einem Tutorial, wie du das interne Lazy Load bei WordPress deaktivieren kannst.
III. Call to Action
Sichtbarkeit und Design
Das Callto-Action-Element sollte so platziert werden, dass es für den Nutzer gut sichtbar ist und vor allem an einer sinnvollen Position eingesetzt wird. Meist werden die Call-to-Action Elemente als Button dargestellt, den du individuell gestalten und farblich anpassen kannst.
Hier ein Beispiel, für einen Call-to-Action-Button:
Bei der Erstellung solltest du darauf achten, deine Aussage klar zu formulieren und eine prägnante Nachricht zu vermitteln. Hier ist es wichtig, auf einen Blick zu verstehen, was hinter dem Call-to-Action steckt, wie beispielsweise „Mehr Informationen anfordern“, „Die Demo Migration testen“ oder „Jetzt Kontakt aufnehmen“. So erfährt der Nutzer direkt, wie es weitergeht.
Strategische Platzierung
Natürlich ist auch die Platzierung des Call-to-Action Buttons oder Links essentiell. Sie sollte zum einen so platziert sein, dass sie zum vorherigen Inhalt passt und gleichzeitig gut sichtbar ist. Strategisch gute Positionen in einem Text oder auf einer Webseite sind das Ende von Blogbeiträgen, nach vorgestellten Produkten, in einer Seitenleiste oder in spezifischen Pop-ups.
5. Fazit
Tools wie Lesezeit Anzeigen helfen dabei, deine Inhalte transparenter für deine Nutzer zu gestalten. Insbesondere bei langen Texten sind eine klare Struktur, Absätze und ein gutes Inhaltsverzeichnis besonders wichtig, um die Navigation zwischen oder über die Inhalte hinweg zu vereinfachen und so intuitiv wie möglich zu gestalten.
Wie verbesserst du die Lesbarkeit deiner Inhalte? Schreib uns doch gerne einen Kommentar und erzähle uns deine besten Tipps. ☺️
