Responsiver Screenshot

Ein responsiver Screenshot ist die Aufnahme einer Webseite, die mit einer bestimmten Viewport-Breite und -Höhe gerendert wurde. Meist entsteht dabei ein Satz von Aufnahmen in mehreren Größen. Responsive Websites nutzen CSS Media Queries, Container Queries und flexible Layouts, sodass dieselbe URL je nach Breite eine andere Navigation, Spaltenzahl und einen anderen Bildausschnitt zeigen kann.

Ein Browser erzeugt das Smartphone-Layout nur, wenn der Viewport selbst schmal ist. Einen Desktop-Screenshot zu verkleinern ändert das Layout nicht. Tools legen deshalb die Viewport-Größe und oft auch den Skalierungsfaktor und den User-Agent fest, bevor die Seite lädt.

Warum responsive Screenshots wichtig sind

Design-Reviews, Kundenabnahmen und QA brauchen Belege dafür, wie eine Seite an jedem Breakpoint aussieht. Ein Layoutfehler tritt oft nur bei einer einzigen Breite auf, etwa ein Menü, das auf Tablets das Logo überdeckt. Ein Satz von Aufnahmen in festen Größen macht solche Fehler in einem einzigen Review sichtbar.

Übliche Viewport-Größen

Klasse	Beispiel-Viewport
Desktop	1920×1080, 1440×900, 1366×768
Tablet	768×1024 im Hochformat
Smartphone	390×844, 360×800

Die Größen sind in CSS-Pixeln angegeben. Ein Smartphone mit 3x-Skalierung rendert 390×844 CSS-Pixel mit 1170×2532 physischen Pixeln.

So nehmen Sie responsive Screenshots auf

• Im Browser die Entwicklertools öffnen, in den Gerätemodus wechseln und eine Größe wählen.
• Im Code den Viewport in Playwright oder Puppeteer vor der Navigation festlegen.
• In Website Capture (Command+2) von Temposhot ein Device wählen: Desktop 1920×1080, Tablet 768×1024 oder Mobile 390×844. Jede URL-Zeile kann ein eigenes Gerät und eine eigene Area haben, und Render preview zeigt eine Zeile vor dem vollständigen Lauf.

Häufige Fehler bei responsiven Screenshots

• Eine Desktop-Aufnahme skalieren, statt in der Zielbreite zu rendern.
• Viewport- und ganzseitige Aufnahmen in einem Vergleichssatz mischen.
• Ein Cookie-Banner stehen lassen, das das halbe Smartphone-Layout verdeckt.
• Aufnahmen vergleichen, die mit unterschiedlichen Skalierungsfaktoren entstanden sind.

Immer wieder dieselben Screenshots?

Fügen Sie in Website Capture jede URL einmal pro Gerät hinzu und arbeiten Sie die Liste in einem Durchgang ab. Mehr dazu unter Aufnahmeoptionen.

Häufige Fragen

Ist ein responsiver Screenshot dasselbe wie ein Smartphone-Screenshot?

Nein. Ein Smartphone-Screenshot hat eine einzige Größe. Responsive Screenshots sind ein Satz über mehrere Größen.

Brauche ich ein echtes Smartphone?

Für Layoutprüfungen reicht meist ein Browser mit Smartphone-Viewport. Gerätespezifische Fehler erfordern weiterhin ein echtes Gerät.

Quellen

• Responsive web design (Wikipedia)
• Viewport (MDN-Glossar)

Weiterführende Ressourcen

• Schnellstart für Website Capture: der erste Lauf mit einer URL-Liste.
• Läufe und Ergebnisse: Zeilenstatus und Wiederholungen.
• Seitenverhältnis-Rechner: die Proportionen einer Größe prüfen.