High Resolution Weblog

Vor wenigen Tagen ging Thinkin’ Tags nach dreijähriger Entwicklungsarbeit endlich live. Nachdem auch dieser Schritt recht reibunglos ablief ist jetzt ein guter Zeitpunkt, dass ich ein paar Worte über meine Motivation und die Zielrichtung dieses Projekts verliere.

Motivation

“Da geht noch mehr!”. So dachte ich im Somer 2008, wenige Monate nachdem ich die Version 1.0 des YAML Builders veröffentlicht hatte, der seinerzeit neben dem bis heute unveränderten YUI Grid Builder ziemlich alleine stand mit seiner Funktionalität. Mittlerweile gibt es einige Projekte dieser Art, z.B.  Jetstrap oder auch einige Wordpress-Themes mit visuellen Anpassungsmöglichkeiten (z.B. Elegant Builder). Was mich jedoch bereits damals störte, war der Umstand, dass man mit diesen Buildern auf recht einfache Weise das HTML-Gerüst eines Layouts zusammenstellen konnte, CSS jedoch außen vor blieb. Letztlich konnte man sich also einen groben Rohbau einer Seite zusammenklicken, landete anschließend aber doch im Texteditor seiner Wahl, in dem 90% der eigentlichen Arbeit erledigt wurden. "Webseiten bauen ist halt Handarbeit!" – sagt einem schließlich jeder professionelle Webentwickler.

Klar ist es das. Aber nicht, weil es per Definition nicht anders ginge, sondern weil jeder halbwegs gescheite HTML-Bastler nur allzu schnell festgestellt hat, dass visuelle Editoren ala Frontpage, Dreamweaver, Expression Web, usw. auf diesem Wege absolut unbrauchbaren Code generieren. Das wiederum hat seine Ursache darin, dass diese Editoren dem Anwender kein Regelwerk zur Layoutgestaltung an die Hand gaben und WYSIWYG allzu wörtlich verstanden. Div, header oder section Elemente haben eben nicht nur gestalterische Aufgaben, sondern sie sind strukturbildend. Und eben diese Strukturen sind es, die WYSIWYG Editoren (auch die meisten webbasierten Drag & Drop-Tools) bisher nicht abbilden und weshalb qualitätsbewusste Frontendentwickler sie meiden wie der Teufel das Weihwasser.

Was die Regelwerke zur Layoutgestaltung angeht, so hat sich die Situation seit 2008 nachhaltig geändert. Heute bilden in der Regel CSS Frameworks das strukturelle Rückgrat von CSS Layouts. CSS Frameworks sind Bausätze mit vorgefertigten Bausteinen, mit denen sich unter definierten Randbedingungen, schnell robuste und crossbrowsertaugliche CSS Layouts erstellen lassen. Und ganz nebenbei:  Solche Regelwerke lassen sich ganz wunderbar programmieren.

Hinzu kommt, das mit heute verfügbaren hardwarebeschleunigten Browsersupport von CSS3-Eigenschaften (runde Ecken, Schatten, Verläufe, Transformationen, Animationen, usw.) und den zahllosen Webfonts die Voraussetzungen gegeben sind, den Gestaltungsprozess vollständig in den Browser zu verlegen. Photoshop ist verzichtbar geworden, denn Paradigmen wie Graceful Degradation und Progressive Enhancement haben sich vielfach durchgesetzt, weshalb ein Design im veralteten IE7 eben nicht genauso aussehen muss wie im aktuellen Firefox oder Chrome und weshalb es auch nicht mehr notwendig ist, jedes optische Detail vorgerendert als Grafik einzubinden.

Nun trifft es sich, dass ich zum einen mit YAML seit fast 7 Jahren ein solches Layout-Regelwerk pflege und aus den Erfahrungen bei der Programmierung des YAML Builders der Meinung war, dass sich die Struktur eines Layouts in einem browserbasierten Editor durchaus sinnvoll visuell aufbereiten lassen würde. Dies (mindestens mir selbst) zu beweisen, ist die Motivation hinter Thinkin’ Tags.

Browserbasierte Layoutentwicklung

Damit ist auch die Aufgabe von Thinkin’ Tags umrissen. Ein browserbasierter HTML/CSS Editor, der schnell zu sichtbaren vorzeigbaren Ergebnissen führt (also ähnlich der Photoshop-Vorlage), dessen Grundlage jedoch bereits aktuelle Webtechnologien bilden, womit das Ergebnis (der entstehende Code) direkt weiterverwendet werden kann.

Die Layoutentwicklung im Browser hat folgende Vorteile:

Ganzheitliche Konzeption

Die Gliederung der Inhalte, die Struktur des Markups und die Positionierung der Elemente im Layout greifen unmittelbar ineinander. Konzeptionelle Schwächen im Design oder der Layoutstruktur werden frühzeitig erkannt.

Kein Medienbruch

Die Prototypen entstehen imBrowser. Sie verhalten sich wie normale Webseiten (z.B. Skalierung) und geben das unverfälschte Erscheinungsbild (Schrift-Rendering, Textfluss) wieder. Entwurf und Umsetzung orientieren sich an den technischen Rahmenbedingungen des Mediums.

Robuste Codebasis

Die Prototypen basieren auf robusten, erprobten CSS Frameworks. Die Quelltexte der Prototypen können daher im Gegensatz zum Output anderer Mockup/Prototyping-Lösungen direkt für den Produktiveinsatz weiterverwendet werden. Ein Nachbau der Prototypen in sauberem HTML entfällt.

Codegenerierung

Alle Quelltexte (HTML/CSS) werden automatisch generiert und wohlgeformt formatiert. Der Validierungsaufwand kann dadurch auf ein Minimum reduziert werden.

Ausrichtung und Zielgruppe

