Der Design Engineer Ahmad Shadeed hat am 5. November in seinem Blog Site Seeing vorgestellt, ein Webwerkzeug, das eine Seite so zeigt, wie Nutzer sie tatsächlich vor sich haben: neben geöffneten Entwicklerwerkzeugen, mit vertikaler Tab-Leiste oder über der Bildschirmtastatur.[1]
Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügenInhalt 5 Abschnitte
Shadeed richtet das Werkzeug an Designer, Produktverantwortliche und Entwickler. Sein Ausgangspunkt: Ein Browserfenster ist selten so breit wie der Bildschirm. Breakpoints erfahren davon nichts.[1]
Das Wichtigste in Kürze
- Site Seeing zeigt eine Webseite in mehr als 15 Ansichten, darunter Entwicklerwerkzeuge, vertikale Tabs, Bildschirmtastatur, Split View, In-App-Browser und Druckansicht.
- Die Zieladresse muss das Einbetten auf fremden Domains erlauben, sonst hilft nur eine localhost-Adresse.
- Preis und Lizenz nennt die Seite nicht.
Welche Fenster testet Site Seeing?
Das Werkzeug lädt Ihre Adresse in Rahmen, die ein Browserfenster samt Umgebung nachstellen, von Entwicklerwerkzeugen über vertikale Tabs bis zur Druckansicht.
Auf dem Desktop stehen laut der Startseite unter anderem Entwicklerwerkzeuge zur Wahl, wahlweise unten, links oder rechts angedockt. Die vertikale Tab-Leiste verengt die Seite nach Angabe des Werkzeugs um mindestens 150 bis 200 Pixel. Hinzu kommen Zoom, ein gedrehter Hochformat-Monitor, ein ultrabreites Fenster, ein frei skalierbares Fenster und Overlays wie ein Taschenrechner neben der Seite.[2]
Für mobile Geräte bildet Site Seeing die Browserleisten von Chrome, Firefox und Safari nach, bei Safari wahlweise oben oder unten. Weitere Ansichten sind die Bildschirmtastatur, der Querformat-Modus mit Tastatur, der Reader-Modus, die Link-Vorschau von iOS, ein faltbares Gerät, Split View und der In-App-Browser.[2] Das Werkzeug arbeitet laut Hinweis auf der Seite am besten auf Laptop oder Desktop.[2]
Warum bricht ein Layout trotz sauberer Breakpoints?
Breakpoints messen die Fensterbreite, nicht, was im Fenster daneben und darüber Platz belegt. Tab-Leiste, Entwicklerwerkzeuge und Tastatur schrumpfen die Seite, ohne dass sich der Bildschirm ändert.
Ein Rechenbeispiel: Ein Fenster mit 1.440 Pixel Breite liefert mit einer 200 Pixel breiten Tab-Leiste nur noch 1.240 Pixel an die Seite. Ein Hero-Bereich, der für 900 Pixel Höhe gestaltet wurde, hat mit angedockten Entwicklerwerkzeugen deutlich weniger Platz. Laut Shadeed ist genau das der erste echte Test für die vertikale Anpassung einer Seite. Sie sehen den Fehler sonst erst, wenn ein Kunde ihn meldet.[2]
Bei der Bildschirmtastatur entscheidet der Browser, ob sich der Viewport verkleinert. Laut MDN schrumpft standardmäßig nur der sichtbare Ausschnitt, mit interactive-widget=resizes-content im Viewport-Meta-Tag passt sich dagegen der Viewport samt Viewport-Einheiten an.[3]
Auch beim Zoom gibt es eine feste Messlatte. Nach WCAG 2.1, Erfolgskriterium 1.4.10, muss Inhalt bei 320 CSS-Pixeln Breite ohne zweidimensionales Scrollen nutzbar bleiben, das entspricht 400 % Zoom bei 1.280 Pixeln Fensterbreite.[4]
Eckdaten, Stand 9. November 2026
Rechenbeispiel: Wie viel Breite bleibt einem Fenster mit 1.440 Pixeln?
Ein Layout, das nur auf Desktop und Smartphone geprüft wurde, ist nur halb getestet.
Markus Seyfferth, Chefredakteur Dr. Web
Wie ordnet sich Site Seeing neben Responsively ein?
Site Seeing stellt die Umgebung eines Fensters nach, Responsively ist ein ganzer Entwicklungsbrowser. Beide lösen verschiedene Aufgaben.
Die Responsively App ist laut Projektbeschreibung ein modifizierter Browser für responsive Webentwicklung. Der Code steht unter der AGPL-3.0, das Repository hatte am 9. November rund 25.500 GitHub-Sterne, der letzte Commit stammt vom 3. Oktober.[5] Site Seeing läuft dagegen ohne Installation im Browser und beantwortet eine engere Frage: Was passiert mit meiner Seite, wenn das Fenster nicht frei ist?
Wie das Werkzeug gebaut ist und ob der Quellcode offenliegt, geht aus der Seite nicht hervor. Preis, Lizenz und Betreiber außer Shadeed selbst nennt sie ebenfalls nicht. Der Blogbeitrag endet mit Werbung für Shadeeds Kurs The Layout Maestro, das Werkzeug selbst bleibt davon getrennt.[1][2]
Was sollten Agenturen vor dem Einsatz prüfen?
Kundenseiten müssen sich einbetten lassen. Preis und Lizenz sind offen.
Die Seite verlangt, dass Ihre Adresse das Einbetten auf fremden Domains erlaubt. Seiten mit entsprechender Sperre lassen sich nicht laden, für Entwicklungsstände hilft die Adresse localhost.[2] Ob ein Kunde die Abnahme mit Site Seeing akzeptiert, ist eine Frage der Absprache, denn das Werkzeug ersetzt keine Prüfung auf echten Geräten.
Als Einstieg genügen vier Ansichten: Entwicklerwerkzeuge, vertikale Tabs, Tastatur und Zoom. Setzen Sie fluide Schrift ein, erklärt die Zoom-Falle bei clamp(), warum die Zoom-Ansicht zum Test gehört. Wie sich Layouts auf faltbaren Geräten verhalten, behandeln die Beiträge zum iPhone Duo und zum Galaxy Z Fold 8. Der Einstieg in Container Queries hilft dort, wo Komponenten ihre Breite selbst messen sollen.
Quellen
5 Quellen anzeigenQuellen ausblenden
- Ahmad ShadeedBeyond the viewport: Introducing Site Seeing (Blogbeitrag vom 5. November 2026)
- Ahmad ShadeedSite Seeing (Werkzeug, Abruf)
- MDN Web Docsmeta name="viewport" (Abschnitt interactive-widget)
- W3CUnderstanding SC 1.4.10: Reflow
- GitHubresponsively-org/responsively-app (Abruf)
Mehr Newshunger?
- Utopia berechnet fluide Typografie und warnt vor der Zoom-Falle
- Ist Ihre App bereit für das iPhone Duo? Was Apples Falt-iPhone für App- und Webdesign bedeutet
- Galaxy Z Fold 8 wird breiter: Was faltbare Smartphones fürs Webdesign bedeuten
- 12 CSS-Funktionen, die Sie ohne Build-Schritt nutzen können
- CSS Units: Ein Nachschlagewerk misst alle 63 CSS-Einheiten live im Browser
- Sidenotes mit CSS Anchor Positioning: Randnotizen ohne JavaScript
