Elysia Tools
Mobile Navigation
Workflow Playbook
Vergleichen Sie eine Seite vor und nach dem Redesign bei gleichen Viewports, prüfen Sie Layout- und Farbänderungen und übergeben Sie begründete Freigaben mit nachvollziehbaren Bildnachweisen.
Themen
Dieser Ablauf unterstützt Entwicklung und Test bei einer einzelnen Seitenänderung. Er liefert Matrix, Aufnahmen, erklärte Befunde und eine menschliche Entscheidung, keine automatisch ausgeführte Testsuite. Serverseitige Aufnahmen nur für autorisierte öffentliche Seiten verwenden. Private Zustände benötigen ein genehmigtes externes Verfahren ohne Geheimnisse in der URL.
Ausgangsversion oder Originalbelege vor dem Rollout sichern. Version, Daten, Sprache, Schriften, Viewport, Aufnahmemodus, Farbpräferenz und Wartezeit festhalten. Werkzeug und Umgebung beibehalten. Ohne Baseline lässt sich aus einem neuen Screenshot keine Regressionsfreiheit ableiten.
375, 768, 1024 und 1440 Pixel bei einer vereinbarten Höhe sind mögliche Testfälle, keine universellen Breakpoints. Das Breakpoint-Werkzeug nimmt eine URL bei zwei bis sechs Breiten auf. Hier den Modus für benachbarte Breiten verwenden. Die Heatmaps vergleichen skalierte Bilder, keine historischen Releases und keine semantisch erkannten Komponenten.
Beschriftungen, Überlagerungen, unerwarteten horizontalen Überlauf und fehlende Inhalte prüfen. Spaltenwechsel und Zeilenumbrüche können richtig sein. Viewport-Aufnahmen decken nicht das ganze Dokument ab; weitere Bereiche separat untersuchen. Bericht und ZIP behalten, aber den Pixelanteil nicht zum Freigabekriterium erklären.
Beide Versionen mit Website Screenshot aufnehmen und echte Maße anhand der Metadaten prüfen. Für beliebige Maße den Mobilmodus vermeiden: Er nutzt derzeit einen festen Viewport von 375 mal 667. Verlustfreies PNG, opaken Hintergrund und kompatible Kanäle bevorzugen.
Image Difference streckt ungleich große Eingaben auf eine gemeinsame Fläche. Neu aufnehmen statt die Streckung als Vergleichbarkeit auszugeben. Das Werkzeug versteht keine Layoutsemantik. Auch Kanalunterschiede erfordern einen Stopp und externe Normalisierung oder neue Aufnahmen.
Vollständige Originale behalten. Ausschnitte mit Koordinaten, Maßen und Kontext kennzeichnen. Bewegte Elemente können das gleiche Koordinatenfenster verlassen; deshalb das Gesamtbild prüfen. Zuschneiden ist keine verlässliche Entfernung vertraulicher Daten.
Zeitstempel, Animationen, externe Bilder, Schriftladen und Testdaten kontrollieren. Mehr Wartezeit garantiert keinen stabilen Zustand. Das Ausblenden von Elementen setzt display none und kann das Layout verschieben; dokumentieren und abnahmerelevante Inhalte nicht ausschließen.
Extrahierte Paletten sind Stichproben, kein Nachweis eines konkreten Text-Hintergrund-Paars. Gerenderte Werte separat bestätigen und dann den Kontrast prüfen. Transparenz, Verläufe und Kantenglättung können Proben verfälschen. Ein gutes Paar zertifiziert keine barrierefreie Seite. Absichtliche Änderung, bestätigten Fehler, Aufnahmerauschen und offene Fälle getrennt erfassen.
Pro Befund Breite, Stelle, Originale, optionale Ausschnittkoordinaten, Soll/Ist, Begründung, Zuständigkeit und Nachtest dokumentieren. Lange Übersetzungen, verdeckte Bereiche und Interaktion extern autorisiert testen. Bilder beweisen weder Tastatur- noch Menü-, Formular- oder Touchverhalten.
Lokale Dateien für Referenz, Kandidat, Berichte, Unterschiede, Matrix und Entscheidung übergeben: annehmen, korrigieren, zurückstellen oder blockieren. Finale teilbare Dateien mit SHA-256 identifizieren; der Hash bestätigt keine Richtigkeit. Verwandte Abläufe übernehmen Stilinventar, umfassendere Barrierefreiheitsprüfung und Schriftvorbereitung.
Workflow-Leitfaden
Matrix und gleiche Aufnahmeeinstellungen festhalten, tatsächliche Dateimaße kontrollieren.
Benachbarte Breakpoints vergleichen, Screenshots und Überlaufwerte lesen, Bericht und ZIP sichern.
Maße und Kanäle vor dem Bildvergleich prüfen; optionale Diagnoseausschnitte mit Gesamtbildkontext behalten.
Palette als Hinweis verwenden und gegebenenfalls echte Vordergrund-/Hintergrundwerte für den Kontrast bestätigen. Absicht, Fehler und offene Tests trennen.
Der Breakpoint-Bericht betrachtet eine Version bei mehreren Breiten. Versionspaare benötigen getrennte Aufnahmen unter denselben Bedingungen.
Vollständige Originale behalten und Ausschnitte mit Koordinaten und Kontext dokumentieren. Überlauf nicht wegschneiden, um die Prüfung zu bestehen.
Zunächst Daten, Schriften und dynamische Inhalte prüfen. Paletten und Kontrast nur dann untersuchen, wenn eine Farbänderung dafür Anlass gibt.
Neue Aufnahmen, Entscheidungen und Grenzen sichern, finale lokale Dateien mit SHA-256 kennzeichnen.