Wie teste ich meine Website nach der CMS-Migration richtig?

Beim Testen einer migrierten Website kann leicht etwas übersehen werden, das später zu Problemen oder Mehrkosten führen könnte. Wie Sie Ihr Testing angehen, um dies zu vermeiden, erklären wir hier.

Eine Website-Migration ist ein großes Projekt, für das im Regelfall bereits Vorarbeit geleistet wurde. Im optimalen Fall haben Sie Ihre Website im alten CMS also bereits analysiert - oder analysieren lassen - und haben bereits Seitentypen (Seiten, die vom Aufbau gleich sind und sich nur in Content unterscheiden) identifiziert.

Nachdem Sie vom Migrationsteam Bescheid bekommen, dass die Migration abgeschlossen ist, liegt es in Ihrer Verantwortung, Ihre Seite zu kontrollieren und eventuelle Fehler zu melden.

Wir haben den Review-Prozess in mehrere Phasen aufgeteilt, um systematisch und gründlich zu kontrollieren:

1. Seiten kontrollieren
2. Design kontrollieren
3. Funktionalität kontrollieren
4. Mobile Version testen
5. Backend Funktionen und Befüllung
6. Freigabe

1. Kontrollieren Sie alle Seiten oder Seitentypen

Der erste Task auf der Liste ist, sich alle Seiten der Website durchzusehen und zu testen. Wenn Ihre Website nur wenige Seiten umfasst, empfiehlt es sich gleich alle Seiten anzusehen.

Speziell für umfangreiche Websites empfehlen wir (am besten noch vor der Migration) Ihre Seite zu analysieren und zu identifizieren, welche Seitentypen oder -templates Sie in Verwendung haben. Oft unterscheiden sich gewisse Seiten (z.B. Produkt-Seiten) nur im Inhalt. Wenn die Seiten dieselbe Struktur verwenden, sprechen wir von einem Seitentyp. Nicht jeder Seitentyp ist auf Websites mehrfach vorhanden (z.B. Kontakt-Seite).

Wenn Sie eine Aufteilung in Seitentypen gemacht haben, können Sie viel Zeit sparen, indem Sie eine Seite pro Seitentyp kontrollieren.

Sollten Seiten fehlen, melden Sie dies bitte dem Migrationsteam, damit diese nachgezogen werden.

2. Look & Feel der Seite

Dieser Schritt wird eigentlich nicht vergessen, aber wir weisen trotzdem darauf hin. Prüfen Sie, ob die Seite im neuen CMS auch dem Look & Feel oder CI / CD Vorgaben Ihrer Marke und der alten Website entsprechen.

Ein paar Dinge, auf die Sie achten sollten:

• Hover-Effekte
  Viele Elemente auf Ihrer Website verwenden Hover-Effekte. Fahren Sie mit der Maus über diese Elemente, um zu kontrollieren, ob die richtigen Farben oder Übergänge vorhanden sind.
  
  Beispiele: Text-Links, Buttons, Menüs, Bilder, Slider, ...
• Dynamische Elemente
  Einige Elemente verwenden dynamische Effekte oder Übergänge, die beispielsweise über Javascript funktionieren können. Diese können Bei Klick auf die Elemente oder durch andere Interaktion gestartet werden.
  
  Beispiele: Bild-Galerie, Buttons, Popups, Bilder, Slider, ...
• Schriftarten
  Versichern Sie sich, dass die richtigen Schriftarten auf Ihrer Seite vorhanden sind. Besonders wenn Sie hauseigene oder gekaufte Schriften verwenden, sollte darauf geachtet werden, dass die Dateien, die Sie dem Migrationsteam im Fall zur Korrektur zuschicken, webtauglich sind und dass Sie diese auch wirklich verwenden dürfen.
  Sie können sich hierzu auch eine Browsererweiterung installieren, wenn Sie die Schrift mit freiem Auge nicht so gut erkennen oder nicht wissen, wie man die Schriftart mit den Entwicklertools feststellen kann.
  
  Vorschlag für Google Chrome: Fonts Ninja

3. Funktionalität

Wenn alles optisch gut und richtig aussieht, geht es in den nächsten Schritt: Versichern Sie sich, dass die funktionalen Bestandteile Ihrer Website so funktionieren, wie Sie es gewohnt sind. Dafür gehen Sie die Prozesse am besten so durch, wie Ihre Kunden und/oder Buyer Personas.

Wenn Sie auf Ihrer alten CMS Seite Tracking wie Hotjar o.Ä. integriert hatten, nehmen Sie diese Auswertungen als Hilfe zu Ihrem Testing, um die wichtigsten Elemente Ihrer Website zu kontrollieren.

Einige Beispiele von Elementen, die getestet werden sollten:

• Slider
  Hierzu zählen nicht nur Heros sondern auch Referenzen-, Testimonial- oder Logo-Slider. Prinzipiell jedes Element, das eben eine Slide-Funktion hat.
• Gallerien
  Bilder-Gallerien können auch ein Slider sein, haben oft aber auch eine Lightbox-Funktion oder sogar beide Funktionen. Es kommen auch Hover-Effekte wie Zoom, oder Farb- bzw. Graustufen-Effekte zum Einsatz.
• Menüs
  Testen Sie Ihre Dropdowns und Mega-Menüs. Lassen sich die Elemente gut (wie im alten CMS) bedienen? Funktionieren mehrstufige Menü-Hierarchien, wie sie sollen?
