Weblog

Die dynamische Kommentaransicht wurde mit jQuery realisiert und blendet die jeweils neuesten 5 Kommentare ein. Ältere Kommentare werden dynamisch paginiert und können bei Interesse entweder in schrittweise (jeweils 5 Kommentare) oder vollständig aufgeklappt werden. Anfängliche Schwierigkeiten mit dem Anspringen der neuesten Kommentare von der Highresolution-Startseite waren schnell behoben. Ebenfalls bereits seit ein paar Monaten gibt es auch den von Alexander Farkas angeregten Yellow-Fade-Effekt, mit dem der angesprungene Kommentar kurzzeitig gelb hervorgehoben wird.

Im damaligen Relaunch-Artikel gab es insgesamt viel Lob aber auch einige kritische bzw. bedenkliche Stimmen, was die Position der Kommentare bzw. die ungewohnte Art der Präsentation angeht.

8 Monate später ist mein Resümee dieses Experimentes durchweg positiv. Ein Absinken des Kommentaraufkommens konnte ich nicht feststellen, das neue Bloglayout hat eher dafür gesorgt, dass viele neue Leser offensichtlich gern in diesem flexiblen Layout verweilen und durchaus auch gern und umfangreich kommentieren – obwohl ich durchschnittlich kaum mehr als 3 Beiträge pro Monat schreibe. Optisch hat die Lösung die gesetzten Ziele voll erfüllt, denn das Layout ist auf dein meisten Artikelseiten sehr gleichmäßig ausgelastet und die rechte Spalte läuft nicht mehr ins endlos nach unten. Meine Leser scheinen – zumindest ist das mein Eindruck – mit der Kommentaransicht gleichfalls gut zurecht zu kommen, denn Diskussionen innerhalb der Kommentare finden auch gelegentlich statt.

So gesehen, werde ich dieses Feature also beibehalten und möchte deshalb hier die Frage in den Raum stellen, ob grundsätzlich Interesse an einer Plugin-Lösung auf jQuery-Basis für die dynamische Kommentaransicht besteht? Der Quelltext befindet sich grundsätzlich in recht ordentlichem Zustand, sodass die Umwandlung in ein Plugin keinen zu großen Aufwand bedeuten würde. Allerdings stellt sich eben zuvor die Frage, ob überhaupt Interesse an dieser Darstellungsform besteht – nicht nur an einer exemplarischen Umsetzung sondern auch das Interesse, ein solches Plugin im eigenen Blog einzusetzen. Ich bin gespannt auf Eure Antworten.

Vor ca. 1,5 Jahren, im Sommer 2007 sprach ich Dirk Ginader per Skype auf ein kleines Problem an. Damals machte ich gerade meine ersten Schritte mit jQuery und wollte für das Redesign von YAML.de ein Tabscript verwenden, um mehrfach hintereinander aufgelistete Quelltextabschnitte aufgeräumter präsentieren zu können. Zu diesem Zweck sah ich mir verschiedene Tab-Lösungen (mit und ohne jQuery) an, die jedoch alle am gleichen Problem krankten.

Die Tabs funktionieren generell nur in Verbindung mit JavaScript. Dennoch erwarteten sämtliche existierenden Scripte von mir, den für die Tabreiter notwendigen Markup (UL-Liste) fest im Layout zu integrieren. Ich hielt das für unsinnig, denn zum Wesen von unaufdringlichem bzw. zugänglichem JavaScript gehört, dass Bedienelemente, die nur in Verbindung mit der JavaScript-Applikation benötigt werden, auch per JavaScript erzeugt werden sollten.

Daraus entstand folgende Idee: Man definiert einen Bereich der Webseite, welcher die Tabinhalte beinhaltet und definiert ein HTML-Element, welches als Trenner zwischen den Tabinhalten fungiert und den Namen des Tabreiters beinhaltet. Im einfachsten Fall wäre das Bereich aus gleichrangigen Überschriften und Absatztexten. Per JavaScript könnten aus den Überschriften die Tabreiter generiert werden. Die dazwischen befindlichen Absatztexte (oder was auch immer sich zwischen den Trennelementen befindet) würden als Inhalte der Tabs interpretiert und entsprechend gestaltet. Das Schöne daran: Ist JavaScript deaktiviert, so stört kein unsinniger Listenmarkup und die Tabinhalte präsentieren sich im normalen Textfluss der Webseite.

