Chuck Norris hat ein „Sie haben gewonnen“-Banner angeklickt. Und er hat gewonnen!

12.05.09

Redesign: Tag Clouds

Es geht wieder um die Sidebar. Zuletzt kündigte ich an, dass die letzten Kommentare in der Sidebar meines zukünftigen Blogdesigns höchstwahrscheinlich einen Platz finden werden. Jetzt geht es um Tag Clouds und deren (Un-)Nutzen.

Die Tagcloud war in den Anfangszeiten des Webzwonull ein Quasi-Standard. Die Worthaufen mit Schriftgrößenvariationen mussten einfach irgendwo zu finden sein, wenn man hip sein wollte.

Wie es eben so ist, wurde dann auch viel Unfug getrieben; die Tagclouds wurden nicht richtig ausgezeichnet oder sinnlos in der Größe variiert, anstatt nach einem Schema zu handeln, und so weiter.

Ein – meiner Meinung nach – sehr krasses Beispiel, das es für mich auf die Spitze treibt, sind 3D-Flash-Tag Clouds. Zugegebenermaßen schön anzusehen, aber unbenutzbar.

Tag Clouds sind ganz klar zum Stöbern und nicht zum schnellen und effizienten Informationsgewinn. Sie sind bewusst unaufgeräumt und nirgendwo stöbert es sich schöner als in einem Raum mit viel Unordnung und allerlei Krempel.

Allerdings möchte ich nicht für den Nutzer entscheiden, ob er stöbern möchte, oder sich nur in einen längeren Artikel vertiefen will. Tag Clouds lenken im Lesefluss zu stark ab und sind deshalb in der Sidebar fehlplatziert.

Dahingegen ist es aber einen Gedanken wert, die Schlagwortwolke z.B. im Archiv unterzubringen. Wer sich in das Archiv eines Blogs begibt, der möchte stöbern. Warum soll man ihm dann keine schöne Tag Cloud servieren?

Doch nun zum Technischen: Wie zeichnet man eine Schlagwortwolke korrekt aus? Meine erste Idee war eine ungeordnete Liste und ich halte diese Lösung immer noch für sinnvoll. Diese Art der Wolke ist für den grafikunfähigen Browser einfach besser darzustellen und somit für diese Nutzer einfacher zu scannen.

Bei der semantischen Gewichtung der Links ist HTML 5 sehr zuvorkommend, indem es Verschachtelungen von em-Tags ausdrücklich zulässt. Dadurch kann man die Gewichtung eines Schlagwortes sehr exakt angeben und muss sich nicht mit dubiosen Klassen oder style-Attributen abmühen.

Ganz wichtig ist außerdem, dass die Begriffe alphabetisch sortiert sind. Ein anderes Ordnungskriterium hätte keinen Sinn.

Wenn in meinem neuen Design solch eine Wortwolke also überhaupt vorkommt, dann im Archiv. In der Sidebar hat das Ding meiner Meinung nach jedenfalls nichts zu suchen.

Kommentare [2]

Luckerking am 13.05.2009 um 08:41

Ich stimme dir voll und ganz zu, dass Tag Clouds nichts auf der Startseiten – Sidebar zu suchen zu haben.
Aber ich habe zum Beispiel auf meiner Seite in der Sidebar eine Liste von Kategorien, welche ich auch ganz nützlich finde.
Wie willst du das den mit der em-Tag Verschachtelung angehen?
Wenn ein Tag über 20% hat dann 2 mal em, bei 30% 3 mal?
Oder wie stellst du dir das vor?
Auf einer anderen Seite habe ich mir mal so eine Tag Cloud angeschaut und festgestellt, dass es dort mit dem Style Attribut und font-size in % gelöst war.
Da einige Tags über 100 % hatten wird die % Zahl wohl anders berechnet und ist die die Prozent Zahl von der Anzahl der Gesamt Tags.

Markus Schlegel am 13.05.2009 um 12:25

Mit den Verschachtelten ems ist das doch ganz einfach:

.tagcloud em { font-size: 110%; }

Wenn man eine Grundschriftgröße von 16px annimmt, wird bei einem em die Schrift 17,6px groß, bei zwei 19,36px und so weiter.

Etwas blöd an der Sache ist, dass die Schriftgrößen dadurch exponentiell wachsen.

Eine andere Methode wäre zum Beispiel diese hier:

.tagcloud > em { font-size: 17px; }

.tagcloud > em > em { font-size: 18px; }

.tagcloud > em > em > em { font-size: 19px; }

Verstehen manche Browser aber bekanntermaßen nicht.

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll