Unser Relaunch von WordPress zu Jamstack: Schneller, sicherer und bereit für die Zukunft

Mit unserem frischen Webseiten-Relaunch verabschieden wir uns von WordPress und heißen die technischen Vorzüge von Jamstack und Headless-CMS willkommen. Entdeckt unser neues Design und erlebt, wie unsere Website jetzt schneller ist, während wir gleichzeitig die Tür für spannende Features und zukünftige Erweiterungen öffnen.

Der Abschied von WordPress

Als das Netzwerk für IT & Digitalisierung in Heilbronn-Franken haben wir natürlich auch einen hohen Anspruch an unsere digitale Präsenz. Bei unserer Gründung im Jahr 2014 setzten wir auf WordPress. Dieses CMS, das mittlerweile 43% aller Webseiten antreibt, ist zwar beliebt, brachte uns jedoch auch einige Herausforderungen. Mit jedem Update schienen neue Probleme zu entstehen: mal funktionierte die Webseite nicht richtig, mal entstanden Sicherheitslücken durch die vielen Plugins und das eingesetzte Theme. Die Wartung nahm viel Zeit in Anspruch und trotzdem häuften sich die Mängel über die Jahre - von Sicherheitsproblemen bis hin zu Performance-Einbußen und Darstellungsproblemen auf verschiedenen Endgeräten.

Deshalb haben wir uns Anfang des Jahres dazu entschieden, einen Relaunch durchzuführen. Und eines stand schnell fest: Nicht mehr mit WordPress! 🙂

Jamstack mit Headless-CMS 

In den letzten Jahren hat sich bei Webentwicklern das Jamstack-Modell in Kombination mit Headless-CMS als eine der effizientesten und zukunftsorientierten Technologien etabliert. „Jam“ steht für die Schlüsseltechnologien der Webentwicklung: JavaScript, APIs und Markup, während „Stack“ das Zusammenspiel dieser Technologien verdeutlicht. Im Gegensatz zu WordPress, wo das Front-End und Back-End eng miteinander verknüpft sind, ermöglicht Jamstack eine Trennung des Front-Ends vom Back-End (Headless CMS). Dies resultiert in einer geringeren Anfälligkeit für Sicherheitsprobleme und bietet gleichzeitig eine höhere Flexibilität und Performance. Während WordPress-Seiten häufig langsam laden, sorgt Jamstack für eine blitzschnelle Ladegeschwindigkeit und eine reibungslose Benutzererfahrung. Die einfache Skalierbarkeit und Wartung sind weitere Pluspunkte gegenüber dem traditionellen Ansatz. Jamstack ermöglicht die Realisierung von Webseiten, die nicht nur leistungsfähig, sondern auch zukunftssicher und leicht anzupassen sind.

Realisierung & Highlights

Der komplette Relaunch - vom Design bis zur technischen Umsetzung - wurde aus einer Hand von der Digital Agentur gravima aus Heilbronn umgesetzt. Mit dem Relaunch wurde nicht nur die Technologie unserer Webseite aktualisiert, sondern auch das Design aufgefrischt. Dabei war es uns wichtig, die Corporate Identity des Vereins zu bewahren, während wir eine moderne und ansprechende Ästhetik einführen. Ein Hauptaugenmerk lag auf der prominenten Darstellung von Events und News. Die neue Struktur der Website ermöglicht es uns, wichtige Informationen und Updates effektiv und ansprechend zu präsentieren. 

Ein Highlight unserer neuen Webseite ist der von gravima eingebaute interaktive Chatbot auf Basis der fortschrittlichen Technologie von ChatGPT-4. Der Bot wurde mit den Daten der Webseite und weiteren Informationen von connect.IT trainiert. So kann er unseren Besuchern in natürlicher Sprache viele Fragen automatisiert beantworten, etwa zu anstehenden Events, den Details rund um unseren Verein, den Mitgliedsunternehmen oder dem Mitgliedsbeitrag für natürliche Personen oder Unternehmen einer bestimmten Größe. Probiere es unbedingt selbst mal aus!

Für die Techies in unserer Community haben wir auch einige verspielte Design-Elemente einbauen lassen, wie zum Beispiel die Galerie oben auf der Startseite für Highlight-Events und -News in einer Art Spielkarten-Optik, der Pixel-Scroll-Effekt oder die interaktiven 3D-Titelbilder. Hierdurch erscheint unsere Webseite lebendig und ansprechend für alle Besucher.

Das Interview

