26. September 2012
Ich bin aufgeregt wie ein kleines Kind. Eine sehr sehr lange Zeit geht heute zuende, in der ich vor meinem Rechner saß und an meinem neuen Projekt gearbeitet habe. In dieser Zeit, die im Frühjahr 2009 begann, gab es immer wieder Verzögerungen (über ein Jahr ist seit dem ersten Aufruf an Tester vergangen), Unterbrechungen und auch den einen oder anderen Rückschlag zu verkraften. Aber die Idee blieb immer spannend und damit auch die Motivation hoch, weiterzumachen.
Heute ist es nun soweit, “Thinkin’ Tags” öffnet seine Pforten und steht ab sofort als “Public Alpha” zur Nutzung bereit. Dabei handelt es sich um einen visuellen Editor zur Erstellung von Website Prototypen bis hin zu vollständigen CSS Layouts. Entstanden ist “Thinkin’ Tags” aus dem Wunsch heraus, im YAML Builder mehr Gestaltungsfreiheit zu haben. Herausgekommen ist ein völlig neuer Ansatz, CSS Layouts vollständig im Browser zu entwerfen. Dieser Ansatz basiert auf dem Gedanken, dass ein visueller Workflow nur dann funktionieren kann, wenn die Applikation den Anwender zurückhaltend unterstützt. Diese Unterstützung besteht darin, dass die Layoutentwicklung auf Basis eines CSS Frameworks erfolgt und die Applikation die Funktionalität dieses CSS Frameworks kennt. Das führt dazu, dass es einerseits möglich ist, dem Anwender komplexe Layoutelemente in die Hand zu geben, um seinen Arbeitsfortschritt zu beschleunigen und gleichzeitig dafür Sorge zu tragen, dass unbedacht gewählte CSS-Eigenschaften die Funktionalität des Frameworks nicht unwissentlich behindern. Diese beiden Aspekte fehlten bisher sämtlichen visuellen Gestaltungsansätzen, weshalb das fröhliche Klicken und Schieben von Elementen mit einem enormen Kontrollverlust verbunden war. Thinkin’ Tags unterstützt momentan zunächst zwei CSS-Frameworks. Dies ist zum einen – Achtung: Überraschung – YAML 4. Zum anderen ist es Blueprint CSS. Bereits während der Entwicklung von Thinkin’ Tags hat sich jedoch gezeigt, dass simple Grid-Frameworks ohne eigene UI Komponenten den Entwurfsprozess nicht wirklich zu beschleunigen vermögen. Ich denke, hier wird die Erweiterung der Framework-Palette eher in Richtung Twitter Bootstrap und Foundation erfolgen, deren Implementation spannend ist, hinsichtlich des Prototypings für Oberflächen von Webapplikationen.
Mit dem heute erreichten Meilenstein, wird die Weiterentwicklung für mich noch spannender, denn das Nutzerfeedback wird entscheidend dafür sein, wohin sich Thinkin’ Tags zukünftig entwickelt. Eine Focussierung auf das Erstellen von Prototypen ist gleichermaßen denkbar, wie die volle Konzentration auf größtmögliche Freiheit für den Anwender, um CSS Layouts bis ins Detail auszuarbeiten, was das Projekt in Richtung einer echten IDE treiben würde. Was genau Thinkin’ Tags aktuell zu leisten im Stande ist, lässt sich in wenigen Worten nur schwer erklären. Deshalb meine Empfehlung: Schaut Euch den Screencast auf der Website an, dieser zeigt, was in 25 Minuten so alles möglich ist.
Deshalb erhoffe ich mir von diesem Public Alpha Release möglichst viel und detailliertes Nutzerfeedback darüber, was Thinkin’ Tags heute schon ist, was der Applikation fehlt und wo ihr – insofern sie Euch gefällt – ihren zukünftigen Platz im Workflow der Frontendentwicklung seht.
Für den Moment lehne ich mich also ein wenig zurück und freue mich auf Euer Feedback. In den kommenden Tagen und Wochen werde ich dann im Detail über das eine oder andere Feature, bzw. über deren technische Hintergründe berichten, denn in Sachen Applikationsentwicklung mit JavaScript ist das schon ein ordentlicher Brocken geworden.
Mittwoch, 26.09.12 (12:35 Uhr)
Mein Glückwunsch, dass Du es endlich geschafft hast, dieses Projekt live zu bringen. Ich bin auf die Resonanz gespannt.
Mittwoch, 26.09.12 (13:15 Uhr)
Na dann nix wie ran und testen :-)
Vorab ein großes Danke!
Eric.H
Mittwoch, 26.09.12 (13:55 Uhr)
Ich bin nicht mehr so überrascht wegen der Veröffentlichung, du weißt warum. Ich drücke dir Daumen, viel Resonanz und Kraft.
Mittwoch, 26.09.12 (22:20 Uhr)
Das Video ist nicht Dein ernst, oder? Das löst ja epileptische Anfälle aus.
Mittwoch, 26.09.12 (22:38 Uhr)
@ZIP
Gibt’s ein Problem? Was ist los?
Donnerstag, 27.09.12 (10:14 Uhr)
Kaputt ist nichts, ich finde es einfach nur viel zu schnell im Ablauf, um dem Thema angenehm folgen zu können ;-)
Donnerstag, 27.09.12 (10:35 Uhr)
@Zip
Es sind mehrere kurze Screencasts in Vorbereitung, worin die einzelnen Features beschrieben werden. Dieses Video ist eine bewusste Zeitraffer-Aufnahme.
Donnerstag, 27.09.12 (12:09 Uhr)
Okay, danke! Ich bleib dran… sieht spannend aus.
Donnerstag, 27.09.12 (20:26 Uhr)
Eigentlich bin ich nicht so der Fan von Editoren aber dieser haut mich aus den Socken, obwohl ich ihn gerade erst eingeschaltet habe. Ich bin jetzt schon begeistert und werde noch ein wenig herumprobieren. Danke für den Artikel!
Donnerstag, 27.09.12 (23:27 Uhr)
Erste, oberflächliche und unsortierte Eindrücke, getestet in Firefox Nightly:
- Dass man direkt ohne Anmeldung loslegen kann ist sehr gut.
- Placeholder-Text hat in fokussierten Textfeldern dieselbe Farbe wie echter Text, sehr verwirrend. Sollte immer low contrast bleiben. (Ich sehe jetzt, dass das zumindest im Chrome besser ist.)
- Im Dialogfeld mit dem Projektnamen-Textfeld kann man im Textfeld nicht Enter drücken, um das Dialogfeld zu schließen.
- Die Haupt-UI braucht unbedingt einen First-Run-Modus, indem ungefähr gezeigt wird, was zu tun ist. Ich weiß immer noch nicht wirklich, wie die Bedienung funktioniert.
- Beispiel: Bis ich darauf gekommen bin, im neuen Projekt bei der index.html auf OPEN zu drücken, hat es gedauert. Vielleicht sollte die einzige Datei eines neuen Projektes sich automatisch bei Projektaufruf öffnen, damit man gar nicht erst in den Modus gelangt, in dem alle Buttons deaktiviert sind.
- Die ViewMode-Umschalt-Navigation oben rechts ist sehr schwer zu bemerken, wenn man nicht weiß, dass man sie braucht. Außerdem ist ihre Wirkung unvorhersehbar. Bevor ich sie Wort für Wort durchgelesen habe, habe ich sie für eine Navigation gehalten, mit der man aus dem Editor wieder herausgelangen kann, zu anderen Bereichen der Hauptseite. Vielleicht muss sie mehr nach Buttons als nach Links aussehen, ich weiß nicht. Außerdem ist ihre Funktionsweise unintuitiv: Sie tauscht die äußeren Panels aus, aber nicht das, was in der Mitte angezeigt wird. Normale Umschaltbuttons (zumindest die, die ich aus anderen UIs gewohnt bin) haben ein geschlossenes Rechteck, auf das sie wirken. Das war wahrscheinlich der Grund, warum ich beim Klick auf einen dieser Links damit gerechnet habe, dass die komplette Seite unter der Navigation ausgetauscht wird.
- Elemente im linken Panel, die man in die Seite herausziehen kann, sehen auch im deaktivierten Zustand noch benutzbar aus, weil nur das Icon halbtransparent ist aber der Text immer noch weiß (full contrast). Das frustriert, wenn man denkt, man könnte ein Element rüberziehen, es aber dann doch nicht klappt. (Außerdem sollte hier die browsereigene Möglichkeit des image draggings irgendwie abgestellt werden, das auch deaktivierte Elemente ziehbar macht.)
- Ich musste mir den Anfang des Videos drei mal angucken, bevor ich gecheckt hatte, dass ich die Page Layout-Module nicht einfach in den weißen Teil in der Mitte ziehen kann, sondern erst das Body-Element orange auswählen muss, bevor es geht.
- Die Splitter zwischen den Spalten reagieren etwas träge. Wenn man sie schnell zieht und schnell loslässt, bemerken sie oft gar nicht, dass sie gezogen wurden.
- Auf der Startseite muss das Video definitiv prominenter platziert sein, und man muss dazu aufgefordert werden, es sich anzugucken, bevor man anfängt, mit dem Editor zu spielen. Sonst sitzt man (wie ich) vor einer Benutzeroberfläche, von der man keine Ahnung hat, wie man sie bedienen soll, und das ist einfach zu frustrierend.
- Das Video wirkt zu hektisch und zu steril weil man keine Stimme hört. Außerdem klingt die Musik totkomprimiert.
Ansonsten ist das Tool bestimmt sehr vielversprechend, ich konnte mir wegen der anfänglichen Hürden nur leider noch kein genaueres Bild davon machen.
Freitag, 28.09.12 (09:53 Uhr)
@Markus
Wow, danke für die umfangreiche Rückmeldung. Du legst im positiven Sinne den Finger auch in die Wunde, denn die Entwicklung einer schlüssigen UI ist aus meiner Sicht der schwerste Teil des Projektes. Die richtigen UI Patterns zu finden, geht an vielen Stellen nur über User-Tests. Einige übliche UI Patterns von Desktopapplikationen können sich im Browser völlig falsch anfühlen (z.B. das Öffnen von Dateien per Doppelklick). An anderen Stellen, kommt man mit webtypischen UI Patterns nicht weiter und muss Desktop-Patterns nachbauen, um ein angenehmes Arbeitsgefühl zu erreichen (z.B. der CSS-Editiermodus im CSS-Inspector) .
Deshalb ganz lieben Dank für dieses Feedback, denn genau diese Infos brauche ich, um zu lernen, was wie am besten verstanden wird.
Dienstag, 06.11.12 (12:21 Uhr)
Wahnsinn. Ich bin wirklich begeistert.