Der Relaunch des Internetauftritts von klarmobil zog sich fast zwei Jahre lang ohne nennenswerten Erfolg dahin – bis schließlich die Medienwerft einstieg. Dann dauerte es nur noch zwei Monate, bis der Release abgeschlossen war. Seither entwickeln der Mobilfunkanbieter und die Web Developer der Digitalagentur auf Basis eines flexiblen Angular Frameworks mit Headless CMS immer neue Webkomponenten für die Seite.
Ein kompletter Relaunch einer Website ist immer ein großes und auch zeitintensives Projekt. Im Fall des Mobilfunk-Anbieters klarmobil, einer 100-prozentigen Tochter der freenet DLS GmbH, aber zog sich die Neugestaltung des Internetauftritts lange hin – zumindest anfangs. Angestoßen wurde das Projekt bereits im August 2020, erste Umsetzungen gingen jedoch erst zum Sommer 2022 live.
„Wir haben zunächst mit unseren internen Entwicklern angefangen und haben später eine externe Agentur hinzugezogen“, erinnert sich Hanna Feldtmann, Senior E-Commerce Managerin / Product Ownerin bei freenet. Es bestand allerdings weiterer Handlungsbedarf, um den Relaunch abzuschließen, weshalb freenet Mitte 2022 die E-Commerce-Agentur Medienwerft ins Boot holte.
Struktur in technische Grundbasis bringen
„Ein kleiner Teil der neuen Website war schon live, als wir hinzugekommen sind“, erinnert sich Bendix Hemsen, Web Developer bei der Medienwerft. Stück für Stück schlossen die neu hinzugestoßenen Entwickler aus Hamburg den Release ab, alle zwei Wochen etwa wurde ein weiterer Block gelauncht. Nur zwei Monate später, im August, beendeten Freenet und Medienwerft die Projektphase.
Die große Herausforderung bestand für Hemsen und seine Kollegen darin, Struktur in die technische Grundbasis zu bringen. „Das Gerüst hatte das Potenzial zur Unordnung“, beschreibt Hemsen diplomatisch. Geschuldet sei dies vor allem dem Umstand gewesen, dass viele verschiedene Entwickler an dem Relaunch beteiligt gewesen seien. „Neben uns waren es noch sechs andere“, so Hemsen. „Zudem war bei dem Projekt auf Seiten der Entwickler viel Fluktuation.“ Das Sprichwort mit den vielen Köchen hätte sich im Fall der klarmobil-Website also fast bewahrheitet, wenn Medienwerft nicht viel in der technischen Umsetzung geändert und die bestehenden Codes angepasst hätte. „Wir haben nach best practices gearbeitet“, beschreibt der Web Devoloper, der Spezialist für das TypeScript-basierte Front-End-Webapplikationsframework Angular ist. Nach diesem bauten die bis dato involvierten Entwickler die neue Seite auf. „Unsere interne IT wollte weg von PHP und hin zu Angular“, so Feldtmann. Für den Abschluss des Projekts suchte freenet dann gezielt Angular-Entwickler – und fand sie bei der Medienwerft.
Reduzierter Code und Modularität
Angular bietet gerade für die Erstellung von Single-Page-Webanwendungen, die aus einem einzigen HTML-Dokument bestehen und deren Inhalte dynamisch geladen werden, etliche Vorteile. Der Code wird deutlich reduziert, der Quelltext damit kleiner, das erhöht die Übersichtlichkeit und Wartbarkeit des Systems. „So konnten wir die erforderliche Struktur hineinbringen“, erklärt Web Developer Kaan Köklü von Medienwerft, der das Projekt mit Hemsen umgesetzt hat und nach wie vor betreut. Zusätzlich ist es mit diesem Framework möglich, Web-Komponenten einfacher und schneller umzusetzen, weil für Codekonsistenz gesorgt ist: Die Dienste und Komponenten in Angular beginnen auf dieselbe Weise und können modular zusammengebaut werden – ähnlich wie Lego-Steine. Die Modularität von Angular ermöglicht es zudem, die Arbeit auf mehrere Entwickler zu verteilen. Das kommt der agilen Methode Kanban sehr gelegen, nach der freenet und Medienwerft inzwischen im firmen- und abteilungsübergreifenden Team arbeiten. Hemsen: „Dort, wo die Kompetenzen und Kapazitäten eines Entwicklers liegen, zieht er sich ein entsprechendes Ticket.“ Zusätzlich ermöglicht der modulare Aufbau, Komponenten, die primär für Klarmobil entwickelt wurden, mit wenigen Anpassungen im Design auch für die anderen Marken von freenet zu nutzen.
Zudem kann in Angular jeder Teil der Anwendung technisch getestet werden, wodurch der Anwendungsfluss und die Zusammenarbeit aller integrierten Teile sichergestellt werden. „Wir haben die End-to-End-Tests weiter ausgebaut und angepasst, um sicherzustellen, dass potenzielle Fehler aus der Benutzersicht noch vor dem Release entdeckt und behoben wurden“, so Köklü. Einem möglichen Systemabsturz wird durch diese Art des Testings vorgebeugt.
Bessere Performance, geringere Absprungrate
Die positiven Folgen: Die Performance der Website ist deutlich besser, das Error Handling einfacher. „Schnittstellen sind per se potenziell gefährlich für eine gute Performance, umso wichtiger ist ein gutes Testing und ein sauberer Code“, weiß Hemsen. „Die Seite ist nun viel schneller“, bestätigt auch Feldtmann, auch die Conversion Rate habe sich enorm verbessert. „Die Absprungrate im Checkout ist deutlich zurückgegangen“, nennt die E-Commerce Managerin ein Beispiel. Und: Der neue Internetauftritt verfolgt den mobile-first-Ansatz. Feldtmann: „Der mobile Traffic steigt, die alte Seite war aber nicht für mobile Devices gemacht.“
Daneben verbesserten die Web Developer auch die Barrierefreiheit der Seite. Hemsen: „Das Thema Accessibility wurde vorher eher stiefmütterlich behandelt.“ Dabei sei es gerade für einen Shop in der Größe von klarmobil.de wichtig, barrierefrei zu sein: So muss es beispielsweise möglich sein, dass Nutzer per Tastatur navigieren können, wenn das Bedienen einer Maus für sie schwierig oder gar unmöglich ist.
Entlastung bei Freenet-Mitarbeitern
Doch nicht nur für Endkunden bringt die neue Website Verbesserungen, auch Feldtmann und ihre Kollegen profitieren vom neuen Headless CMS-Ansatz: Denn die alte Seite war historisch gewachsen, ihr zugrunde lag daher ein „Spaghetti-Code“, wie es seitens freenet heißt. Es gab auch kein Content-Management-System (CMS), für jede noch so kleine Änderungen musste deshalb ein Ticket an die IT geschrieben werden. „Wir konnten nicht mal eine Headline selbst ändern, sondern mussten damit unsere IT beauftragen“, erinnert sich Feldtmann. „Da wir das nicht priorisieren konnten, haben wir dann schon mal zwei Wochen auf die Änderungen gewartet.“ Dank des nun eingesetzten CMS Contentful und gewissen Automatisierungen, die das Framework Angular ermöglicht, lassen sich Änderungen und neue Kampagnen rasch und im Self-Service umsetzen. „Das entlastet unsere IT natürlich sehr“, so Feldtmann.
Obwohl die neue Seite seit knapp einem Jahr gelauncht ist, geht die Zusammenarbeit von freenet und Medienwerft und die Arbeit am Webauftritt stetig weiter. Immer neue Webkomponenten werden entwickelt, jüngst zum Beispiel eine Infoseite zum Thema Roaming. Aktuell arbeitet Medienwerft unter anderem an einer Abbrecher-Umfrage. Köklü: „User werden zur Teilnahme an einer Umfrage gebeten, wenn langes Warten oder ein bestimmtes Mauszeigerverhalten darauf hindeuten, dass sie eine Aktion abbrechen wollen“, erklärt Köklü.
Den Relaunch von klarmobil.de führten die Web Developer von Medienwerft zum Erfolg. Die neue Seite besticht nun durch eine hohe Performance und Barrierefreiheit. Dadurch verbesserte sich die Conversion Rate deutlich. Und auch intern bewirkte das Projekt deutliche Verbesserungen: Die Mitarbeiter können im Headless CMS Änderungen nun ohne Unterstützung der IT vornehmen, neue Kampagnen lassen sich so schnell und einfach umsetzen. Dank des zugrundeliegenden Frameworks Angular ist die technische Basis des Internetauftritts sehr strukturiert, das verbessert die Wartbarkeit und Weiterentwicklung des Systems deutlich.
Julia Kowal ist Redakteurin für Wordfinder PR.
klarmobil.de, eine Marke der freenet AG
