Kundenprojekt Relaunch Autoren-Website

Bei dem Relaunch einer Autoren-Website sollte man nicht nur die Anforderungen an einen technischen Relaunch berücksichtigen. Wer mit seiner Autoren-Website Leser:innen anziehen und dauerhaft binden möchte, sollte ein paar Dinge bei der Konzeption und der Erstellung der Website beachten.

Anfang 2021 wandte sich eine Autorin an mich, weil sie ihr Buchmarketing vorantreiben wollte. Außerdem war sie mit ihrer alten Autoren-Website unzufrieden. Es gab häufig technische Fehler und sie hatte keine Möglichkeit, die Seite selbst zu bearbeiten. Die Zusammenarbeit mit dem damaligen Admin gestaltete sich schwierig und Änderungswünsche konnten oft nicht umgesetzt werden.

Als ich mir die Website anschaute, sah ich sofort, dass viele Funktionen, die für eine konvertierende Autorenseite wichtig sind, fehlten und die Gestaltung insgesamt nicht mehr modernen Designvorstellungen entsprach. Weil eine Website das Herzstück einer nachhaltigen Marketingstrategie ist, begannen wir mit der Neuausrichtung der Website.

Die Herausforderungen an die neue Autoren-Website waren:

  • Alle Bücher einzeln vorzustellen
  • Verlinkungen zu Amazon und anderen Plattformen herzustellen
  • Viele Kontaktmöglichkeiten einzurichten
  • Die Autorin gut zu präsentieren
  • Eine emotionale Verbindung herzustellen
  • Newsletter-Marketing einrichten

Mit der Wahl des Page Builders von Divi Elegant Themes* wurde eine Webseite geschaffen, die zu einem späteren Zeitpunkt jederzeit ausbaufähig ist. Dies bedeutet, dass auch in Zukunft neue Seiten, ein neues Design oder Layout und neue Seitenelemente jederzeit nach Wunsch und Bedarf neu eingebaut werden können.

Für das Layout ihrer Autorenseite entschied sich die Autorin für das vorgefertigte Layout “Author”, dass ich später durch neue Elemente erweiterte. Einige Elemente des Layouts habe ich entfernt oder verändert.

Die Seiten einer Autoren-Website

Eine Autoren-Website sollte aus den folgenden einzelnen Seiten bestehen:

  1. Startseite mit einem Überblick
  2. Über-„Autor:in“-Seite
  3. Bücher-Seite mit einer Übersicht über alle Bücher
  4. Buchseiten für jedes Buch, um die Inhalte vorzustellen
  5. Kontaktseite mit einem Kontaktformular
  6. Impressum
  7. Datenschutzerklärung

Für die Suchmaschinenoptimierung ist es günstig, wenn es zusätzlich eine Blogseite gäbe. Mit immer wieder neuen Inhalten schafft man es mit etwas Ausdauer, die eigene Website bei Google langsam aber stetig nach oben zu schieben.

Die Startseite

Die Startseite beginnt auf Wunsch der Autorin mit einem kurzen Begrüßungstext und einem großformatigen Foto der Autorin. Dieser Text wurde durch einen Kontaktbutton ergänzt, um die Möglichkeit zur Kontaktaufnahme gleich beim Aufrufen der Website zu erleichtern. Alternativ könnte man hier direkt mit der Vorstellung der jüngsten Neuerscheinung beginnen und auf die Bücherseite verlinken.

Unter dem Begrüßungstext habe ich den Namen der Autorin mit einem Handlettering-Font umgesetzt, um eine persönliche Note zu kreieren. Dieser Aspekt wird noch durch das großformatige Foto der Autorin verstärkt. So weiß der Leser gleich, wen er vor sich hat. Fotos der Person schaffen Vertrauen und einen Wiedererkennungswert.

Der Abschnitt Bücher

Im nächsten Abschnitt auf der Startseite werden die wichtigsten Bücher vorgestellt. Zu jedem Buch gibt es einen Button, der auf die Seite “Bücher” verlinkt. Eine Grundregel guten Webdesigns besagt, dass die Leistungen sich im oberen Drittel der Seite befinden sollten. Dafür gibt es den Fachbegriff “above the fold”. Der Begriff leitet sich ab aus dem Printbereich von Tageszeitungen, wo es früher üblich war, dass die wichtigsten Infos auf der ersten Seite oben vor dem Falz erschienen und so in den Zeitungsauslagen sofort sichtbar wurden.

