Ihr Browser ist veraltet. Wir empfehlen Ihnen ein Update zum Besuch unserer Website.

 

Website Relaunch mit Headless CMS - ein Erfahrungsbericht!

In den letzten Jahren hat sich bei uns selbst eine kontinuierlich steigende Unzufriedenheit aufgebaut, wenn wir unsere eigene Unternehmenswebsite betrachtet haben. Dabei gab es viele Faktoren, die wir aus redaktioneller aber auch aus technischer Sicht als suboptimal empfunden haben. Starke Einschränkungen unserer Kreativität durch eine sehr starre Content Management System Umgebung. Ein unterbrochenes Nutzererlebnis und ein fehlender roter Faden infolge von unstrukturiertem Content. Die Überforderung unserer Nutzer:innen aufgrund einer umständlichen Benutzerführung. Aber auch eine vorherrschende redaktionelle Unselbstständigkeit, da wir neue Inhalte meist nur mit hohem Zeitaufwand und mit Unterstützung unserer Entwickler:innen veröffentlichen konnten. Nach den Worten unseres UI /UX -Designers Fabrice haben wir „Viel erzählt und investiert, ohne viel zu erreichen.“ Diese Probleme einer Website kommen Ihnen bekannt vor? Wir haben die Lösung: Website Relaunch mit Headless CMS. Begleiten Sie uns auf dem Weg unseres Website Relaunches zur emotional geführten digitalen Kundenkommunikation.

Von der Idee bis zum User Interface

Wir wollten weg von der reinen Darstellung technischer Dienstleistungen und hin zum (emotionalen) Storytelling - erzählen warum, wie und was wir machen. Dabei wollen wir Botschaften vermitteln, die die Geschichten hinter den Menschen sowie unserer Agentur erzählen, aber auch Themenbereiche vorstellen, bei denen wir helfen können und die uns selbst begeistern. Dabei war der folgende Leitsatz die Basis unseres Website Relaunches: Emotionen als Schlüssel zur Schaffung nachhaltiger Kundenerlebnisse.

Der Website Relaunch startete mit einem Team Kick-off: Im ersten Schritt versetzen wir uns immer wieder in die Köpfe unserer Nutzer:innen und Kunden:innen. Wer sind unserer Zielgruppen? Wonach sind diese auf der Suche? Und wie führen wir unsere Nutzer:innen an ihr digitales Ziel? Für die Entwicklung einer erfolgreichen Zielgruppenansprache erstellte unser Experte Fabrice im Rahmen der UX Konzeption User-Journey-Maps. Unser gewählter Ansatz wurde nach den ersten Brainstorming-Sessions bestätigt: wir wollen unsere Nutzer:innen mitnehmen, indem wir Geschichten und Erfahrungsberichte aus unserer Welt der Customer Experience Company erzählen.

Zukünftig sollen die Websitebesucher:innen durch dedizierte Landing-Pages geführt werden, weshalb eine flache Navigationshierarchie angestrebt wurde. Unser Ansatz: Nutzerführung durch Verlinkungen, um aufeinander aufbauende Informationen von Haupt- und Detailseiten so miteinander zu verknüpfen, dass sie leichter aufgefunden werden können. Die Content-Steuerung regt zusätzlich am Ende jeder User Journey zur digitalen Kontaktaufnahme an. 

Nutzer:innen sollen einwandfrei mit unserem modernen, digitalen Auftritt interagieren können. Wie sich ein Produkt anfühlt und bedienen lässt, erfährt man am besten mit der frühen Entwicklung von Prototypen im Website Relaunch Prozess. Ein realitätsnaher Entwicklungsprozess ebnet den Weg für ein optimales Nutzererlebnis. Zur visuellen Darstellung unserer neuen Website Story, die sich wie eine gelebte User Experience anfühlen soll, haben wir zunächst Wireframes angefertigt.

Wireframes des Pinuts Website Relaunchs

Im Anschluss gestaltete unser UX Desinger Fabrice mithilfe der Design- und Entwicklungsplattformen Sketch und InVision hochauflösende Website-Prototypen, die als Grundlage für Nutzerfeedback und die technische Entwicklung des Website Relaunches dienten.

Prototyp des Pinuts Website Relaunchs

Anforderungen an das zukünftige Headless Content Management System