Mit dieser Idee trat ich also im Sommer 2007 an Dirk heran und es dauerte nur wenige Tage bis die erste Version des Plugins Gestalt annahm, die im Übrigen bis heute auf YAML.de in der Dokumentation der Subtemplates ihren Dienst tut. Schon lange hatten wir vor, dieses Plugin zu verfeinern und zusammen mit YAML zu veröffentlichen. Dass es dennoch bis ins Jahr 2009 gedauert hat - naja, sei es drum. Ein großer Teil der Verzögerung floss nämlich eben in die Verfeinerung des Plugins, über die Dirk in seinem Blog auch ausführlich berichtet. So ist es gerade bei den so gern auf modernen Webseiten verwendeten Tabs alles andere als trivial, diese wirklich barrierfrei zu gestalten. Nun hat Dirk bei Yahoo in London den besonderen Vorteil, mit Artur Ortega einen blinden Kollegen neben sich sitzen zu haben, und beide gemeinsam konnten die sich langsam entwickelnde Lösung nicht nur theoretisch durchdenken, sondern auch unmittelbar im Praxistest auf Herz und Nieren testen. Vielen Dank Euch beiden, wirklich eine reife Leistung.

Momentan stehe ich mit Dirk in Kontakt, um noch weitere Verbesserungen an seinem Plugin vorzunehmen. So soll das Script in der nächsten Version unabhängig von animierten Übergängen eine vollständige Druckausgabe aller Tabinhalte unkompliziert ermöglichen und eine optionale Synchronisierung der Containerhöhen der Tabinhalte möglich sein. Eine Anreicherung mit ARIA ist ebenfalls denkbar.

Übrigens: Auf die gleiche Art und Weise ließen sich auch zugänglichere Accordion-Boxen erstellen. Die Probleme dürften sich gleichen, ebenso wie der aufgezeigte Lösungsweg.

Die neue Applikation basiert auf jQuery und wird per Bookmark auf jeder beliebigen Seite hinzugeladen. Die Funktionalität umfasst Informationen über den Rendering-Mode, die Anzahl eingebundener externer Stylesheets, Scripts und Bilder. Per Klick können veraltete Elemente oder auch Elemente mit Inline-Styles hervorgehoben werden. Ebenso ist es möglich, sich auf einen Klick einen Überblick über die Layoutstruktur (DIV-Verschachtelung) oder die semantische Auszeichnung der Inhalte direkt im Layout zu verschaffen. WAI-ARIA roles, states und properties können hervorgehoben werden, Relationen z.B. über aria-labelledby macht das Tool durch das Hovern mit der Maus über die jeweilige Eigenschaft sichtbar. Schließlich gibt YAML Debug auch Auskunft über alle eingebundenen Stylesheets. Alle externen Stylesheets können zudem deaktiviert, angezeigt oder direk an den Validierungsdienst des W3C gesandt werden.

Einen vollständigen Überblick über den Funktionsumfang gibt es auf der zugehörigen kleinen Microsite, die ich diesem Projekt spendiert habe. Von dort kann dann auch das Bookmarklet bezogen werden. Aus der Browserwelt werden momentan Firefox 3, Opera 9.x und Safari 3.x/Webkit voll unterstützt, wobei der Safari 3.x aktuell das Deaktiveren von per @import eingebundenen Stylesheets verweigert. Der Internet Explorer 7 erhält momentan nur eine sehr eingeschränkte Unterstützung. Hier habe ich mich aufgrund der doch umfangreichen Abweichungen vom Standard (sowohl bei CSS, als auch bei JavaScript) auf die Bereitstellung der Stylesheet-Infos beschränkt, um gerade bei YAML-basierten Layouts eine einfache Kontrolle der korrekten Einbindung der Patch-Dateien zu ermöglichen. Auf die JS-Nachprogrammierung der ansonsten per CSS funktionierenden Hervorhebungsoptionen habe ich zunächst verzichtet, da es sich bei YAML Debug um ein Markup-Analysetool handelt und dieser ist im Normalfall in allen Browsern identisch. Demzufolge sollte man für seine Tests einen der o.g. voll unterstützten Browser verwenden.