Tim Rüdenauer von der Digital Agentur gravima war als Projektleiter maßgeblich an der Umsetzung beteiligt. Tim bringt eine breite Palette von technischen Fähigkeiten mit, die von der Frontend- bis zur Backend-Entwicklung reichen. Wir haben Tim über die Phasen, Herausforderungen und Lösungen des Relaunch-Projekts befragt.

connect.IT: Wie verliefen die verschiedenen Phasen des Relaunch-Projekts und was waren die größten Arbeitspakete?

Tim: Unser Design-Team hat mit der Konzeption des Seitendesigns begonnen, während unser Content-Team die Inhaltsstrategie geplant hat. Parallel zur iterativen Verbesserung des Seitendesigns, konnten wir bereits mit der Implementierung des Backends und Frontends beginnen – ebenfalls größtenteils unabhängig voneinander. Der Jamstack und die komponentenbasierte Umsetzung des Frontends machten dies möglich.

Unser agiler Ansatz während der Umsetzung beflügelte uns, anstatt dass wir aufeinander warten mussten. Nachdem das Design abgenommen wurde, passten wir die rudimentären Templates und Komponenten aus Phase 1 zügig an das fertiggestellte Design-System an. Anschließend konnten wir die Seiteninhalte der alten Vereinswebsite mithilfe der flexiblen neuen Bausteine schnell und ansprechend zusammenfügen. 

Die bestehenden News konnten durch ein selbst entwickeltes Script importiert werden. Unser Content-Team musste jedoch einige inhaltliche Feinanpassungen vornehmen, da WordPress die Inhalte anders ablegt als Strapi.

Am Ende ist so ein Projekt immer eine große Teamleistung, von der Konzeption über das Design und die Technik bis hin zu inhaltlichen Aspekten.

connect.IT: Was sind die Vorteile des Jamstack-Modells im Vergleich zu herkömmlichen Websites auf Basis von WordPress oder TYPO3?

Tim: Der offensichtlichste Aspekt sind die besseren Ladezeiten. Durch die Entkopplung der Präsentationsebene für Besucher von der Inhaltsverwaltung durch die Webseitenbetreiber steigt außerdem die Sicherheit. Ein weiterer interessanter Vorteil ist die Flexibilität, die Inhalte des CMS an weitere Endpunkte weiterzugeben – zum Beispiel eine Mobile App. Das ermöglicht eine skalierbare Content-Strategie über die reine Web-Präsenz hinaus.

connect.IT: Wie aufwändig ist eigentlich so ein Relaunch von traditionellen zu Jamstack-basierten Webseiten?

Tim: Das hängt stark von den konkreten Anforderungen und der Content-Strategie ab. Die Website sollte die individuellen Ziele bei der Unternehmensentwicklung – wie Lead-Gewinnung oder effektiver und ansprechender Kommunikation – unterstützen. Das Backend soll eine intuitive Oberfläche für die Verwaltung und Erstellung neuer Inhalte bieten, um nicht jeden Mitarbeiter aufwändig schulen zu müssen.

Es ist jedoch gar nicht so aufwändig, wie man im ersten Moment vermutet. Mit einer soliden Planung aller Anforderungen an Design, Inhaltsstruktur und SEO kann man sogar Aufwände einsparen, da das Team durch die Entkopplung von Daten und Präsentationsebene parallel arbeiten und so Feedbackschleifen auf das Mindeste reduzieren kann.

connect.IT: Was bedeutet Headless CMS und welche Systeme kannst du empfehlen?

Tim: Ein Headless CMS (Content Management System) ist ein Backend-System, das Inhalte über APIs bereitstellt, so dass Entwickler die Freiheit haben, das Frontend mit der Technologie ihrer Wahl zu gestalten. Im Gegensatz zu traditionellen CMS, die Frontend und Backend miteinander verbinden, ermöglicht dies eine flexiblere und technologieunabhängige Inhaltsverwaltung.

Für eine vielseitige Content-Strategie wie bei connect.IT ist Strapi eine ideale Wahl. Das CMS bietet eine flexible Verwaltung von Inhaltstypen über die einsteigerfreundliche Benutzeroberfläche wie z.B. Events, Mitglieder, Funktionäre oder Blog-Beiträge sowie der Beziehung zwischen diesen Content-Typen. Die eingebauten Features für API-User,  Benutzer- und Rechteverwaltung und Mehrsprachigkeit erfüllen die Anforderungen an eine moderne und mehrsprachige Website, ohne dafür separate Erweiterungen installieren zu müssen. Durch den Open-Source-Ansatz sind Erweiterungen flexibel und kostengünstig möglich und es gibt keinen Vendor-Lock-In.

