Frau lächelnd am Laptop, rechts das Storyblok-B | 5 Dinge, die wir am Headless CMS Storyblok lieben

5 Dinge, die wir am Headless CMS Storyblok lieben

5 Dinge, die wir am Headless CMS Storyblok lieben
11:41
Stephan Ritter, Solution Architect

Es gab mal eine Zeit, in der kamen für Unternehmen gerade Mal eine Handvoll Content Management Systeme in Frage, in Deutschland vor allem TYPO3, WordPress, Drupal und Joomla. Mittlerweile gibt es CMS wie Sand und Meer. Unternehmen haben die Wahl zwischen hunderten von Anbietern – und trotz dieses umkämpften Markts konnte sich das in 2017 gelaunchte Headless CMS Storyblok durchsetzen.

Storyblok wird heute von zahlreichen großen Marken genutzt. Und ganz ehrlich: wir können verstehen, wieso! Storyblok begreift, worauf es Redakteuren und Entwicklern bei einem CMS ankommt. Dabei punktet es insbesondere in Sachen Nutzerfreundlichkeit.

In diesem Blogbeitrag gehen wir auf 5 Dinge ein, die Storyblok aus unserer Sicht zu einem würdigen Player auf dem CMS-Markt machen. Von seinen Vorteilen als Headless CMS über seinen visuellen Editor bis hin zu umfangreichen Kollaborationsfunktion.

Tipp: Am 11.12., um 10:00 Uhr stellen wir einen Use Case mit Storyblok im LinkedIn Livestream vor. Hier geht’s zur Anmeldung. 


Inhalt

 

Storyblok Headless CMS Logo - Storyblok headless CMS agentur SUNZINET

Was ist Storyblok?

First things first: Starten wir mit einem Abriss zu den Eckdaten von Storyblok. Wie bereits erwähnt, wurde Storyblok in 2017 gegründet, und zwar in Österreich. Mittlerweile hat es Mitarbeitende auf der ganzen Welt und zählt Marken wie adidas, Netflix und Tesla zu seinen Kunden. Allgemein richtet es sich an mittlere und große Unternehmen.

Das CMS ist eine SaaS-Lösung und greift auf die AWS CloudFront zurück. Kunden können selbst entscheiden, ob ihr Content über Server in Europa, Kanada, Australien oder die USA gehostet werden soll. Storyblok zeichnet sich insbesondere durch seine Headless Architektur aus.

Was unterscheidet Headless CMS von traditionellen Systemen?

Kurz zur Erklärung: Traditionelle CMS wie Wordpress liefern Backend und Frontend in einer Lösung. Das heißt, es ist ein spezifischer Kanal festgelegt, auf dem Ihre Inhalte erscheinen, beispielsweise die Website. Headless CMS wie Storyblok hingegen umfassen von Haus aus kein spezifisches Frontend. Sie können selbst entscheiden, auf welchen digitalen Kanälen Sie Ihre Inhalte ausspielen möchten. Diese binden Sie über APIs – im Fall von Storyblok: REST and GraphQL APIs – an Ihr CMS an.

So erleichtert das Headless CMS Storyblok Ihr Content Management

1. Omnichannel, einfache Integration und mehr – Storyblok bietet Vorteile eines Headless CMS

