17 Schritte zum perfekten Webseiten Relaunch

In der neuen Verantwortung als Marketingleiter stellt man schnell fest, dass ein Webseiten-Relaunch eine der dringenderen Aufgaben auf der langen Liste strategischer Ziele ist. Auch wenn man bereits Erfahrungen mit der Durchführung und Leitung eines Webseiten-Relaunches sammeln konnte, ist die Wahrscheinlichkeit gross, vor einem der folgenden Relaunch-Szenarien zu stehen:

  • Die Webseite wurde in den letzten Jahren vernachlässigt. Der Content ist nicht mehr aktuell oder technische Grundvoraussetzungen werden nicht erfüllt.
  • Das CMS der Webseite ist veraltet und wird modernen Anforderungen nicht mehr gerecht.
  • Das Unternehmen hat sich weiterentwickelt und die bisherige Webseite passt nicht mehr zur aktuellen Situation.
  • Sich verändernde Marktbedingungen und Trends erfordern die Implementierung neuer Features. Vielleicht ist es sogar kostengünstiger, das gesamte Ökosystem auf einer robusten und zukunftssicheren Plattform zu relaunchen, anstatt mit dem bisherigen Technologie-Stack weiter zu arbeiten.

In jedem Fall wurde die Entscheidung zugunsten eines Webseite-Relaunches gefällt! Sehen wir uns also die Punkte an, die hinsichtlich der Erstellung eines Briefings und der Spezifizierung der Anforderungen berücksichtigt werden müssen. 

Checkliste für die Vorbereitung des Webseiten-Relaunches

Folgende Dinge sollten während der Vorbereitungen eines Webseite-Relaunches in Betracht gezogen werden:

  • Branding: Branding-Guide, Style Guide, Web-Fonts, Ikonographie
  • Keyword- & Content-Strategie: SEO-Keyword-Mapping, Informationsarchitektur (IA)
  • Konzept & Wireframing: Seitenlayout inkl. Content-Entwurf, Workshops mit Stakeholdern organisieren
  • UX & Konversionsraten-Optimierung: UX- und CRO-Audit, Zusammenarbeit mit einem Web-Designer mit UX-Erfahrung
  • Copywriting: Interne Ressourcen und/oder Budget reservieren und ausreichend Zeit einplanen
  • Fotografie: Authentizität, Porträts, Teamfotos, Hintergrundbilder
  • Illustrationen: optional und teuer, ggf. Budget reservieren
  • Web-Design: pixelgenaue Mockups auf Basis von Wireframes und Branding-Inputs
  • Content Management Systeme & Entwicklung: Auswahl des richtigen CMS, Auswahl der richtigen technischen Agentur
  • Suchmaschinen-Sichtbarkeit (SEO): Sicherstellen, dass für relevante Suchbegriffe hohe Platzierungen auf der Suchmaschinenergebnisseite (SERP) erreicht werden
  • Übersetzung und Mehrsprachigkeit: Ressourcen für die Übersetzung des Contents einplanen
  • Conversion Tracking & Analytics: Web-Analytics in Betracht ziehen, damit es nach dem Relaunch keine Datenverluste gibt
  • Seitengeschwindigkeit / Performance: Die Entwickler zur Performance der neuen Webseite herausfordern, um Abstrafungen durch Suchmaschinen und Besucher zu vermeiden
  • Geräte- und Browserkompatibilität: Vor dem Launch ordnungsgemässe Cross-Device- und Cross-Browser-Tests durchführen
  • Rechtliches & GDPR: Sicherstellen, dass die Datenschutzrichtlinien auf dem neuesten Stand sind und konform mit der Datenschutz-Grundverordnung sind, z. B. durch die Implementierung einer Self-Service-Datenschutzmanagement-Lösung auf der Webseite
  • CRM-Integration: Wir empfehlen, dass alle Kunden-Touchpoints auf der Webseite an das CRM weitergeleitet werden
  • Content-Migration & CMS-Schulung: Einplanung von Ressourcen für die Migration des Contents auf die neue Webseite sowie vorangegangene CMS-Schulung
  • Hosting, Wartung & Sicherheit: Information über die Service Level Agreements, die die gewählte Agentur anbietet und Speichern nächtlicher Backups an einem sicheren Ort (z.B. in der Cloud)
  • Kontinuierliche Entwicklung: Überprüfung der Verfügbarkeit des Entwicklers auch nach dem Launch, damit die Webseite kontinuierlich verbessert und an veränderte Markttrends und Anforderungen angepasst werden kann

Der umfassende Guide zum Relaunch von Webseiten

Branding

