30. September 2012
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.
Montag, 01.10.12 (23:50 Uhr)
Tolles Projekt! Danke, dass du den Mut hattest an der WYSIWYG-Situation etwas zu ändern und vor allem viel Erfolg damit! Ich werde es am WE mal ausprobieren – die flexiblen Mockups haben’s mir auf Anhieb angetan :-
Donnerstag, 11.10.12 (13:09 Uhr)
Hallo Dirk,
Gratulation! Eine Frage zum wirklich gut gemachten Erklärvideo - mit welchem Tool hast du das aufgenommen?
Danke!
Freitag, 12.10.12 (09:29 Uhr)
Hallo Martin,
für Screencasts nutze ich Camtasia. Das kostet zwar in der Anschaffung zwar einiges, ist es aber (insbesondere in der neuen Version 8) auch wert, weil die Möglichkeiten zur Nachbearbeitung wirklich sehr gut sind.