Der ideal gestaltete Blog? Smashing Magazines "A Small Design Study Of Big Blogs"

Auch im Laufe der Zeit findet bei so manchem Blog eine vollständige Überarbeitung statt. Es ist auch gar nicht so einfach, direkt zu Beginn das “richtige” Design zu wählen, denn in der Blogosphäre existiert eine unglaubliche Vielfalt. Woran kann man sich also orientieren?

Das Smashing Magazine hat in der Artikelserie „A Small Design Study Of Big Blogs“ die 50 Top-Blogs von Technorati anhand verschiedener Kriterien untersucht. Ich möchte hier einmal die Ergebnisse in aller Kürze vorstellen.

1. Layout

Im ersten Teil geht es um einige allgemeine Fragestellungen bezüglich des Layouts. Man könnte die Liste sicherlich beliebig fortsetzen, aber meiner Meinung nach sind mit den Punkten die wichtigsten sechs Merkmale erfasst.

1.1 Wie viele Spalten?

Im Speziellen ist die Wahl der Spaltenanzahl immer abhängig vom konkreten Kontext und der Zielgruppe. In jedem Fall sollte die Struktur so transparent und klar wie möglich sein. Die empirischen Ergebnisse zeigen, dass 58% drei oder mehr Spalten, 42% zwei Spalten verwenden. Es gab auch Blogs mit ganz anderem Aufbau oder wechselnden Spaltenzahlen; das sind aber lediglich Ausnahmen.
Bei der Anzahl der Spalten kommt es meiner Meinung nach auch stark auf den Umfang an, der präsentiert wird. Blogs mit weniger Content und wenigen Features kommen gut mit zwei Spalten aus, während bei umfangreicheren Seiten die Dreispaltigkeit zur Strukturierung des Inhalts enorm wichtig sein kann.

1.2 Zentriertes oder links-ausgerichtetes Layout?

Gott sei Dank, decken sich die Ergebnisse der Studie mit meiner präferierten Ausrichtung: 94% der Blogs weisen ein zentriertes Layout auf. Es gibt nicht schlimmeres als ein für Bannerwerbung auf eine Breite von 1024 Pixel optimiertes Layout auf einem Display ab 22 Zoll. Lese ich solche Seiten regelmäßig, dann erstelle ich mir immer individuelle Styles, um die Seite zu zentrieren.

1.3 Seitenbreite: fest, elastisch oder ein Hybrid?

Auch wenn die Autoren des Smashing Magazines erstaunt waren, für mich sind die Ergebnisse in diesem Bereich nicht ungewöhnlich: 92% der Blogs verwenden ein festes (Pixel-basiertes) Layout, 8% verwenden eine hybride Art (das Layout ändert sich in Abhängigkeit der Größe des Browserfensters), keine einzige der untersuchten Seiten benutzt ein vollständig elastisches Layout.

1.4 Seitenbreite: wie breit denn nun genau?

Dieser Teil bezieht sich auf die 92% der Seiten, die eine feste Seitenbreite verwendet. 9% verwenden 800 Pixel und weniger, 15% 801 bis 900 Pixel, 20% 901 bis 950 Pixel sowie 56% 951 bis 1000 Pixel.

1.5 Verhältnis zwischen dem Inhalt und dem gesamten Layout?

Auch dieser Teil der Untersuchung bezieht sich auf die Blogs mit fixem Layout. Eine Sidebar war bei allen untersuchten Blogs vorhanden. Wie groß ist also der Anteil, der der Inhaltsspalte zukommt: 96% verwenden mindestens die Hälfte der gesamten Seitenbreite. 54% verwendeten 50 bis 60%, 46% verwendeten 60 bis 70% der Gesamtbreite. Im Mittel wurden 58% der Seitenbreite für die Inhaltsspalte aufgewendet.

1.6 CSS- oder tabellenbasiertes Layout

Leider muss man sich diese Frage immer noch stellen. Umso schöner, wenn man die Zahlen der Studie ließt: 90% der Blogs verwenden CSS-basiertes und nur 10% tabellenbasiertes Layout bzw. eine Kombination. Naja, auch 10% sind 10% zuviel…

