“Mr. Scott, veranschlagen Sie die Reparaturzeiten übrigens immer viermal so lange, wie nötig?
Natürlich Sir. Sonst würde ich ja meinen Ruf verlieren, dass ich echte Wunder vollbringen kann.”
– Star Trek III: Auf der Suche nach Mr. Spock – 1984
Wir sind einen langen Weg gegangen, Holodeck ist die dritte Version einer Pattern-Library, dass wir hier bei sipgate verwenden. Version ist hier vielleicht nicht ganz richtig, denn Holodeck ist die Implementation unserer Pattern-Library im Content Management System WordPress.
Es hat nicht unbedingt wenig Zeit gekostet und es gab durchaus viele Schwierigkeiten, doch heute sind wir an einem Punkt, an dem wir ein funktionierendes, getestetes System haben, mit dem jeder, wirklich jeder bei sipgate eine Website bauen kann.
Pattern-library
Ist unser eigentliches Design, welches einzelne Patterns beinhaltet, die dazu dienen eine Webseite nach Zweck zu bauen und unserer CI unterliegen.
Holodeck
Ist eine Implementation der Pattern-Library, im CMS WordPress. Es bildet die technische Schnittstelle zwischen Pattern-Library und User-Interface im CMS.
Holodeck ist ein Produkt für sipgate Mitarbeiter. Es ermöglicht ihnen Websites zu shippen (live zu stellen). Diese Websites entsprechen unserem Corporate Design und sind nach Zweck aufgebaut. Unsere Pattern-Library ist dabei unabhängig von WordPress. Zwar gibt es die CMS-Implementation, dennoch aber ist jedes Pattern unabhängig und co-existiert in HTML, SCSS und Javascript. So können wir jederzeit darauf reagieren, sollte der Bedarf entstehen ein anderes CMS zu nutzen.
Design-Patterns, nicht Atomic-Design
Wir haben lange Zeit versucht mit Atomic-Design unsere Pattern-Library nutzbar zu machen. Daran sind wir gescheitert, denn Atomic-Design hat Schwächen.
Man unterhält sich darüber, welches Pattern ein Atom oder Molekül ist, statt über den eigentlichen Zweck des Patterns zu reden. Zum Thema, warum unsere Pattern-Library kein Atomic Design mehr nutzt könnt ihr hier lesen.
Außerdem gibt es auch einen Artikel dazu, wie wir bei sipgate patterns bauen: Zum Artikel: Wie wir bei sipgate design-patterns erschaffen.
Was genau ist Holodeck?
Die eigentliche Implementation dieser Patterns geschieht über WordPress und CustomFields. Wir arbeiten auch hier ständig an einer Verbesserung der Implementation. Dennoch ist der jetzige Stand bereits das Proof of concept. Denn jeder bei sipgate kann nun Webseiten erstellen. Holodeck ist bereits länger im Einsatz und das Erstellen funktioniert in einer Geschwindigkeit, die vorher undenkbar war. Egal ob Dev, Marketing, Texter, UXer; Holodeck ist für jeden.
Beim Bearbeiten einer Seite unterteilen wir Holodeck je nach Template in mehrere Bereiche. Es gibt zum einen die Stage [oft auch Header genannt; einleitender Bereich einer Website] in verschiedenen Versionen zur Auswahl. Im Content-Bereich kann aus über dreißig Patterns ausgewählt werden. Diese werden dann über verschieden Text- und Optionsfelder im WordPress-Backend befüllt. So kann jede Seite individuell gestaltet werden, liegt aber dennoch innerhalb unseres Design-Systems.
Was wir damit alles lösen
Wir haben SEO-Fallbacks und eigene SEO-Felder, so stellen wir sicher, dass wenn eine Seite geteilt wird, diese auch immer anständig in sozialen Netzwerken dargestellt wird. Hat der Redakteur sich nicht darum gekümmert, gibt es immer noch die Voreinstellung. Es gibt auch Newsletter Optionen, hier muss man dann nicht schon wieder überlegen, welches System man jetzt wo bucht und wie man das Ganze einbaut. Hinzu kommen Einstellungen für Logos, Anzeigen-Bilder und Texte für Social-Media, so gibt es einen zentralen Ort an dem alle Einstellungen gemacht werden können – und das ohne Code.
Die Revisionen der Seiten und Beiträge, WYSIWYG Textbearbeitung helfen Redakteuren in kürzester Zeit Content bereit zu stellen und zu bearbeiten. Da ist aber noch mehr: Hintergrundoptionen, befüllbare Menüs und selbst die Produkt-Farbe ist einstellbar. So braucht man keinen Entwickler für seine Seite und kann das Grund-Design selbst bestimmen.
Der große Nutzen unseres Holodecks spiegelt sich aber nicht nur bei der Erstellung von Websites wieder. Bei der Arbeit am Redesign von sipgate und somit auch aller Websites, stellen wir Holodeck auf eine neue Version um. So erhalten alle bestehenden Seiten, die mit Holodeck gebaut wurden, automatisch das neue Design. Ein Beispiel: sipgate.io konnte komplett im Holodeck nachgebaut werden – in unfassbaren 85 Minuten. Vorher hätte das mehrere Tage gebraucht.
Holodeck ist unser internes Produkt
Im Team KRK sehen wir unsere Mitarbeiter als unsere Kunden, aus dieser Perspektive heraus entwickeln wir das Holodeck weiter, um jedem zu ermöglichen unsere Webseiten auszubauen.
2 Kommentare
fwolf:
Randbemerkung: Es ist ja schön und gut, dass ihr euch an korrektem Deutsch erfreut. Trotzdem heißt es richtigerweise „Atomic Design“ und „Design Patterns“ – das sind englische Eigennamen, die schreibt man mit einem Leerzeichen dazwischen!
cu, w0lf.
JWill:
Strenggenommen nicht. Für die korrekte Schreibweise von englischen Substantiven gilt im Deutschen ein einfaches Prinzip:
Zusammensetzungen werden im Deutschen in der Regel – im Gegensatz zum Englischen – zusammengeschrieben (Designpatterns). Nur in Ausnahmefällen darf ein Bindestrich stehen. Kein Bindestrich darf bei Fremdwörtern gesetzt werden, wenn sie aus Adjektiv und Substantiv bestehen (Beispiel: Atomic Design).