Als Headless CMS bringt Storyblok alle Vorteile dieser Art von Content Management System mit. Die moderne Architektur (siehe auch MACH Architektur) macht die Lösung besonders flexibel. Unter anderem können Sie:

  • Content zentral managen und kanalübergreifend veröffentlichen.
    Storyblok erlaubt es, beliebige Frontends anzubinden – von Website über App, Shop und Kundenportal bis hin zur Smart Watch. Sie pflegen Ihre Inhalte wie Text, Bilder oder Videos zentral im System und veröffentlichen sie per Knopfdruck gleichzeitig auf allen Kanälen. Es ist also nicht mehr notwendig, Content für jede Anwendung einzeln zu pflegen. Das spart Zeit und minimiert Flüchtigkeitsfehler.
  • Storyblok einfach integrieren oder um neue Features erweitern.
    Durch die Bereitstellung leistungsstarker APIs ist Storyblok sehr anpassungsfähig. Sie können die Lösung problemlos mit anderen Systemen wie z. B. CRM, PIM oder Onlineshop verknüpfen und so Ihre Prozesse verbessern. Zudem lässt sich Storyblok einfach um zusätzliche Features erweitern und hilft Ihnen so, schnell auf neue Trends zu reagieren. So wäre es möglich, Ihren Online-Auftritt mit einem intelligenten KI-Assistenten upzugraden, eine fortschrittliche Suchfunktion wie Elasticsearch zu integrieren und vieles mehr.
  • User Interfaces mit der Technologie Ihrer Wahl entwickeln.
    Ohne Bindung an ein bestimmtes Frontend können Ihre Entwickler flexibel mit ihrer Lieblingstechnologie arbeiten – ob Next.js oder Nuxt, React oder Vue. Sie entwickeln UI und UX mit dem Tech Stack, das ihnen am meisten liegt anstatt sich aufwendig in eine neue Lösung einzuarbeiten.

Vorteile eines Headless CMS: Multichannel-Fähigkeit, Flexibilität und Skalierbarkeit, Freie Wahl des Tech Stacks, Schutz vor Cyber-Angriffen, bessere Performance, einfache Integration mit Drittsystemen

Abb. 1: Vorteile eines Headless CMS im Überblick.

Einen ausführlichen Überblick zum Thema Headless CMS, mit Vor- und Nachteilen, Anwendungsfällen und mehr, finden Sie in unserem Whitepaper.

2. Content Klick für Klick individuell gestalten – mit einer modularen Struktur

Storyblok hat seinen Namen nicht ohne Grund gewählt:

  • Redakteure erstellen im CMS sogenannte Stories, Content Pieces wie Landingpages, Produktseiten usw.
  • Diese setzen sich aus verschiedenen Blocks zusammen – Storybloks Bezeichnung für einzelne Module, darunter Hero Image, Slider, Kontaktformular und viele weitere.

Diese modulare Struktur gibt Ihnen maximale Freiheit, um Content ganz nach Ihren individuellen Vorstellungen zu gestalten.

Erstellung durch Entwickler:

Welche Blocks es gibt und wie diese genau aussehen, liegt in Ihren Händen. Die verschiedenen Blocks werden von Ihrem Web Development Team zusammengestellt – dafür stehen in der Block Library viele nützliche Funktionen bereit. Zudem legen ihre Entwickler fest, welcher Content Typ, welche Blocks verwenden darf. So setzt sich eine Landingpage aus anderen Modulen zusammen als eine Produktseite.

Verwendung durch Redakteure:

Redakteure können die Blocks anschließend nutzen, um schnell und einfach überzeugenden Content zu kreieren. Für wiederkehrende Inhalte – z. B. Unternehmensprofile – lässt sich auch ein einzelner Block erstellen, der dann auf mehreren Seiten eingebaut wird. So müssten Sie das Unternehmensprofil nur einmal updaten, um es auf sämtlichen Seiten automatisch anzupassen. Das erleichtert die Content-Pflege und gewährleistet die Aktualität Ihrer Daten.

Stories (z. B. Landingpage) umfassen verschiedene Blöcke wie Richtect, Bild oder Tabelle
Abb. 2:  Modularer Aufbau von Stories aus verschiedenen Blöcken.

3. Anpassungen des Contents live nachverfolgen – mit dem visuellen Editor

Das Highlight von Storyblok ist für viele sein visueller Editor. Er ermöglicht es Redakteuren, live im System nachzuverfolgen, wie Content-Anpassungen letztlich im Frontend aussehen werden.

Das gibt einen dicken Pluspunkt in Sachen Komfort und ist unter Headless CMS eine echte Rarität. Storyblok war sogar das erste Headless CMS, das einen visuellen Editor anbietet. So verfügen die meisten entkoppelten Systeme höchstens über eine Preview im separaten Fenster, das manuell aktualisiert werden muss.