2. Typographie

Ausgehend vom Credo „content is king“ stellen sich die Autoren des Smashing Magazines zentrale Fragestellungen rund um die Typographie von Blogs.

2.1 Dunkel auf hell oder hell auf dunkel?

Wer mit offenen Augen in der Blogosphäre unterwegs ist, den erstaunen die Ergebnisse nicht: 98% der Blogs verwenden dunklen Text auf hellem Hintergrund. Insbesondere für längere Texte ist dies meiner Meinung nach die erste Wahl, aber das mag letztendlich doch jeder für sich entscheiden. Ab und an sieht man ja auch Seiten, die den Wechsel ermöglichen.

2.2 Wie viele Zeichen pro Zeile?

Eine interessante Fragestellung. Laut dem Smashing Magazine hat sich hier noch keine allgemein akzeptierte Meinung herausgebildet. Ich persönlich empfinde es als „unangenehm“, wenn ein Text über die vollständige Seitenbreite geht. Dabei ist es zunächst irrelevant, wie viele Zeichen in einer Zeile stehen. Ab einer gewissen Länge – leider kann ich dazu keine genaue Angabe machen – wird es aber schon anstrengender einen Text flüssig zu lesen.

Was aber zeigt die Untersuchung? 10% der Blogs haben 65 bis 74 Zeichen pro Zeile, 18% verwenden 75 bis 84 Zeichen, 34% 85 bis 94, 18% 85 bis 104 und 16% verwenden über 105 Zeichen pro Zeile. Die Ergebnisse sind also nicht ganz eindeutig, aber ich gehe hier mit den Autoren der Studie konform und sehe 80 bis 100 Zeichen pro Zeile als sinnvoll an.

Zusätzlich wird angemerkt, dass keiner der Blogs als Textausrichtung Blocksatz verwendet. Darüber wurde ja bereits oft philosophiert und ich will hier auch keine große Diskussion darüber anfangen. Meiner Meinung nach hat Blocksatz im Internet zurzeit nichts zu suchen. Ohne automatischen Zeilenumbruch ist Blocksatz zur Darstellung von Text ungeeignet.

2.3 Was ist die primäre Schriftart des Fließtextes?

Wenig erstaunlich ist, dass überwiegend serifenlose Schriftarten zum Einsatz kommen: 34% Verdana (serifenlos), 24% Lucida Grande (serifenlos), 18% Arial (serifenlos), 14% Georgia (Serifen), 6% Trebuchet MS (serifenlos), 2% Helvetica Neue (serifenlos) und 2% Times New Roman (Serifen).

2.4 Wie groß ist die Schrift von Fließtext?

Trommelwirbel: 34% der Blogs verwenden 12px, 30% 13px, 14% 14px, 12% 11px, 4% 15px und die restlichen 6% verwenden 10px, 16px oder 17px. Ich persönlich tendiere zur Mehrheit und verwende zumeist 12px.

2.5 Was ist die primäre Schriftart von Überschriften?

30% verwenden Arial (serifenlos), 22% Georgia (Serifen), 8% Lucida Grande (serifenlos), 8% Helvetica (serifenlos), 6% Verdana (serifenlos), 6% Trebuchet MS (serifenlos), 4% Helvetica Neue (serifenlos), die restlichen 16% verwendeten (jeweils einmal) Calibri, American Typewriter, Lucida Sans Unicode, Franklin Gothic Medium, Tahoma sowie keine Überschriften.

2.6 Wie groß ist die Schrift von Überschriften?

Bei den Überschriften sieht es wie folgt aus: 24% verwenden 20 bis 22px, 22% 23 bis 25px, 22% 17 bis 19px, 16% 14 bis 16px, 6% 26 bis 29px, 2% 32px, 2% 34px, 2% 44px und 2% verwenden gar keine Überschriften. Na nu, wo sind die fehlenden 2%? Wahrscheinlich war die Schrift so groß, dass sie die Monitore der Redakteure sprengte. Oder überlese ich hier etwas? Den Ergebnissen tut dies in jedem Fall keinen Abbruch.

3. Struktur

„Form follows content“ ist so ziemlich das erste Credo, was mir beim Webdesign begegnet ist. Daher verwundert es nicht, dass man dem Informationsdesign noch mehr Bedeutung als dem Screendesign beimessen sollte. Wichtige Faktoren bei Blogs zeigt dieser Abschnitt auf.

3.1 Navigation: oben, links oder rechts?

Navigationskonzept gibt es im Internet wie Sand am Meer, aber wie sieht es bei Blogs aus. Gibt es eine Tendenz? Die Untersuchung des Smashing Magazines kommt zu dem Ergebnis, dass 58% aller untersuchten Blogs eine Navigation in einer rechten, vertikalen Spalte verwenden, 52% verwenden primär eine obere, horizontale Navigation, 12% verwenden eine linke, vertikale Navigation. Im Allgemeinen sieht man auch sehr häufig Kombinationen: zentrale Dokumente sind in der Top-Navigation verlinkt, Artikel, Kommentare u. ä. Content wird in einer rechten oder linken Spalte verlinkt.

3.2 Wie viele Artikel auf der Startseite?

Es gibt natürlich unterschiedliche Aspekte, die hier betrachtet werden müssen. Zwei zentrale sind Usability und Performanz. Bei Blogs wird letzterer Punkt wohl nicht ganz so entscheidend sein und man kann sich auf die Usability konzentrieren. Persönlich würde ich nicht mehr als 10 Einträge präsentieren. Was aber sagt die Studie?

28% zeigen 14 bis 18 Einträge, 26% 10 bis 12, 14% 20 bis 26, 10% 2 bis 6, 10% 27 bis 35, 8% 7 bis 9 und 2% zeigen 36 und mehr Einträge auf der Startseite. Da liege ich ja nicht so ganz im Trend. Was für mich persönlich aber viel wichtiger ist, ist dass jeder Beitrag nur angerissen wird und nicht auf der Startseite in seiner Gänze präsentiert wird. Denn letzteres ist meiner Meinung nach absolut unübersichtlich. Insbesondere, wenn man mal eben die letzten Beiträge scannen möchte, macht einem das die vollständige Beitragsdarstellung auf der Startseite unmöglich. Leider sieht man das viel zu oft.

3.3 Sollen verwandte und beliebte Artikel sowie neuste Kommentare angezeigt werden?

In beiden Punkten konnte kein eindeutiger Trend festgestellt werden. 54% der Blogs zeigen verwandte Beiträge an, während der Rest keine anzeigt. 48% der Blogs verwenden eine Anzeige von beliebten Artikeln. Bei den Kommentaren hingegen zeigte sich, dass nur 16% der Seiten neuste Kommentare anzeigen.

Neuste Kommentare interessieren mich auch selten. Beliebte und insbesondere verwandte Beiträge finde ich aber sehr nützlich. Man sollte bei der Darstellung nur darauf achten, dass diese Hinweise dezent angebracht werden.

3.4 Welche Informationen sollten im Footer präsentiert werden?

„Früher“ war der Footer vo

r allem ein Bereich, in dem Hinweise oder Links zu Seiten angebracht wurden, die lediglich zusätzliche Informationen bereitstellen, die nicht direkt zum Thema der Seite gehören, z. B. Impressum, AGB, Datenschutzhinweise, Copyright. Mittlerweile werden hier zum Teil auch wesentlich mehr Informationen dargestellt:

  • Copyright, gesetzliche Bestimmungen, Datenschutz, AGB, Nutzungshinweise (90%)
  • Link zur “Über uns”-Seite (40%)
  • Link zur “Werben Sie auf …“-Seite (38%)
  • Link zu den Kontaktinformationen (30%)
  • Link zum RSS-Feed (22%)
  • Link zu den FAQ oder der Hilfe (22%)
  • Suche (14%)
  • Link zum Seitenanfang (10%)
  • Link zur Startseite (10%)
  • Link zur Site Map (8%)

Bei Blogs werden insbesondere auch stärker inhaltliche Aspekte im Footer aufgegriffen: Letzte Artikel, neuste Kommentare etc. Also eine Art Site Map. 44% der Blogs verwenden derartige Informationen im Footer.

4. Werbung

Werbung ist mittlerweile auch in der Blogosphäre ein großes Thema. Viele Blogs weisen Besucherzahlen und Page Impressions auf, von denen eine „klassische“ Seite nur träumen kann. Da ergeben sich natürlich viele Gelegenheiten, um Methoden des Online Marketings anzuwenden.

4.1 Wie viele Ads pro Seite?

Aus Nutzersicht sind Ads sicherlich nicht besonders angenehm und tatsächlich: Das Smashing Magazine schreibt „Bad news: the blogosphere is heavily infected with ads.“ Zwei bis drei Werbeblöcke pro Seite sind die Regel. In 12% der Blogs konnten sogar Pop-Up-Ads gefunden werden. Schauen wir uns mal die Zahlen an: im Mittel fanden sich 5,84 Werbeblöcke auf der Startseite und 5,96 pro Artikel. Insgesamt benutzen 68% der Blogs Google AdSense.

So lange die Werbung nicht nervende Formen (z. B. Pop-Ups, AdLayer) annimmt und der Inhalt der Seite gut ist, kann ich über die Werbung hinwegsehen. Die meisten Blogger schreiben ja auch in ihrer Freizeit und prinzipiell kostenlos.

4.2 Ads im Inhaltsbereich?

Ein Ergebnis der Studie ist, dass Werbeblöcke innerhalb von Artikeln zwar vorkommen, aber nicht ganz so häufig sind. In Blogs mag das noch der Fall sein; hoffentlich bleibt es auch dabei. Insgesamt verwendeten 76% keine Werbung in den Artikeln selbst, aber durchaus darunter. Werbung nach dem Artikel und vor den Kommentaren gab es in 44% der Fälle. Leider zeigten 18% der Blogs Werbung innerhalb der Artikel an. 6% gehen sogar so weit, dass sie Werbung direkt unterhalb der Überschrift platzieren – das muss nun wirklich nicht sein. Wie heißt es so schön: erst die Arbeit, dann das Vergnügen. Wendet man das auf die Abfolge einer Blogseite an: schreibt erst mal was interessantes, dann könnt ihr auch den Lohn in Form von Werbung einheimsen.

4.3 Wo werden Ads im Layout dargestellt?

Manchmal hat man ja förmlich das Gefühl von Werbung erschlagen zu werden, was auch durch die 12% der Blogs unterstrichen wird, die einfach überall Werbung anzeigen. Und sonst:

  • auf der rechten Seite (88%),
  • im oberen Seitenbereich (42%),
  • auf der linken Seite (34%)
  • im unteren Seitenbereich (24%),
  • keine Werbung (8%).

5. Funktionalität

Blogs dienen natürlich primär dazu Artikel zu bestimmten Themenbereichen zu verfassen. Neben dieser Hauptfunktion gibt es allerdings noch einige weitere Elemente, die immer wieder zu sehen sind. Das Smashing Magazine hat in der Studie die wichtigsten herausgegriffen und ihr Vorkommen untersucht.

5.1 Werden Buttons und Icons von Sozialen Netzwerken verwendet?

Kurz und schmerzlos: 54% der Blogs verwenden derartige Icons unterhalb der Artikel, 38% verwenden keine Icons und 8% verwenden Icons oberhalb von Artikeln.

5.2 RSS-Feeds: Position und Darstellung

RSS ist eine der wichtigsten Technologien im Internet, um Benutzer an die eigene Seite zu binden. Was würde ich nur ohne meinen RSS-Reader machen? Mit Sicherheit würde ich nur einige wenige der Seiten regelmäßig besuchen. Und was zeigt uns die Studie zur Position des RSS-Buttons:

  • im Header (38%)
  • im oberen Bereich der Sidebar (28%)
  • in der Mitte der Sidebar (8%)
  • am Fuß der Sidebar (14%)
  • im Footer (8%)

