Viewport - Grundlage für das Responsive Design sowie die Mobile Optimierung

zurück zu Suchmaschinenoptimierung
die 10 wichtigsten Faktoren der Suchmaschinenoptimierung
Suchmaschinenoptimierung für Mannheimer Unternehmen
Einrichtung und Monitoring mit Google Analytics
Monitoring und SEO mit Sistrix
Analyse der Internetseiten von Mitbewerbern
Google verstehen

Als Viewport oder Sichtfenster wird die Größe des zur Verfügung stehenden Displays auf mobilen Endgeräten bezeichnet. Also das, was der User auf dem jeweiligen Endgerät gleich sehen kann. Für die Gestaltung eines Internetauftritts ist der Viewport ein ganz zentrales Thema, denn hier wird der erste Eindruck und die ersten Informationen über das Unternehmen transportiert.
Gerade durch die Zunahme der Onlineaktivitäten mit Smartphones und Tablets in den letzten Jahren hat der Viewport nochmals eine ganz andere Bedeutung bekommen - er ist ein wichtiger ja zentraler Bestandteil der mobilen Optimierung eines Webauftritts.

Beim Viewport müssen prinzipiell 2 Aspekte beleuchtet werden:

1. Konzeption und Gestaltung: Was sollte überhaupt dargestellt werden. Wichtig ist ein themenrelevantes, aussagekräftiges Bild, die Navigation (und somit Strukturierung und Usability) sowie eine grundlegende Aussage über die Firma, das Produkt, die Dienstleistung,…

2. Wie verändert sich der Viewport auf den unterschiedlichen Geräten. Hier ist es die Aufgabe der Agentur auf mglst. allen Geräten und Auflösungen diese zentralen Elemente und Aussagen adäquat darzustellen, zu transportieren und somit den User abzuholen. Die Größe des Displays sollte jeweils optimal ausgenutzt werden. Die anzuzeigenden Elemente einer Website werden hierbei skaliert oder verändert dargestellt.

Es gibt zwei Arten den Viewport in einer HTML-Datei zu integrieren: entweder direkt im HTML-Dokument oder in einer referenzierten CSS-Datei.

Wird der Viewport als Meta-Tag direkt in die HTML-Datei eingefügt, wird meist folgender Code eingefügt:
<meta name=viewport content="width=device-width, initial-scale=1">

Zuerst wird mit dem Code 'width=device-width' der Inhalt der Website an die Breite des Displays vom Endgerät angepasst.
Anschließend wird mit 'initial-scale=1' das Zoomlevel definiert - also der Zoomfaktor beim ersten Laden der Website.
Desweiteren können die Attribute landscape (Querformat) und portrait (Hochformat) verwendet werden.

Viewport in der CSS

Wird der Viewport in der CSS-Datei angegeben, sollte dies möglichst am Anfang der Datei stehen, vor allem vor den Media-Queries stehen, damit es keine Komplikationen in der Darstellung gibt.

Hier könnte der Code wie folgt aussehen:
@viewport {
width: device-width;
}
Weitere Informationenvon der Syntax finden Sie hier: https://developer.mozilla.org/de/docs/Web/CSS/@viewport

Die Problematik besteht darin, dass es eine stetig wachsende Anzahl von mobilen Geräten mit unterschiedlichen Abmessungen und Auflösungen gibt. Die Aufgabe ist es die Inhalte an diese Größen und Ausgabeformate anzupassen.

Um hier möglichst auf der sicheren Seiten zu sein, ist die Prüfung mit speziellen Tools und Programmen sinnvoll, so dass möglichst viele Ausgabeformate und dessen korrekte Darstellung getestet werden können.
Solche Tools sind z.B.l das iOS MIH-Tool, Ghostlab und Adobe Edge Inspect. Zudem ist es immer gut reale Tests auf mobilen Endgeräten zu machen, da auf diese Weise die tatsächlichen Bedingungen bei der Nutzung simuliert werden können.

Fazit

Mittlerweile ist die Angabe des Viewports für Websites essentiell. Es bildet die Grundlage für das Responsive Design sowie die Mobile Optimierung und wird von Google als zentrales Element der Suchmaschinenoptimierung hervorgehoben.
Es geht somit um eine Optimierung der Benutzerfreundlichkeit, der Benutzererfahrung, der Lesbarkeit und nicht zuletzt um Suchmaschinenoptimierung und Erfolg.