Viewport

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.

Tipp

Wenn Sie noch Fragen bezĂŒglich Media Queries haben, dann können Sie gerne den jeweiligen Glossar dazu besuchen und sich ĂŒber das Thema informieren.

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.

Zu unserem Glossar

Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte