Responsive Seiten wirken auf den ersten Blick wie „derselbe Inhalt, nur anders auf verschiedenen Bildschirmen angeordnet“. Doch sobald man tatsächlich mit der Aktualisierung beginnt, sind meist mehrere Stellen betroffen: Ein neues Hauptbild verändert den Zuschnitt auf dem Smartphone, eine geänderte Rubrikbezeichnung wirkt sich auf Navigation und Breadcrumb aus, und das Löschen eines alten Abschnitts kann dazu führen, dass ein bestehender Link auf eine leere Seite zeigt. Deshalb ist es zeitsparender, vor dem Start die zu prüfenden Punkte klar zu ordnen, als nach dem Livegang Seite für Seite nachzubessern.
Die folgende Beschreibung gliedert sich in die drei Phasen Vorbereitung, Prüfung und Nachkontrolle und eignet sich als direkte Checkliste für Mitarbeiter in Betrieb oder Redaktion einer Unternehmenswebsite.
1. Zuerst Umfang und Auswirkungen des Updates klären
Der erste Schritt vor dem Update ist nicht das Öffnen des Editors, sondern die schriftliche Klärung: „Was genau wird geändert und welche Seiten sind davon betroffen?“ Notieren Sie zunächst den Zweck in einem Satz, zum Beispiel: „Die drei Beschreibungen im Leistungsbereich werden durch neue Texte ersetzt und die Bilder ausgetauscht.“ Je konkreter das Ziel, desto leichter lässt sich später beurteilen, welche Stellen synchron angepasst werden müssen.
Erstellen Sie anschließend eine Liste der betroffenen Seiten. Diese sollte mindestens enthalten:
- Seiten, die direkt bearbeitet werden, z. B. eine Rubrikseite oder eine Detailseite;
- Seiten, die denselben Inhalt oder dasselbe Bild verwenden, z. B. Empfehlungsbereiche auf der Startseite oder verwandte Leistungsmodule;
- gemeinsam genutzte Bereiche wie Navigation, Breadcrumb und Footer;
- Elemente mit Weiterleitung oder Absendefunktion wie Formulare und Buttons.
Wenn nur Texte geändert werden und die Struktur unverändert bleibt, ist der Umfang meist gering. Bei Rubrikanpassungen, Template-Änderungen oder Bildaustausch müssen auch die gemeinsam genutzten Bereiche in die Prüfung einbezogen werden. Die Faustregel ist einfach: Kann der geänderte Inhalt auch auf einer anderen Seite erscheinen? Wenn die Antwort „möglich“ lautet, gehört er auf die Liste.
2. Gerätebreiten und Darstellung in realistischen Szenarien prüfen
Der Kern responsiver Seiten ist die Anordnung bei unterschiedlichen Breiten. Vor dem Update empfiehlt es sich, einige gängige Breiten tatsächlich zu prüfen, statt nur die Desktop-Ansicht zu betrachten:
- Hochformat-Breite von Smartphones: Augenmerk darauf, ob Text gestaucht wird, Buttons gut antippbar sind und Bilder das Hauptmotiv verlieren;
- Tablet- oder schmale Fensterbreite: Augenmerk darauf, ob Rubriken umbrechen und Tabellen überlaufen;
- gängige Desktop-Breite: Augenmerk auf Weißraum und Bildschärfe.
Beschränken Sie die Prüfung nicht auf die Startseite. Rubrikseiten, Detailseiten und Formularseiten können unterschiedliche Anordnungsregeln haben. Besonders Seiten mit Tabellen, langen Überschriften oder großen Bildern neigen zu Problemen auf schmalen Bildschirmen. Bei langen Überschriften können Sie den Text zunächst in die Seite einsetzen und beobachten, ob er auf schmalen Bildschirmen zu stark umbricht oder Buttons verdeckt.
Wenn bei diesem Update Bilder ersetzt werden, stellen Sie sicher, dass dasselbe Bild auf schmalen Bildschirmen noch klar erkennbar ist. Angenommen, ein Querformat-Bild wird auf dem Smartphone quadratisch zugeschnitten – dann kann das Hauptmotiv abgeschnitten werden. Solche Fälle lassen sich in der Vorschau früher erkennen als nach dem Livegang.
3. Navigation, Buttons und Formulare sind die störanfälligsten Stellen
Auf responsiven Seiten klappen Navigation und Buttons auf schmalen Bildschirmen oft ein oder ändern ihre Position. Prüfen Sie vor dem Update besonders:
- ob geänderte Rubrikbezeichnungen in der Navigation auch im eingeklappten Menü aktualisiert wurden;
- ob längere Button-Texte auf schmalen Bildschirmen noch vollständig sichtbar sind;
- ob der Absende-Button nach Hinzufügen oder Entfernen von Formularfeldern noch sichtbar ist;
- ob Buttons mit Weiterleitung auf die richtige Seite verweisen.
Bei Formularen sollten zusätzlich Feldreihenfolge und Hinweistexte separat geprüft werden. Wenn bei der Aktualisierung Pflichtfelder angepasst wurden, muss die Zuordnung von Hinweis und Feld stimmen, damit Nutzer nicht mitten im Ausfüllen raten müssen, wo der Fehler liegt. Die Prüffrequenz für Formulare kann sich am Update-Rhythmus orientieren: Nach einer Änderung einmal prüfen, nicht bei jedem Update die gesamte Website neu testen.
4. Bilder, Dateinamen und Medienbibliothek gleich mit aufräumen
Updates responsiver Seiten gehen häufig mit dem Austausch von Bildern einher. Es empfiehlt sich, bereits beim Ersetzen einheitlich zu benennen, zum Beispiel nach dem Muster „Rubrik-Zweck-Nummer“, damit das Team später den Inhalt erkennen kann. Die Benennung muss nicht kompliziert sein, aber Bezeichnungen wie „Neuer Ordner 1“ oder „Endversion 2“ sollten vermieden werden.
Beim Bildaustausch gleich mit prüfen:
- ob Bilder überflüssigen Weißraum enthalten, durch den das Hauptmotiv auf schmalen Bildschirmen zu klein wirkt;
- ob an derselben Stelle noch alte Bilder verbleiben, die mit entfernt werden müssen;
- ob in der Medienbibliothek bereits wiederverwendbare Bilder vorhanden sind, um doppelte Uploads zu vermeiden.
Wenn mehrere Rubriken einer Unternehmenswebsite dieselbe Medienbibliothek nutzen, lohnt vor dem Update ein Blick auf die Kategorisierung, um später Zeit bei der Bildsuche zu sparen. Die Medienbibliothek kann nach Rubrik oder Zweck gruppiert werden; die konkrete Methode richtet sich nach den Gewohnheiten des Teams.
5. Alte Links, alte Inhalte und Suchinformationen gemeinsam behandeln
Beim Update responsiver Seiten wird am häufigsten übersehen, wohin alte Inhalte verschwinden. Wenn eine Seite zusammengeführt oder gelöscht wird, verlieren Links, die auf sie zeigen, ihre Gültigkeit. Exportieren Sie vor dem Update eine Liste der alten Seiten und klären Sie Punkt für Punkt:
- welche Seiten bleiben, welche zusammengeführt und welche gelöscht werden;
- ob Links gelöschter Seiten auf eine neue entsprechende Seite zeigen müssen;
- ob interne Links in Navigation, Footer und Artikeltexten noch auf gültige Seiten verweisen.
Auch direkt mit der Seite verbundene Suchinformationen wie Titel und Beschreibung sollten beim Update abgeglichen werden. Wenn sich das Seitenthema geändert hat, passen der bisherige Titel und die Beschreibung möglicherweise nicht mehr und müssen angepasst werden. Solche Informationen erfordern keine konkreten Algorithmus-Schlussfolgerungen; es genügt die Regel: Schreiben Sie, worum es auf der Seite geht.
6. Nach dem Update mit derselben Checkliste nachkontrollieren
Nach Abschluss des Updates empfiehlt es sich, die Checkliste von vor dem Update in umgekehrter Richtung durchzugehen: Wurden alle geänderten Seiten geöffnet? Funktionieren Navigation und Buttons? Lässt sich das Formular normal absenden? Gibt es noch ungültige alte Links? Für die Nachkontrolle ist es sinnvoll, ein anderes Gerät oder ein anderes Browserfenster zu verwenden, um nicht nur in der gewohnten Umgebung zu prüfen.
Falls etwas übersehen wurde, notieren Sie, um welche Art von Problem es sich handelt, zum Beispiel „Bildzuschnitt“ oder „Navigation nicht synchronisiert“. Beim nächsten Update können dann gleichartige Stellen priorisiert geprüft werden. Bei langfristig gepflegten Websites kommt es nicht darauf an, ein Update perfekt umzusetzen, sondern darauf, dass jede Aktualisierung einer wiederverwendbaren Prüfreihenfolge folgt.
Fassen Sie die genannten Schritte zu einer Checkliste zusammen, die zur eigenen Website passt, und legen Sie sie an einer für das Team sichtbaren Stelle ab. Wenn bei Updates responsiver Seiten jeder Punkt der Reihe nach durchgegangen wird, lassen sich viele Nachbesserungen nach dem Livegang vermeiden.
