Website-Relaunch: Warum die Wahl bei webnetz.de auf statamic gefallen ist

Nach dem Website Launch ist vor dem Relaunch. Genauso wie Gebäude und Autos in die Jahre kommen ist es auch mit Websites. Es herrscht eine rasante Schnelllebigkeit im Web und dieser digitale Raum wird ständig durch neue Technologien geprägt. So gibt es in jedem Webprojekt irgendwann den Zeitpunkt, an dem das Rad nochmal auf Null gedreht wird, um auch von den Vorteilen dieser neuen Technologien profitieren zu können.

Dieser Zeitpunkt ist nun auch bei uns erreicht. Aber nicht nur der technologische Aspekt ist ein Grund für einen Relaunch. Daneben kann es noch weitere Gründe geben, wie eine neue Corporate Identity (CI) mit einem neuen Corporate Design (CD), die Optimierung der Benutzerfreundlichkeit, Performance, Barrierefreiheit und Sichtbarkeit für Suchmaschinen oder einfach der Wunsch nach einem neuen System.

Im weiteren Verlauf erfährst du, welche Gedanken wir uns zu unserem Website Relaunch gemacht haben und welche Vorteile die Wahl von statamic mit sich bringt. Vielleicht ist statamic auch ein potenzielles System für deine Website?

Systemauswahl

Wie bei jedem Relaunch einer bestehenden Website stellte sich auch in unserem Fall die entscheidende Frage, welches System als Basis dienen sollte. Für die eigene Website sollte “das beste” CMS zum Einsatz kommen – welches es natürlich nicht gibt. Die Frage nach dem besten CMS kann nur in Hinsicht auf die gestellten Anforderungen sinnvoll beantwortet werden, weswegen die Antwort auch von Fall zu Fall unterschiedlich ausfallen wird.

Somit war auch für die neue webnetz-Website die Frage nicht einfach zu beantworten, welches denn das geeignetste System wäre. Von Anfang an gesetzt war, dass es ein aktuelles Open-Source-CMS auf Basis von PHP sein sollte – allerdings kamen auch mit diesen Rahmenbedingungen etliche Systeme in Frage, die wir auf ihre Eignung für unsere Zwecke prüfen mussten.

Unsere Anforderungen an das System

• eine aktive Community, die Unterstützung bieten kann
• bestehendes Angebot von Erweiterungen aus der Community, um dem System zusätzliche Features hinzufügen zu können
• Möglichkeit zur individuellen Erweiterung

Automatisch in die engere Auswahl kamen WordPress, auf dem die aktuelle Website basiert, und TYPO3, weil wir damit den Großteil unserer CMS-Kundenprojekte umsetzen und daher auf einen breiten Erfahrungsschatz zurückgreifen können.

Beide Systeme haben eine breite Nutzerbasis, sind seit vielen Jahren auf dem Markt und haben ihre individuellen Vorteile. Für die eigene Website wollten wir allerdings gerne andere Wege gehen und etwas ganz Neues wagen. Wir haben daher verschiedene in Frage kommende Systeme geprüft. Unsere Wahl fiel am Ende auf statamic – ein vergleichsweise neues System mit dem seit Jahren etablierten PHP-Framework Laravel.

Was uns an statamic besonders überzeugt hat

• Eine aktive und enthusiastische Community, die das Projekt kontinuierlich weiterentwickelt
• Verwendung und Unterstützung von etablierten Standard-Bibliotheken und Technologien (u.a. Composer, Laravel, Tailwind, GraphQL, REST etc.)
• flexibel und mächtig trotz minimalistischer Anforderungen (u.a. keine Datenbank notwendig)
• Möglichkeit zur einfachen Erweiterung und Individualisierung des System durch Addons (selbst entwickelt oder von Drittanbietern)

Das neue System: Tolle Features (mit Beispielen aus unserem Relaunch)

Wie schon erwähnt ist statamic ein flexibles und leistungsstarkes CMS, welches deine Website-Performance auf das nächste Level heben kann. Doch nun wollen wir einmal genauer unter die Haube schauen.

UX im Backend

Das Backend von statamic besticht in erster Linie durch ein sehr minimalistisches Design und die klare Trennung von einzelnen Bereichen sorgt für eine Aufgeräumtheit, die manch anderes CMS stark vermissen lässt.

Über verschiedene Benutzergruppen und Berechtigungen lassen sich für jede:n Benutzer:in individuelle Bereiche freischalten, sodass jede:r Benutzer:in auch nur die für sie:ihn vorgesehenen Bereiche sehen und bearbeiten kann.

So sind bspw. die Menüpunkte unter Inhalt den Redakteuren:innen vorgesehen und die Reiter Felder, Werkzeuge und Benutzer:innen den Administratoren:innen.

Im Bereich der Felder lassen sich sogenannte Blueprints und Fieldsets anlegen, doch dazu später mehr.

Unter Werkzeuge finden sich diverse allgemeine administrative Menüpunkte, um bspw. Updates und Addons zu installieren, den Cache zu bearbeiten oder Formulare anzulegen.

Alles baut strukturell logisch aufeinander auf. Auch die Tabellenübersicht der jeweiligen Einträge lässt sich durch weitere Spalten individuell erweitern. Somit lassen sich relevante Informationen schon in der Übersicht darstellen, ohne den einzelnen Eintrag öffnen zu müssen.

Live-Preview

“What you see is what you get” trifft voll und ganz auf den Live-Preview Modus zu. Hier lassen sich die Inhalte mit einer direkten visuellen Rückmeldung bearbeiten. So weiß man vorher schon, wie es dann bei Aktualisierung oder Veröffentlichung aussieht.

Fokuspunkt

Ein wesentliches Feature von statamic in der Bildbearbeitung ist der sogenannte Fokuspunkt. Dieser sorgt dafür, dass egal welches Bildverhältnis (Ratio) verwendet wird, immer der Bereich des Fokuspunkts in der Ausgabe sichtbar bleibt.

Breakpoints & Ratio

Die Bildausgabe lässt sich zusätzlich über ein Addon in ein Options-Feuerwerk verwandeln. Durch die Erweiterung lassen sich Ratio (bspw. 16/9 auf Mobil und 3/2 auf Desktop) oder gar komplett unterschiedliche Bilder je Bildschirmgröße anhand der Breakpoints definieren.

Flexibilität / Erweiterbarkeit

Das CMS statamic bringt von Haus aus über 40 verschiedene Feldtypen mit sich und jeder Feldtyp kann beliebig oft an verschiedenen Stellen eingesetzt werden. Darunter zählen unter anderem Blueprints, Fieldsets und globale Inhalte. Was sich hinter diesen Begriffen genau verbirgt, darauf gehen wir nun ein. PS: Eine Übersicht zu allen verfügbaren Feldtypen findest du hier.

Sammlungen

Sammlungen sind Inhaltstypen, wie bspw. Seiten, News, Veranstaltungen oder auch Produkte. Es lassen sich beliebig viele Sammlungen erstellen und individualisieren. Diese Flexibilität war unter anderem auch ein Grund für unsere Systemauswahl. Jedem Inhaltstyp können sogenannte Blueprints zugewiesen werden.

Blueprints

In den Blueprints stecken die individuellen Strukturen der jeweiligen Sammlung. Diese Strukturen werden durch die o.g. Feldtypen aufgebaut. So gibt es bspw. Felder für Ort, Datum und Zeit sowie Veranstalter im Blueprint der Sammlung Veranstaltungen. Durch das intuitive Backend lassen sich diese Strukturen ganz einfach anlegen und erweitern, je nach Bedürfnis.

Fieldsets

Fieldsets werden genutzt, um wiederkehrende Strukturen anzulegen, um diese dann im Blueprint wiederzuverwenden. Der offensichtlichste Use-Case hierfür sind vordefinierte Inhaltselemente wie Slider, Teaser, Akkordeons, Text-Bildkombinationen uvm.

Globale Inhalte

Auch der Bereich “Globale Inhalte” bedient sich der vielfältigen Auswahl an Feldtypen, um allgemeine Strukturen abzubilden, die nur einmalig gepflegt werden müssen, wie bspw. Kontaktdaten mit Adresse und Telefonnummer usw.

Der große Benefit von statamic ist, dass sich die Strukturen direkt im User Interface des Backends erstellen lassen. Das reduziert Abhängigkeiten zwischen Backend und Frontend und somit auch Aufwände.

Datei-Manager

