7 fundamentale Elemente, um ein Blog-Design zu erstellen, das konvertiert

Ich mache mir gerade Gedanken über unser neues Blog-Design.

Wenn du mir auf Instagram folgst, hast du vielleicht gesehen, dass ich einen neuen Style Guide für Chimpify erstellt habe.

Darauf aufbauend möchten wir unseren Blog, unsere Webseite und natürlich auch unser Tool neu designen.

Wir fangen mit dem Blog an, weil er am wichtigsten ist. Aber das habe ich ja bereits im letzten Beitrag besprochen.

Deshalb dachte ich mir, schreibe ich passend dazu einen Artikel, damit du auch etwas Nützliches davon hast. Vielleicht bist du auch gerade dabei, dein Blog-Layout zu überarbeiten?

Bevor wir aber zu den Elementen kommen, reisen wir ein bisschen in die Vergangenheit zurück.

Welche Blog-Designs hatten wir im Einsatz?

Als ich 2012 mit dem affenblog angefangen habe, habe ich mich für dieses Layout entschieden:

Haha, die Affenmaske und das „Affenjunge“ war etwas zu viel des Guten! ;)

Die nächsten Jahre sah es dann so aus:

2013

2014

2015

2016

Hach ... ich liebe es, in Nostalgie zu schwelgen. Aber back to topic.

Was fällt dir auf, wenn du dir die alten Designs anschaust? Wir sind immer mit dem typischen Standard-Layout gefahren: Content links, Sidebar rechts.

Das hat super funktioniert. Vor allem, wenn du dir das Wachstum der Abonnenten anschaust. Aber warum? Zuerst dachte ich, weil es dem F-Muster entspricht:

Aber wie Neil Patel hier schön beschrieben hat, scheint es in Wirklichkeit kein F-Muster zu geben. Es lag also daran, dass es Standard war.

Warum ist ein minimalistisches Blog-Design nicht immer das Richtige?

Doch dann, als wir den affenblog in Chimpify verwandelt haben, wollten wir kein Standard und haben uns gegen eine Sidebar entschieden:

Mir war es wichtig zu kommunizieren, dass wir kein Blog mehr sind, sondern ein Startup. Deshalb lag es nahe, auch ein modernes Blog-Design zu nehmen. Mit nur einer Spalte. So wie das z.B. Intercom, Buffer und Medium auch machen.

Das Layout ohne Sidebar klingt zuerst sehr sinnvoll: Es gibt nur den Text und sonst nichts. Er hat die volle Aufmerksamkeit. Der Besucher hat einen klaren Pfad. Außerdem zeigt diese Google-Studie, dass komplexe Webseiten als nicht schön empfunden werden.

Aber im Hinblick auf Kennzahlen wie Shares und Conversions war das keine gute Idee!

Die Share Rate ist gesunken. Auch die Conversions sind gefallen. Warum?

Die Google-Studie stellte auch fest, dass Gewohntes ebenfalls mit Schönheit korreliert. Das heißt, dass Standard-Designs als schön empfunden werden, weil sie ein gewohntes Layout haben.

Aus diesen Gründen gehen wir mit unserem Blog-Design erstmal wieder back to the roots. Dabei fokussieren wir uns auf folgende Elemente:

1. Content-Bereich

Das ist der wichtigste Bereich. Content ist der Grund, warum Menschen deine Webseite besuchen. Aber der Inhalt alleine sorgt nicht dafür, dass du deinen Besucher zum Konsumieren verleitest. Es kommt auch auf die Verpackung an.

Achte bei deinem Content-Bereich also auf folgende Punkte:

1.1 Above the Fold

Benutze ein nicht zu großes Beitragsbild (auch wenn es im Moment vielleicht modern ist). Deine Überschrift ist das wichtigste Element. Das Bild zieht zwar die Aufmerksamkeit auf sich. Aber deine Überschrift zieht deinen Besucher in deinen Content. Deshalb sollte sie, und am besten der erste Satz, sofort sichtbar sein:

Du solltest die Scrollrate niemals unterschätzen (passend dazu hier eine interessante Case Study von Sumo).

1.2 Textbreite

Sorge dafür, dass dein Text nicht zu breit ist:

60-80 Zeichen pro Zeile sind optimal. Das sind je nach Schriftgröße ca. 600-800px. Deshalb sind Spalten in einer Zeitung auch so schmal, damit sie leicht lesbar sind.

1.3 Schriftart

Benutze keine kleine Schriftart. 17-21px sind hier optimal. Um ein Gefühl dafür zu bekommen, schaue dir große Magazine wie Wired, Medium, CNET, The Economist, NY Times, Forbes, Zeit, Spiegel Online etc. mit WhatFont an:

Die haben alle eine gut lesbare Schrift. Sie sitzen auf eine Menge Daten, haben die Erfahrung und das Wissen. Das solltest du für dich nutzen.

Achte auch darauf, dass die Schriftart nicht zu dick, aber auch nicht zu dünn ist und einen ordentlichen Kontrast hat. Schwarze Schrift auf weißem Hintergrund ist immer am besten. Ob du eine Schriftart mit oder ohne Serifen wählst ist heute im Prinzip egal.

1.4 Whitespace

Achte darauf, dass dein Text nicht bis zum Rand geht. Sorge also für ordentliche Abstände. Sorge für ordentlich Luft zum Atmen:

Benutze außerdem ordentlich Abstände zwischen Absätzen, Zwischenüberschriften und Listen.

2. Call-to-Action (CTA)

Beim Inbound Marketing geht’s immer darum, die Erlaubnis einzuholen, deine Besucher kontaktieren zu dürfen. Deshalb geht’s in diesem Beitrag auch darum, wie du ein Blog-Design erstellst, das konvertiert. Das Besucher in Abonnenten verwandelt.

Deshalb brauchst du einen Call-to-Action. Am besten einen Lead Magnet. Du brauchst ein unwiderstehliches Angebot im Gegenzug für die wertvollen Kontaktinformationen (z.B. die E-Mail-Adresse).

Zuerst kannst du kostenlose Updates anbieten. Das kannst du sofort machen. Das ist aber nicht schmackhaft und überzeugend genug. Setze deshalb noch einen drauf und biete etwas mit mehr Mehrwert an. Zum Beispiel:

• Ein E-Book
• Einen E-Mail-Kurs
• Einen Video-Kurs
• Einen Mitgliederbereich
• etc.

Deiner Kreativität sind hier keine Grenzen gesetzt. Besonders spannend finde ich den E-Mail-Kurs, da er sehr viel Mehrwert verspricht, du ihn aber on the fly erstellen kannst.

Wenn du einen CTA erstellst, solltest du darauf achten, dass folgende Punkte vorhanden sind:

• Nutzen - Was sind die Benefits von deinem Angebot? Was hat dein Besucher davon? Zum Beispiel: „Lerne, wie du mehr Traffic bekommst“.

• Eigenschaften - Was für Features enthält dein Angebot? Was ist genau drin? Zum Beispiel: „In 12 Lektionen, lernst du...“

• Social Proof - Wie kannst du noch mehr Vertrauen wecken? Arbeite hier mit Trust-Symbolen, „Bekannt aus“-Bannern und Testimonials. Zum Beispiel: „Tritt über 10.000 Abonnenten bei“.

Generell macht es Sinn, wenn du deinen Call-to-Action als Mini-Landing-Page betrachtest und darauf achtest, dass möglichst alle notwendigen Elemente vorhanden sind.

Wichtig an dieser Stelle ist auch, wo du deinen CTA einfügst. Das sind die besten Orte:

2.1 Normaler CTA

Das ist ein „normaler“ Call-to-Action, den du in die Sidebar und unter deinen Beitrag packen solltest. Das ist mittlerweile Standard und funktioniert gut.

2.2. In-Content CTA

Calls-to-Action im Content sind besonders interessant, weil sie sehr viel Aufmerksamkeit bekommen (eben genau so viel wie der Inhalt). Daher haben sie auch immer hohe Conversion Rates. Optimal sind hier Content Upgrades, die sich auf das jeweilige Thema beziehen und weiterführende Infos bieten.

2.3 Popup

Auch wenn Popups immer etwas nervig sind, funktionieren sie gut. Vor allem Exit Intent Popups, die sich öffnen, wenn dein Besucher versucht die Seite bzw. den Tab zu schließen.

