Content is King, Webdesign is Queen – Optik und Inhalte aufeinander abstimmen

Sollte Content tatsächlich King und professionelles Webdesign Queen sein? Und wenn das so ist, wie setzt man das am besten um? Fakt ist und darüber sollten wir uns einig sein: Das harmonische Zusammenspiel von Content und Webdesign ist maßgebend für den Erfolg einer Webseite. Dieser Artikel fasst fünf grundlegende Überlegungen zusammen.

Dieser Artikel ist ursprünglich im Webstandard-Blog erschienen.

Die wichtige Rolle des Designs

Suchmaschinenoptimierter Content kann und wird Besucher über die Suchmaschinen „anlocken“. Aber was nutzt der beste (und vielleicht auch teuerste) Content, wenn die Website den Inhalt nicht über professionelles und barrierefreies fördert? Wie in allen Lebensbereichen gibt es logischerweise Strategien und kleine Kniffe, mit denen man eine Website dahingehend optimieren kann, dass der Content durch professionelles Webdesign hervorgehoben wird und die gewünschten Konversionsraten erreicht werden (können).

Warum Content King und Webdesign Queen sein sollte – das ist selbsterklärend, wenn man logisch vorgeht. Auf Basis eines professionellen Webdesigns sollte als erste „Handlung“ das Auge des Konsumenten angesprochen werden. Denn professionelles Webdesign sollte nicht nur eine eventuell vorgegebene Corporate Identity für ein Webprojekt einhalten, sondern auch Aspekte der Benutzerführung berücksichtigen. Das gilt insbesondere dann, wenn ein Design beispielsweise den responsiven Ansatz verfolgt und auf unterschiedliche Bildschirmgrößen reagiert. Es sollte aber auch barrierefrei sein und, wie im folgenden Beispiel eines Catering-Servies, Emotionen wecken, damit der Nutzer einen Bedarf erkennt (hier idealerweise Hunger), der dann in einer Konversion endet, also der Bestellung eines Produkts dieses Catering Services:

content king design queen emotionen
Es dürfte offensichtlich sein, welche Version der Webseite mehr Emotionen weckt – Content und Design (oben), „nur“ Content (unten).

Trotz identischer Inhalte dürfte bei der obigen Abbildung nicht schwer zu erraten sein, welche Variante für mehr Umsatz sorgen würde. Aber: Weil wie im wahren Leben ein schönes Antlitz allein auf Dauer nicht viel hilft, ist auch im Webdesign der Inhalt die zweite unverzichtbare Konstante.

Denn gutes, von einem professionellen Webdesigner erstelltes Webdesign schafft es vielleicht in manchen Fällen kurzfristig, über schwache Inhalte hinwegzutäuschen. Aber das kann keine Dauerlösung sein. Das bestmöglich designte Kleidungsstück ist ohne einen passenden Träger nicht mehr als ein Stück bearbeiteter Stoff.

Content mit Mehrwert für den Leser

Jeder Inhalt muss zuerst einmal eine klar erkennbare Struktur aufweisen. Es ist extrem wichtig, leicht verständliche Texte anzubieten. Jeder Besucher, der sich erstmals auf einer Page befindet, muss auf Anhieb wissen, um was geht es und was die Informationen sind, die die Seite vermitteln möchte.

Aber: Selbst der beste Inhalt geht verloren, verfügt die Seite nicht über ein visuell ansprechendes, professionelles Webdesign...

Selbst bei fachspezifischen Seiten muss der Kern auch von den Personenkreisen verstanden werden können, die nicht aus dem Metier stammen. Zudem muss der Nutzer erkennen (oder zumindest glauben), er befinde sich auf einer Seite, die up-to-date ist. Das bedeutet: Der Content muss den Eindruck der Aktualität vermitteln und das schon auf den ersten Blick. Wer möchte schon alte Inhalte anstatt aktueller und neuer Informationen.

1. Aktuelle Inhalte schaffen

Um aktuelle Inhalte zu schaffen, muss man logischerweise sehr viel Zeitaufwand betreiben und ständig schreibend neuen Content erstellen. Neben der Tatsache, dass eine Website auf diese Weise ständig auf einem aktuellen Stand gehalten wird und sich beispielsweise auch mit aktuellen Trends und Entwicklungen beschäftigt, hat es einen weiteren Nebeneffekt: Webseiten, die ständig aktualisiert werden, erhalten von den Topsuchmaschinen eine höhere Gewichtung als statische Seiten, bei denen sich in langen Zeiträumen in Bezug auf die Inhalte gar nichts bewegt. Das dann noch durch professionelles Webdesign unterlegt – Bingo, die Website wird mit hoher Wahrscheinlichkeit ihren Zweck erfüllen.