Redakteure können mit Storybloks visuellem Editor:

  • Module hinzufügen und per Drag & Drop die Reihenfolge verändern
  • Mehrspaltige Layouts erstellen
  • Module mit Text, Bildern, Videos und anderen Medien befüllen
  • Externe Inhalte wie YouTube-Videos einbetten
  • Inhalte einfach in verschiedenen Sprachen pflegen
  • Alte Versionen des Contents wiederherstellen
  • Veröffentlichungen planen
  • Und mehr – während sie alle Änderungen in der Echtzeit-Vorschau nachverfolgen.

Screenshot, wie jemand im visuellen Editor Text bearbeitet.

Abb. 3: Im visuellen Editor lassen sich Text, Bilder und Styling anpassen und Änderungen live nachverfolgen.

Screenshot, wie jemand im visuellen Editor neue Module hinzufügt.

Abb. 4: Neue Module lassen sich mit wenigen Klicks hinzufügen.

4. Nahtlos im Team zusammenarbeiten – mit vielfältigen Kollaborations-Funktionen

Eine weitere Stärke von Storyblok ist die einfache Zusammenarbeit mit anderen Teammitgliedern – hier hat es mehr zu bieten als viele andere CMS. Zu den Features gehören unter anderem:

  • Umfangreiche Rollen- und Rechteverwaltung:
    Storyblok erlaubt es, mehrere Nutzer mit verschiedenen Rollen und Rechten zu erstellen. Dabei können Sie, wenn gewünscht, bis ins kleinste Detail gehen: So lässt sich – neben Standard-Rollen wie Admin, Redakteur und Viewer – genau definieren, welche Inhalte bearbeitet und welche Funktionen genutzt werden dürfen. Das gibt Ihnen Sicherheit, dass ihr Content nicht versehentlich verändert, gelöscht oder veröffentlicht wird.
  • Zusammenarbeit in Echtzeit:
    Ein besonders cooles Feature ist, dass Sie im Team gleichzeitig am selben Content arbeiten können. Und: dabei Änderungen ihrer Kolleginnen und Kollegen live nachvollziehen. Zum Vergleich: bei vielen anderen Systemen werden Nutzer noch „rausgeschmissen“, sobald eine andere Person dasselbe Dokument öffnet. Mit der Möglichkeit, Content zeitgleich zu pflegen, macht Storyblok die Zusammenarbeit sehr viel einfacher und effizienter.
  • Einrichtung von Workflows:
    Zudem lassen sich individuelle Workflows definieren. Beispielsweise wäre es möglich, Content Stages wie „Bearbeitung“, „Übersetzung“, „Korrektur“ und „Bereit für Veröffentlichung“ festzulegen. Sie können den Content – je nach Status – automatisch einem bestimmten Nutzer zuweisen. Und: verhindern, dass Inhalte, die z. B. gerade in der Korrekturphase sind, versehentlich veröffentlicht werden.

Screenshot, der veranschaulicht, wie man im visuellen Editor mit Workflows arbeitet.

Abb. 5: Stories können einfach verschiedenen Workflow-Steps zugeordnet und verantwortliche Personen per E-Mail benachrichtigt werden.

  • Kommentare und Feedback:
    Storyblok bietet die Möglichkeit, Kommentare direkt in der jeweiligen Story vorzunehmen. So können Sie allgemeine Kommentare vornehmen, die den gesamten Beitrag betreffen, oder Anmerkungen einem spezifischen Bereich wie Headerbild, Einleitung, und so weiter zuordnen. Nutzer, die ihr Feedback betrifft, lassen sich einfach markieren und so benachrichtigen. Durch die Kommentarfunktion werden separate Abstimmungsprozesse in Google Docs und Co. obsolet.

Screenshot, der Kommentarfunktionen in Storyblok veranschaulicht.

Abb. 6: Module lassen sich einfach auswählen, kommentieren und verantwortliche Personen könnten getaggt werden.


  • Gemeinsames Brainstorming im Ideation Room:
    Der Ideation Room ist ein neuer Bereich in Storyblok (Launch in 2024) und erweitert die bereits bestehenden Feedback-Optionen. Im Grunde ist er eine Art integrierter Text-Editor, der erstmal an Google Docs und Co. erinnert. Nutzer können darin gemeinsam an neuen Texten arbeiten, sie editieren und kommentieren. Besonders nützlich sind integrierte KI-Funktionen, die es möglich machen, Stil und Länge von Text automatisiert anzupassen. Steht der Content, lässt er sich einfach innerhalb einer Story öffnen und dort in das jeweilige Modul übertragen.

    Das neue Feature bietet den Vorteil, nicht mehr zwischen verschiedenen Tools hin- und herwechseln zu müssen. Vom Brainstorming bis hin zur Veröffentlichung deckt Storyblok den kompletten Content-Prozess ab.

https://www.sunzinet.com/hubfs/00.%20SUNZINET%20Website%20Assets/BLOG/Headless%20CMS%20Storyblok/Neu/Kollaboration-Ideation-Room-1.png

Abb. 7: Der Ideation Room erlaubt die Zusammenarbeit an Rohentwürfen, wie z. B. bei Google Docs, und bietet viele nützliche KI-Funktionen.

5. Medien zentral managen und bearbeiten – mit Storybloks Asset Manager

Im Asset Manager können Unternehmen Medieninhalte wie Bilder und Videos zentral speichern, bearbeiten und in verschiedenen Stories.

Storyblok hilft Entwicklern dabei, Bilder für verschiedene Geräte und für kürzen Ladezeiten zu optimieren. So unterstützt es beispielsweise Lazy Loading sowie die Bereitstellung von Bildern im platzsparenden WebP-Format. Medien werden per Content Delivery Network (CND) übertragen, was gerade bei einem internationalen Publikum für eine bessere Performance sorgt.

Besonders bemerkenswert ist Storybloks Image Editor: Redakteure müssen für kleinere Bild-Anpassungen nicht gleich die Grafik bemühen, sondern können sie selbst direkt in Storyblok vornehmen. Der Image Editor ermöglicht es beispielsweise:

  • Bilder zurechtzuschneiden,
  • zu drehen und zu spiegeln,
  • Werte wie Kontrast und Helligkeit zu verändern,
  • Filter über das Bild zu legen,
  • Sticker und Emojis zu nutzen,
  • den Fokuspunkt zu verändern und mehr.

Die Bedienung ist sehr intuitiv und vergleichbar mit der Bildbearbeitung, wie man sie beispielsweise vom Smartphone kennt.

Screenshot vom Image Editor mit der Funktion zum Zuschneiden von Bildern.

Abb. 8: Im Image Editor lassen sich Bilder zuschneiden...

Screenshot vom Image Editor mit der Funktion zur Nutzung von Filtern.

Abb. 9: ...mit Filter versehen und vieles mehr.


Fazit
 

Stellt man Storyblok anderen Headless CMS gegenüber, tut sich die Plattform insbesondere in Sachen Nutzerfreundlichkeit hervor. Sowohl Entwicklern als auch Redakteuren wird es einfach gemacht, sich in die Lösung einzuarbeiten, und Content in kürzerer Zeit online zu bringen. Zusammenfassend punktet das Headless CMS Storyblok durch: 

  • Das zentrale Management von Content und die einfache Veröffentlichung über verschiedene Kanäle hinweg. 
  • Einen modularen Aufbau und die Wiederverwendung von Modulen auf mehreren Seiten. 
  • Einen visuellen Editor für die unkomplizierte Pflege von Inhalten. 
  • Kollaborationsfunktionen wie die gleichzeitige Bearbeitung von Stories im Team. 
  • Einen mächtigen Asset Manager mit der Möglichkeit zur Bildoptimierung. 

Sie benötigen Unterstützung rund um Storyblok? Oder haben eine Frage zum Headless CMS? Dann nehmen Sie hier unverbindlich Kontakt zu uns auf. Unser Expertinnen und Experten freuen sich auf den Austausch mit Ihnen!

Tipp: Am 11.12., um 10:00 Uhr stellen wir einen Use Case mit Storyblok im LinkedIn Livestream vor. Hier geht’s zur Anmeldung. 

LinkedIn Live Event: Boosten Sie Ihren Vertrieb mit einem digitalen Produktportfolio