Responsive Screenshot

Ein responsiver Screenshot zeigt eine Webseite mit mehreren Viewport-Breiten – etwa für Desktop, Tablet und Mobilgerät – und macht sichtbar, wie sich das Layout an verschiedene Bildschirmgrößen anpasst.

Related workflow terms: Viewport-Screenshot, Ganzseiten-Screenshot.

Warum responsive Screenshots wichtig sind

Bei responsivem Webdesign sehen Seiten je nach Viewport-Breite unterschiedlich aus und können sich auch anders verhalten. Ein Layout, das bei 1440 px funktioniert, kann bei 375 px Fehler zeigen. Responsive Screenshots dokumentieren diese Unterschiede. Designer, Entwickler und QA-Teams können damit prüfen, ob alle Zielgrößen richtig dargestellt werden.

Das geht über ein kurzes Verkleinern des Browserfensters hinaus. Die Screenshots bleiben als visueller Nachweis erhalten, lassen sich vergleichen, weitergeben und archivieren. Das ist besonders hilfreich, wenn Personen eine Änderung freigeben sollen, ohne die Seite gleichzeitig live zu öffnen.

Häufig verwendete Viewport-Größen

Meist genügt eine kleine Auswahl üblicher Breakpoints:

• 1440 px: großer Desktop-Monitor.
• 1280 px: Desktop oder Laptop.
• 1024 px: kleiner Desktop oder großes Tablet im Querformat.
• 768 px: Tablet im Hochformat.
• 375 px: Mobilgerät in einer typischen iPhone-Breite.
• 360 px: Mobilgerät in einer häufigen Android-Breite.

Die richtigen Werte hängen von den Breakpoints des jeweiligen Projekts ab. Entscheidend sind die Breiten, an denen sich das Layout verändert – nicht beliebige Zwischenwerte.

Responsive Screenshots erstellen

Für eine einzelne Prüfung kannst du das Browserfenster von Hand ändern oder die Geräteemulation in den DevTools verwenden und bei jeder Breite einen Screenshot machen. Bei vielen Seiten oder wiederkehrenden Prüfungen wird dieser Ablauf schnell aufwendig.

Headless-Browser und automatisierte Screenshot-Tools nehmen eine Liste von Viewport-Breiten entgegen und erfassen dieselbe URL für alle Größen in einem Durchgang. Manche Website-Crawler unterstützen das direkt: Du gibst URL und gewünschte Viewports an und erhältst eine Aufnahme pro Größe.

Häufige Fehler bei responsiven Screenshots

• Nur Desktop aufnehmen. Ohne Tablet- und Mobilbreiten bleiben Fehler in kleineren Viewports unbemerkt.
• Beliebige Fensterbreiten verwenden. Ein zufälliger Wert löst möglicherweise nicht dieselben Layout-Wechsel aus wie die tatsächlichen CSS-Breakpoints. Verwende die Werte des Projekts oder verbreitete Gerätebreiten.
• Vorher und nachher nicht vergleichen. Responsive Screenshots sind besonders aussagekräftig, wenn beide Stände nebeneinander liegen. Ohne Vergleich ist schwer zu erkennen, ob eine Änderung korrekt ist oder einen Rückschritt verursacht hat.
• Querformat vergessen. Tablets und Smartphones werden auch quer gehalten. Soll das Layout beide Ausrichtungen unterstützen, nimm beide auf.