Die Studie zeigt des Weiteren, dass nur 66% ein standard RSS-Icon verwenden, 64% einen einzigen RSS-Feed anbieten, 24% die Anzahl der Abonnenten anzeigen und 56% als Alternative einen Newsletter anbieten.

5.3 Werden Tag Clouds verwendet?

90% der Blogs haben keine Tag Cloud oder etwas Vergleichbares.  Ich konnte immer wieder feststellen, dass ich in einer Tag Cloud immer nur die drei größten Tags beachte, alle anderen fallen unter den Tisch. Nun ist eine empirische Studie mit einem Probanden nun wirklich nicht repräsentativ *g*, aber ich würde einfach mal vermuten, dass es vielen nicht anders ergeht. Problematisch könnte dabei auch sein, dass Tag Clouds zu einer Art Self-fulfilling prophecy werden: je größer ein Tag in der Tag Cloud, desto mehr Leute klicken darauf, desto größer wird der Tag, desto mehr Leute klicken darauf, desto…

Sind Tag Clouds also unsinnig? Ich muss zugeben, meine Meinung ist in diesem Punkt noch nicht ganz gefestigt. Tendenziell würde ich eine Tag Cloud einbinden.

5.4 Wird eine Seitennummerierung verwendet?

Interessanterweise verwenden nur 22% der Blogs eine nummerierte Seitennavigation, 60% verwenden lediglich einen „vor“ und „zurück“-Button. 6% der Blogs verwenden eine Kalendernavigation und 12% einen Archivbereich. Meiner Meinung nach ist eine nummerierte Seitennavigation unverzichtbar.

5.5 Wo sollte die Suche platziert werden?

Wo suche ich die Suche? Super Frage. Wo liegen also die Suchformulare:

  • 62% in der oberen rechten Ecke, davon in 58% im Header selbst und 38% im oberen Bereich der Sidebar
  • 16% in der Mitte oder dem unteren Bereich der Sidebar
  • im Footer hat nur eine Seite die Suche
  • eine Seite hat gar keine Suche

Also eine Suche sollte es schon geben, ich halte es hier auch ganz klar mit der Mehrheit, ob jetzt im Header oder im oberen Bereich der Sidebar ist mir persönlich egal.

5.6 Wo sollte der Link zur Kontaktseite angebracht werden?

In der Sidebar führen 52% der Blogs den Link zur Kontaktseite auf, 40% im Header, 30% im Footer und 4% auf der “Über uns”-Seite. 64% bieten lediglich eine E-Mail-Adresse als Kontaktinformationen, 28% haben ein Kontaktformular, 8% haben beides. Da Feedback in der Regel essenziell für Blogs ist, würde ich zu der Kombination Sidebar und Footer oder Header und Footer tendieren.

5.7 Sind die Top-Blogs standardkonform?

Je mehr Personen an einem Blog arbeiten, desto schwieriger wird es wohl Standardkonformität herzustellen. Schließlich achtet wohl nicht jeder penibel darauf. Das kann man natürlich durch Vorgaben und Schulungen ändern. Viel gravierender ist, dass AdServer nicht gerade standardkonformen Code erzeugen. Für mich ist das ein absolutes muss, ein gelbes oder rotes Icon mit dem Hinweis auf Warnungen und Fehler im HTML-Validator (Firefox Add-On) sind nicht tolerabel. Aber das sieht nicht jeder so:

  • nicht standardkonform (96%),
  • über 500 Fehler (8%),
  • 200 bis 499 Fehler (28%),
  • 100 bis 199 Fehler (24%),
  • 50 bis 99 Fehler (22%),
  • 1 bis 49 Fehler (10%),
  • keine Fehler (4%).

6. Zusammenfassung, Fazit und der ideale Blog?

