Web

Blog Design: Wie sollten Übersicht und Beitragsvorlage aussehen?

Talha Aslan 17 Minuten Lesezeit 1 Aufrufe

Kurze Antwort

Was macht gutes Blog Design aus?

Blog Design ist die gemeinsame Planung von zwei Ansichten: der Übersichtsseite, auf der Beiträge als Karten erscheinen, und der Beitragsvorlage, in der Leser einen einzelnen Artikel lesen. Eine gute Übersicht hilft bei der schnellen Auswahl. Eine gute Vorlage bietet angenehmes Lesen, einfache Navigation und einen natürlichen nächsten Schritt.

Alle Details und Beispiele finden Sie weiter unten im Beitrag

Wir sind Talha Aslan und Team, und in Websiteprojekten erleben wir den Blog oft als Nebensache. Startseite und Leistungsseiten bekommen zunächst viel Aufmerksamkeit. Der Blog behält dagegen meist das Standardlayout des Themes. Dabei lernen viele Besucher aus der Suche eine Marke zuerst über einen einzelnen Beitrag kennen. Deshalb ist die Blogvorlage genauso wichtig wie das Schaufenster der Website.

In diesem Leitfaden gehen wir jedes Element einzeln durch. Wir behandeln Beitragskarten, Kategorien, Lesezeit, Inhaltsverzeichnis, lesbare Zeilenlänge, Autorenbox, verwandte Beiträge und die Platzierung der CTA. Am Ende finden Sie zudem eine Checkliste, mit der Sie Ihren eigenen Blog prüfen können.

Warum sollten Übersicht und Beitragsvorlage unterschiedlich sein?

Im Blog Design ist die Übersicht also eine Auswahlansicht. Die Beitragsvorlage ist eine Leseansicht. In der Übersicht überfliegen Leser, vergleichen und entscheiden. Im Beitrag konzentrieren sie sich dagegen mehrere Minuten auf einen Text. Also haben beide Ansichten gegensätzliche Prioritäten. Die Übersicht soll dichte Informationen ordentlich zeigen, der Beitrag soll alles entfernen, was ablenkt.

Ein häufiger Fehler ist es, beide Ansichten mit demselben Raster und derselben Sidebar zu bauen. Zum Beispiel passt ein dreispaltiges Layout gut zur Übersicht. In der Beitragsvorlage drückt es den Fließtext allerdings in eine schmale Spalte. Daneben sammeln sich Werbeflächen, Schlagwortwolken und Archivkalender. Folglich brechen Leser den Beitrag ab und verlassen die Website.

Besser ist es, zunächst für jede Ansicht einen Satz zu formulieren. Für die Übersicht könnte er lauten: „Leser finden innerhalb von zehn Sekunden einen passenden Beitrag.“ Für den Beitrag könnte er lauten: „Leser beenden den Text ohne Mühe und sehen den nächsten Schritt.“ Dann behalten oder streichen Sie jedes Element anhand dieses Satzes.

Welche Angaben gehören auf eine Beitragskarte?

Eine Beitragskarte ist eine kleine Zusammenfassung, auf deren Basis Leser klicken oder weiterscrollen. Zu viele Angaben erschweren das Überfliegen. Zu wenige lassen dagegen offen, ob der Beitrag zur Frage passt. Diesen Karteninhalt nutzen wir in unseren Projekten als Ausgangspunkt:

  • Titel: Das auffälligste Element und vollständig klickbar.
  • Kurzer Auszug: Zwei bis drei Zeilen, die sagen, welche Frage der Beitrag beantwortet.
  • Kategorie: Genau eine Kategorie, verlinkt mit ihrer Kategorieseite.
  • Datum: Veröffentlichung oder letzte Aktualisierung, je nachdem, was für Leser mehr zählt.
  • Lesezeit: Bei langen Leitfäden hilfreich, weil sie Erwartungen setzt.
  • Titelbild: Mit festem Seitenverhältnis, damit die Kartenhöhe stabil bleibt.

