Performante statische Website

Erstellung verschiedener statischer Website unter der Hauptdomain von Staffbase. Mit Blick auf ein möglichst starkes SEO-Ranking haben wir wichtige Content-Seiten auf einen performanten JAMstack-Ansatz umgestellt.

Die Challenge

Für Staffbase sollten mehrere performante Static Sites entwickelt werden. Die Verbindung mit einem benutzerfreundlichen Content-Management-System war dabei unabdingbar, damit Online-Redakteure die Inhalte leicht pflegen können.

Das Unternehmen

Staffbase ist ein schnell wachsendes Unternehmen aus Chemnitz, das eine Mitarbeiter App als moderne Intranet Alternative entwickelt. Um das große Wachstum zu bewältigen sucht Staffbase eine große Anzahl neuer Mitarbeiter.

Für unseren Kunden Staffbase aus Chemnitz durften wir mittlerweile mehrere Projekte mit dem Jamstack Ansatz umsetzen. Die statisch generierten Websites wie Blog und Karriereseiten integrieren sich nahtlos in das Ökosystem der Staffbase Website.

WordPress als Headless CMS

Staffbase betreibt einen umfangreichen Blog, um über Trends der internen Unternehmenskommunikation und den Entwicklungen der Staffbase Mitarbeiter-App zu berichten. Mittlerweile finden sich auf dem Blog über 385 Blogposts, die eine wichtige Rolle im Content-Marketing des Unternehmens spielen. Der Blog war ursprünglich mit der Marketing Software Hubspot umgesetzt. Zudem ist der Blog zweisprachig in deutsch und englisch erreichbar.

Aufgrund verschiedener Faktoren wie SEO-Ranking, Optimierung der Ladezeiten sowie der moderne Gutenberg-Editor von WordPress, entschied man sich bei Staffbase den Blog auf eine WordPress umzuziehen. Jedoch sollten der Blog selbst als statische Seite umgesetzt werden, sodass WordPress nur als Headless CMS genutzt wurde. Die Umsetzung erfolgte mit dem Static Site Generator GatsbyJS. Die Basis des Frameworks stellen React und GraphQl als Datenlayer dar.

Dynamische Vorschau trotz statischer Seite

Ein wichtiges Kriterium war die Vorschaufunktion, die trotz JAMstack-Ansatz ermöglicht werden sollte. Die WordPress-eigenen Funktionen konnten wir dafür nicht nutzen. Daher entwickelten wir eine dynamische Komponente, die bei Aufruf Daten von der WordPress API abruft und live rendert.

Mit dem Ansatz war es möglich, den Blog als statisch gerenderte Website aufzusetzen und gleichzeitig den Editoren des Blogs einen modernen Editor wie den Gutenberg Editor zur Verfügung zu stellen. Die unterschiedlichen Sprachversionen des Blogs wurden über das Multisite Feature bei WordPress realisiert.

Recruiting Pages mit Jamstack

Um sein schnelles Wachstum zu unterstützen, sucht Staffbase neue Mitarbeiter an seinen sieben Standorten weltweit in 20 verschiedenen Teams. Zur Bewältigung dieser Aufgabe wurde Greenhouse als neue Recruiting-Plattform gewählt. Unsere Aufgabe war es, eine neue, ansprechende Karriereseite zu gestalten und umzusetzen. Sie sollte nicht nur Jobangebote aus Greenhouse auflisten und eine Bewerbung ermöglichen, sondern auch weitere Informationen zu den Standorten, Teams und der Kultur von Staffbase bieten.

Um die Vielfalt der Standorte und Teams hervorzuheben und gleichzeitig übersichtlich zu präsentieren, haben wir die Seite nach diesen beiden Gruppierungen organisiert. Außerdem haben wir dafür ein System von Icons entwickelt, um Teams und Standorte wiedererkennbar zu präsentieren.

Da Greenhouse als Quelle für die gewünschte Reichhaltigkeit der Seite nicht ausreichte, haben wir ein zusätzliches Headless CMS ausgewählt und integriert, das Bilder und Texte bereitstellt und diese nahtlos mit den Informationen von Greenhouse kombiniert. Dadurch ist es für Mitarbeiter des People Experience Teams möglich, alle Inhalte auf der Seite eigenständig zu erstellen und zu bearbeiten.

Um optimale Geschwindigkeit, Sicherheit und Zuverlässigkeit zu erzielen, haben wir auch für dieses Projekt eine moderne statische Seite mit dem Gatsby Framework entwickelt. Dennoch muss auf keinen der Vorteile einer dynamischen Seite verzichtet werden: Jegliche Änderungen an Stellenanzeigen in Greenhouse werden automatisch innerhalb von Minuten auf der Seite aktualisiert und Autoren erhalten in wenigen Sekunden eine Vorschau der Seite, während sie Bilder und Texte bearbeiten. Bewerbungen können direkt abgeschickt werden ohne die Seite zu verlassen.

Das Projekt wurde erfolgreich zum geplanten Zeitpunkt abgeschlossen und hat inzwischen eine große Zahl an Bewerbungen ermöglicht.

Als Hauptsponsor der Chemnitzer Niners entwickelten wir für Staffbase eine Player of the Game Landingpage

Mit PHMU arbeite ich erfolgreich seit mehr als zwei Jahren an verschiedenen Staffbase-Projekten zusammen. Ein wichtiger Punkt dabei: Wir agieren immer auf Augenhöhe, was die Zusammenarbeit und die Kommunikation sehr angenehm gestaltet. Das letzte gemeinsame Projekt war die Blog-Migration von Hubspot zu Wordpress. Wobei Wordpress als Headless CMS zur Datenpflege dient und das Frontend mit Hilfe von GatsbyJS (Static Site Generator) erzeugt wird. Der Blog wird fortlaufend zusammen weiterentwickelt. Das Team hat ein hohes Maß an Projekterfahrung, ist aktiver Bestandteil der Web-Development-Szene und neugierig auf den Einsatz neuer Technologien. Durch diese Faktoren ist das Team in der Lage, moderne und individuelle Lösungen zu empfehlen und zu entwickeln.

Philipp Storl
Senior Web Developer, Staffbase GmbH
Erzählen Sie uns vom Ihrem Projekt projekte@phmu.de

© 2020 PHMU. All rights reserved.