Generell solltest du damit aber nicht übertreiben. Ich bin immer für „langfristig ein positives Gefühl mit der Marke verbinden“, als zu krass auf die Conversion optimieren.

-

Generell ist das so, dass das, was am Anfang und am Ende kommt, am meisten Aufmerksamkeit bekommt. Das solltest du bei deinem Blog-Design in Zusammenhang mit deinen Calls-to-Action immer im Hinterkopf behalten.

Neben der Leadgenerierung kannst du noch weitere CTAs einbauen, die direkt auf dein Produkt oder deine Dienstleistung Aufmerksam machen. (Du kannst sogar so weit gehen, nur solche Calls-to-Action zu verwenden. Auch wenn das für den Anfang nicht ratsam ist.)

3. Pillar Pages

Das nächste Element ist eine kleine unscheinbare Navigation, die du meistens in der Sidebar oder als horizontale Navigation findest.

Pillar Pages (oder auch „Content Landing Pages“ bzw. „Cornerstone Content“ genannt) sind Seiten, die sich um ein bestimmtes Thema drehen und weiterführende Infos sowie Content bieten. Es sind quasi Kategorieseiten, nur viel besser und durchdachter. Man betrachtet sie eher als Landing Pages. Dadurch erzeugst du aus der Sicht der Suchmaschine eine bessere Blog-Architektur.

Von deinen Beiträgen, Gastbeiträgen und auch von deinem Blog-Design verlinkst du zu diesen Seiten. Dementsprechend ranken sie gut. Erst dadurch schaffst du generell langfristig mit konkurrenzstarken Keywords zu ranken.

4. Beliebteste Beiträge

Nachdem du deinen Besucher in deinen Content gezogen hast und er fertig konsumiert hat, sieht er im besten Fall einen Call-to-Action und konvertiert. Aber das ist natürlich nicht immer der Fall.

Wenn es nicht so ist, dann sind die beliebtesten Beiträge perfekt dafür, um ihn noch weiter eintauchen zu lassen und zu überzeugen sowie mehr von deinem Unternehmen erfahren zu lassen.

Nach ein paar Jahren wirst du nur eine Handvoll Beiträge haben, die gut performen. Sie werden fleißig geteilt, haben eine gute Conversion Rate und ranken vielleicht auch ziemlich gut. Das sind deine besten Stücke. Diese solltest du nicht verstecken, sondern prominent platzieren! Dein Besucher muss davon erfahren.

Außerdem bauen beliebte Beiträge deine Autorität auf. Wenn du viele gute Beiträge mit vielen Shares und Kommentaren hast, impliziert das, dass dein Content gut ist.

5. Über-Bereich

Menschen kaufen von Menschen. Menschen bauen Beziehungen zu Menschen auf. Deshalb interessiert deinen Besucher immer, wer der Mensch bzw. die Menschen hinter deinem Blog sind.

Bloggen ist ein sehr persönliches Medium. Ist es schon immer gewesen.

Sorge deshalb dafür, dass du eine gute Autorenbio nach deinem Beitrag im Einsatz hast. Aber auch in der Sidebar könntest du einen Über-Bereich platzieren, um ihn noch prominenter darzustellen. So wie es Mark Maslow z.B. hier macht:

Das baut Vertrauen auf und macht deinen Blog sofort menschlicher. Wie bereits in der Sumo Case Study erwähnt, scrollt nicht jeder unbedingt nach unten. Deshalb kann es sehr sinnvoll sein, den About-Bereich Above the Fold zu platzieren.

Wie schreibst du eine gute Autorenbio? Hier sind die wichtigsten Elemente:

• Nutzen - Wie und warum kannst du helfen? Zum Beispiel: „Bono ist auf einer Mission, dir zu helfen, mehr Traffic zu bekommen“.

• Klarheit - Was machst du genau? Zum Beispiel: „Das erreicht er mit seinen affenstarken Beiträgen“.

• Autorität - Was macht dich zu einer Autorität? Was macht dich glaubwürdig? Zum Beispiel: „Er ist bekannt aus t3n, BASIC thinking und Lead Digital.“

• Call-to-Action - Was ist deine Handlungsaufforderung? Was soll dein Besucher als nächstes tun? Zum Beispiel: „Folge ihm auf Twitter“.