Ähnlich verfährt man auch mit der Startseite einer Autoren-Website. Es sind zwar auch andere Wege möglich, aber ich empfehle es weiterhin, gleich oben die wichtigsten Leistungen aufzuführen. So weiß der Besucher auf einen Blick, ob das Angebot passt oder nicht. Im Falle einer Autorenseite geht es natürlich nicht um Leistungen, sondern um die Persönlichkeit des Autors oder der Autorin und die wichtigsten Werke und Veröffentlichungen.

Der Über-mich-Abschnitt

Was natürlich auch auf die Startseite gehört, ist ein kurzer Abschnitt über die Autorin, in welchem sie sich kurz vorstellt. Dieser Text soll den Leser ansprechen und neugierig machen. Ganz wichtig ist, dass dieser Text nicht identisch sein sollte mit dem Text auf der Über-mich-Seite, um Duplicate Content zu vermeiden. Doppelter Content wird von Google abgestraft, so dass eine Website in den Suchergebnissen nach hinten rutschen kann.

Auch hier haben wir einen Button, der in diesem Fall direkt zur Über-mich-Seite führt. Dadurch wird den Besuchern der Website die Möglichkeit gegeben, sich an dieser Stelle sofort über die Autorin zu informieren. Der Abschnitt wird nachfolgend ergänzt durch ein hervorgehobenes Zitat.

Termine und Veranstaltungen

Nach dem Abschnitt mit dem Zitat folgt ein Abschnitt über Termine. Autoren stellen ihre Bücher zum Beispiel gerne während einer Lesung vor, deren Termine man an dieser Stelle veröffentlichen könnte. Da es Corona-bedingt im Moment keine Lesungen gibt, haben wir an dieser Stelle einen Kontaktbutton eingebaut für den Fall, dass jemand in Zukunft Interesse an einer Lesung hat. Wer sein Buch nicht in einer Lesung vorstellen kann wegen der Corona-bedingten Einschränkungen, hat natürlich trotzdem eine Möglichkeit, sein Buch vorzustellen. Dies lässt sich über Online-Veranstaltungen realisieren, die dann zum Beispiel in den sozialen Netzwerken angeteasert und beworben werden könnten.

Der Abschnitt „Coming Soon“

Ein weiterer Abschnitt handelt von der unveröffentlichten Neuerscheinung. Um das hervorzuheben, habe ich diesen Abschnitt “Coming soon” genannt. Hier sieht man ein Cover des zukünftigen Buches sowie einen kurzen erklärenden Teasertext, der auf die neue Veröffentlichung neugierig machen soll.

Kontaktmöglichkeiten

Ganz unten auf der Seite findet man noch einen Kontaktbereich mit Social Buttons in den Markenfarben. Dieser Bereich soll demnächst noch durch eine Newsletter-Abo-Möglichkeit ergänzt werden. Im Footer findet man das Footer Menü mit dem Impressum und der Datenschutzerklärung. Früher wurden diese oft ins Hauptmenü ganz oben auf der Seite gepackt. Das ist nicht mehr nötig. Besser ist es, die beiden Seiten im Footer Menü unterzubringen.

Die Seiten für die Rechtstexte

Für die Rechtstexte Impressum und Datenschutzerklärung gilt die Zwei-Klick-Regel: Sowohl das Impressum als auch die Datenschutzerklärung müssen in zwei Klicks erreicht werden können. Durch Platzierung im Footer ist dies möglich. Klickt man auf eines der beiden Worte, gelangt man direkt auf den jeweiligen Gesetzestext. Des Weiteren findet man in der Leiste unter dem Footer noch einen Copyright-Hinweis. Der ist ganz wichtig, weil man dadurch festlegt, dass die Website einem Urheberrecht unterliegt.

Weitere datenschutzrechtliche Maßnahmen

Manche Webseitenbetreiber unterschätzen die Wichtigkeit der rechtlichen Aspekte. So kommt es nicht nur darauf an, dass die Datenschutzerklärung aktuellen rechtlichen Bestimmungen entspricht. Auch die technischen Funktionseinheiten wie Plugins und diverse andere Elemente auf der Webseite wie zum Beispiel das Kontaktformular und die Schriftarten müssen den datenschutzrechtlichen Bestimmungen entsprechen.

