Was ist ein Viewport?
Der Viewport bezeichnet den sichtbaren Bereich einer Website im Browserfenster. Was hier hineinpasst, sieht der Nutzer direkt – ohne zu scrollen. Je nach Gerät (Smartphone, Tablet, Desktop) ist dieser Bereich unterschiedlich groß und beeinflusst maßgeblich die User Experience.
Ein Vergleich aus dem Alltag: Der Viewport ist wie das Schaufenster eines Geschäfts – was dort gezeigt wird, entscheidet, ob jemand stehen bleibt oder weitergeht. Alles, was darunter liegt, muss aktiv entdeckt werden.
Warum ist der Viewport so wichtig?
Die Gestaltung des Viewports entscheidet darüber, ob Besucher auf Ihrer Website bleiben oder abspringen. Das betrifft:
- Erste Eindruck: Headline, Call-to-Action oder Teaser sollten sichtbar sein
- SEO-Relevanz: Google bewertet, wie schnell und nutzerfreundlich Inhalte im Viewport geladen werden
- Barrierefreiheit: Nutzer mit Bildschirmvergrößerung oder Assistenztechnologien erleben den Viewport anders – ein zugängliches Layout ist essenziell
- Responsive Webdesign: Die Anpassung an verschiedene Viewports ist Grundlage moderner Websites
Technische Umsetzung
Im Code wird der Viewport häufig über das folgende Tag gesteuert:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Damit wird festgelegt, dass sich das Layout an die Breite des Geräts anpasst. Ohne dieses Tag wird eine Website auf mobilen Geräten oft fehlerhaft oder verkleinert dargestellt.
Häufige Fehler beim Viewport
- Inhalte sind auf kleinen Bildschirmen zu breit
- Buttons oder Texte sind im sichtbaren Bereich zu klein
- Wichtige Inhalte befinden sich nur unterhalb des Viewports
- Kein mobiles Menü im sichtbaren Bereich
All das führt zu schlechter Usability und hoher Absprungrate.
Der Klicklounge-Tipp
Was Nutzer nicht sehen, kann nicht wirken. Wir sorgen dafür, dass Ihre wichtigsten Inhalte im Viewport sichtbar und barrierefrei bedienbar sind – auf allen Geräten. Jetzt Website mobilfreundlich und nutzerorientiert optimieren lassen.