Weblog

Website Redesign

Zusammen mit den neuen Features des Builders hat auch die Thinkin’ Tags Website eine optische Auffrischung erhalten. Es ist luftiger und klarer strukturiert, das Logo und die verwendeten Schriften wurden optimiert und – passend zum Thema des Feature-Updates – ist es vollständig responsive. Natürlich basiert es auch weiterhin auf YAML 4, was sich in diesem Selbstversuch einmal mehr als hervorragende Ausgangsbasis für flexible, responsive Designs erwiesen hat.

Responsive Web Design gehört mittlerweile ins Repertoire jedes professionellen Webdesigners. Nicht weil alle Kunden mittlerweile danach fragen, sondern weil der Wandel bei der Nutzung des Internets über Mobilgeräten und Tablets ungebremst voranschreitet und heute erstellte Projekte dieser progressiv fortschreitenden Entwicklung heute und in der Zukunft Rechnung tragen müssen.

Für Thinkin’ Tags bedeute dieser Schritt eine Erweiterung der internen CSS-Engine. Diese konnte bisher bereits unterschiedliche Medientypen (screen, print, all) verarbeiten und ermöglichte damit bereits die komfortable Gestaltung der Druckdarstellung direkt im Browser. Media Queries waren also nur der nächste logische Schritt. Wichtig für den visuellen Arbeitsablauf von Thinkin’ Tags ist dabei, einen ausgewogenen Kompromiss zwischen Gestaltungsfreiheit für den Anwender und der notwendigen Kontrolle durch die Applikation zu finden. Daher stellt Thinkin’ Tags in der aktuellen Ausbaustufe vorkonfigurierte Media Queries für vier verschiedene Geräteklassen bereit:

• Geräte mit Viewportbreiten bis 480px (Smartphones)
• Geräte mit Viewportbreiten bis 768px (Tablets)
• Geräte mit Viewportbreiten oberhalb von 768px (Desktop/Notebooks - Defaut)
• Geräte mit Viewportbreiten oberhalb von 1200px (Widescreen-Displays)

Mit ein bisschen Erfahrung im Bereich Responsive Web Design erkennt man, dass der hier vorgestellte Aufbau der Media Queries sich am Konzept “desktop first” orientiert. Das liegt daran, dass YAML als bisher einziges unterstütztes, responsives CSS Framework seinerseits in der aktuellen Version 4.0.2. nach diesem Konzept entwickelt wurde. Es wird aber in absehbarer Zeit auch möglich sein, nach dem Prinzip “mobile first” zu arbeiten. An dieser Stelle möchte ich erwähnen, dass die Wahl der Herangehensweise zur Erstellung responsiver Layouts, speziell das Konzept “mobile first” massiv gehypt wird. Lässt man den ganzen Buzzword-Kram mal beseite,
so geht es bei der Entwicklung anpassungsfähiger Webseiten um eines bestmögliche Darstellung der Inhalte auf allen Geräteklassen, demnach also: content first.

Und diesem Denkansatz fühlt sich auch Thinkin’ Tags verbunden. Es ist nicht entscheidend, wie herum Sie ihr CSS aufbauen. Es ist entscheidend, dass Sie von Beginn die verschiedenen Geräteklassen und Viewportbreiten im Blick haben und in ihre Überlegungen zum strukturellen Aufbau des Layouts einbeziehen. Und das geht am besten, wenn der Zugriff auf die verschiedenen Viewportgrößen möglichst unkompliziert ist, denn den Testaufwand sollte niemand unterschätzen. Thinkin’ Tags erlaubt daher direkt in der Arbeitsoberfläche die Viewportbreite verschiedener Geräteklassen zu simulieren und gibt dem Anwender somit ein unmittelbares Feedback - ohne, dass das Layout bereits in einem so frühen Entwicklungsstadium immer wieder auf verschiedenen Endgeräten getestet werden muss. Das ist ein enormer Vorteil und ereichtert die Entwurfsarbeit gewaltig.