Nun ist Thinkin’ Tags da - doch wer wird es benutzen? Sowohl reine Grafiker als auch Frontendentwickler, die in erster Linie vom Designer gelieferte, fertig mit dem Kunden abgestimmte Designs in HTML und CSS umzusetzen, werden wahrscheinlich am wenigsten von dem visuellen Workflow profitieren (ausgeschlossen ist es jedoch nicht).

Sobald jedoch Gestaltungsaufgaben und die konkrete Umsetzung in eine Hand fallen, wird ein Workflow, wie ihn Thinkin’ Tags bietet, reizvoll. Somit kann "Thinkin’ Tags" für Freelancer und kleine Teams eine wertvolles Werkzeug sein. Beispielhaft seien hier einige Aufgabenstellungen vorgestellt:

Gestaltung der Typographie

Durch den direkten Zugriff auf Googles Web Font Library stehen dem Anwender über 500 verschiedene Schriften zur Verfügung. Über eine komfortable UI lassen sich Schriftgrößen, Abstände und Weißraum schnell und einfach variieren, wobei die Applikation ein unmittelbares visuelles Feedback gibt.

Semantische Gliederung der Inhalte

Je komplexer ein Layout wird, desto anspruchsvoller wird auch die semantische Gliederung der Inhalte. Überschriftenhierarchien und die semantische Struktur des Layouts lassen übersichtlich sich am Bildschirm planen. Für den Entwurf responsive Layouts ist die Quelltextstruktur von besonderer Bedeutung. Der auf modernenen Webtechnologien basierende Gestaltungsansatz von Thinkin’ Tags sorgt dafür, dass diese Randbedingungen bereits im Entwurfsstadium die notwendige Berücksichtigung erfahren.

Wireframes/Mockups

Layoutskizzen lassen sich mit wenigen Handgriffen anlegen. Zwar stehen in der aktuellen Alphaversion noch sehr wenige vorgefertigte UI Elemente zur Verfügung, doch der erzeugte Code kann im Gegensatz zu Tools wie Balsamiq oder Axure weiterverwendet werden, sodass der Mehraufwand der nachträglichen HTML-Umsetzung entfällt und sich der Einsatz dieser Entwurfshilfsmittel auch bei kleineren Projekten lohnt.

Wem eine dieser Aufgaben aus seinem Arbeitsalltag bekannt vorkommt, sollte einen Blick auf Thinkin’ Tags werfen, wobei der code-nahe Entwurfsansatz sicherlich HTML/CSS-erfahrenen Webdesignern sicherlich näher liegt als Konzeptern und Grafikern, die bisher mit Tools wie Photoshop, Fireworks oder InDesign gearbeitet haben.

Noch ein Wort zum Slogan "Rapid Prototyping on a production-ready code basis": Zu diesem Statement stehe ich selbstverständlich, denn meine Erfahrungen mit Testprojekten auf Basis von YAML haben gezeigt, dass sich das Markup durchaus bis an die Produktionsreife innerhalb der Applikation entwickeln lässt. Vergleichbares gilt für das CSS, wobei bisher bewusst auf z.B. das automatische Zusammenfassen und Minifizieren des Codes verzichtet wird, schon weil keine zu enge Abhängigkeit zur Applikation entstehen soll und eine einfache Weiterbearbeitung der Projekte auch außerhalb von Thinkin’ Tags möglich sein soll.

Wohin geht die Reise?

Zunächst gilt es, vom aktuellen Alpha-Status in eine Beta zu gelangen. Das bedeutet, alle für die finale Version 1.0 geplanten Features zu implementieren. In der öffentliche Betaphase wird es für alle Anwender möglich sein wird, einen eigenen Nutzeraccount anzulegen und somit den vollen Funktionsumfang des Dienstes kennenzulernen und zu nutzen.

Während dieser Phase möchten wir im Dialog mit den Nutzern die Akteptanz möglicher Bezahlmodelle ausloten, denn machen wir uns nichts vor: Auf Dauer werden wir diesen Dienst nicht vollständig kostenlos anbieten können. Es wird in jedem Fall eine dauerhaft kostenfreie Nutzungsmöglichkeit des Dienstes geben, die dauerhafte Pflege und die Weiterentwicklung dieses Dienstes wird jedoch nicht ohne ein kostenpflichtiges Premium-Modell möglich sein. Nahere Information dazu wird es zum Start der Beta geben.

Technik und Team

Abschließend noch ein paar Worte zur Technik hinter Thinkin’ Tags. Der eigentliche Builder ist eine auf HTML5 basierende Web-Applikation. Unter der Haube verrichtet jQuery seinen Dienst. Als UI Bibliotheken kommen das UI Layout-Plugin, sowie jQuery UI zum Einsatz, wobei der Großteil der UI Elemente von Hand programmiert ist, um die performancekritische Aktualisierung der Benutzeroberfläche vollständig unter Kontrolle zu haben. Die Applikation nutzt weiterhin Modernizr und die Webshims Library von Alexander Farkas, um die HTML5 Features wie beispielsweise Datalists browserübergreifend nutzen zu können. Serverseitig basieren die Website und Applikation sinnvollerweise auf Node.js und MongoDB. Der Datenaustausch, wie auch die Verlagerung einzelner Aufgaben vom Frontend ins Backend ist damit außerordentlich bequem. Während die eigentliche Builder-Applikation vollständig in meinen Händen entstand, unterstützt mich Timo Derstappen auf der Serverseite nach Kräften. Das Screenlayout der Website basiert auf einem Entwurf von Andreas Jacob, die Umsetzung mit YAML lag anschließend wieder bei mir. Die Betreuung der Hardware und die gesamte Einrichtung des Servers und des automatischen Deployments liegt in den den Händen von Timo Panitz von Itratos.