Viewport-Screenshot

Ein Viewport-Screenshot erfasst genau den Bereich, der zu einem bestimmten Zeitpunkt im Browser- oder App-Fenster sichtbar ist. Er entspricht damit dem tatsächlichen Bildschirmausschnitt eines Nutzers.

Related workflow terms: Bildschirmaufnahme.

Viewport- und Ganzseiten-Screenshot

Ein Viewport-Screenshot zeigt nur den momentan sichtbaren Bereich. Ein Ganzseiten-Screenshot erfasst den gesamten scrollbaren Inhalt von oben bis unten. Welche Variante passt, hängt vom Zweck ab.

Wenn der sichtbare Zustand wichtig ist, ist der Viewport die richtige Wahl: etwa für Inhalte oberhalb der Scrollgrenze, einen modalen Dialog, einen Tooltip oder eine bestimmte Scrollposition. Soll die vollständige Seitenstruktur geprüft werden, ist ein Ganzseiten-Screenshot geeigneter.

Die meisten gewöhnlichen Screenshots, die über ein Tastenkürzel ausgelöst werden, sind Viewport-Aufnahmen. Der Begriff wird vor allem zur Abgrenzung von Ganzseiten- und Scroll-Screenshots verwendet.

Einsatzbereiche

• Prüfung oberhalb der Scrollgrenze: Sieh, was Nutzer vor dem ersten Scrollen sehen und welchen ersten Eindruck die Seite vermittelt.
• Modale Dialoge und Hinweise: Dokumentiere Pop-ups, Tooltips und Überlagerungen, die nur im sichtbaren Bereich erscheinen.
• Fehlerberichte: Halte genau den Zustand einschließlich der Scrollposition fest, in dem ein Problem auftritt.
• Responsive Tests: Nimm dieselbe Seite in mehreren Viewport-Größen auf und prüfe die Layout-Anpassung.
• A/B-Test-Dokumentation: Bewahre die Variante auf, die ein Nutzer beim Öffnen der Seite tatsächlich sehen würde.

Viewport-Größen und responsive Aufnahmen

Die Viewport-Größe bestimmt, wie viel auf den Bildschirm passt. Häufig verwendete Breiten sind:

• 1440 px: großer Desktop.
• 1280 px: normaler Desktop.
• 1024 px: kleiner Desktop oder großes Tablet.
• 768 px: Tablet im Hochformat.
• 375 px: Mobilgerät in einer typischen iPhone-Breite.

Automatisierte Aufnahme-Tools und Browser-DevTools können diese Werte gezielt simulieren. So entstehen responsive Screenshots: dieselbe URL in mehreren Breiten, damit sich die Anpassung des Layouts vergleichen lässt.

Häufige Fehler

• Viewport-Größe nicht angeben. Ohne die Fensterabmessungen lässt sich ein Screenshot schwer einordnen. Notiere die Größe, besonders bei einer Prüfung durch andere.
• Viewport-Inhalt mit der vollständigen Seite verwechseln. Wichtige Bereiche können unterhalb der Scrollgrenze fehlen. Braucht die Prüfung den gesamten Kontext, nimm die Ganzseite auf.
• Eine ungewöhnliche Fensterbreite verwenden. Bei einem beliebigen Wert kann das Layout von typischen Nutzeransichten abweichen. Verwende verbreitete Größen oder die Breakpoints des Projekts.
• Device Pixel Ratio vergessen. Auf einem High-DPI- beziehungsweise Retina-Display kann ein 1440 px breiter Viewport ein 2880 px breites Bild erzeugen. Das beeinflusst Dateigröße und Darstellung auf Bildschirmen ohne Retina-Auflösung.