Das aktuelle Feature-Release trägt die Versionsnummer v0.4.0. Das deutet darauf hin, dass die Entwicklung auch im Bereich der RWD-Unterstützung erst an Anfang ist und noch viele Verbesserungen und neue Funktionen auf Ihre Umsetzung warten. Dennoch freue ich mich, das heutige Update nun endlich zum Testen freigeben zu können.

Übersicht der neuen Funktionen

• Unterstützung für CSS3 Media Queries zur Erstellung resonsiver Layouts
• Simulation der Viewportbreite für verschiedene Mobilgeräte, direkt aus der Applikation heraus
• Vier vorkonfigurierte Layoutgrößen: Phone, Tablet, Desktop, Widescreen
• YAML4 Beispiele “Simple Website” und “Flexible Grids” sind nun responsive
• Die Reihenfolge, in der die einzelnen Stylesheets ins Layout eingebunden werden, ist nun konfigurierbar
• Stylesheets können aus dem Layout entfernt und wieder eingebunden werden

Im offiziellen Release-Beitrag im Devblog von Thinkin’ Tags findet ihr auch einen hochauflösenden illustrierten Screenshot für die neuen Funktionen.

Wie immer wünsche ich allen viel Spaß mit der neuen Version. Wenn Euch gefällt, was ihr seht (oder auch nicht), sprecht und bloggt bitte darüber.

Seit heute morgen ist nun die nächste Stufe gezündet in der über ein Invite-System neue Testpiloten an Bord kommen können. Zunächst starte ich mit 500 freien Plätzen, wofür man sich über das “Request Invite” Formular auf der Startseite von Thinkin’ Tags bewerben kann. Im nächsten Schritt werden bestehende Nutzer selbst neue User einladen können, bevor es in der Beta-Phase die Anmeldung für alle Interessierten Nutzer zugänglich sein wird.

Bereits im Januar gab es einen ersten großen Schub neuer Funktionen und auch auch heute kann ich wieder einige Neuerungen verkünden. Denn ab sofort können die wichtigsten Funktionen innerhalb des Editors auch per Tastatur gesteuert werden.

Auswahl des aktiven Arbeitsbereiches

Über CTRL+ALT+1 bis 5 können die Arbeitsbereiche File, Markup, Screen, Typography und Print ausgewählt werden.

Wahl des Darstellungsmodus

Über CTRL+ALT+6 bis 9 kann zwischen den Darstellungsmodi Live, Structured, Linearized und Source umgeschaltet werden. Über CTRL+ALT+0 kann die Hervorhebung der semantischen Informationen ein- und ausgeschaltet werden.

DOM/CSS Inspector

Über CTRL+ALT+F12 kann der DOM/CSS Inspector aktiviert und deaktiviert werden.

Navigation im DOM

Sobald in der Arbeitsoberfläche ein Element selektiert wurde, kann per Tastatur durch das DOM navigiert werden. Über CTRL+Cursor Up und CTRL+Cursor Down kann das nächste bzw. das vorhergehende Geschwister-Element des aktiven Elements selektiert werden. Über ALT+Cursor Up erreicht man das Elternelement des aktiven Elementes und durch ALT+Cursor Down kann das erste Kind-Element des aktiven Elementes ausgewählt werden.

Das sind die verfügbaren Optionen für den Anfang. Innerhalb einer Webapplikation ist die Auswahl sinnvoller Tastaturkürzel nicht gerade einfach, weil das Betriebssystem, der Browser und ggf. im Browser installierte Erweiterungen bereits zahlreiche Tastaturkombination für sich beanspruchen und aus meiner Sicht eine Webapplikation diese übergeordneten Funktionen nicht blockieren sollte. Ich bin daher sehr gespannt auf Euer Feedback hierzu, denn ich möchte die Möglichkeiten der Tastatursteuerung möglichst eingängig gestalten und natürlich weiter ausbauen.

