Viewport
Copyright © Shutterstock/OlegRi
Was ist ein Viewport?
Der Begriff Viewport bedeutet im Deutschen so viel wie Sichtfenster oder Sichtöffnung und bezeichnet damit den sichtbaren Displaybereich auf mobilen Endgeräten. Spezifischer geht es um ein HTML5-Meta-Element, das in der Optimierung der mobilen Darstellung eine große Rolle spielt. Dazu gehören die Displays von Tablets oder Smartphones. Im Online-Marketing ist responsiver Content wichtig, der sich in Abhängigkeit des Displays beziehungsweise des Viewports anpasst.
Überblick und Allgemeines zur Bedeutung des Viewports
Der Viewport ist von hoher Bedeutung in der Optimierung der Anzeige von Inhalten. Die Größe der zur Verfügung stehenden Displays will optimal genutzt werden, sodass sämtliche Inhalte korrekt und nutzerfreundlich dargestellt werden. Als Meta-Element aus HTML5 dient der Viewport der vollständigen und einwandfrei lesbaren Darstellung sämtlicher Inhalte.
Größe, Länge und Breite einer Webseite und ihrer Elemente werden an die Bedürfnisse mobiler Browser und Endgeräte angepasst. Ebenso können weitere Darstellungs-Optionen, beispielsweise die Zoom-Funktion, über dieses HTML5-Element definiert werden. Ohne eine solche Anpassung könnten die kleineren Displays die Inhalte nur unvollständig oder suboptimal darstellen.
Im Zusammenhang mit dieser Anpassung wird von responsivem Content gesprochen. Responsiv bedeutet, auf die Anforderungen der jeweiligen mobilen Endgeräte reagierend. In Anbetracht der flächendeckenden Verbreitung von Smartphones und Tablets hat sich das Credo “Mobile first” durchgesetzt. Es geht also darum, dass Inhalte immer häufiger ab Werk auf die Anforderungen mobiler Endgeräte abgestimmt werden.
Ohne eine solche Veränderung der Inhalte, würde die reguläre Desktop-Version auch auf den dafür zu kleinen Displays auf Smartphones und anderen Geräten angezeigt werden. Elemente, Buttons und Menüs sind in diesem Falle sehr klein, sodass Anwendern die Bedienung schwer fällt.
Es ist in einem solchen Fall beispielsweise erforderlich, jeden einzelnen Menüpunkt weit heranzuzoomen, um ihn lesen oder ausführen zu können. Besonders bei aufwändigeren Webseiten, die über zahlreiche Elemente verfügen, ist die Nutzung ohne eine angepasste Skalierung unmöglich.
Mobile Browser gehen grundsätzlich davon aus, dass Internetseiten nicht optimiert sind und zeigen entsprechend die reguläre Version der Seite vollständig an. Indem ein Viewport angegeben wird, sollen diese Probleme in der Darstellung vermieden werden.
Davon unabhängig kommen oftmals zusätzlich Media Queries zum Einsatz. Diese haben eine gerätebezogene Darstellung der Ausgabeformate zum Ziel. Auf diese Weise werden Anzeige und Optionen noch benutzerfreundlicher. Diese Form der Anpassung kann etwa erforderlich sein, um eine Druckversion auszugeben.
Bedeutung des Viewports in der Praxis
Es existiert eine große Vielfalt an mobilen Endgeräten und Displaygrößen. Ebenso finden sich zahlreiche weitere Anpassungsmethoden, um Inhalte mit diesen Größen und Formaten kompatibel zu machen. Media-Queries und iframes sind Beispiele für diese Anpassungsmethoden.
Werden Darstellungen auf mobilen Endgeräten getestet, so ist es lohnenswert, die Ausgabe mit spezifischen Tools und Programmen zu prüfen. Hierbei sollte eine möglichst große Zahl von Ausgabeformaten auf eine angemessene Darstellung getestet werden. Ein bekanntes Software-Testing-Tool ist etwa Ghostlab. Damit kann die Darstellung auf einem Mobilgerät simuliert werden. Wichtig ist in diesem Zusammenhang aber auch ein wirklichkeitsgetreuer Test auf konkreten mobilen Endgeräten. Dies hat Vorteile gegenüber dem Test in simulierter Umgebung, da die Prüfung hier unter realen Bedingungen stattfindet.
Von hoher Praxisrelevanz ist zudem die Pixeldichte. Aktuelle Geräte weisen eine höhere Dichte und Tiefe der Pixel auf als ältere. Neben der Skalierung der Inhalte hängt es auch von diesen Eigenschaften ab, wie viel Inhalt auf einem Display dargestellt werden kann. Es geht also bei der Anpassung der Darstellung nicht nur um die Größe des Displays, sondern auch darum, wie tief die Pixel auf den unterschiedlichen Mobilgeräten sind.
Stellenwert des Viewports im Online-Marketing und Mobile-Marketing
Für sämtliche Internet-Seiten, für die eine mobile Darstellung auf Smartphones oder Tablets vorgesehen ist, wird eine Viewport-Angabe unabdingbar. In Anbetracht der wachsenden Bedeutung responsiver Inhalte, wird es immer bedeutsamer, Viewport-Elemente zu bestimmen. In der mobilen Optimierung und im Responsive Design gehören daher Viewport-Elemente zu den Standards.
Im Online-Marketing spielt die Nutzererfahrung oder User Experience (UX) eine zentrale Rolle. Die Wahrscheinlichkeit einer Conversion steigt, wenn sich Nutzer auf einer Seite wohlfühlen und zurechtfinden. Optimale Darstellung und Navigierbarkeit sind wichtige Voraussetzungen hierfür. Aus diesem Grund sollte die Webseite aus Kundensicht für unterschiedliche Mobilgeräte und Nutzungsszenarien optimiert werden.
Festgelegt wird der Viewport über einen Meta-Tag. Das Viewport-Tag ist seit HTML5 vorhanden und lässt sich im Zusammenhang mit der Meta-Information einer Internetseite anwenden. Dieses Meta Tag dient dazu, dem Browser den gewünschten Umgang mit unterschiedlichen Displaygrößen und Skalierungen mitzuteilen.
Tipp
Im Umgang mit diesen Meta-Tags ist das voraussichtliche User-Verhalten zu berücksichtigen. So sehen sich die meisten Anwender Webseiten vertikal an. Unabhängig davon, ob ein Desktop-Gerät oder ein mobiles Endgerät genutzt wird, ist eine horizontale Ansicht selten. In diesem Zusammenhang ist es wichtig, das Viewport Tag nicht gemeinsam mit breiten Inhaltselementen anzuwenden, die größer sind als es die gewohnte vertikale Ansicht zulässt.
Sie haben noch Fragen?
