Okt 5. '159.40 Uhr

Das Content-Konzept:
Content-freundliches Webdesign

Von Ralf Isau
Teil 3/6

In den ersten zwei Teilen dieser Reihe haben Sie erfahren, wie unverzichtbar guter Content ist. Ohne ein Content-Konzept lassen sich auf Dauer keine wirksamen Inhalte finden und gestalten. Sie haben gelesen, dass jedes Konzept ein Ziel und eine Kernaussage braucht. Mit leicht zu bedienenden Webseiten erschließen sich die Besucher Ihre Inhalte ohne Stolperfallen. Worauf ist beim Webdesign noch zu achten, damit Ihr Content glänzend kann? Darum geht es im dritten Teil der Reihe.

Dimension und Gestaltungsraster

Zu lange Textzeilen sehen nicht nur unschön aus. Sie sind auch schwer zu lesen. Und zu große Bilder erhöhen unnötig die Ladezeiten und verschlechtern das Ranking in den Suchergebnissen von Google & Co. Für die Dimensionen jeden guten Layouts sollte es daher Obergrenzen geben. Bei Phantagon halten wir eine maximale Breite von 1200 Pixeln abzüglich der Ränder als gerade noch praktikabel. So ergibt sich eine Nettobreite von höchstens 1140 Pixeln. Zwischen den einzelnen Inhaltsblöcken sollte der Grafiker genug Leerraum für eine »luftige« Gestaltung lassen. Die Bundstege (englisch gutter) sollten mindestens 50 Pixel breit sein.

Benutzer von größeren Bildschirmen sehen links und rechts einen Rand, der sich der jeweiligen Bildschirmgröße anpasst. Es bleibt dem Grafiker überlassen, ob er diesen Randbereich in der Hintergrundfarbe des Inhaltsbereichs oder anders gestaltet. Allerdings gilt die Regel: Der Randbereich sollte niemals vom eigentlichen Inhalt ablenken. Auffällige Muster oder Fotos sind an dieser Stelle also tabu. Schlechte Usability!

Viele Webdesigns benutzen drei Abstufungen, die sich an der Fensterbreite des Browsers ausrichten: groß, mittel und klein. Bei Monitoren mit geringerer Pixelzahl als 1200 verkleinern sich zunächst die Bildelemente (Schriftgröße, Bilder). Die einzelnen Inhaltsblöcke (englisch container) halten sich in der mittleren Stufe weiter an das große Layout.

Erreicht die Auflösung die für Smartphones oder andere mobile Geräte üblichen Dimensionen, ordnet das responsive Webdesign die Informationsblöcke und Bilder fließend untereinander an. So bleibt der Content weiterhin gut lesbar. Die Navigation sollte sich »unsichtbar« machen, um den knappen Platz des kleinen Displays nicht unnötig zu vergeuden. Das Menü öffnet sich erst, wenn der Benutzer oben links einen Button antippt. Wählen Sie für den Slider oder für große Bilder bitte einen ästhetisch ansprechenden Bildausschnitt.

Die folgende Tabelle zeigt eine mögliche Einteilung der Abstufungen des responsiven Webdesigns:

Beispiel: Breakpoints für ein responsive Webdesign
Breite
brutto
(Pixel)
Breite netto (Pixel) Bundsteg (Pixel) Anordnung Bemerkungen
1200 – ∞ 1140 50 statisch Große Monitore
481 – 1199 960 30 statisch Kleinere Monitore
1 – 480 960 30 fließend

Für Smartphones ggf. Slider, Bilder beschneiden. Unwichtige grafische Zierelemente reduzieren oder ganz weggelassen. Navigation per Button oben links aufklappbar.

Weit verbreitet ist ein zwölfspaltiges Grundraster für die Seiten. Die einzelnen Elemente der Gestaltung orientieren sich an den Grenzlinien des Rasters. Diese Layoutblöcke mögen in einem großen Fenster nebeneinanderstehen. Auf kleineren Endgeräten (Smartphones, Phablets) ordnen sie sich untereinander an. Der Besucher sieht natürlich keine zwölf Spalten mit Text. In der Praxis haben sich maximal drei bis vier Spalten mit Content (Text und Bilder) bewährt.

Das Prinzip des geringsten Erstaunens

Überraschen Sie die Besucher Ihrer Website mit professionellem Design, emotionalen Bildern, mitreißenden Headlines und frischen Texten. So unterscheiden Sie sich von der Masse Ihrer Konkurrenten. Doch bedenken Sie bitte: Die Benutzer (neudeutsch: User) haben im Internet bestimmte Verhaltensweisen verinnerlicht. So wie einem Autofahrer das Kuppeln und Schalten in Fleisch und Blut übergegangen ist, tun auch die Surfer im WWW vieles automatisch. Studien haben gezeigt, dass Banner kaum noch wahrgenommen werden. Die User haben gelernt, diese »lästige Werbung« mental auszublenden. Daraus leitet sich für Ihren Webauftritt eine wichtige Regel ab, die ich bereits im letzten Teil kurz gestreift habe:

Bei der Konzeption von Benutzerschnittstellen gilt das principle of least astonischment: das »Prinzip des geringsten Erstaunens«. Bildlich gesprochen: Führen Sie nicht den Linksverkehr ein, wenn es die User gewohnt sind, rechts zu fahren. Unfälle wären unvermeidbar. Leiten Sie die Besucher genau so durch Ihr Angebot, wie sie es erwarten. Sie werden es Ihnen danken durch längere Verweildauer und mehr Leads.

Lesbarkeit

Es kann gar nicht oft genug beton werden: Leicht lesbarer Text ist das A und O jeder Mediengestaltung. Bitte achten Sie deshalb beim Layout auf die Länge der Textzeilen. Der Mensch kann etwa 45 Zeichen auf einem Blick gut erfassen. 60 Zeichen pro Zeile sollte Ihr absolutes Maximum sein. Falls Sie sich für eine feste Schriftgröße entscheiden, denken Sie bitte auch an Brillenträger. Ich gehöre auch dazu. Daher empfehle ich gerne eine Fontgröße um 14,5 pt sowie einen Zeilenabstand zwischen 130 und 140 %.

Ebenso wichtig ist der Weißraum, also die leeren Stellen, an denen weder Text noch Bilder stehen. Übertreiben Sie es damit aber nicht. Bei zu viel Nichts wirken die Textzeilen verloren. Nutzen Sie Kästen und unbedingt Bilder, Zeichnungen oder Grafiken neben dem Text, um die Leere ansprechend zu füllen.

Beachten Sie überdies, dass sich besondere Textauszeichnungen wie fett und kursiv stärkend auf das Ranking auswirken. Das betrifft vor allem Ihre wichtigen Keywords. Das sind die Suchbegriffe, die Ihre Zielgruppe bei Google & Co. eingibt.

Die KISS-Regel

Ausführlichkeit in der Sache bedeutet nicht epische Breite. Hüten Sie sich vor zu ausschweifenden Schilderungen oder gar Geschwätzigkeit. Selbst in einem Blog kommt das selten gut an. Für professionell Texter, auch Copywriter genannt, gibt es eine wichtige Grundregel:

Keep
It
Small
And
Simple

Bei der Mediengestaltung für das Internet sollte diese KISS-Regel – »Halte es klein und einfach!« – umso mehr beachtet werden. Dafür gibt es mindestens drei wichtige Gründe:

  1. Der Mensch liest auf einem Monitor ungefähr 30 % langsamer als auf Papier.
  2. Die Besucher einer Website haben viel weniger Geduld als Prospekt- oder Bücherleser.
  3. Der Wechsel zu einem anderen Inhalt ist leicht – ein Klick und der Leser ist weg.

Außerdem lesen Internetnutzer gewöhnlich portionsweise: Sie springen oft völlig ungeordnet von einem Element zum anderen. Deshalb muss jede Headline, muss jeder Textabschnitt, ja jeder einzelne Absatz für sich alleine stehen können. Das Content-Konzept sollte dieses besondere Verhalten der »Webnomaden« berücksichtigen.

Mit Bild- und Grafikelementen lässt sich der Blick des Betrachters lenken. Außerdem wecken sie Gefühle. Mein Tipp: Zeigen Sie auf jeder Website mindestens ein Bild, das mit dem Text eine harmonische Einheit bildet. Zu viel Grafik indes sorgt oft für Unruhe und lenkt von den eigentlichen Inhalten ab. Auch hier gilt: Weniger ist mehr.

Lange oder kurze Texte?

Suchmaschinen beurteilen Content danach, wie relevant er für Benutzer ist. Sie wollen die besten Treffer für Benutzer bieten, die für ihr Problem eine Lösung suchen. Dabei hat wenig Text naturgemäß eine geringere Chance gut zu ranken. Kommen die Besucher nicht über die organische Suche von Google & Co., sondern über andere Kanäle, kann der Text sparsamer ausgelegt werden. Doch Vorsicht! Man mag Frank Zappa mögen oder nicht, doch in einem hat er recht:

Nur, weil jemand etwas hört, das du sagst, oder etwas liest, das du schreibst, bedeutet das nicht, dass du ihn erreichst.Frank Zappa

Sie sollten Ihrer Zielgruppe Content bieten, mit dem Sie den Nerv der Leute treffen. Von markigen Werbesprüchen haben sie genug. Die Menschen wollen Informationen, Argumente oder sich einfach nur verstanden wissen. Denn das bildet Vertrauen. Und Vertrauen ist der Boden, auf dem jede gute Beziehung wächst. Ein so gestalteter Content ist zwangsläufig auch für Google relevant.

Zwischenfazit

Jetzt sind Sie an einem Punkt angelangt, an dem Ihnen schon die Finger jucken. Sie wissen, warum es im Web keine Alternative zu gutem Content gibt. Die wichtigsten Elemente eines Content-Konzept sind Ihnen vertraut. Nun möchten Sie endlich mit dem Konzipieren anfangen. Ehe Sie damit loslegen, möchte ich Ihnen noch ein wenig über Suchmaschinenoptimierung (SEO), über Responsive Webdesign (RWD) und über wiederkehrende Seitenelemente erzählen. Darum geht es im nächsten Teil der Reihe.

Gleich Teil 4 lesen!