2. Textaufbau, Formatierung und Keywords

Mit einem vernünftigen Textaufbau und einer passenden Formatierung schlägt man gleich zwei Fliegen mit einer Klappe: Für den Besucher sind strukturiert aufbereitete Inhalte zum einen angenehmer zu lesen und zum anderen erleichtert das auch den Suchmaschinen das Erfassen der Inhalte. Verknüpft man die Keywords im Textsegment geschickt mit artverwandten Themen der Website, surft nicht nur der Besucher einfacher durch, sondern die Suchmaschine findet schneller das, was sie eigentlich finden soll. Das bringt  die Website, je nach Abhängigkeit des Marktes in dem sich dieses Keyword bewegt, weiter nach vorn in den Suchergebnissen.

content king design queen keywords
Idealer Textaufbau, mit entsprechender Formatierung der Inhalte und Keywords, kann mittels Mikroformate für ein auffälligeres Snippet sorgen, ein sogenanntes Rich Snippet. In diesem Beispiel ist der Treffer auf Platz 3 dank dieser Formatierungen auffälliger und einladender.

Was jede Suchmaschine begrüßt: eine Überschrift mit Schlüsselwörtern, eine Zusammenfassung (Summary) mit Keywords und einen erster Absatz, in dem möglichst die Keywords sinnvoll verknüpft sind. Den Überschriften wird dabei eine höhere Gewichtung zugerechnet als dem restlichen Text. Mit einer entsprechend gut getexteten Headline kann man also reichlich Boden gut machen. Wer dann auf diese Weise strukturierte Inhalte noch mittels Mikroformaten auszeichnet, der kann sein Snippet wesentlich auffälliger gestalten als es bei anderen Suchmaschinenergebnissen der Fall ist. Bei Mikroformaten verwendet man festgelegte Klassen für bestimmte Inhalte wie z.B. Events, Produkte oder Rezepte. Dann hat man unter Umständen trotz einer schlechteren Platzierung, aufgrund der auffälligeren Darstellung eine größere Aufmerksamkeit (siehe obige Abbildung). Im Fall des hier abgebildeten Snippets wurde nach Konzerten in Berlin gesucht.

3. Was muss die (Design-)Queen regeln?

Ohne guten Content hat man nur eine Hülle oder Verpackung ohne Mehrwert. So viel ist klar. Doch selbst der beste Inhalt geht verloren, verfügt die Seite nicht über ein visuell ansprechendes, professionelles Webdesign. Ein großes Augenmerk sollte jedoch nicht nur auf das Webdesign, sondern besonders auch auf Barrierefreiheit gelegt werden.

Um diesen Anforderungen zu genügen, muss die Webseite, wie beispielsweise bei Behördenseiten, auch von Menschen mit einer Behinderung oder mit technischen Einschränkung nutzbar sein. Barrierefreies Webdesign bedeutet: Schon beim Design der Webseiten muss man berücksichtigen, dass auch User mit körperlichen Behinderungen oder kognitiven Einschränkungen die Seite nutzen möchten oder unter Umständen auch müssen.

Fehlen zum Beispiel bei einer Grafik oder einem Bild erklärende Texte, ist der seheingeschränkte Mensch automatisch außen vor, weil dieser die Information aus dem Bild nicht erhält. Außerdem sollte man idealerweise bei Farbkombinationen, Bilderklärungen und Navigationselementen Menschen mit Einschränkungen unterschiedlichster Art berücksichtigen.

4. CMS und Content

Ein Content Management System erlaubt dem Betreiber bekanntlich, seinen Webauftritt unkompliziert und schnell aktuell zu halten - ein wichtiges Kriterium für eine erfolgreiche Webseite. Über ein CMS lassen sich im Idealfall schnell und unproblematisch Texte, Bilder, Soundfiles oder auch Videos auf die Webseite stellen. Dinge, die Leser anziehen und sie zum Verbleib auf der Seite animieren.

Das Webdesign - hier der Aufbau einer CMS-Page - baut die Präsenz im besten Fall so auf, dass sich die Seite leicht mit aktuellem Content befüllen lässt, ohne dass man einen Webdesigner oder Webentwickler bemühen muss. Diese Aufgabe kann dann stattdessen beispielsweise ein Redakteur übernehmen, ohne sich dabei großartig mit den Aspekten des Quellcodes auseinander setzen zu müssen.

5. Wie verpackt man richtig