Schon seit längerem beobachten wir Payload, welches kürzlich in der Version 2.0 erschienen ist. Wir haben es intern bereits angesehen und uns gefällt sowohl der Prozess für Entwickler als auch das minimalistische, aber intuitive Design der Benutzeroberfläche sehr gut. Für unsere nächsten Jamstack-Projekte werden wir Payload CMS definitiv als Alternative in Betracht ziehen!

connect.IT: Welche Auswirkungen kann ein Relaunch auf die Sichtbarkeit in Suchmaschinen haben?

Tim: Jeder Relaunch sollte Suchmaschinenoptimierung (SEO) frühzeitig berücksichtigen, um typische Fehler zu vermeiden. Bereits im Design-Prozess werden viele Weichen für SEO gestellt. Wichtige Fragestellungen sind hierbei: Was sind meine relevanten Keywords? Wie kann ich diese sinnvoll bei der inhaltlichen Struktur der gesamten Webseite berücksichtigen? Welche Inhalte mit welcher Gliederung sollten auf einzelnen Seiten vorgesehen werden? Welche Ziele sollen erreicht werden und wie schaffe ich dazu den passenden Benutzerfluss? Welche Metadaten und strukturierten Daten wie zum Beispiel Stellenangebote, Produkte oder Bewertungen müssen berücksichtigt werden.

Leider mussten wir bereits viele Website-Relaunchs beobachten, bei denen die Sichtbarkeit in den Keller abgerutscht ist. Aspekte, die nicht frühzeitig im Projekt berücksichtigt werden, müssen später mit viel Aufwand nach implementiert werden.

Jamstack-Webseiten haben gegenüber traditionellen Systemen einige Vorzüge in Bezug auf die Sichtbarkeit in Suchmaschinen. Denn bei Google zählen Faktoren wie Performance, Sicherheit, eine gute Benutzererfahrung sowie eine klare Strukturierung von Code und der Seiten-Strutkur mit zu den zentralen Rankingfaktoren.

connect.IT: Es sind ja bereits Erweiterungen für unsere Webseite geplant. Was kannst du uns dazu verraten und wie unterstützt uns das gewählte CMS dabei?

Tim: Als erstes soll eine Übersetzung der Website ins Englische erfolgen, da unsere Region zunehmend internationaler wird. Strapi CMS bietet integrierte Unterstützung für Mehrsprachigkeit. Somit können wir flexibel weitere Sprachen hinzufügen. 

Auch das Thema Barrierefreiheit wird immer wichtiger und steht bei connect.IT weit oben auf der Liste. Die komponentenbasierte Umsetzung des Frontends mit Next.js und React ermöglicht eine iterative Anpassung und Optimierung der bestehenden Seitenelemente für Screenreader und andere assistive Technologien. Als netter Nebeneffekt werden damit oft auch die SEO-Werte besser. 

Zukünftig wäre es auch denkbar, dass Mitglieder ihre eigenen Events und Blogs auf der Seite einreichen, um das Netzwerk weiter zu stärken. Mit dem Relaunch haben wir einen guten Grundstein für künftige innovative Erweiterungen gelegt.

connect.IT: Wie zeitaufwändig ist so ein Relaunch und mit welchen Kosten ist zu rechnen?

Tim: Die Dauer und Kosten eines Relaunchs hängen stark von den gewünschten Leistungen ab. Unsere eigene Webseite gravima.de haben wir innerhalb von 2 Wochen von WordPress auf Jamstack umgestellt mit einem Aufwand von nur ca. 12 Personentage. Das Projekt bei connect.IT erstreckte sich über mehrere Monate, einschließlich den Pausen für Abstimmungen mit dem Vorstand. Hierbei haben wir einen Full-Service-Ansatz verfolgt und uns um alle Aspekte, wie die Aktualisierung des Designs und die Überarbeitung der Inhalte gekümmert. Generell lässt sich sagen, dass ein kleineres Projekt ab etwa 9.000€ beginnt. Die Investition ist jedoch sinnvoll, um gut für die digitale Zukunft gerüstet zu sein.

Fazit

Unsere Webseite präsentiert sich nun in einem moderneren und frischeren Gewand, das die Innovationskraft und Dynamik unseres Netzwerks widerspiegelt. Wir würden uns freuen, wenn auch dir unsere neue Webseite sowohl funktionell als auch visuell gefällt und zum Entdecken und Verweilen einlädt.