Genau diese Frage klären wir jetzt hier.[/vc_column_text][vc_empty_space empty_h="2"][vc_column_text uncode_shortcode_id="692288"]
Inhaltsverzeichnis
[/vc_column_text][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="2" bottom_padding="0" overlay_alpha="50" gutter_size="3" column_width_use_pixel="yes" shift_y="0" z_index="0" uncode_shortcode_id="163742" column_width_pixel="1000"][vc_column width="1/1"][vc_empty_space empty_h="1"][vc_empty_space empty_h="2"][vc_custom_heading text_size="h3" uncode_shortcode_id="256703"]1. Aufbau und Struktur[/vc_custom_heading][vc_column_text uncode_shortcode_id="315147"]Der Aufbau und die Struktur einer Webseite ist bereits richtungsweisend für die Orientierung und die Übersichtlichkeit auf deiner Webseite.[/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="151774"]I. Überschriften: Klarheit und Hierarchie[/vc_custom_heading][vc_column_text uncode_shortcode_id="181460"]Überschriften sind das Rückgrat jeder gut strukturierten Webseite oder eines Blogbeitrags. Sie dienen nicht nur dazu, die Aufmerksamkeit der Leser zu gewinnen, sondern auch, um die Hierarchie der Inhalte zu verdeutlichen und voneinander zu trennen. Deswegen ist es wichtig, die Überschriften für die Verständlichkeit in der richtigen Hierarchie zu verwenden.
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.[/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="180827"]II. Inhaltsverzeichnis: Schneller Zugriff und Übersicht[/vc_custom_heading][vc_column_text uncode_shortcode_id="702464"]Die richtige Navigation bei Beiträgen oder Webseiten ist für den Nutzer wichtig, um sich intuitiv auf deiner Webseite zurechtzufinden. Neben einem klaren Design sind Aufbau und Struktur dafür entscheidend. Zusätzlich dazu empfiehlt es sich außerdem, den Fokus auf übersichtliche Menüs und Navigationen zu legen.
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.[/vc_column_text][vc_column_text uncode_shortcode_id="393684"]Bei deiner Arbeit mit WordPress kannst du aber auch verschiedene Plugins wie 'Easy Table of Contents' verwenden, um ein automatisch generiertes Inhaltsverzeichnis basierend auf deinen Überschriften erstellen zu lassen. Diese Tools bieten oft auch anpassbare Optionen, um das Erscheinungsbild deines Inhaltsverzeichnisses an dein Webseiten-Design anzupassen.[/vc_column_text][vc_single_image media="107862" media_lightbox="yes" media_width_percent="85" alignment="center" uncode_shortcode_id="207631" media_link="url:https%3A%2F%2Ftocwp.com%2F|target:_blank"][vc_column_text uncode_shortcode_id="136461"]Easy Table of Contents ist vom Unternehmen Magazine3 und hat aktuell über 500.000 aktive Installationen bei WordPress. Das Plugin ist daher sehr beliebt und beinhaltet zahllose Optionen, um dein Inhaltsverzeichnis individuell anzupassen.
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.[/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="803422"]III. Schriftarten: Lesbarkeit und Ästhetik[/vc_custom_heading][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="2" bottom_padding="0" overlay_alpha="50" gutter_size="3" column_width_use_pixel="yes" shift_y="0" z_index="0" uncode_shortcode_id="163742" column_width_pixel="1000"][vc_column width="1/2"][vc_column_text uncode_shortcode_id="115212"]Die Wahl der Schriftart hat ebenfalls einen starken Einfluss auf die Lesbarkeit und das allgemeine Erscheinungsbild deiner Webseite oder deiner Beiträge.
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.[/vc_column_text][/vc_column][vc_column width="1/2"][vc_column_text uncode_shortcode_id="343618"]
💡 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.
[/vc_column_text][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="2" bottom_padding="0" overlay_alpha="50" gutter_size="3" column_width_use_pixel="yes" shift_y="0" z_index="0" uncode_shortcode_id="163742" column_width_pixel="1000"][vc_column width="1/1"][vc_column_text uncode_shortcode_id="202303"]Die Schrift deiner Webseite wird meist mit dem ausgewählten Theme übernommen. Sollte dir diese Schrift aber nicht gefallen, kannst du die Schrift über verschiedene Wege ändern.[/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="615478"]IV. Absätze: Klarheit und Fokus[/vc_custom_heading][vc_column_text uncode_shortcode_id="513439"]Gut strukturierte Absätze tragen wesentlich zur Lesbarkeit deiner Beiträge bei. Ein häufiger Fehler ist das Schreiben langer, unübersichtlicher Absätze. Bei der Erstellung deiner Webseitentexte oder von Blogbeiträgen solltest du unbedingt darauf achten, Absätze kurz und prägnant zu halten.
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.[/vc_column_text][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="102416"]V. Lesezeit anzeigen[/vc_custom_heading][vc_column_text uncode_shortcode_id="572416"]Durch die Anzeige der geschätzten Lesezeit am Anfang des Beitrags kannst du die Erwartungshaltung deiner Leser beeinflussen bzw. festhalten. Denn so sieht jeder Nutzer sofort, wie viel Zeit er einplanen muss, welchen Umfang der Artikel ungefähr hat und ob der Beitrag viele wichtige Inhalte enthält oder nur ein kurzer Abriss zu einem bestimmten Thema ist.
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'.[/vc_column_text][vc_single_image media="108003" media_width_percent="100" uncode_shortcode_id="133122"][vc_column_text uncode_shortcode_id="153841"]Reading Time WP hat aktuell über 20.000 aktive Installationen bei WordPress und stammt von Jason Yingling, einem Plugin Entwickler für WordPress. Die Verwendung ist an sich super einfach, denn nach dem Installieren und Aktivieren des Plugins integriert das Plugin automatisch die Lesezeit in deinem Beitrag.
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 [/vc_column_text][vc_column_text uncode_shortcode_id="210447"]
💡 TIPP
Für noch mehr Flexibilität bei den Einstellungen deiner Lesezeit kannst du auch Shortcodes verwenden. Dieser lautet [rt_reading_time]
[/vc_column_text][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="2" bottom_padding="0" overlay_alpha="50" gutter_size="3" column_width_use_pixel="yes" shift_y="0" z_index="0" uncode_shortcode_id="163742" column_width_pixel="1000"][vc_column width="1/1"][vc_empty_space empty_h="1"][vc_empty_space empty_h="2"][vc_custom_heading text_size="h3" uncode_shortcode_id="213477"]2. Layout und Design[/vc_custom_heading][vc_column_text uncode_shortcode_id="288007"]Das Layout und Design deiner Webseite und von Texten beeinflussen die Lesbarkeit enorm, denn, das Auge isst mit. Hier geht es vor allem darum, deine Webseite so aufzubauen, dass du die Augen entlasten kannst und deine Webseite durch Farben, Nachtmodus und Barrierefreiheit optisch benutzerfreundlich aufbaust.[/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="204515"]I. Farbgestaltung: Klarheit und Komfort[/vc_custom_heading][vc_column_text uncode_shortcode_id="116999"]Die Farbwahl deiner WordPress Seite spielt eine wichtige Rolle für die Lesbarkeit deiner Artikel.
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.[/vc_column_text][vc_single_image media="105986" media_width_percent="100" uncode_shortcode_id="199181"][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="764713"]II. Barrierefreiheit: Inklusivität und Zugänglichkeit[/vc_custom_heading][vc_column_text uncode_shortcode_id="749283"]Die Barrierefreiheit ist ein zentraler Aspekt, um deine Webseite für ein breiteres Publikum zugänglich zu machen. Bei WordPress gibt es eine Vielzahl von wichtigen Einstellungen, die du bereits mit einem geringen Aufwand direkt umsetzen kannst. So zum Beispiel auch wie gerade beschrieben die Farben und Kontraste deiner Webseite anpassen und deine Artikel für Menschen mit Einschränkungen so anpassen, dass sie sie richtig lesen können.
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.[/vc_column_text][vc_single_image media="107889" media_width_percent="100" uncode_shortcode_id="151761"][vc_column_text uncode_shortcode_id="204492"]WP Accessibility ist ein Plugin für WordPress, welches dir bei Problemen mit der Barrierefreiheit deines WordPress Themes hilft. Aktuell hat das Plugin über 40.000 aktive Installationen bei WordPress und wird in sehr regelmäßigen Abständen aktualisiert. Das Plugin ist allerdings nicht dazu gedacht, deine gesamte Webseite barrierefrei zu gestalten, denn das ist so nicht möglich. Das Plugin unterstützt dich aber dabei, verschiedene Features und Funktionen auf deiner Webseite zu integrieren.
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 [/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="129361"]III. Nachtmodus: Augenschonung und Anpassungsfähigkeit[/vc_custom_heading][vc_column_text uncode_shortcode_id="214095"]Der Nachtmodus bei WordPress oder auch der Dark Mode ist eine Designfunktion, die darauf abzielt, die visuelle Belastung bei der Nutzung der Plattform mittels einer dunkleren Umgebungen zu reduzieren. Dieser Dark Mode wird den meisten bereits von Smartphones bekannt sein, da dieser besonders beliebt bei den Nutzern ist, die gerne in dunkleren Umgebungen lesen.
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.[/vc_column_text][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="2" bottom_padding="0" overlay_alpha="50" gutter_size="3" column_width_use_pixel="yes" shift_y="0" z_index="0" uncode_shortcode_id="163742" column_width_pixel="1000"][vc_column width="2/3"][vc_column_text uncode_shortcode_id="115780"]Aktivieren des Dark Modes bei Elementor
- 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)
[/vc_column_text][/vc_column][vc_column width="1/3"][vc_single_image media="107897" caption="yes" media_lightbox="yes" media_width_percent="100" uncode_shortcode_id="665957"][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="2" bottom_padding="0" overlay_alpha="50" gutter_size="3" column_width_use_pixel="yes" shift_y="0" z_index="0" uncode_shortcode_id="163742" column_width_pixel="1000"][vc_column width="1/1"][vc_column_text uncode_shortcode_id="135263"]Wenn du den Dark Mode gesondert bei deinem WordPress integrieren willst, kannst du ein Plugin wie zum Beispiel 'WP Dark Mode' verwenden. Über das Plugin hast du schließlich verschiedene Optionen, wie du den Dark Mode auf deiner Webseite einschalten und individuell anpassen kannst. WP Dark Mode von WPPOOL hat über 20.000 aktive Installationen bei WordPress.[/vc_column_text][vc_single_image media="107930" media_width_percent="100" uncode_shortcode_id="196041"][vc_column_text uncode_shortcode_id="144977"]Funktionen
- 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[/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="210927"]IV. Responsives Design: Flexibilität über verschiedene Geräte[/vc_custom_heading][vc_column_text uncode_shortcode_id="101030"]In einer Welt, in der Inhalte auf einer Vielzahl von Geräten konsumiert werden, ist ein responsives Design unverzichtbar.
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.
[/vc_column_text][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="2" bottom_padding="0" overlay_alpha="50" gutter_size="3" column_width_use_pixel="yes" shift_y="0" z_index="0" uncode_shortcode_id="163742" column_width_pixel="1000"][vc_column width="1/1"][uncode_block id="86385"][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="2" bottom_padding="0" overlay_alpha="50" gutter_size="3" column_width_use_pixel="yes" shift_y="0" z_index="0" uncode_shortcode_id="163742" column_width_pixel="1000"][vc_column width="1/1"][vc_empty_space empty_h="1"][vc_empty_space empty_h="2"][vc_custom_heading text_size="h3" uncode_shortcode_id="186280"]3. Inhalte und Interaktive Elemente[/vc_custom_heading][vc_column_text uncode_shortcode_id="142029"]Fotos und interaktive Elemente verleihen deiner Webseite das gewisse Etwas und machen sie für deine Leser spannender. Hier gibt es so viele Möglichkeiten, deine Webseite interessant zu gestalten, dass weniger manchmal mehr ist. Denn viele Fotos, Videos oder Effekte können auch eine Reizüberflutung sein. Deshalb schauen wir uns an, wie du Inhalte einbauen kannst, so dass sie die Lesbarkeit optimieren.[/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="457747"]I. Grafiken, Bilder und Videos einbinden[/vc_custom_heading][vc_column_text uncode_shortcode_id="140573"]Visuelle Inhalte wie Grafiken, Bilder und Videos spielen aufgrund von Social Media eine zentrale Rolle in unserem Alltag. Auf Webseiten eignen sich daher auch besonders gut, um Textinhalte aufzubrechen, zusätzliche Inhalte zu verdeutlichen und die Lesbarkeit zu verbessern. Nicht umsonst heißt es: Emotionen verkaufen sich besser.
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.[/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="140056"]II. Lazy Load[/vc_custom_heading][vc_column_text uncode_shortcode_id="899040"]Lazy Load beschreibt eine Technik, bei der Inhalte wie Bilder oder Videos erst dann geladen werden, wenn sie in den sichtbaren Bereich des Benutzers bzw. Browsers scrollen.
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.[/vc_column_text][vc_single_image media="107699" media_width_percent="100" uncode_shortcode_id="210876"][vc_column_text uncode_shortcode_id="122890"]Lazy Load by WP Rocket stammt von den WP Rocket Caching Plugin Entwicklern und zählt somit zu den beliebtesten Lazy Load Plugins. Das Plugin hilft dabei, Bilder und Videos nur dann zu laden, wenn sich der Benutzer direkt über dem Medium befindet. Der Fokus des Plugins liegt auf Bildern, Videos und iframes, ist aber auch bei allen Bildmedien wie Avataren, Thumbnails etc. nützlich.
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[/vc_column_text][vc_column_text uncode_shortcode_id="573263"]
‼️ 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.[/vc_column_text][vc_empty_space empty_h="1"][vc_custom_heading heading_semantic="h3" text_size="h4" uncode_shortcode_id="133550"]III. Call to Action[/vc_custom_heading][vc_column_text uncode_shortcode_id="155324"]Ein Call-to-Action-Element ist eine Funktion, die Nutzer dazu auffordert eine bestimmte Aktion auszuführen. Das fördert vor allem die Interaktion deiner Nutzer. Call-to-Action-Buttons können Leser dazu ermutigen, sich für einen Newsletter anzumelden, weitere Informationen einzuholen, einen Kommentar zu schreiben etc. Folgendes solltest du dabei beachten:
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:[/vc_column_text][vc_button button_color="color-199217" border_width="0" link="url:https%3A%2F%2Fwww.hostpress.de%2Fblog%2F|target:_blank" button_color_type="uncode-palette" uncode_shortcode_id="104773"]Erfahre noch mehr zu WordPress auf unserem Blog[/vc_button][vc_column_text uncode_shortcode_id="201144"]Klare Botschaft
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.[/vc_column_text][/vc_column][/vc_row][vc_row row_height_percent="0" override_padding="yes" h_padding="2" top_padding="2" bottom_padding="0" overlay_alpha="50" gutter_size="3" column_width_use_pixel="yes" shift_y="0" z_index="0" uncode_shortcode_id="163742" column_width_pixel="1000"][vc_column width="1/1"][vc_empty_space empty_h="1"][vc_empty_space empty_h="2"][vc_custom_heading text_size="h3" uncode_shortcode_id="101351"]5. Fazit[/vc_custom_heading][vc_column_text uncode_shortcode_id="589788"]Wie du nun gelesen hast gibt es so einige tolle Tipps um die Lesbarkeit deiner Webseite und deinen Beiträgen zu optimieren, um deinen Nutzern eine noch bessere Benutzerfreundlichkeit ermöglichen zu können.
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. ☺️[/vc_column_text][/vc_column][/vc_row]
