Was ist der Viewport?
Der Viewport ist der Bereich des Bildschirms, in dem eine Webseite tatsächlich dargestellt wird – also das sichtbare Fenster, durch das der Nutzer auf die Seite schaut. Auf einem großen Monitor ist dieser Bereich breit, auf einem Smartphone schmal. Die Größe des Viewports entscheidet, wie viel Inhalt gleichzeitig sichtbar ist.
Weil sich der Viewport von Gerät zu Gerät unterscheidet, müssen Webseiten flexibel darauf reagieren. Das ist die Grundlage für Responsive Webdesign: Das Layout passt sich an die jeweils verfügbare Viewport-Größe an.
Der Viewport-Meta-Tag
Damit Smartphones eine Webseite korrekt darstellen, braucht es im Quelltext einen sogenannten Viewport-Meta-Tag. Er teilt dem Browser mit, dass die Seitenbreite der Gerätebreite entsprechen soll, statt eine Desktop-Seite verkleinert anzuzeigen. Ohne diese Angabe wirken Seiten auf dem Smartphone winzig und müssen umständlich gezoomt werden.
Dieser kleine Eintrag ist eine Grundvoraussetzung der Mobile Optimierung. Fehlt er, leidet die Bedienbarkeit erheblich – und damit auch das Ergebnis bei Googles mobiler Bewertung.
Viewport, Breakpoints und Gestaltung
Anhand der Viewport-Breite werden im Design Breakpoints gesetzt: Punkte, an denen das Layout umschaltet, etwa von einer mehrspaltigen Desktop-Ansicht zu einer einspaltigen mobilen. So bleibt der Inhalt auf jeder Bildschirmgröße gut nutzbar.
Auch der Above-the-Fold-Bereich hängt direkt vom Viewport ab: Was sofort sichtbar ist, ergibt sich aus der Viewport-Höhe. Gutes UX-Design plant deshalb für die typischen Viewport-Größen, nicht nur für einen einzigen Bildschirm.