Die Studie des Smashing Magazines bietet interessante Informationen auf Basis der 50 Top-Blogs von Technorati. Was soll man nun aber mit diesen Ergebnissen machen? Können sie einem bei der Gestaltung des eigenen Blogs behilflich sein?

Es muss klar sein, dass jeder Blog in einem ganz individuellen Kontext eingebettet ist und man daher die Ergebnisse der Studie nicht so ohne Weiteres auf seinen eigenen Blog ummünzen kann. Allein, dass nicht alle Bereiche eine eindeutige Tendenz aufweisen zeigt, dass es ausreichend Spielraum gibt. Die Ergebnisse sind aber längst nicht überflüssig. Sie können vielmehr als eine Art Leitfaden dienen, an dem man sich orientieren kann. Beachtet man den eigenen Kontext und die angepeilte Zielgruppe und lässt diese in die Gestaltung mit einfließen, bieten die Ergebnisse wertvolle Hinweise.

Der „ideale“ Blog sieht nach der Studie in etwa also so aus:

Layout:

  • drei oder mehr Spalten (58%)
  • zentriertes Layout (94%)
  • feste Seitenbreite, zwischen 950 und 1000 Pixeln
  • 50 bis 70% der Gesamtseitenbreite für den Inhalt
  • CSS-basiertes Layout (90%)

Typographie:

  • dunkle Schrift auf hellem Hintergrund (98%)
  • 80 bis 100 Zeichen pro Zeile
  • serifenlose Schriftart für den Fließtexte (Verdana, Lucida Grande, Arial)
  • 12 bis 14 Pixel für die Schrift des Fließtextes (78%)
  • Arial (30%) oder Georgia (22%) für Überschriften
  • 17 bis 25 Pixel für Überschriften (68%)

Struktur:

  • Navigation rechts, vertikal (58%) oder oben, horizontal (52%)
  • 10 bis 18 Artikel auf der Startseite (54%)
  • verwandte (54% ) und beliebte Artikel (48%) anzeigen, keine neusten Kommentare
  • unabdingbare Informationen im Footer: Copyright, gesetzliche Bestimmungen, Datenschutz, AGB, Nutzungshinweise (90%), Link zur “Über uns”-Seite (40%), Link zu den Kontaktinformationen (30%)

Werbung (am besten gar nicht)

Funktionalität:

  • Icons von Sozialen Netzwerken unterhalb der Artikel (54%)
  • RSS-Feed im Header (38%) oder im oberen Bereich der Sidebar (28%)
  • Tag Clouds „dezent“ einsetzen (10%)
  • nummerierte Seitennavigation verwenden (22%)
  • Suche in der oberen rechten Ecke (68%): Header (58%) oder oberen Bereich der Sidebar (38%)
  • Link zur Kontaktseite der Sidebar (52%), im Header (40%), im Footer (30%)
  • auf Standardkonformität achten

Wie gesagt, das sind nur grobe Orientierungshilfen. Etwas Arbeit muss dann doch jeder investieren. Wer weiß, vielleicht kommt einer von Euch auf eine so toll Idee, dass diese zum nächsten Standard bei Blogs avanciert.

zp8497586rq

Konzeption

Kommentare

  1. Renox sagt:

    Ich finde diesen Blog hier perfekt. Design + Themen sprechen mich sehr an. Werde bestimmt öfters vorbeischauen.

  2. Olli sagt:

    Hey,

    Dank Dir. das hört man doch gerne. Dann geben wir uns mal Mühe mit den Beiträgen, dass Du neben dem Design hier auch einen anderen Grund hast, um öfters herzukommen.

    Gruß Olli

  3. marlon sagt:

    mir gefällt sie auch

    http://www.haso-mag.de

  4. Quardian sagt:

    So, jetzt habe ich was gelernt. Da ich von der Printseite komme, war Blocksatz für mich Pflicht. Schon der Optik und Gewohnheit wegen.

    Auch die anderen einzelnen Themen sind sehr gut recherchiert worden.

    Sobald ich einen reinen Blog mache, wird das alles berücksichtigt.

    Bravo, an die Netzrebellen.

    Quardian