Mit dem heutigen Release wurde auch die Dokumentation des Projektes deutlich erweitert. Bereits vor einigen Wochen hatte ich ja über den Youtube-Kanal von Thinkin’ Tags berichtet. Nun stehen diese Videos auch direkt im Docs-Bereich in Deutsch und Englisch zur Verfügung.

Soweit der aktuelle Stand. Wie immer freue ich mich auf zahlreiches Feedback und nun natürlich auch auf viele neue Testpiloten.

Webentwickler sehen sich in der heutigen Zeit beeindruckenden technischen Möglichkeiten der Browser, aber auch deutlich gestiegenen Erwartungen und Ansprüchen seitens ihrer Kunden gegenüber. Um diese zu meistern, bedarf es der Anpassung der eigenen Arbeitsweise an die veränderte Wirklichkeit. Layout-Dummies in Photoshop mögen als Hochglanzdrucke auf weißem Karton im Rahmen einer Präsentation ob ihrer Perfektion beeindrucken, doch Sie geben uns (oder dem Kunden) keinerlei brauchbares Feedback über das Verhalten des Layouts in verschiedenen Umgebungen. Sie geben uns kein Gefühl über die Rendering-Geschwindigkeit von CSS3 auf Mobilgeräten mit nur mäßig schneller Hardware. Sie täuschen eine Qualität der Kantenglättung von Webfonts vor, die in realen Browsern (man denke nur an die Kombination: Firefox + Windows) nicht einmal ansatzweise erreicht wird. Sie vermitteln uns kein Gefühl für Ladezeiten.

Doch all das sind Fragen, für die nach einer Antwort verlangen und die auf dem klassischen Weg vom Photoshop-basierten Entwurf zur pixelgetreuen HTML-Umsetzung nach Abnahme des finalen Designs erschreckend spät beantwortet werden können. Der Grund dafür ist der Medienbruch in der Entwurfsphase, indem auf Werkzeuge aus dem Printbereich zurückgegriffen wird (Photoshop, InDesign, etc.), um das Design einer Website vom ersten Prototyp bis zum fertigen Design zu gestalten. Fehler in dieser frühen Projektphase bleiben so bis zur Umsetzung (ggf. sogar darüber hinaus) unbemerkt und sind nur unter großem Aufwand zu korrigieren.

Für all diese Probleme erscheint der Browser als Grundlage für die Entwurfserarbeitung eine sinnvolle Alternative. Die Leistungsfähigkeit der JavaScript- und CSS-Engines ist bei der aktuellen Browsergeneration ebenfalls gegeben, sodass ich mich für diesen Weg entschieden habe. Mehr dazu in der aktuellen ScreenGuide.

Die neue Optik betrifft dabei in erster Linie die Formular- und Navigationselemente. Ich persönlich finde sie deutlich weniger elegant, wodurch Bootstrap insbesondere für das Prototyping etwas von seinem Reiz verliert. Denn selbst wenn man sich die Twitter-nahe Optik so langsam satt gesehen hat, so sind die UI Komponenten doch nahezu perfekt aufeinander abgestimmt gewesen und damit erstellte Layout-Prototypen vermittelten einen hochwertigen – jederzeit vorzeigbaren – Eindruck. Diese Qualität von Bootstrap scheint im aktuellen Entwicklungsstadium etwas verloren zu gehen, denn die Entwickler ziehen den neuen Stil nicht konsequent durch. Insbesondere die Formularelemente sehen nun kontrastärmer und irgendwie ... unfertig aus.

Nun ist es so, dass auch ich bei YAML 4 das mitgelieferte Design in neutralem grau halte, weil dies für den Bau von Prototypen eine sinnvolle Ausgangsbasis ist, will man doch den Anwender nicht in Richtung eines bestimmten Farbschema drängen. Steht dann erstmal der eigentliche Layoutentwurf, werden die einzelnen Komponenten im Detail gestaltet. Bootstrap (ehemals Twitter Bootstrap) will sich in Version 3 offenbar weiter von seinen Wurzeln lösen und seine Anwender mit der “unfertigeren” Optik stärkerer zur Individualisierung ... nennen wir’s mal animieren, denn überall wird auch die nun “platte” oder neu-deutsch “flat” Optik auch nicht passen.