• Popups
  Gibt es Popups auf Ihrer Seite, die sich bei Klick auf einen Button öffnen sollen? Wenn ja, kontrollieren Sie den Inhalt.
• Formulare
  Schicken Sie Ihre Formulare testweise ab und schauen Sie, ob alles funktioniert. Dies ist besonders wichtig, wenn Sie in HubSpot Workflows eingerichtet haben, die nach Formulareinsendungen ablaufen (sollen).
  Geben Sie vor Ihrem Testlauf bitte ggf. dem Team Bescheid, das sich um Kontaktaufnahme mit den Kontakten von Formulareinsendungen kümmert, um Verwirrung zu vermeiden.

4. Mobile Version

Nachdem Sie Ihre Tests der Desktop-Version Ihrer Website abgeschlossen haben, kontrollieren Sie bitte unbedingt auch die mobile Version. Sie können dies entweder mithilfe der Entwicklertools Ihres Browsers testen oder Cross-Browser-Testing Software nehmen, sollten Sie keine Mobilgeräte direkt zur Hand haben.

Wenn Sie Mobilgeräte zur Hand haben, testen Sie Ihre Seite auf "echten" Geräten durch. Im besten Fall testen Sie einmal auf Android und einmal auf iOS - oder anderen Betriebssystemen, die in Ihrer Zielgruppe verbreitet sind.

Einige Beispiele, auf die Sie achten sollten:

• Menü
  Im Regelfall sind Websites in der Mobilversion mit einem Burger-Menü ausgestattet. Testen Sie, ob sich alle Ebenen Ihres Menüs gut bedienen lassen.
• Hero
  Wenn Sie im Hero Ihrer Seiten Bild und Text kombinieren, müssen sich die Elemente mobil anders anordnen. Überprüfen Sie, ob die Anordnung mit Ihrer alten CMS Seite übereinstimmt und sich die Slider-Controls gut bedienen lassen.
• Umbrüche
  Kontrollieren Sie, ob zwei- oder mehrspaltige Elemente so umbrechen, wie auf der alten CMS Seite oder ob es zu Problemen kommt.
• Popups
  Wenn Sie in der Desktop-Version Ihrer Website Popups haben, sollten Sie diese mobil überprüfen. Klappt das Popup und lassen sich die Inhalte gut bedienen?
  
  Im Regelfall empfehlen wir Popups in den Mobilversionen auszublenden und stattdessen auf eine Landingpage weiterzuleiten. Wenn Popups von Ihrem alten CMS migriert wurden, sollten Sie diese aber dennoch überprüfen.

5. Backend Funktionen und Befüllung

Im Idealfall haben Sie Ihre Tests im Frontend bereits abgeschlossen und gehen anschließend erst das Backend an.

Fehlt beispielsweise eine Überschrift eines Moduls im Frontend, wird danach im Backend ein zusätzliches Feld für diese Überschrift hinzukommen. Deswegen sollte man mit der Kontrolle der Backend-Funktionen warten, bis man das Frontend abgesegnet hat und sich dort keine Fehler mehr befinden.

Worauf Sie bei diesem Schritt speziell achten sollten:

• Wer testet
  Wenn Sie üblicherweise den Content Ihrer Website nicht selbst pflegen oder ändern, würden Sie beim Testen des Backends vom Input des Content-Teams profitieren. Sie wissen, welche Änderungen oft gemacht werden und können bei gemeinsamen Testdurchläufen das neue CMS auch ein wenig kennenlernen.
• Frontend Vorschau
  Backend & Frontend gehen natürlich immer Hand in Hand. Sehen Sie sich die Testseite, die Sie gebaut haben, auch im Vorschaumodus an, ob alles richtig dargestellt wird.
• Dynamische Elemente
  Wenn Sie Module haben, die eine dynamische Anzahl von Elementen enthalten, testen Sie unbedingt, ob Sie beliebig viele Elemente hinzufügen oder entfernen können. Die Darstellung in einem Slider sollte mit beliebig vielen oder wenigen Elementen funktionieren.
  
  Beispiele: Bild-Gallerien, Hero-Slider, Logo-Slider, Referenzen-Slider, ...
• Theme Einstellungen
  Bei den Theme Einstellung gibt es leider keine Testing-Umgebung, allerdings lassen sich alle Änderungen wieder auf den Standard zurücksetzen, der vom Migrationsteam hinterlegt wurde.
  Sie können bereits im Vorschaumodus sehen, ob alle relevanten Elemente auf z.B. die Änderung der Primärfarbe anspringen. Sie können die Änderungen auch auf jeder veröffentlichten Seite oder jedem Seiten-Template als Vorschau anzeigen lassen. Indem sie die Vorschau-Seiten ändern, können Sie alle Elemente schnell überprüfen.

6. Freigabe

Ihnen steht nach einer Migration ein bestimmter Zeitrahmen zur Verfügung, um Fehler zu melden. Wenn Ihnen dieser Zeitraum unbekannt ist oder nicht kommuniziert wurde, fragen Sie gerne beim Migrationsteam nach. Sollte etwas nicht richtig funktionieren - Frontend oder Backend - geben Sie dem Migrationsteam bitte Bescheid.

Sollten Sie bei Ihren Tests keine Fehler feststellen können, können Sie Ihre Migration abschließen.