Du hast nur wenige Sekunden Zeit, um die Besucher auf deiner Seite zu „fesseln“. Daher sollte die Webseite ein Gefühl vermitteln, das deine Marke auf Anhieb repräsentiert und das Interesse potenzieller Kunden an deinen Produkten und Dienstleistungen weckt. Bei der Neugestaltung der Webseite wird der Webdesigner Input zum Branding benötigen. Verfügst du über einen Branding-Guide oder einen Styleguide der Dinge wie Fotografie, Typografie oder Ikonografie definiert oder muss ein solcher erst erstellt werden?

Keyword- & Content-Strategie

Gehe einen Schritt zurück und denke darüber nach, welchen Content du auf deiner Webseite sehen möchtest. Was sind die Bedürfnisse deines Zielpublikums, welchen Informationsbedarf hat es? Marktforschung hilft bei der Suche nach Antworten, allerdings kann auch ein Blick auf die vorhandenen Daten in Google Analytics Abhilfe schaffen. Aus SEO-Sicht ist es sinnvoll, eine Keyword-Strategie zu erstellen. 

Ein weiterer Aspekt ist die Informationsarchitektur (IA) der Webseite. Welche Seiten wird es geben und wie ist ihre Hierarchie? Welcher Content befindet sich auf welcher Seite? Denke dabei an Testimonials, Dienstleistungen, Produkte, Projekte, das Team, Kontakt, Jobs, Blog und Landing Pages. Überprüfe vorhandenen Content auf der bestehenden Webseite, Kataloge, Datenblätter und Firmenpräsentation. In der Regel spiegeln sich diese Informationen in einer Sitemap wider, als Shortcut kann man auch direkt Wireframes erstellen. 

Konzept & Wireframing

Wireframes sind unerlässlich. Tatsächlich empfehlen wir, niemals mit der Designarbeit zu beginnen, bevor die Wireframes nicht fertiggestellt sind. Du kannst es dir auch so vorstellen: Würdest du mit der Inneneinrichtung deines Wohnzimmers beginnen, bevor es fertige Pläne für das ganze Haus gibt? Wahrscheinlich nicht. Gleiches gilt für eine Webseite. Für die Erstellung von Wireframes verwenden Profis Software wie XD, Sketch oder Figma.

Wireframes dienen der Content-Strukturierung – welche Seiten enthalten welchen Content und wie sieht das Layout aus? Zudem sollen sie Content und Webseitenfunktionalität greifbar machen. Es ist wichtig, Wireframes in das Design-Briefing mit einzubeziehen, da sie eine wesentliche Informationsquelle für Designer sind. 

Profi-Tipps:
  • Binde den technischen Projektleiter frühzeitig ein.
  • Gute Wireframes werden normalerweise stark von den Marketing-, Vertriebs- und Produkt-Verantwortlichen im Unternehmen beeinflusst. Organisiere daher Wireframing-Workshops mit ihnen, um herauszufinden, was die Kunden ihrer Meinung nach brauchen.
  • Gute Wireframes verwenden keinen „Lorem Ipsum“-Text, sondern enthalten einen ersten Entwurf des eigentlichen Textes.
  • Gute Wireframes standardisieren Layout-Komponenten, da dadurch die Anzahl der Content-Komponenten, die später im Content Management System implementiert werden müssen, reduziert wird.

UX & Konversionsraten-Optimierung

Optimiere die User Experience (UX), indem geeignete Calls-to-Action gesetzt werden. Die Webseite kann optisch noch so ansprechend sein – wenn sie nicht nutzerfreundlich ist, hilft dies jedoch wenig. Potenzielle Kunden müssen in der Lage sein, problemlos durch die Webseite zu navigieren, das zu finden, wonach sie suchen und klare Handlungsaufforderungen erhalten. Wenn diese Voraussetzungen nicht erfüllt sind, verliert man potenzielle Kunden möglicherweise an einen Mitbewerber. Wir führen UX & Conversion-Rate-Optimierung hier getrennt vom Wireframing auf, weil du möglicherweise einen UX/CRO-Spezialisten vor, während oder nach dem Design beauftragen möchtest. Generell ist es aber ohnehin ratsam, mit einem Webdesigner mit guten UX- und CRO-Fähigkeiten zu arbeiten.

Copywriting

Bei Bedarf sollten interne Ressourcen für die Texterstellung reserviert oder im Budget berücksichtigt werden. Dies erspart dir wertvolle Zeit, wenn du die Inhalte deiner Webseite selbst verfassen musst. Es ist empfehlenswert, ein Copywriting-Briefing zu erstellen, um die gesamte Kommunikation zu vereinheitlichen. Wichtig ist auch, die Seite auf (Tipp-) Fehler zu überprüfen – sie schaden dem Markenimage.

Fotos

