Einleitung
Wir freuen uns sehr, dass wir zusammen mit der Stiftung Studenten-Discount (im Folgenden mit SSD abgekürzt) ein Projekt zur Verbesserung und Vereinfachung des Content-Editing auf der Webseite von Projekt Neptun in Angriff nehmen durften. Die SSD setzt seit bald 10 Jahren auf das Silverstripe Framework, um ihr Angebot den Studierenden schweizer Hochschulen zu präsentieren. Nebst der Nutzung als CMS zur Anzeige von Webseiten wird Silverstripe auch zur Verwaltung und Pflege von Specs, Downloads, Help Points, sowie verschiedenen anderen Informationen eingesetzt. Durch die Organisation des Angebots in sogenannte «Neptun Fenster», welche jeweils einen Monat andauern, ist es unerlässlich, dass die Inhalte der Webseite während diesen Zeitfenstern immer aktuell, übersichtlich und einfach verständlich sind. Dafür haben wir Silverstripe mit dem Elemental-Editor (vgl. nächsten Abschnitt) so konfiguriert, dass das Erstellen und Aktualisieren von Informationen so einfach wie möglich ist. Der Content-Verantwortliche ist dadurch in der Lage, möglichst flexibel Inhalte für verschiedene Angebote zu pflegen.
Der Elemental-Editor
Standardmässig ist Silverstripe mit einem flexiblen, auf TinyMCE basierenden Editor ausgestattet. Dieser WYSIWYG-Editor («What you see is what you get», also einem Editor, welcher die Formatierung des Texts direkt widerspiegelt, ähnlich wie in Microsoft Word) ausgestattet. Dieser ist ausreichend für Seiten, in denen nur auf Text basierender Inhalt angezeigt werden soll, wie zum Beispiel Blogs o.ä. Für komplexere Layouts ist dieser Editor allerdings nicht geeignet.
An dieser Stelle kommt der Elemental-Editor ins Spiel. Komplexere Webseiten-Designs sind meistens in Abschnitten (auch «Blöcke», «Sektionen» oder «Elemente» genannt) konzipiert, welche unterschiedliche Inhalte im gleichen Layout darstellen. Als Beispiele für solche Blöcke kommen reine Textblöcke, Bildergalerien, Accordions oder auch Preistabellen in Frage, welche für eine fertige Webseite in einer bestimmten Reihenfolge angeordnet und mit Inhalten befüllt werden. Der Elemental-Editor in Silverstripe ist ein auf diese Blockstruktur ausgelegter Editor, welcher es dir erlaubt, den Inhalt einer Seite aus vordefinierten Blöcken zusammenzustellen:
Ebenfalls bietet der Elemental-Editor die Möglichkeit, verschiedene Stile für jeden Block zu erstellen, welche je nach Bedarf angepasst werden können. Des Weiteren sind diese Blöcke nicht nur einfache Inhaltsgefässe, sondern können auch andere Objekte in der Datenbank anzeigen, mit diesen interagieren oder auch komplexere Funktionen übernehmen. Beispiele dafür sind die in diesem Projekt erstellten «Device-Abschnitte» oder «Blog-Abschnitte», welche weiter unten vorgestellt werden.
Das Projekt
Ausgangslage
Bisher wurde bei der SSD vor allem auf den TinyMCE-basierten Editor zum Erstellen und Pflegen von Informationen gesetzt. Dieser erwies sich jedoch als ungeeignet um mit der wachsenden Flut an Informationen zu den einzelnen Angeboten mithalten zu können. Aus diesem Missstand entstanden Seiten, welche durch ihre Länge für Kunden unübersichtlich wurden oder mit fehleranfälligen, «selbstgemachten» Layouts auf Mobilgeräten inkorrekt dargestellt wurden. Ein weiterer Faktor war die zeitaufwändige Pflege dieser Texte oder der Layouts, welche unnötig Ressourcen gebunden hat.
Das Ziel des Projekts war es, ein Set von Blöcken zu konzipieren, gestalten und zu implementieren, welches den Arbeitsaufwand für das Pflegen der Seite minimiert und gleichzeitig die meisten Anforderungen an Layouts abdeckt. Die neuen Blöcke mussten auch auf Performance und SEO optimiert werden, sowie ein möglichst einfaches UI besitzen. Da das Design der Projekt Neptun Webseite eine Eigenentwicklung ist, mussten diese Blöcke zuerst erstellt und anschliessend in das bestehende Design integriert werden.
Schritt 1: Bestimmen der Anforderungen
Um genau die Blöcke zu erstellen, welche auch benötigt werden, haben wir zusammen mit den für den Inhalt verantwortlichen Personen die wichtigsten Use Cases zusammengetragen. Aus diesen leiteten wir die benötigten Funktionen ab und erstellten eine Liste an grundsätzlich benötigten Inhaltsblöcken. Da die Webseite von Projekt Neptun besonders zur Information von Kunden über Bestellberechtigung, Bestellvorgang und Gerätespezifikationen, sowie zum Vorstellen von Angeboten ausgelegt ist, sollten neben Cards- und Grid-Layouts zusätzlich ein Accordion-Abschnitt, ein Banner-Abschnitt, eine Blog-Teaser-Liste und eine Geräteliste erstellt werden.
Schritt 2: Design und Implementation der Abschnitte
Nach der Definition der benötigten Abschnitte wurden diese zunächst skizziert und zusammen mit den Verantwortlichen der SSD so ausgearbeitet, dass sie zum Seitendesign passen und gut eingesetzt werden können. Anschliessend wurden die einzelnen Blöcke sowie deren Stilvariationen in Templates umgesetzt, welche von Silverstripe gerendert werden können. Für die einfacheren Abschnitte (Card-, Grid- und Inhalts-Block) konnten die notwendigen Datenfelder sehr einfach mithilfe unseres silverstripe-elemental-baseblock Moduls implementiert werden. Zusätzliche Felder wie z.B. Titelausrichtung, Hintergrundfarbe oder Grösse konnten dank Silverstripes einfach zu erweiterndem Framework schnell hinzugefügt und eingerichtet werden.
Für die komplexeren Abschnitte zum Anzeigen von Geräten oder Blog-Teasern konnte direkt auf die bestehenden Objekte zugegriffen werden, um so genau die Geräte oder Artikel anzuzeigen, welche auch benötigt wurden.
Wo notwendig wurden zusätzliche Stilvariationen für jeden Abschnitt hinzugefügt (zum Beispiel jeweils horizontal oder vertikal ausgerichtete Blogartikel), um möglichst vielseitig gestaltete Seiten zu ermöglichen.
Fazit
Durch die neuen Inhaltsblöcke können die Content-Manager von Projekt Neptun ansprechende Seiten in kurzer Zeit erstellen. Ebenfalls sind die dargestellten Inhalte viel weniger fehleranfällig, da die Templates genauestens überprüft und für jede Art von Bildschirmgrösse optimiert wurden. Damit bleibt mehr Zeit für andere Dinge übrig.
Ein weiterer Vorteil der blockbasierten Strategie ist es, dass jederzeit neue Abschnitte mit geringem Aufwand und somit auch geringen Kosten hinzugefügt werden können. Diese Herangehensweise ist unabhängig von bestehenden Seiteninhalten und beeinflusst deshalb diese nicht. Ebenfalls können bestehende Blöcke um neue Stile erweitert werden, um so Informationen noch spezifischer darstellen zu können. Mit diesen Anpassungen zusammen mit der Flexibilität von Silverstripe ist das Content-Team der SSD nun wieder bestens für zukünftige Herausforderungen gewappnet.
Möchtest du wissen, wie dich Silverstripe beim Verwalten einer Webseite unterstützen kann?
Wir beraten dich gerne zu allen möglichen Aspekten der Bereitstellung, Wartung und Weiterentwicklung von Web-basierten Projekten.
Nimm dazu einfach Kontakt mit uns auf!