Autorname, Kommentarzahl, Teilen Zähler und Schlagwortliste lassen Sie auf Karten meist besser weg. Diese Angaben gehören in den Beitrag, denn in der Übersicht erzeugen sie nur Unruhe. Machen Sie außerdem den Titel zum eigentlichen Link und erweitern Sie seine Klickfläche über die ganze Karte. So hören Nutzer eines Screenreaders denselben Link nicht dreimal.

Raster oder Liste: Welches Kartenlayout passt?

Ein Raster funktioniert vor allem in visuellen Blogs gut. Eine Liste lässt sich in informationsorientierten Blogs leichter überfliegen, weil Titel und Auszug im Vordergrund stehen. Die Wahl hängt von Ihrer Inhaltsart ab und davon, wie aussagekräftig Ihre Titelbilder sind. Die Tabelle vergleicht vier gängige Layouts.

LayoutStärkeSchwächePassend für
Raster (2 oder 3 Spalten)Zeigt viele Beiträge auf einmal, wirkt ausgewogenTitel werden kurz, Auszüge engVisuelle Blogs mit kurzen Beiträgen
Einspaltige ListeTitel und Auszug gut lesbar, fließt mobil natürlichWeniger Beiträge pro BildschirmRatgeber und Fachblogs
Hervorgehobener Beitrag plus RasterStellt wichtige Inhalte nach vornVeraltet, wenn niemand den Platz pflegtUnternehmensblogs mit festem Rhythmus
Kompakte TitellisteViele Beiträge schnell überfliegbarGeringe visuelle WirkungArchiv und Kategorieseiten

Mobil wird ohnehin jedes Layout einspaltig. Die eigentliche Entscheidung betrifft also den Desktop. Wirken Ihre Titelbilder alle wie dasselbe Stockfoto, empfehlen wir statt eines Rasters eine einspaltige Liste. Dann wandert der Blick des Lesers zum Titel.

Wie richten Sie Kategorien und Schlagwörter sinnvoll ein?

Kategorien bilden die thematische Landkarte eines Blogs, Schlagwörter eine feinere Verbindungsebene. Für Leser zählen wenige, klar benannte Kategorien. Ab sieben oder acht Kategorien wird die Filterleiste voll, und Leser wissen nicht mehr, in welches Regal sie schauen sollen. Begrenzen Sie Kategorien deshalb auf Themen, in denen sich Ihre Inhalte wirklich unterscheiden.

Für die meisten Blogs reicht eine horizontale Kategorieleiste über der Übersicht. Mobil darf diese Leiste seitlich scrollen, allerdings sollte die aktive Kategorie immer sichtbar und hervorgehoben bleiben. Zudem braucht jede Kategorie eine eigene URL und eine echte Seite mit kurzem Einleitungstext. Somit leitet die Kategorieseite Leser und wird gleichzeitig zu einer sinnvollen Hubseite für Suchmaschinen.

Mit Schlagwörtern sollten Sie daher sparsam umgehen. Zehn Schlagwörter pro Beitrag erzeugen Hunderte dünne Seiten mit jeweils einem Artikel. Wie Sie tiefere Strukturen planen, zeigen wir in unserem Beitrag zur Kategoriestruktur für große Websites.

Bringt die Anzeige der Lesezeit wirklich etwas?

Die Lesezeit ist ein kleines Erwartungssignal, das Lesern sagt, wie lange ein Beitrag dauert. Bei langen Leitfäden hilft sie bei der Entscheidung, ob man jetzt liest oder später. Bei kurzen Meldungen bringt sie dagegen wenig, weil der Text ohnehin schnell gelesen ist. Sie müssen sie also nicht überall zeigen, aber wenn Sie es tun, rechnen Sie einheitlich.

Sie berechnen die Lesezeit, indem Sie die Wortzahl durch eine feste Lesegeschwindigkeit teilen. Welche Geschwindigkeit Sie wählen, hängt von Website und Sprache ab. Entscheidend ist also, dass jeder Beitrag dieselbe Formel nutzt. Tabellen, Codebeispiele und Bilder verlangsamen das Lesen, deshalb ist Aufrunden bei dichten Fachbeiträgen die ehrliche Wahl.