Das ist im Sinne der Eigenständigkeit des Frameworks und weniger uniformen “made with Bootstrap” Projekten zu begrüßen. Wenn ich mich recht entsinne arbeiten die beiden Entwickler auch gar nicht mehr bei Twitter. Dennoch war natürlich die ausgereifte Optik der UI Elemente bisher eines der ganz großen Pluspunkte. Die mit Bootstrap erstellten Oberflächen konnte man bisher meist ohne weiteres produktiv einsetzen. Ob das auch mit Version 3 so sein wird, bleibt abzuwarten – noch ist die Version 3 ja nicht fertig (wie man an einigen Komponenten leicht erkennen kann). Ich habe aber so meine Zweifel, ob der neue ... Draft-Look ... gleichermaßen gut angenommen wird. Von einem echten Flat-UI Design mag ich in diesem Zusammenhang eher nicht sprechen, denn dazu sind mir die Umstellungen im Design nicht konsequent genug. Bisher wurden in erster Linie die sanften Gradienten im Hintergrund entfernt und die Standardfarbe der Buttons ist nicht mehr weiß sondern grau. Ein neuer eigenständiger Stil ist das aber noch nicht.

Doch genau das bringt mich zu einem Problem, welches mich seit jeher an Bootstrap stört und welches wohl auch in Version 3 Bestand haben wird. Die Entwickler verzichten auch weiterhin auf eine Trennung von Funktionalität und Design im CSS. Bei YAML gibt es diese Trennung – aus gutem Grund. Die Funktionalität der Layoutbausteine steckt bei YAML in den Core-Dateien des Frameworks, während das Design (Theme) separat verwaltet wird. Dieser Ansatz hat seine Vorteile: Zum einen sind Anpassungen des Layouts bereits durch einfaches Austauschen einzelner CSS-Dateien erledigt (oder Sass-Dateien, so man mit dem Sass-Port von YAML arbeitet). Zum anderen sind Anwender frei in ihrem Workflow – speziell im Hinblick auf den Einsatz von CSS-Preprozessoren. Es ist also möglich, die Core-Dateien von YAML unverändert zu übernehmen, das eigentliche Design aber z.B. mit LESS oder Sass zu erstellen.

Bei Bootstrap gibt es diese Trennung bisher nicht. Zwar ermöglicht das hauseigene Konfigurationstool die Auswahl der Komponenten, ein Austausch des Layouts bedeutet aber immer auch den Austausch der Frameworklogik, weil eben alles miteinander verwoben ist. Das ist besonders dann ärgerlich, wenn man im Rahmen der eigenen Anpassungen vielleicht auch die eine oder andere Erweiterung hat einfließen lassen. Wer die Optik individualisieren will, ist so zwingend auf LESS angewiesen, unabhängig von den ggf. bestehenden Abhängigkeiten des eigenen Projektes.

Trotzdem ist es natürlich spannend zuzusehen, wohin die Entwicklung bei Bootstrap, Foundation & Co. geht. Schließlich macht man sich ja auch so seine Gedanken fürs eigene Framework.

Die Screencasts stehen sowohl in Deutsch als auch in Englisch zur Verfügung, wobei die deutschsprachige Playlist der Videodocs bereits 8 Screencasts umfasst, während die englische Playlist momentan erst 5 Videos enthält. Ich bin im Moment noch mit den Übersetzungsarbeiten beschäftigt und werde die die weiteren Screencasts dann Stück für Stück hochladen und freischalten.

Ach ja: Wer genau hinschaut, wird zu Beginn des ersten Screencasts ein leicht überarbeitete Startseite von Thinkin’ Tags erkennen, sowie ein “Request Invite” Formular. Das kommt nicht ganz von ungefähr, denn in Kürze möchte ich die Zahl der aktiven Nutzeraccounts deutlich erhöhen.