Darüber hinaus mussten wir natürlich noch die essenzielle Frage des Website Relaunches beantworten, welches Content Management System hilft uns bei unseren Vorhaben und ursprünglichen Herausforderungen am besten. Alles, was wir wussten, war das, was wir nicht mehr wollen - kein statisches, starres, Ressourcen schluckendes System, das aufgrund von benötigtem CMS-Spezialwissen keine Variationsmöglichkeiten bietet. Aber was sollte das zukünftige Content Management System dann an technischen und redaktionellen Möglichkeiten mitbringen?

Am besten einen modularen Aufbau nach dem Grundsatz: wir bauen uns unsere Website in nur wenigen Minuten selbst. Schnell verfügbar ohne komplexe Installation, aber auch ressourcenschonend, sprich ohne spezifische Vorkenntnisse schnell programmier- und erweiterbar. Für unsere Redakteur:innen wünschten wir uns eine intuitive, leichte und dynamische Handhabung, welche Gestaltungsfreiheit und Raum für kreatives Arbeiten ermöglicht - auch für unsere UX-Desinger:innen ein absolutes Muss.

Nach einer internen Content Management System Evaluation und einigen Abstimmungen war es dann soweit. Das cloudbasierte Headless CMS Scrivito erfüllte unsere Anforderungen eines modernen Website Relaunches durch und durch. Es basiert auf React.js und bietet somit eine starkes Technologiegerüst für unsere Entwickler:innen. Das Headless Design punktet mit flexibler Darstellung und vereint einzigartige Usability mit hoher Flexibilität in der Content-Erstellung. So geht innovatives Content Management System heute. Die Wahl für den Website Relaunch war getroffen.

Das Headless Content Management System

“Supereasy ohne Grenzen” so lautet die Kurzbeschreibung unseres Head of Systemintegrators Timo zum Headless Content Management System. Als Software as a Service (SaaS) bietet das Cloud-basierte Headless CMS von JustRelate  eine schlüsselfertige Kompaktlösung zum Website Relaunch für jedermann. Das Erlernen einer sonderbaren Programmiersprache? Nicht notwendig. In diesem HeadlessContent Management System findet mit React eine der verständlichsten Programmiersprachen Anwendung, welches das Entwickeln sehr schnell und flexibel macht. Das Erstellen von Web-Projekten war noch nie so einfach - Landing-Pages via Mausklick dank Baukastenprinzip und individuell nach Corporate Design gestaltbar. Mit modernem Inline-Editing bietet das Headless CMS intuitive Content-Erstellung und auch noch das Besondere fürs Auge. 

Hard Facts zum Headless CMS 

  • Performance on demand AWS Cloud-Service
  • Sicher dank AWS
  • Wartungsfrei
  • Alle Funktionen über Anwenderschnittstellen (API) verfügbar 
  • Light Development Ansatz mit ReactJS und Prinzip von Jamstack


Wissenswertes für Redakteur:innen: Das Headless Content Management System fungiert auch als Content-Hub. Digitale Inhalte werden aus einer einzigen Quelle an jeden der Online Kanäle ausgeliefert, die über Anwenderschnittstellen angebunden sind. Zusätzlich können alle Arten von Medien-Assets gespeichert und organisiert werden. Dynamische Inhalte können dank Lazy Loading erst zum benötigten Zeitpunkt geladen werden und sorgen für ein flüssiges Nutzererlebnis.

Als Entwickler:innen im Headless CMS

Lokale Entwicklungsumgebung, übersichtliche Dateistruktur, geringer Entwicklungsaufwand, Qualitätssicherung anhand verschiedener Entwicklungsstände - wie unser Web Developer Lucas treffend zusammenfasst: “Pure Eleganz, wie wir als Entwickler:innen im Headless Content Management System arbeiten dürfen.” Möglich macht das die weitverbreitete sowie beliebte Open-Source Technologie React.js. React ist eine JavaScript-Bibliothek, die das Grundgerüst für die Ausgabe von Benutzeroberflächen (User Interfaces) von Websites zur Verfügung stellt, was eine schnelle Weiterentwicklung ermöglicht.

Das Headless CMS in der Cloud ist per Knopfdruck sofort verfügbar. Auch unser Website Relaunch war nach intensiver UI / UX- Konzeption schnell realisierbar, frühzeitige Erfolgserlebnisse waren somit garantiert. Als Software as a Service (SaaS) erfordert das Headless Content Management System keine IT- Wartung, wir lehnten uns zurück und konzentrierten uns rein auf die Entwicklung. Keine Ausfallzeiten, keine Backups, keine Patches - die Cloud-Infrastruktur des Headless CMS sorgt einfach für alles. Sogar der gefürchtete GoLive des Website Relaunches war von Erfolg gekrönt, denn mithilfe unseres GitLab Workflows erfolgt ein Release innerhalb von nur ein paar Minuten ganz automatisch, ohne manuellen Mehraufwand für die Entwickler:innen.

