Donnerstag,
23. Mai 2013

Heute geht das zweite große Feature-Update für Thinkin’ Tags online. Die Zahl der Neuerungen ist nicht so umfangreich beim letzten großen Release im Januar, dafür handelt es sich um eine langerwartete Erweiterung des Funktionsumfangs. Das Update steht ganz im Zeichen von “Responsive Web Design”.

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.


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.