Gerade im Hinblick auf barrierefreies Webdesign ist die Farbauswahl ein entscheidendes Kriterium. Schwarz und Weiß, Farben die auch von Menschen mit Seheinschränkungen wahrgenommen werden, dienen zur Abgrenzug der Bereiche auf der Seite, als Hintergrund oder zur Hervorhebung. Das Farbkonzept muss sich stets daran ausrichten, was die Seite zeigt. Farben schaffen Emotionen und so unter Umständen auch Vertrauen, das natürlich die Entscheidung für einen Kauf oder einer Buchung beeinflusst.

Farben unterstreichen die Inhalte - aber die falsche Farbwahl kann auch die Wirkung der Inhalte zerstören, weil er entweder unleserlich wird oder ein längerer Verbleib auf der Seite strapaziös auf die Augen wirkt. Resultat: Die Verweildauer und mit hoher Wahrscheinlichkeit auch die Anzahl besuchter Seiten durch einen Webseitenbesucher würde sinken. Im Fall der folgenden Webseite eines Fotgrafen ist es eben nicht nur wichtig, interessante Fotografien zu zeigen, die die Fähigkeiten des Fotografen widerspiegeln, sondern diese Fotos auch in einer geeigneten Verpackung präsentieren, ohne dabei vom Eigentlichen zu sehr abzulenken - den Fotografien.

content king design queen verpackung
Neben den Inhalten ist es enorm wichtig auch auf ihre „Verpackung“ zu achten.

Grundsätzlich zählt für die Farbkomposition: Weniger ist mehr. Ist z.B. ein Logo zwingend im Zuge von CI vorgegeben, müssen sich die Farben der Page am Logo orientieren. Eine Signalfarbe sollte als Eye-Catcher vorhanden sein - und nie mehr als fünf Farben. Die Abstimmungen der Farben garantiert eine gute Lesbarkeit der Seiten. Bilder unterstützen den Content dann, wenn sie passend zum Thema gewählt wurden. Auch dabei gilt, eine Bildüberladung ist kontraproduktiv - besonders wenn es um animierte GIFs geht. Sie lassen die Webseite „unruhig“ erscheinen und dies ist kein Zeichen für professionelles Webdesign. Bilder unterstreichen, Bilder runden ab. Wer dies beherzigt, kann nicht falsch liegen.

Dieser Artikel ist ursprünglich im Webstandard-Blog erschienen.

Über den Gastautor

Björn Beth ist Redakteur bei der Plattform VomFachmann.de. Aus Hamburg stammend, hat Björn an der Hochschule in Bremen im Internationalem Studiengang Angewandte Freizeitwissenschaft studiert und arbeitet nun bei VomFachmann.de, deren neuen Google Account man ebenso verfolgen kann, wie die Facebook-Seite und den Twitter-Account.

Weitere Artikel zu Webdesign

Das interessiert dich bestimmt auch

6 Answers

  1. von Content is King – Inhalte und Verp… 08.02.2012 (12:25Uhr) 1.

    [...] Verpackung von Webseiten Content is King und Webdesign is Queen. Björn Beth beschreibt in seinem Artikel, wie Content und Webdesign von Webseiten Hand in Hand gehen. Der beste Inhalt ist nichts ohne eine [...]

  2. von Content is King, Webdesign is Queen &nda… 12.02.2012 (17:26Uhr) 2.

    [...] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } t3n.de - Today, 5:26 [...]

  3. von Webdesign Dortmund 12.02.2012 (22:25Uhr) 3.

    Super Artikel! Bei der ganzen SEO-Geschichte kommt das Thema Webdesign, meiner Meinung nach wirklich oft zu kurz.

  4. von Webdesign: Warum hässliche Websites erf… 16.02.2012 (14:14Uhr) 4.

    [...] Content is King, Webdesign is Queen – Optik und Inhalte aufeinander abstimmen - t3n News [...]

  5. von Weby24 – der Blog rund ums worldwi… 16.02.2012 (18:21Uhr) 5.

    [...] Content is King, Webdesign is Queen – Optik und Inhalte aufeinander abstimmen – t3n News [...]

  6. von Arnold Margolf 25.02.2012 (00:50Uhr) 6.

    Das ist eigentlich ein alter Hut. Guter Content verpackt in gescheitem Design war schon 1995 das A und O des damaligen Homepage Basteln. Die Seite kann häßlich sein. Mit einmaligem, wichtigem Content und strukturiertem Design wird Google sie lieben ...
    http://www.bst-systemtechnik.de

Deine Meinung


(wird nicht veröffentlicht)