16.02.2017

Im ersten Teil unserer Entwickler-Serie haben wir Ihnen Pattern Lab als Styleguide und Production Tool vorgestellt. Bei der konkreten Anwendung für TWT Kundenprojekte konnte die Abstimmung mit dem Projekt-Team sowie den Kunden vereinfacht und beschleunigt werden. Entscheidungen erfolgen schneller und der Entwicklungsprozess wird optimal unterstützt. Darüber hinaus wurde es für einige Kunden möglich, durch die Programmierung von Schnittstellen zwischen konkreten Content Management Systemen (CMS) und Pattern Lab die Effizienz bei der Template-Übernahme extrem zu steigern und eine schnellere Time-to-Market zu erreichen.

Einheitliche Template-Sprache für einfache Pflegbarkeit

Im Pattern Lab wird Mustache standardmäßig als Templatesprache verwendet. TWT verwendet diese in allen Projekten, die auf Pattern Lab basieren, für die Gestaltung der Templates. Dies ermöglicht, dass das Template später ohne großen Aufwand in das Content Mangement System (CMS) des Kunden übernommen werden kann.

Dazu werden bei der Entwicklung Mustache-Variablen, die als Platzhalter dienen, dort in die Vorlage geschrieben, wo später die Original-Inhalte des Kunden platziert werden sollen. Neben den Dummy-Texten werden im Pattern Lab auch durch die Variablen festgehalten, wo zukünftig beispielsweise ein Bild auf einer Website zu sehen sein soll.

Pattern Lab zu CMS Import

Nach der Erstellung des Template im Pattern Lab wird die Vorlage in das CMS des Kunden übertragen. Hier gibt es zwei Möglichkeiten des Imports.

Zunächst kann der Template Code per Copy/Paste in das System übertragen werden. Hierbei unterstützt Pattern Lab durch die klare Darstellung der generierten Code Schnipsel, der Möglichkeit, Beschreibungen für die Verwendung per Annotation hinzuzufügen und das gerenderte HTML, CSS und Javascript direkt darzustellen. Eine weitere Methode, die TWT bereits für und mit Kunden umsetzen konnte, ist der Transfer durch einen Importer, der speziell für die Integration des Pattern Lab Templates in ein CMS entwickelt wurde. Auf diese Weise wird das Template automatisch in das CMS übertragen. Manuelles Einsetzen des Codes wird damit hinfällig. Dies bringt eine erhebliche Zeitersparnis für die Entwickler.

Durch den Import ändert sich bei beiden Vorgehensweisen nur der Template Code und nicht die Integration in das CMS selbst. Der Kunde sieht weiterhin anhand der Dummy-Texte und anderer Platzhalter, wo er seine Inhalte einfügen kann. Durch das Zusammenspiel von Template und Original-Inhalten ergibt sich das letztendliche Design einer Website.

In konkreten Fällen arbeitete TWT für den Import mit Schnittstellen für die Content Management Systeme FirstSpirit, WordPress und Drupal zusammen. Für das Projekt Handelsblatt Global Edition wurde das Design des Online-Magazins zunächst im Pattern Lab erstellt. Der WordPress-Importer ermöglicht es, Agentur und Kunden die Original-Inhalte in kurzer Zeit an den, dafür vorgesehenen Platz zu übertragen.

Handelsblatt Global Edition im Pattern Lab

Fertige Seite der Handelsblatt Global Edition

Patterns können für spätere Projekte verwendet werden

TWT nutzt Pattern Lab als Tool zur Entwicklung flexibler Vorlagen für Kunden-Webseiten. Bei der Programmierung werden, dem Corporate Design des Kunden entsprechend, Farben und Schriftarten im Pattern Lab hinterlegt. Diese können dann bei weiteren Entwicklungsschritten eingesetzt werden. Eine abgeschlossene Pattern Lab-Vorlage kann auf Nachfrage den Kunden für ein weiteres Projekt als Vorlage dienen. Sollen beispielsweise bestimmte Teile der Webseiten-Struktur beibehalten werden, ist dies möglich ohne dass eine Seite komplett neu programmiert werden muss.

Für ein neues Projekt ist es auf diese Weise nicht mehr erforderlich, eine komplett neue Programmierung vorzunehmen. Pattern Lab dient hier als “Living Styleguide” und Baukasten für die Entwicklung, der jederzeit den gestalterischen Ansprüchen und dem Corporate Design des Kunden genügt.

Pattern Lab wird dabei einerseits genutzt, um komplexe Webseiten für Kunden zu realisieren, gleichzeitig werden Templates programmiert, die dann an den Kunden weitergeben werden. Dieser könnte sie wiederum an einen weiteren externen Dienstleister geben. Die unabhängige Gestaltung der Front- und Backends durch verschiedene Service-Anbieter ist problemlos möglich.

Pattern Lab als Standard für Web-Entwicklung

TWT hat die Arbeit mit Pattern Lab zum Standard gemacht. Auf diese Weise gestaltet sich die interdisziplinäre Zusammenarbeit einfacher. Gleichzeitig ist für Kunden einfacher nachzuvollziehen, wie einzelne Bestandteile einer Webseite entstehen. Besonders auf lange Sicht ergeben sich durch das Pattern Lab Vorteile, da ein Template gespeichert wird und für weitere Projekte immer wieder verwendet werden kann.

Auch Sie wollen die Vorteile von Pattern Lab effektiv nutzen? Dann kommen auf uns zu.