Viewport

Responsive Design: Darstellungsform auf den Endgeräten

Als Viewport, auf deutsch als Sichtfenster oder Sichtöffnung bezeichnet, wird allgemein die Größe des zur Verfügung stehenden Displays auf mobilen Endgeräten, wie Tablets oder Smartphones, bezeichnet. Der Begriff Viewport ist somit ein wichtiger Bestandteil der Mobilen Optimierung. Es dient dazu, die Größe des Displays optimal auszunutzen, indem der anzuzeigende Inhalt skaliert wird. Das Metaelement sorgt dafür, dass der Inhalt korrekt und vor allem vollständig und gut lesbar dargestellt wird. Das erfolgt durch das Anpassen der Breite und Länge einer Website, sodass ein mobiler Browser diese Seite optimal darstellen kann.

Warum ist der Viewport wichtig?

Würden mobile Browser und Endgeräte mit kleineren Displays die anzuzeigenden Inhalte nicht verändern, würden Nutzer eine Webseite auch auf kleinen Displays als Ganzes sehen. Das bedeutet, dass Texte, Bilder und weitere Elemente klein dargestellt werden würden. Nutzer müssten hineinzoomen, um einen Button zu drücken und die Website nach rechts scrollen, um Texte weiterzulesen. Handelt es sich um eine Website mit vielen Elementen zur Interaktion und einem mehrspaltigen Layout, kann sie ohne entsprechende Skalierung auf mobilen Geräten gar nicht richtig genutzt werden.

Bedeutung für das Mobile Marketing

Die Angabe des Viewports ist bei allen Websites essentiell, die auf mobilen Endgeräten dargestellt werden sollen. Apple empfiehlt die Bestimmung des Viewport-Elements für alle Websites, die responsive sein sollen. Auch wenn Apple als Initiator für das Viewport-Element gilt, gehört es mittlerweile zum Standardkanon in den Bereichen Responsive Design und Mobile Optimierung

Wer seinen Nutzern eine möglichst gute User Experience bieten möchte, nutzt das Viewport-Element und optimiert die Darstellung einer Website für unterschiedliche Anwendungsszenarien und Endgeräte. Hier gibt es keine allgemeine Lösung, die mit einer Angabe von einigen Werten realisierbar ist. Vielmehr gibt es verschiedene Lösungsansätze, die für den Nutzer funktionieren und aus Sicht eines Entwicklers elegant sind.