Zeigen Sie die Lesezeit auf Karten neben dem Datum und im Beitrag in der Infozeile unter dem Titel. Stellen Sie sie nicht an die auffälligste Stelle, denn sie unterstützt den Inhalt, statt ihn anzuführen. Wenn Sie die Lesbarkeit Ihres Textes schnell prüfen möchten, hilft unser Werkzeug zum Lesbarkeit prüfen bei Satzlänge und Absatzstruktur.

Paginierung, endloses Scrollen oder „Mehr laden“?

Wächst Ihr Archiv, müssen Sie die Übersicht zunächst aufteilen. Klassische Paginierung gibt jeder Seite eine eigene URL. Leser finden so ohne Suche zu „Seite drei“ zurück. Endloses Scrollen wirkt wie ein ununterbrochener Strom. Allerdings erschwert es den Zugang zum Footer und kann Leser beim Zurückgehen an den Anfang werfen.

Eine Schaltfläche „Mehr laden“ liegt dazwischen, denn Leser entscheiden selbst, wann es weitergeht. Wählen Sie diese Lösung, sollte jedoch jeder nachgeladene Abschnitt im Hintergrund einer echten Seiten URL entsprechen. Sonst erreichen Suchmaschinen ältere Beiträge nur über einen Weg, der von JavaScript abhängt.

Unsere Standardempfehlung ist eine nummerierte Paginierung oder eine Schaltfläche „Mehr laden“ mit adressierbaren Abschnitten. Die technische Seite erklären wir im Beitrag zur Paginierung für SEO. Hier ergänzen wir nur die Gestaltung: Seitenzahlen brauchen eine gut tippbare Größe, und die aktuelle Seite braucht eine klare Markierung.

Was gehört an den Anfang der Beitragsvorlage?

Der erste Bildschirm eines Beitrags zeigt Lesern, dass sie richtig gelandet sind. Sie sollten deshalb sofort Titel, eine kurze Infozeile und den ersten Absatz sehen. Ein riesiges Titelbild über die volle Höhe zwingt sie dagegen zum Scrollen, bevor überhaupt Text erscheint. Platzieren Sie das Titelbild daher in moderater Höhe unter dem Titel oder verzichten Sie darauf.

  1. Breadcrumb: Startseite, Blog und Kategorie zeigen Lesern, wo sie sind.
  2. Titel: Die einzige H1 der Seite, mit der Frage, die der Beitrag beantwortet.
  3. Infozeile: Autor, Datum, Kategorie und Lesezeit in einer Zeile.
  4. Einleitung: Zwei bis drei Sätze, die die Frage direkt beantworten.
  5. Inhaltsverzeichnis: Bei langen Beiträgen direkt unter der Einleitung.

Wie Breadcrumbs Navigation und Suchdarstellung unterstützen, beschreiben wir im Beitrag zur Breadcrumb Navigation. In einer Blogvorlage sollte der letzte Schritt die Kategorie sein. Schließlich wollen Leser am häufigsten zu anderen Beiträgen desselben Themas zurück.

Wo steht das Inhaltsverzeichnis, und wie sollte es sich verhalten?

Ein Inhaltsverzeichnis ist eine Liste von Sprungmarken zu den Abschnitten eines langen Beitrags. Der Leitfaden zum Inhaltsverzeichnis der Nielsen Norman Group empfiehlt, es weit oben zu platzieren, direkt unter der Einleitung. Ein Verzeichnis tief im Text übersehen Leser dagegen leicht, weil es wie gewöhnliche Links wirkt.

Dieselbe Quelle empfiehlt mitlaufendes Verhalten nur für ein Verzeichnis in einer Seitenspalte. Haftet die Liste innerhalb des Fließtexts am Bildschirm, verwechseln Leser sie womöglich mit dem Hauptmenü. In der Praxis funktioniert deshalb eine mitlaufende Liste in der linken Spalte auf breiten Bildschirmen gut. Mobil schafft eine schlichte, aufklappbare Liste unter der Einleitung die richtige Balance.

Technisch zeichnen Sie die Liste als Navigationsbereich aus. Die MDN Referenz zum nav Element nennt Menüs, Inhaltsverzeichnisse und Register als typische Navigationsbereiche. Zudem weist sie darauf hin, dass eine eindeutige Beschriftung hilft, wenn eine Seite mehrere Navigationsbereiche hat. Außerdem sollten die Linktexte im Verzeichnis exakt den H2 Überschriften entsprechen.

Wie breit sollte gut lesbarer Blogtext sein?

Die Breite der Textspalte bestimmt, wie viele Zeichen in eine Zeile passen. Sind Zeilen zu lang, findet das Auge den Anfang der nächsten Zeile schwer. Sind sie zu kurz, springen Leser dann ständig. Das WCAG Kriterium zur visuellen Darstellung (1.4.8) des W3C beschreibt Zeilen mit höchstens 80 Zeichen, Text ohne Blocksatz und einen Zeilenabstand von mindestens dem Anderthalbfachen innerhalb von Absätzen.

Dieses Kriterium gehört zur Stufe AAA und ist daher kein Pflichtziel für jede Website. Trotzdem ist es eine sehr gute Obergrenze für eine lesbare Blogvorlage. In der Praxis begrenzen Sie die Spalte mit einer Einheit, die an die Zeichenbreite gekoppelt ist. Dann bleibt das Verhältnis erhalten, wenn sich die Schriftgröße ändert, und die Spalte wächst beim Zoomen mit.

Zeilenlänge, Schriftgröße und Zeilenhöhe hängen voneinander ab. Wichtig ist auch eine Schrift, die bei diesen Größen gut funktioniert. Darauf gehen wir im Beitrag zur Wahl der Webtypografie ein. Stellen Sie diese Werte einmal richtig in der Vorlage ein, liest sich jeder neue Beitrag von selbst angenehm.

Wie bleibt die Überschriftenhierarchie in der Vorlage sauber?

Die Überschriftenhierarchie ist im Blog Design das Gerüst eines Beitrags. Eine Seite hat genau eine H1. Hauptabschnitte nutzen H2, Unterabschnitte H3, und Sie überspringen keine Ebene. So springen Nutzer eines Screenreaders zwischen Überschriften. Außerdem kann Ihre Vorlage das Inhaltsverzeichnis automatisch erzeugen, und Leser erhalten beim Überfliegen eine schnelle Zusammenfassung.

Ein häufiges Problem entsteht, wenn die Vorlage Überschriftenebenen nach optischer Größe wählt. Zum Beispiel trägt die Beschriftung „Beliebte Beiträge“ in der Sidebar ein H2 Tag und landet dann im Inhaltsverzeichnis. Um das zu vermeiden, gestalten Sie feste Vorlagenbereiche mit Klassen statt mit Überschriften Tags. Inhaltliche Überschriften bestimmt allein der Autor.

Leser lesen zudem selten Zeile für Zeile. Stattdessen überfliegen sie Überschriften und die ersten Wörter von Absätzen. Was das für das Layout bedeutet, zeigen wir im Beitrag zum Lesemuster im Webdesign. Formulieren Sie Überschriften als klare Fragen, überfliegen Leser die Seite deutlich leichter.

Wie sollten Tabellen, Listen und Zitate mobil aussehen?

Ratgeber brauchen Tabellen und Listen, doch genau diese Elemente brechen auf kleinen Bildschirmen am häufigsten. Passt eine breite Vergleichstabelle nicht, scrollt die ganze Seite seitwärts, und Leser verlieren den Text. Setzen Sie jede Tabelle deshalb in einen eigenen scrollbaren Rahmen und halten Sie den Rest der Seite fest.

  • Zeichnen Sie Kopfzellen als echte Kopfzellen aus und lassen Sie keine leer.
  • Teilen Sie Tabellen mit mehr als vier Spalten mobil gegebenenfalls in zwei.
  • Setzen Sie die ersten Wörter von Listenpunkten fett, damit Leser schneller scannen.
  • Nutzen Sie für Zitate eine dezente Randlinie statt großer dekorativer Anführungszeichen.
  • Verhindern Sie mit Umbruchregeln, dass lange URLs oder Code überlaufen.