Autoren arbeiten hart dafür, Content zu erstellen und sollten deshalb nicht versteckt werden. Du solltest sie öffentlich feiern!

Auch eine Übersicht der Autoren auf einer Autorenseite kann sinnvoll sein. Der eine mag eben den Autor. Der andere den anderen.

6. Share Buttons

Beim Content Marketing möchtest du ja, dass deine Inhalte fleißig geteilt werden und sich so möglichst viral verbreiten, um deine Reichweite zu erhöhen.

Neben der Conversion für dein E-Mail-Abonnement ist das Teilen deiner Beiträge ein wichtiges Element. Es ist ein gutes Indiz dafür, wie gut dein Content bei deinem Publikum ankommt.

Sorge also dafür, dass du deine Share Buttons prominent platzierst und das sie nicht untergehen. Achte passend dazu auch darauf, dass Social-Proof-Elemente (Testimonials, "Bekannt aus"-Banner etc.) gut sichtbar sind (Above the Fold). Das erzeugt mehr Vertrauen und wirkt sich sicherlich auf die Shares aus.

7. Suche

Am Anfang ist eine Suche noch nicht so wichtig bzw. gar nicht notwendig. Aber ab ca. 50 Beiträgen macht Sie Sinn.

Dein Besucher ist es heute dank Google einfach gewohnt, Keywords in ein Suchfeld einzugeben und Content zu erhalten. Platziere also ein Suchfeld in der Sidebar und auch auf der Blog-Übersicht.

So erhältst du noch mehr Seitenaufrufe. Das sollte sich indirekt auch wieder auf deine Conversions auswirken.

Wie sieht nun das perfekte Blog-Design aus?

Für einen einzelnen Beitrag solltest du dich an folgendes Layout halten:

Und wie sieht’s mit der Blog-Übersicht (also der Blog-Startseite) aus?

Der simpelste Weg ist es, einfach das gleiche Layout zu verwenden. Aber auch ein Kachel-Layout ist userfreundlich, schön und es kann ein Call-to-Action perfekt eingebaut werden. Wir kennen das von klassischen Karten, Pinterest oder YouTube:

Egal ob du dich für eine große Karte oder für kleine Kärtchen entscheidest, sollten sie immer folgende Elemente beinhalten:

• Beitragsbild
• Überschrift
• Autor
• Shares
• Kommentare
• Evtl. Datum
• Evtl. Kategorie
• Evtl. Textauszug

An dieser Stelle brauche ich glaube ich das Thema mobile friendly nicht mehr erwähnen, oder? Gerade heute sollte dein Blog-Design vor allem für mobile Endgeräte passen.

20 Beispiele für schöne Blog-Designs

Bevor wir zum Ende kommen, hier noch mal einige schöne (und sicherlich auch konversionstarke) Blog-Layouts, die dich inspirieren sollen:

HubSpot

Unbounce

Hootsuite

Lean Content Marketing

toushenne

konversionskraft

chainrelations

Copyblogger

Invision

Groove

Neil Patel

Backlinko

Help Scout

Drift

Buffer

Moz

Canva

Wistia

ConversionXL

Intercom

Kennst du noch andere schöne Blog-Designs? Dann ab damit in die Kommentare! ;)

Fazit

Ehrlich gesagt mag ich fancy. Fancy ist hip, cool und modern. Aber das sind Eigenschaften, die dein Unternehmen nicht wirklich weiterbringen. Viel wichtiger ist es, dass dein Blog-Design konvertiert. Dass es funktioniert.

Deshalb bin ich davon überzeugt, dass das klassische Layout weiterhin das beste für den Start ist. Deine Besucher sind es einfach gewohnt. Starte deshalb genau damit.

Wenn’s läuft, solltest du dich aber nicht ausruhen und weiter optimieren. Füge bestimmte Elemente hinzu oder entferne sie und schaue was passiert. Wir starten jetzt auch wieder mit dem Standard-Layout und testen danach weiter.

Auch wenn’s grundsätzlich eine gute Idee ist, deine Marke zu differenzieren, ist das Layout nicht das richtige Medium dafür. Deshalb: 

Sei anders, in dem, was du sagst. Aber sei Standard, in dem, wie du es verpackst.

Was denkst du, was ist das beste Blog-Design?