Gerade der Bereich der Medien kann schnell unübersichtlich werden, wenn sehr viele Dateien im Einsatz sind. Das CMS statamic bietet hier gute Möglichkeiten, um den Überblick zu behalten. Neben der Erstellung von Ordnern lassen sich auch sogenannte übergeordnete Container definieren, um diese nur bestimmten Benutzergruppen verfügbar zu machen.

Ein sehr zeitsparendes Feature ist aber die direkte Verknüpfung eines Datei-Eingabefeldes mit einem spezifischen Ordner. So lässt sich beispielsweise ein vordefiniertes Fieldset zur Darstellung des eigenen Teams auf der Website direkt mit einem spezifischen Ordner verknüpfen, um so auf die Bilder der Kolleginnen und Kollegen zugreifen zu können. Gerade bei großen Datei-Strukturen spart das nicht nur Zeit, sondern verhindert auch Dateiablagen in einem falschen Ordner.

Performance

Flat File

Der Großteil der Content-Management-Systeme auf dem Markt verwendet eine relationale Datenbank wie z.B. mySQL für die Speicherung der Inhalte und anderer Daten.

statamic geht hier einen anderen Weg und verzichtet in der Standardeinstellung auf ein separates Datenbanksystem. Stattdessen werden Inhalte und Konfiguration in speziell formatierten Textdateien, sogenannten “Flat Files” (vorwiegend in den Formaten Markdown und YAML) abgespeichert.

Dies unterstreicht den minimalistischen Ansatz von statamic und bietet z.B. die Möglichkeit, zusätzlich zum Code auch Inhalte einfacher zu versionieren. Für kleinere Websites liefert der Flat-File-Ansatz in der Regel außerdem bessere Performance, da der Zugriff auf Dateiebene schneller ist als über eine relationale Datenbank.

Für sehr große Projekte bietet statamic trotzdem die Möglichkeit, eine relationale Datenbank anzubinden und zur Speicherung der Inhalte zu verwenden.

webp / source sets

Für die Bildverarbeitung verwendet statamic die mächtige Bibliothek Glide. Schon in der Standard-Konfiguration kann Glide u.a. jedes redaktionell hochgeladene Bild in beliebig viele konfigurierbare Auflösungen konvertieren und dadurch ein sogenanntes Source Set erzeugen. Je nach Größe des verwendeten Bildschirms kann dann später beim Aufruf der Website die Version in der passenden Auflösung für die Anzeige ausgewählt werden (für tiefergehende Informationen zum Umgang mit “Responsive Images” in statamic sei dieser Artikel empfohlen).

Desweiteren unterstützt Glide auch die automatische Konvertierung von Bildern in das ressourcensparende webP-Format.

In Kombination ermöglicht statamic daher mit vergleichsweise geringem Konfigurationsaufwand die Ausgabe von responsiven Bildern, wahlweise auch im webP-Format, was die benötigte Bandbreite vor allem bei bildlastigen Websites erheblich reduzieren kann.

Fazit: Wir sind von statamic sehr angetan und sehen großes Potenzial

Alles in allem sind wir von statamic sehr angetan und gespannt, wohin sich das System noch weiter entwickeln wird. Wir sehen ein großes Potential für ein breites Spektrum an Anwendungsfällen, für die wir bisher andere Systeme verwendet bzw. empfohlen haben. Neben den oben näher behandelten Features gibt es noch viele weitere, wie eine REST- und GraphQL-API, um deine Website bspw. headless zu betreiben, die Revisionierung von Einträgen oder die Möglichkeit eine Multi-Site aufzubauen. Alle Features aufzuzählen würde etwas den Rahmen sprengen, daher schau gerne hier einmal rein für eine Übersicht mit weiteren Features.

Aufgrund der vielen Vorteile hat statamic sich seinen Platz neben TYPO3 und WordPress in unserem CMS-Repertoire verdient, und wir sind sehr zuversichtlich, dass dies nicht das letzte statamic-Projekt sein wird, welches wir bei webnetz umsetzen.

Marius und Robin

Kostenlose Online-Marketing-Webinare

Wir bieten jede Woche kostenlos zwei Webinare an. Alle Themen und die nächsten Termine findet ihr auf: web-netz.de/webinare.

Bildnachweis Titelbild Screenshot: webnetz / statamic.com