Sobald diese Regeln in der Vorlage stecken, müssen Autoren nicht mehr bei jedem Beitrag daran denken. Folglich konzentriert sich das Redaktionsteam auf Inhalte, und die visuelle Einheitlichkeit bleibt von selbst erhalten.

Wo sitzt die Autorenbox, und was sollte darin stehen?

Eine Autorenbox ist eine kurze Vorstellung, die zeigt, wer den Text geschrieben hat und warum diese Person zum Thema sprechen kann. Googles Leitfaden für hilfreiche Inhalte empfiehlt ausdrücklich genaue Autorenangaben, etwa eine Autorenzeile, wo Leser sie erwarten. Zudem warnt er klar vor irreführenden Autorenangaben.

In der Praxis zeigen Sie Autorenangaben an zwei Stellen. Die Infozeile unter dem Titel nennt nur den Namen. Am Ende des Beitrags ergänzt eine Box Foto, kurze Fachbeschreibung und Link zur Autorenseite. Halten Sie den Text bei zwei oder drei Sätzen. Nennen Sie statt eines Lebenslaufs konkrete Fachgebiete, die Vertrauen schaffen.

Die Autorenseite selbst ist ein eigenes Gestaltungsthema, das wir im Beitrag zur Autorenseite für E-E-A-T behandeln. Für das Markup empfiehlt Googles Dokumentation zu strukturierten Daten für Artikel, jeden Autor in einem eigenen Feld anzugeben und im Namensfeld nur den Namen der Person zu nennen.

Veröffentlichungsdatum oder Aktualisierungsdatum zeigen?

Das Datum zeigt Lesern, wie aktuell die Information ist. Bei zeitlosen Ratgebern zählt das Aktualisierungsdatum mehr, weil Leser wissen wollen, ob der Inhalt heute noch stimmt. Bei Meldungen steht das Veröffentlichungsdatum im Vordergrund. Sie können auch beide zeigen, solange jedes eine klare Bezeichnung trägt.

Ehrlichkeit ist hier deshalb entscheidend. Wer das Aktualisierungsdatum ohne echte inhaltliche Änderung erneuert, führt Leser in die Irre. Ändern Sie das Datum also nur, wenn Sie den Inhalt tatsächlich überarbeiten. Zudem sollte das sichtbare Datum mit dem Datum in den strukturierten Daten übereinstimmen. Die Artikeldokumentation von Google empfiehlt dafür Angaben mit Zeitzone.

Wo platzieren Sie die CTA im Blog Design?

Eine CTA ist eine Aufforderung zum nächsten Schritt, etwa ein Angebot anfragen, einen Newsletter abonnieren oder eine passende Leistung ansehen. Im Blog Design sollte ihre Position zur aktuellen Absicht des Lesers passen. Ein großer Verkaufskasten auf dem ersten Bildschirm stört Leser, die Informationen suchen, meist eher.

Wir nutzen in der Regel drei Stellen. Erstens einen schlichten Hinweis im Text am Ende eines Abschnitts, der direkt zum Angebot passt. Zweitens einen deutlichen CTA Bereich am Ende des Beitrags, direkt vor der Autorenbox. Drittens, nur bei langen Beiträgen, eine kleine schließbare Erinnerung, die erscheint, sobald Leser die Hälfte hinter sich haben.

Konkret zählt, was die CTA sagt, genauso wie ihre Position. Wählen Sie statt „Jetzt klicken“ konkrete Worte, die sagen, was als Nächstes passiert. Ideen für Buttontexte finden Sie in unserem Beitrag mit Beispielen für CTA Buttons.

Wie wählen Sie verwandte Beiträge aus?

Ein Bereich mit verwandten Beiträgen hält Leser auf natürliche Weise auf der Website, allerdings nur, wenn die Beiträge wirklich verwandt sind. Zeigt die Vorlage automatisch die drei neuesten Beiträge, entstehen Vorschläge ohne Bezug zum Thema. Bauen Sie stattdessen eine Liste aus derselben Kategorie und gemeinsamen Schlagwörtern, idealerweise mit manueller Steuerung.

Begrenzen Sie den Bereich auf drei oder vier Beiträge und nutzen Sie eine vereinfachte Version der Übersichtskarte. Platzieren Sie verwandte Beiträge zudem nach der CTA, nicht an ihrer Stelle. Leser sehen dann zuerst den Schritt, den der Beitrag empfiehlt. Danach finden sie Optionen, falls sie weiterlesen möchten.

Links im Fließtext wirken stärker als ein Block mit verwandten Beiträgen, denn Leser klicken mitten im Kontext. Wie Sie diese Links planvoll setzen, zeigt unser Beitrag zur internen Verlinkung als SEO Strategie.

Braucht eine Blogvorlage noch eine Sidebar?

Eine Sidebar ist ein Bereich für Nebeninhalte neben dem Text auf dem Desktop. Früher füllte jeder Blog sie mit Archivkalender, Schlagwortwolke und Liste beliebter Beiträge. Heute sehen die meisten mobilen Leser diesen Bereich allerdings ganz unten oder gar nicht. Daher ist eine Sidebar in der Beitragsvorlage kein Muss.

Wenn Sie eine nutzen, geben Sie ihr genau eine klare Aufgabe, etwa ein mitlaufendes Inhaltsverzeichnis oder eine schlichte CTA. Mehrere Aufgaben überfüllen den Bereich und verengen die Textspalte. In der Übersicht ist eine Sidebar für Kategorien und Suche eher sinnvoll, weil Leser dort ohnehin auswählen.

Worauf achten Sie bei Ladezeit und Barrierefreiheit der Vorlage?

Ein Blogbeitrag ist oft die erste Seite, die ein Besucher aus der Suche öffnet. Deshalb prägt das Anfangsgewicht der Vorlage den ersten Eindruck direkt. Liefern Sie Titelbilder in passender Größe aus und laden Sie Bilder unterhalb des sichtbaren Bereichs in der Übersicht verzögert. Geben Sie Kartenbildern außerdem ein festes Seitenverhältnis. So verschiebt sich beim Laden nichts.

Zur Barrierefreiheit gehören ausreichender Kontrast zwischen Text und Hintergrund, per Tastatur nutzbare Links im Inhaltsverzeichnis und aussagekräftige Linktexte. Ein Link wie „Weiterlesen“ sagt einem Screenreader Nutzer zum Beispiel nichts, sobald er den Zusammenhang verliert. Benennen Sie den Kartenlink deshalb nach dem Beitragstitel, dann löst sich das Problem von selbst.

Auch die Schriftwahl im Blog Design ist ein Ausgleich zwischen Ladezeit und Lesbarkeit. Wenige Schriftschnitte erleichtern das Laden und halten die Vorlage einheitlich. Für die meisten Blogs reichen zum Beispiel eine gut lesbare Familie für den Fließtext und höchstens zwei Schnitte für Überschriften.

Testen Sie die Vorlage schließlich mit echten Inhalten. Eine Karte, die mit kurzen Beispieltiteln gut aussieht, kann bei einem langen Ratgebertitel überlaufen. Prüfen Sie also Ihren längsten Titel, Ihre breiteste Tabelle und Ihren kürzesten Auszug. Bleibt die Vorlage in allen drei Grenzfällen ausgewogen, überrascht sie Sie im Alltag nicht.

Beispielszenario: Wie überarbeiten Sie einen Unternehmensblog?

Als Beispielszenario stellen wir uns einen Unternehmensblog vor, der seit Jahren veröffentlicht, aber wenig Traffic erhält. Die Übersicht nutzt ein dreispaltiges Raster voller Stockfotos. Beiträge stehen wegen der Sidebar in einer schmalen Spalte. Ein Inhaltsverzeichnis fehlt, und am Ende jedes Artikels zeigt das System automatisch die drei neuesten Beiträge.