Sobald du weisst, welcher Content erstellt werden soll, ist es an der Zeit, über geeignete Fotos nachzudenken. Die meisten Webseiten-Besucher wissen nämlich nicht, wer hinter dem Unternehmen steckt. Hochwertige Fotos, wie z.B. Porträts oder Teamfotos sind daher eine grossartige Möglichkeit, deine wertvollsten Assets zu präsentieren. Dabei sollten auch Stil und Art der Hintergrundbilder sowie anderer fotografischer Gestaltungselemente festgelegt werden. Profi-Tipp: Stock-Bilder sollten so gut es geht vermieden werden. Die Organisation eines Fotoshootings ist oft weniger Aufwand als gedacht und die Ergebnisse können eindrucksvoll sein. Zudem wirkt die Webseite dadurch authentischer und hebt sich von der Konkurrenz ab.

Illustrationen

Auch wenn individuelle Illustrationen oft als optionales Element betrachtet werden, machen Illustrationen, die sich an Corporate Identity/Corporate Design (CI/CD) orientieren, oft einen riesigen visuellen Unterschied. Illustrationen können komplizierte Prozesse und Abläufe einfach erklären oder anstelle von Fotos eingesetzt werden und den Seiteninhalt dadurch interessanter und abwechslungsreicher gestalten.

Web Design

Endlich ist es soweit und die Designarbeit kann beginnen! Ein professioneller Webdesigner erstellt hochauflösende, realistische Mockups als statische Bilddarstellung der späteren Webseite. Diese Mockups müssen High-Fidelity sein oder wie es in der Welt des Webdesigns heisst: pixel-perfect. Pixel-perfectness bedeutet, dass der Frontend-Entwickler die Mockups bis zum letzten Pixel respektiert. Hierbei sollte der technische Projektleiter von Anfang an involviert werden. Einen guten Artikel über die Feinheiten und Tücken des Handovers vom Web-Designer zum Front-End-Entwickler findest du hier. Spoiler: er ist sehr technisch.

Content Management System (CMS) & Entwicklung

Content Management-Systeme (CMS) sind das Rückgrat einer jeden modernen Webseite. Das CMS ermöglicht es dem technischen Team, sich auf die technischen Aspekte zu konzentrieren, während die Redakteure die Inhalte der Webseite selbstständig, d. h. schnell und kosteneffizient, aktualisieren können. Die Auswahl des richtigen CMS ist ein kleines Projekt für sich, das zu komplex ist, um es hier zu behandeln. Wenn du mehr über die Auswahl des richtigen CMS für deinen Webseiten-Relaunch erfahren möchtest, wende dich an Mario Colombo.

Los geht‘s mit dem Bau der neuen Webseite! Beachte jedoch: Ohne ein fertiges und vollständig genehmigtes Design sollte die Entwicklung der Webseite in jedem Fall noch warten. Zwar verlängert sich dadurch die Gesamtdauer des Projekts, es werden jedoch viele Unklarheiten und Frustrationen beim technischen Team vermieden. 

Wenn eine professionelle Agentur beauftragt werden soll, weiss deren technisches Team, was zu tun ist. Der technische Projektmanager wird dich in die Prozesse, Kollaborationstools und das Reporting einführen und bei Fragen frühzeitig auf dich zukommen. Zu den modernen Ansätzen gehören die asynchrone Kommunikation und Zusammenarbeit über ein Tool wie Slack, das Ticket-, Aufgaben- und Code-Management auf einer Plattform wie GitLab, GitHub oder ähnlichem sowie Continuous-Deployment-Pipelines zur täglichen Demonstration der Arbeitsschritte.

Die folgenden Themen umfassen jedoch Punkte, die proaktiv mit dem technischen Projektmanager besprochen werden sollten, da diese möglicherweise nicht ganz oben auf dessen Prioritätenliste stehen.

Sichtbarkeit in Suchmaschinen

Die Suchmaschinenoptimierung wird beim Relaunch einer Webseite oft vergessen oder zu spät in Angriff genommen. Der perfekte Zeitpunkt für SEO ist während der Keyword- und Content-Strategie-Phase, daher ist es ratsam, sich frühzeitig mit einem SEO-Spezialisten abzustimmen, der bei der Informationsarchitektur (IA), der Content-Strategie und der Keyword-Analyse behilflich ist.

Während der Entwicklungsphase muss sichergestellt werden, dass die HTML-Seitenstruktur für Suchmaschinen optimiert ist. Hierfür sollten Ressourcen reserviert und Titel-, URL-, und Description-Tags für das Copywriting und die Übersetzung schon im Voraus bedacht werden.

Profi-Tipps:
  • Weiterleitungen, auch Redirects genannt, sollten beim Going Live eingerichtet sein.
  • Nach dem Relaunch sollte überprüft werden, ob noch Zugriff auf die Search Console besteht.
  • Die langfristige SEO-Keyword-Strategie sollte nach dem Relaunch geplant bzw. angepasst werden.

Mehrsprachige Einstellung & Übersetzungen

