Bloggen wie bei Tumblr mit HTMLy

23.02.2017

Das Flat-File-System HTMLy eignet sich perfekt für Tumblr-Konzepte. Jetzt gibt es dazu auch das passende Autoren-Dashboard.

HTMLy ist ein kleines, feines Flat-File-System für einfache und schnelle Blogs. Und mit dem Konzept unterschiedlicher Post-Typen (Image, Video, Audio, Quote, Link, Text) eignet sich HTMLy perfekt für Blogs im Tumblr-Stil. Einziges Problem: Das Autoren-Dashboard von HTMLy wirkte bislang für meinen Geschmack etwas lieblos und chaotisch:

Das Dashboard von HTMLy

Da sich mein aktuelles Projekt an web-redaktionelle Laien richtet, sollte das System so selbsterklärend wie möglich sein. Schließlich will ich nicht immer wieder von neuem die Bedienung erklären müssen, denn das kostet allen nur unnötig Geld und Zeit. Also habe ich das Dashboard so umgebaut, dass es aus meiner Sicht relativ selbsterklärend ist. Hoher Initialaufwand, der sich mit der Zahl der Projekte vielleicht wieder rentiert.

Neues Dashboard für HTMLy

Bei der Umgestaltung des Dashboards half ein ganz einfacher Usability-Trick: Nimm dir zehn Karten, schreibe die typischen Arbeitsschritte des Redakteurs auf und sortiere die Karten danach, wie oft die einzelnen Arbeitsschritte nach dem Einloggen anfallen. Das habe ich natürlich nicht physisch gemacht, sondern nur im Kopf durchgespielt. Und so sah das fiktive Ergebnis aus:

  • 60 Prozent: Einen neuen Blog-Beitrag erstellen.
  • 15 Prozent: Einen bestehenden Beitrag oder Entwurf bearbeiten.
  • 10 Prozent: Erstmal einen Kaffee holen.
  • 5 Prozent: Wieder ausloggen.
  • 3 Prozent: Eine neue statische Seite anlegen oder editieren.
  • 1 Prozent: Neue Taxonomien anlegen.
  • 0.5 Prozent: Mein Profil verändern.
  • 0.25 Prozent: Irgendwas in der Konfiguration, an Widgets, Plugins oder sonstigen Tools ändern.
  • 0.00001 Prozent: Einen Update durchführen.

Die fehlenden Prozent sind bei der Glättung irgendwie verloren gegangen.

Klar, das Ergebnis ist fiktiv und nicht zu 100% repräsentativ. Dennoch ist es eine traurige Gewissheit, dass 95 Prozent aller CMS-Dashboards bei diesem simplen Test gnadenlos durchfallen würden. Zumal die meisten Dashboards von Content Management Systemen nicht als Redaktions-Dashboards konzipiert, sondern als Administrations-Dashboards entwickelt wurden. Bei einigen Systemen (ich nenne jetzt keine Namen), gleicht das Dashboard für die Haupt-Protagonisten (ja, das ist der Redakteur) eher einer Klickhöllen.

Nun gut, auch meine Lösung ist nicht perfekt und vor allem auf einen bestimmten Use-Case zugeschnitten. Aber für diesen speziellen Use-Case eignet es sich glaube ich schon recht gut, weil es eben extrem reduziert und fokussiert ist.

Reduziert und aufgehübscht wurden auch die Eingabe-Formulare zur Beitragserstellung. Kategorien, Tags, Datum und URL sind erst einmal ausgeblendet, weil die einfachsten Konzepte auch ohne diese ganzen Angaben funktionieren. die Format-Buttons wurden durch Font-Icons ausgetauscht, um den Gesamteindruck etwas aufzufrischen:

Beitrag erstellen mit HTMLy

Einzig bei dem Eingabefeld für die Feature-Elemente Image und Link habe ich etwas draufgesattelt: Statt Copy & Paste oder Markdown-Codes lassen sich diese Inhalte per Button integrieren. Umgekehrt kann man beim Haupt-Eingabefeld die Button-Reihe individuell ein- oder ausblenden, auch wenn dazu etwas JavaScript notwendig ist.

Als Anwendungsbeispiel habe ich das Theme "Lingonberry" von WordPress nach HTMLy portiert, da das Theme so wunderschön auf unterschiedliche Post-Typen reduziert ist. Es gibt nur zwei kleine Änderungen: Die Navigationsbar oben ist im Vergleich zum Original immer eingeblendet und es gibt im eingeloggten Zustand im Frontend Buttons zum Erstellen neuer Beiträge oder zum Editieren bestehender Beiträge. Ich habe die Änderungen zwar bei HTMLy als Pull Request angeboten, glaube allerdings nicht so recht, dass HTMLy die Änderungen übernehmen wird. Falls nicht, würde ich später meinen Fork zur Verfügung stellen, allerdings würde ich dann weder Support machen, noch irgendwas garantieren…

Lingonberry mit HTMLy

Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.