Zunächst stellen Sie die Übersicht auf eine einspaltige Liste um und ergänzen Auszüge und Kategorien auf den Karten. Danach entfernen Sie die Sidebar aus der Beitragsvorlage, begrenzen die Textbreite auf ein lesbares Maß und fügen unter der Einleitung ein Inhaltsverzeichnis ein. Schließlich wählen Sie verwandte Beiträge nach Kategorie und setzen eine klare CTA ans Ende.

Ein Ergebnis in Zahlen nennen wir für dieses Szenario nicht, denn jede Website startet an einem anderen Punkt. Die gemeinsame Wirkung dieser Änderungen ist jedoch, dass Leser den Text leichter beenden und den nächsten Schritt klarer sehen. Warum sich ein Firmenblog überhaupt lohnt, lesen Sie in unserem Beitrag zum Unternehmensblog für SEO und Vertrieb.

Checkliste für Ihr Blog Design

Gehen Sie die folgende Liste der Reihe nach durch, wenn Sie Ihren eigenen Blog prüfen. Kontrollieren Sie jeden Punkt zuerst mobil und danach am Desktop.

  1. Haben Sie die Aufgabe von Übersicht und Beitragsvorlage in je einem Satz beschrieben?
  2. Zeigen Karten Titel, Auszug, Kategorie, Datum und bei Bedarf die Lesezeit?
  3. Behalten Kartenbilder ein festes Seitenverhältnis?
  4. Ist die Zahl der Kategorien begrenzt, und hat jede eine eigene Seite mit Einleitung?
  5. Entspricht jeder Paginierungsschritt einer echten URL?
  6. Sehen Leser auf dem ersten Bildschirm Titel und ersten Absatz?
  7. Steht das Inhaltsverzeichnis unter der Einleitung, mit Linktexten gleich den Überschriften?
  8. Bleibt die Textspalte bei etwa 80 Zeichen, mit angenehmem Zeilenabstand?
  9. Kommt die Überschriftenhierarchie ohne übersprungene Ebenen aus?
  10. Scrollen Tabellen mobil in einem eigenen Rahmen?
  11. Erscheinen Autorenangaben unter dem Titel und am Ende des Beitrags?
  12. Ist das Datum ehrlich und stimmt es mit den strukturierten Daten überein?
  13. Gibt es genau eine CTA an einer Stelle, die zur Leserabsicht passt?
  14. Stammen verwandte Beiträge aus demselben Thema?

Sollten Sie die Blogvorlage selbst bauen oder mit einem Team?

In einem fertigen Theme lösen Sie einige dieser Punkte über Einstellungen. Zum Beispiel lassen die meisten Themes das Kartenlayout ändern oder die Sidebar abschalten. Lesbare Textbreite, adressierbare Paginierung, ein automatisches Inhaltsverzeichnis und korrekte strukturierte Daten verlangen allerdings meist Entwicklung auf Vorlagenebene.

Wir bei Talha Aslan und Team behandeln die Blogvorlage als Teil desselben Designsystems wie den Rest der Website. Karten, Inhaltsverzeichnis, Autorenbox und CTA bauen wir einmal und sorgen dafür, dass sie in jedem Beitrag einheitlich funktionieren. Möchten Sie Ihren Blog auf diese Struktur umstellen, setzen wir die Vorlage im Rahmen unserer Leistung Webdesign auf Ihrer Website um.

Welche Fehler im Blog Design sehen wir am häufigsten?

Hier eine kurze Liste der Fehler, auf die wir in der Praxis am häufigsten stoßen. Einzeln wirkt jeder zunächst klein. Zusammen verschlechtern sie das Leseerlebnis jedoch deutlich.

  • Den ersten Bildschirm eines Beitrags einem Titelbild oder einem großen Verkaufskasten überlassen.
  • Text über die volle Bildschirmbreite ziehen oder in eine schmale Spalte pressen.
  • Dutzende Schlagwörter pro Beitrag vergeben und dünne Archivseiten erzeugen.
  • Verwandte Beiträge nur nach Datum statt nach Thema auswählen.
  • Das Aktualisierungsdatum erneuern, ohne den Inhalt zu ändern.
  • Autorenangaben verstecken oder einen erfundenen Autorennamen nutzen.