Welche Sprachen soll deine Webseite unterstützen? Möglicherweise möchtest du ein Budget für Übersetzungen einplanen. Die Bearbeitung des Contents für mehrsprachige Webseiten nimmt zu Beginn oft etwas mehr Zeit in Anspruch. Ausserdem können weitere Sprachen in die SEO-Strategie einbezogen werden sowie die Sichtbarkeit bei der Suche auch für diese Sprachen optimiert werden.

Conversion-Tracking und Analytics

Denke daran, Google Analytics zu migrieren, den Google Tag-Manager einzurichten, Conversion-Ziele zu definieren (z.B. Whitepaper-Download) und die Entwickler darauf hinzuweisen, das Tracking auf der Webseite zu implementieren. 

Performance

Die Seitengeschwindigkeit bestimmt die Qualität des Nutzererlebnisses. Zu langsame Seiten werden von Nutzern oft weggeklickt, daher ist die Optimierung der Seitengeschwindigkeit von grosser Bedeutung. Dazu gehört auch Server-Caching, Browser-Caching, Bildoptimierung, Frontend-Architektur usw. Um die Seitengeschwindigkeit zu überprüfen, sollte eine Google PageSpeed-Analyse durchgeführt werden, deren Ergebnisse anschliessend mit dem technischen Projektleiter besprochen werden.

Geräte- und Browserkompatibilität 

Definiere deine Kompatibilitätsmatrix anhand der Google Analytics-Auswertungen: Welche Browser und Geräte sind besonders relevant? Ist die IE11-Kompatibilität notwendig? Berücksichtige alle Anforderungen der Webseite in deinem Budget.

Datenschutz/DSGVO

Prüfe, ob die Webseite der Datenschutz-Grundverordnung entspricht. Dazu sollte sie eine Datenschutzvereinbarung beinhalten und über entsprechende Datenschutzberechtigungen verfügen, die mit den jeweiligen Vorschriften übereinstimmen.

CRM-Integration

Ein CRM-System wie z.B. Hubspot oder Pipedrive, sowie Formulare und Tracking sollte eingerichtet werden, um den Überblick über Kunden und Leads zu behalten. So können  Kunden auch nach dem ersten Besuch der Webseite erneut erreicht werden.

Content-Migration & CMS-Schulung

Berücksichtige den Bedarf an Content-Management-Ressourcen in deinem Budget (entweder intern oder extern). Das Hochladen des fertigen Contents kann einige Zeit in Anspruch nehmen, da auch sichergestellt werden muss, dass die Inhalte sich an der richtigen Stelle befinden. Wenn du dir unsicher bist, frage deinen technischen Projektleiter nach einer Zeit- und Ressourceneinschätzung für die Content-Bearbeitung. Bedenke auch, dass die eigenen Mitarbeiter möglicherweise eine gewisse Einarbeitungszeit benötigen, um ein neues Content Management System zu erlernen. Hier sind Schulungen mit dem technischen Projektleiter eventuell eine gute Idee.

Hosting, Wartung und Sicherheit

Lasse dich von deiner Agentur über leistungsstarkes Hosting und die angebotenen Service Level Agreements (SLA), einschliesslich regelmässiger Backups, Reaktionszeiten und Verfügbarkeiten informieren. Im schlimmsten Fall kann so Datenverlust aufgrund von fehlenden Backups vermieden werden. Ausserdem werden Webseiten oft gehackt, daher sollte der Wartungsvertrag auf jeden Fall regelmässige Sicherheits-Updates beinhalten.

Kontinuierliche Entwicklung

Da sich Markttrends schnell ändern und sich die Webseite-Technologie täglich weiterentwickelt, empfehle ich, mit Verbesserungen nicht bis zum nächsten Webseiten-Relaunch zu warten. 

Normalerweise stehen nach einem Go-Live noch einige Nice-to-haves und andere Punkte an, die bis nach dem Launch der Webseite warten können. Diese sollten von den Entwicklern nach und nach im Prozess der kontinuierlichen Entwicklung in Angriff genommen werden. Das wichtigste ist, hierfür ein jährliches Budget zur Verfügung zu haben, das in die Verbesserung und Anpassung der neuen Webseite investiert werden kann. 

Möchtest du mehr erfahren?

Die Neugestaltung einer Webseite hilft dabei, die Nutzererfahrung zu optimieren und den Kundenbedürfnissen gerecht zu werden. Mit unserer Checkliste für den perfekten Webseiten-Relaunch kannst du eine einzigartige Webseite erstellen, um eine neue Marke oder Botschaft zu präsentieren. Wenn du weitere Informationen über unsere Web- und App-Entwicklungsdienste sowie Beratung erhalten möchtest, sende eine E-Mail an Mario Colombo, technischer Leiter und Gesellschafter.