Daher wurde das Kontaktformular mit einem Opt-In versehen. Die Schriften wurden lokal auf dem Server gehostet, so dass die IP-Adresse der Besucher nicht über die Schriften abgerufen werden kann.

Die Über-mich-Seite

Um die Autorenwebsite möglichst persönlich zu gestalten, gibt es neben der Startseite sowohl auf der Über-mich-Seite als auch auf der Kontaktseite großformatige Fotos der Autorin.

Die Über-mich-Seite wird eingeleitet mit einem Zitat der Autorin. In einem folgenden größeren Abschnitt schließt sich ein längerer Text über die Autorin an, den sie selbst verfasst hat. Ein großer Fehler wäre es, hier einen Lebenslauf einzustellen, wie es bei Bewerbungen der Fall ist. Gerade bei Autoren gilt es, eine persönliche, emotionale Beziehung zu den Interessenten, zukünftigen und bestehenden Lesern aufzubauen und aufrecht zu erhalten. Daher ist es hier sinnvoll, persönliche Dinge preiszugeben, also zum Beispiel, wie die Freizeitgestaltung aussieht, die die Person der Autorin greifbar machen.

Die Über-mich-Seite wird noch durch weitere Abschnitte ergänzt:

  • Überblick über die Bücher
  • ein großformatiger Abschnitt mit Zitat eines Autors
  • Termine
  • Kontaktmöglichkeit und Social Buttons

Die Seite “Bücher”

Auf der Bücher-Seite werden, wie der Name schon sagt, alle Bücher der Autorin vorgestellt. Zu jedem Buch gibt es einen Text: das Genre, der Buchtitel, der Untertitel, einen Beschreibungstext und diverse Buttons. Diese verlinken auf die Bücherseiten bei Amazon, Hugendubel und Thalia. Sowohl diese Buttons als auch die Buttons, die zu Facebook und Instagram verlinken, wurden in der Markenfarbe rot gestaltet.

Des Weiteren befinden sich auf der Bücher-Seite folgende Abschnitte:

  • Abschnitt mit Verweis auf Bestellmöglichkeiten bei Versandplattformen
  • die Neuvorstellung des kommenden Romans
  • Termine
  • Kontaktmöglichkeit per E-Mail und Social Buttons in Brandingfarben

Einzelne Buchseiten

Wir haben auf dieser Webseite keine Seiten für einzelne Buchvorstellungen eingebaut. Dies wäre natürlich zu einem späteren Zeitpunkt denkbar und auch sehr sinnvoll. So könnte man hier für die zukünftige Neuerscheinung eine Seite schaffen, auf der man

  • noch ein wenig mehr auf die Inhalte des Buches eingeht,
  • die persönliche Motivation für das Thema beschreibt,
  • eine kleine Leseprobe hinzufügt,
  • vielleicht noch eine Umfrage einbaut und
  • die Seite mit einem persönlichen Video abrundet.

Mit einer Umfrage kann man die Leser in den Gestaltungsprozess des neuen Buches mit einbeziehen. So könnte man die Besucher der Webseite um ihre Meinung bitten, zum Beispiel bezüglich des Covers der Umschlagseite des Buches oder bezüglich eines möglichen Romanendes oder anderer Fragen.

Aber auch bereits veröffentlichte Bücher lassen sich auf einer separaten Buchseite gut präsentieren. Dies ermöglicht es den Leser:innen, sich ausführlich über das Buch zu informieren und bei Interesse das Buch direkt über einen Button zu bestellen.

Weitere Gestaltungselemente der Autoren-Website

Beim Aufbau dieser Webseite gab es zwei weitere Herausforderungen: das Logo und die Wahl der Markenfarben. Es ist zwar unter Autoren nicht üblich, ein Logo zu haben, aber ich bin der Meinung, dass auf jede Webseite ein Logo gehört. Janne Loy hatte auf ihrer alten Website bereits ein Logo in Form eines Schriftzuges im Handlettering-Stil. Da dieses Logo nicht mehr zur Verfügung stand, habe ich es mit dem Grafiktool Canva unter Verwendung der Markenfarben nachgebaut.

Markenfarben

In der Planungsphase der Website wurde der Wunsch geäußert, die Akzentfarben auf der Website in einem warmen Rot und in einem warmen, frischen Grün zu halten. Es galt, unter den 46.000 verschiedenen Hexadezimalwerten für Farben und deren Schattierungen die richtigen Farben auszuwählen.

Auch wenn die Farbpalette für einen Rotton wesentlich weniger Hexadezimalwerte umfasst, stehen immerhin noch ein paar tausend Rottöne zur Auswahl zur Verfügung. Mit Hilfe des Grafiktools Adobe Color Wheel wurden die richtigen Farben für die Website gefunden . Dazu hat mir die Autorin ein Bild mit den passenden Farben zur Verfügung gestellt. Dieses habe ich in Adobe hochgeladen, um die Farben extrahieren zu lassen. Die extrahierten Farbwerte habe ich dann noch einmal durch das Adobe Color Wheel laufen lassen. Auf diese Weise konnten Farbabstufungen ausgesucht werden, die nicht nur gut zueinander passen, sondern auch barrierefrei sind.

Barrierefreiheit der Farben

Barrierefrei bedeutet bei Farben einer Website, dass sie auch von Farbenblinden oder von Menschen mit einer Farbsehschwäche wahrgenommen und unterschieden werden können. Wenn ich zum Beispiel fünf verschiedene Grüntöne auf einer Website darstellen würde, deren Farbwerte ziemlich dicht beieinander liegen, könnten manche Farbenblinde die Farben nicht mehr voneinander unterscheiden. Das kann man sich folgendermaßen vorstellen: Bei Wahl eines dunkelgrünen Hintergrundes, auf dem sich ein Schriftzug in einem nur wenig helleren Grünton befindet, würde ein Farbenblinder an dieser Stelle vielleicht eine braune oder eine graue Fläche sehen und wäre nicht in der Lage, die Schrift zu erkennen.


Das Tool Adobe Color Wheel mit Darstellung eines Bildes, wie es von Menschen mit Farbsehschwäche gesehen wird.
Das Tool Adobe Color Wheel mit Darstellung eines Bildes, wie es von Menschen mit Farbsehschwäche (Deuteranopia, Protanopia oder Tritanopia) gesehen wird.

Ich lege einen großen Wert darauf, dass die Farben einer Website barrierefrei sind. Darüber hinaus sollten sie auch für Farbenblinde eine angenehme Erscheinung haben. Die Farben sollten also nicht nur lesbar sein, sondern in ihrer Kombination auch schön aussehen, natürlich nur, sofern das realisierbar ist.

Ob eine Farbkombination barrierefrei ist, lässt sich sehr gut mit dem Adobe Color Wheel herausfinden. Das Tool ist kostenlos verwendbar. Nach der Registrierung kann man die gewählten Farbkombinationen abspeichern und auf Barrierefreiheit prüfen lassen. Es werden die Farbkombinationen sogar aus Sicht eines Menschen mit einer Farbsehschwäche angezeigt.

Die Farben der Hintergründe

Auf der Autoren-Website befinden sich auch verschiedene halb-transparente Hintergründe in zarten Farben. Das ursprüngliche Layout sah an dieser Stelle zum Teil helle Grautöne mit einem Blaustich vor, die ich ersetzt habe durch einen zarten Grünton. Dieser Farbton stammt aus der gleichen Farbfamilie wie die Markenfarbe Grün, der wichtigsten Akzentfarbe der Autoren-Website. Der von der Autorin Janne Loy gewünschte Rotton ist eine Komplementärfarbe mit Signalwirkung und wurde von mir nur sparsam für Buttons eingesetzt.

SEO und die Meta Description

Die Website-Arbeiten werden ergänzt durch SEO-relevante Einträge wie Keywords, die Meta Description und der Title Tag über das Plugin Yoast SEO. Dies ist wichtig, damit die Autoren-Website später gut bei Google gefunden wird. Auch die Bilder erhalten einen Alt-Text-Eintrag. Dadurch tragen sie zu SEO-relevanten Inhalten bei und ermöglichen das Auslesen der Inhalte von Lesegeräten.

Fazit

Eine Autoren-Website ist enthält ähnliche Elemente wie eine Unternehmenswebsite. Sie ist die Ausgangsbasis für alle weiteren Buchmarketing-Strategien. Eine Website ist die beste Möglichkeit, um die Werke bekannt und Interessierte zu Käufer:innen zu machen.