Beheben Sie diese Fehler, sieht Ihr Blog nicht nur besser aus. Er wird zu einer klaren, gut überfliegbaren Quelle, der Leser vertrauen. Um die Vorlage neu aufzubauen oder Ihr bestehendes Blog Design zu überarbeiten, schildern Sie Ihr Projekt auf unserer Seite zum Webdesign und fordern Sie ein Angebot an.

Häufig gestellte Fragen

Was ist das wichtigste Element im Blog Design?
Am wichtigsten ist die lesbare Textspalte. Wenn Leser den Beitrag nicht angenehm beenden können, helfen Karten, Bilder und CTA wenig. Stellen Sie deshalb zuerst Zeilenlänge, Schriftgröße und Zeilenhöhe richtig ein. Danach ordnen Sie Inhaltsverzeichnis, Autorenbox und verwandte Beiträge schlicht um diese Spalte herum an.
Braucht jeder Blogbeitrag ein Inhaltsverzeichnis?
Nein, kurze Beiträge brauchen keines. Ein Inhaltsverzeichnis hilft bei Ratgebern, die mehrere Bildschirme lang sind und viele Hauptabschnitte haben. Bei einer kurzen Meldung nimmt es nur Platz weg. Bei langen Beiträgen setzen Sie es direkt unter die Einleitung und halten die Linktexte identisch mit den Überschriften.
Wie viele Beiträge sollte eine Blogübersicht zeigen?
Eine feste Zahl gibt es nicht. Entscheidend sind schnelles Laden und bequemes Überfliegen. In vielen Blogs sind zehn bis zwanzig Karten pro Seite ein ausgewogener Startbereich aus der Praxis, allerdings keine Garantie. Testen Sie die Kartendichte mobil und passen Sie sie an, bis das Überfliegen mühelos wirkt.
Wie berechnen Sie die Lesezeit?
Sie teilen die Wortzahl des Beitrags durch eine feste Lesegeschwindigkeit. Welche Geschwindigkeit Sie wählen, kann je nach Sprache und Zielgruppe variieren. Wichtig ist, dass jeder Beitrag dieselbe Formel nutzt. Bei Beiträgen mit vielen Tabellen, Bildern oder Fachbeispielen gibt Aufrunden Lesern eine ehrlichere Erwartung.
Sollte eine Beitragsvorlage eine Sidebar haben?
Sie ist optional, und in den meisten Beitragsvorlagen empfehlen wir, sie zu entfernen. Mobile Leser sehen die Sidebar ohnehin unter dem Text. Wenn Sie eine behalten, geben Sie ihr eine einzige Aufgabe, etwa ein mitlaufendes Inhaltsverzeichnis oder eine schlichte CTA. Mehrere Widgets verengen die Textspalte.
Können Sie die Blogvorlage auf unserer Website umsetzen?
Ja, wir bauen Blogübersicht und Beitragsvorlage passend zum Designsystem Ihrer Website. Karten, Inhaltsverzeichnis, Autorenbox, verwandte Beiträge und CTA entstehen einmal und funktionieren dann in jedem Beitrag einheitlich. Schildern Sie Ihr Projekt auf unserer Webdesign Seite und fordern Sie ein Angebot an.
  • Blog Design
  • Blogvorlage
  • Inhaltsverzeichnis
  • Lesbarkeit
  • Autorenbox
  • Webdesign
  • Nutzererlebnis
Teilen:
Talha Aslan

Google Partner und Experte für digitales Marketing. Seit 2012 praktisch in SEO, Google Ads, Webdesign und E-Commerce Projekten; jeder Beitrag hier stammt aus dieser Erfahrung.

Nächstes Projekt

Angebot für Ihr Projekt.

Ihre Anfrage geht direkt an Talha Aslan und Team: Strategie von Talha, Umsetzung durch ein erfahrenes Team. Wir melden uns am selben Tag und senden Umfang, Zeitplan und Preis innerhalb von 1 Werktag als schriftliches Angebot.