Ich wünsche Euch viel Spaß mit dem Tool und freue über jegliches Feedback, sowohl hier in den Kommentaren als auch über die Projektseite.

Für Feedback (Meinungen, Bugmeldungen oder Wünsche für weitere oder verbesserte Funktionen) habe ich auf der Projektseite ein Kontaktformular eingerichtet, von welchem ihr hoffentlich rege Gebrauch macht. Die aktuelle Version 0.9 ist noch im Betastadium und ich möchte durch den öffentlichen Test mehr Informationen und vor allem Featurewünsche sammeln, um das Tool Schritt für Schritt zu vervollständigen. Ab YAML 3.1.1 wird es im Übrigen auch das bisherige debug.css ablösen.

Nachtrag: Als Spielwiese eignen sich besonders gut die YAML-Layoutbeispiele oder die Seite Einfach für Alle, die bereits mit WAI-ARIA angereichert ist und sich daher die Funktionalität des Tools dort sehr schön testen läst.

The long tail

Weblogs werden üblicherweise als 2- oder 3-Spalten-Layouts angelegt. Neben dem Hauptinhalt hat in den Randspalten der Sekundär-Content (Sidebar, Werbung, ect.) seinen Platz. Bei längeren Artikeln ist es mit den “Randinformationen” schnell vorbei und so macht sich der Artikel in seiner schmalen Spalte allein auf in Richtung Fußzeile. Besonders bei schmalen Bloglayouts verbleibt so auf größeren Bildschirmen ein schmales Inhaltsband neben endlosen ungenutzten Flächen. Ein Beispiel dafür ist dieser aktuelle Beitag bei den Webkrauts, der sich selbst auf meinem großen Bildschirm über 22! Bildschirmseiten zieht.

Ist man endlich bei den Kommentaren angelangt, schlägt der Standardhammer zu. Während Weblogbeiträge umgekehrt chronologisch ausgegeben werden (der neueste Beitrag zuerst), werden Kommentare üblicherweise in der Reihenfolge ihres Eintreffens (also chronologisch, mit dem ältesten beginnend) aufgelistet. Will man Beitrag und Kommentare vollständig lesen, ist diese Anordnung ideal, denn man fängt oben mit Lesen an und wenn man unten ankommt, hat man Beiträge und Kommentare vollständig überblickt. Leider liest man in dieser Form einen Beitrag nur ein einziges Mal.

Viel öfter hingegen verfolge ich Diskussionen in anderen Blogs, indem ich einen interessanten Beitrag immer wieder im Browser aufrufe, um die neuesten Kommentare zu lesen. Dabei ist es die Ironie des Schicksals, dass ich jetzt erst ganz ans Ende der Seite reisen muss, um die neuesten Kommentare zu lesen. Besonders bei interessanten und vielkommentierten Beiträgen empfinde ich das als lästig (siehe oben genannter Webkrauts-Artikel). Ebenso lästig empfinde ich Infomails für neue Kommentare oder Kommentar-Feeds. Weder möchte ich per Mail zugespammt werden, nur weil ich gerade 2..3 Diskussionen im Netz verfolge, noch will ich ständig meine Feedliste anpassen müssen. Es hat halt jeder seine Vorlieben, weswegen dieses Weblog selbstverständlich Kommentarfeeds und Emailbenachrichtigungen anbietet. Ich selbst verfolge die Diskussionen lieber direkt auf der Webseite mit und schaue dann gern auch ein/zwei Mal pro Tag vorbei.