Mit dem Headless-Ansatz von CMS Scrivito sind keine spezifischen Templates für die Integration der Frontend-Entwicklung in das jeweilige Content Management System mehr notwendig. Unsere Entwickler:innen verpackten ihre Frontend-Codes in Widgets, welche unsere Redakteuer:innen einfach auf der Website platzieren können. 

Übersicht Widgets des Headless CMS

Als Redakteur:innen im Headless CMS

Aus redaktioneller Sicht erfolgt die Bearbeitung der Website “gefühlt” direkt in der Website selbst. Modernes und intuitives Inline Editing dieses Headless Content Management Systems macht es möglich: WYSIWYG-Prinzip. Dank modularer Widget Strukturen des Headless CMS sind Seiten flexibel zu erstellen. Unsere Redaktuer:innen konnten ohne langen Lernaufwand sofort mit der Bearbeitung der Website beginnen. Die Texte können direkt im Bearbeitungsmodus auf der zu erstellten Seite eingegeben werden und auch weitere Anpassungen wie Textausrichtung oder HTML-Editierung sind nativ integriert. Weitere detailliertere Informationen zu redaktionellen Features des Headless Content Management Systems haben wir in einem zweiten Beitrag unter die Lupe genommen.

Die folgenden Bilder zeigen die Website, wie sie öffentlich aufgerufen werden kann (links) und wie die gleiche Ansicht im Redaktionsmodus aussieht (rechts).

Ansicht Website Veröffentlichung des Headless CMS

Ansicht Website Redaktionsmodus des Headless CMS

Fazit zum Website Relaunch mit Headless CMS

Leistungsfähig

Eine schnelle Ladezeit der Website ist ein wichtiger Baustein für eine hohe Benutzerfreundlichkeit. Durch das Vorab-Rendering und die Auslieferung der Inhalte über globale Content Delivery Networks (CDN) bietet das Headless CMS genau das. Dank serverlosem, cloudbasiertem Aufbau des Content Management Systems brauchen Sie sich keine Gedanken um Leistung, Ausfallzeiten oder Backups machen. 

placeholder

Jetzt mit Headless CMS den digitalen Neustart wagen

Nutzerfreundlich

Das Inline-Editing des Headless CMS mit WYSIWYG-Ansatz bietet eine außergewöhnlich hohe Nutzerfreundlichkeit - auch für Redakteur:innen ohne Spezialwissen. Das User Interface ist sehr intuitiv und einfach bedienbar. Es bietet zahlreiche Einstellungsmöglichkeiten und die Funktionen zur Content-Erstellung können durch Entwickler:innen grenzenlos erweitert werden. 

Komplexität und Erweiterbarkeit

Im Kontext einer geringen Komplexität bauen Content Management System Scrivito-Projekte auf Javascript und React auf. Es ist nicht notwendig eine CMS-spezifische Programmiersprache für das Headless CMS zu erlernen. Durch die Nutzung der weit verbreiteten Programmiersprache können Entwickler ohne viel Zusatzwissen in das Projekt starten und eine schnellen, qualitativ hochwertigen Website Relaunch realisieren. Inhalte und neue Features können schnell produktiv gestellt werden. 

Wir bei Pinuts sind uns einig, es macht einfach nur richtig viel Spaß mit diesem Headless CMS einen modernen Website Relaunch umzusetzen.

Lesedauer: 7 Minuten
Kategorie
CMS
Schlagworte
Headless CMSScrivitoUX Design
Autorin
placeholder

Selina Mahoche

Junior Online Marketing Managerin

Content has the power of emotions that touch people's lives. Nach diesem Motto haucht Selina Technologien Leben ein und nimmt unsere Nutzer:innen auf die emotionale Reise des digitalen Kundendialogs mit.

Wissenswertes zu diesem Thema 

CMS-Evaluation
System Integration
CMS-Evaluation: Was ist das beste CMS?
Enterprise CMS im Detail
CMS Fiona und Scrivito

Lernen Sie
uns kennen

Pinuts media + science Multimedia-Agentur GmbH