Viewport

Als Viewport (deutsch: Sichtfenster, Sichtöffnung) wird allgemein die Größe des zur Verfügung stehenden Displays auf mobilen Endgeräten bezeichnet. Dabei kann es sich zum Beispiel um das Display eines Smartphones, Tablets oder eines Phablets handeln.

Eine spezifischere Bedeutung hat der Begriff Viewport allerdings als Metaelement in HTML5 und ist ein wichtiger Bestandteil der Mobilen Optimierung. Es dient dazu, die Größe des Displays optimal auszunutzen, indem der anzuzeigende Inhalt skaliert wird. Das Metaelement Viewport sorgt dafür, dass der Inhalt korrekt und vor allem vollständig und gut lesbar dargestellt wird. Dies erfolgt durch das Anpassen der Breite und Länge einer Website, sodass ein mobiler Browser diese Seite optimal darstellen kann. Die Möglichkeit in eine Website hineinzuzoomen kann ebenfalls mit dem Viewport-Element definiert werden.

Allgemeine Informationen zum Thema

Würden mobile Browser und Endgeräte mit kleineren Displays die anzuzeigenden Inhalte nicht verändern, würden Nutzer eine Website auch auf kleinen Displays als Ganzes sehen. Das bedeutet, dass Texte, Bilder und weitere Elemente sehr 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 unbenutzbar werden.

Tatsächlich gehen mobile Browser zunächst davon aus, dass eine Website nicht mobil optimiert ist und zeigen den gesamten Inhalt auch auf einem sehr kleinen Display komplett an. Die Angabe eines Viewports soll genau diese Darstellungsprobleme verhindern. Oft kommen Media Queries hinzu, um die Ausgabeformate auch gerätespezifisch zu bestimmen – beispielsweise um eine HTML-Datei auch als Druckversion in bestimmten Formatierungen ausgeben zu können.

Funktionsweise

Es gibt zwei Arten den Viewport in einer HTML-Datei zu notieren. Der Viewport ist entweder direkt im HTML-Dokument oder in der referenzierten CSS-Datei steuerbar. Wenn der Viewport in die CSS-Datei geschrieben werden soll, ändert sich lediglich die Syntax.[1]

Viewport in der CSS

Die folgenden Attribut-Wert-Paare werden möglichst am Anfang der CSS-Datei notiert. Sie sollten vor allem vor den Media-Queries stehen, damit es keine Komplikationen in der Darstellung gibt. 

@viewport {
   width: device-width;
}

Hier wird die Breite mit width so angegeben, dass sie sich an die Display-Breite des Endgerätes anpasst. Optional kann darunter ein Zoom-Faktor notiert werden, um ein minimales und maximales Zoom-Level zu definieren. Dies wird bei Apps verwendet, um das Zoomen zu verhindern. Bei Websites ist dies eher nicht empfehlenswert, da es die Usability enorm einschränken kann. 

@viewport {
   width: device-width;
   min-zoom: 1;
   max-zoom: 2;
}

Viewport im HTML

Die folgende Codezeile wird in den Head-Bereich der HTML-Datei eingefügt. 

<meta name="viewport" content="width=device-width, initial-scale=1">

Hier wird zunächst der Inhalt der Website an die Breite des Displays vom Endgerät angepasst. Dies erfolgt durch die Angabe width=device-width. Anschließend wird das Zoomlevel mit initial-scale=1 definiert. Es bestimmt den Faktor des Zooms beim ersten Laden der Website. Wer seinen Nutzern eine optimierte Darstellung bieten möchte, sobald das Endgerät gedreht wird, kann die Attribute landscape und portrait verwenden.

Praxisbezug

Die Problematik besteht darin, dass viele mobile Endgeräte unterschiedlich große Displays haben und es weitere Methoden gibt, die Inhalte an diese Größen und Ausgabeformate anzupassen. Neben den schon erwähnten Media-Queries können zum Beispiel iframes verwendet werden, auch wenn das nicht unbedingt als elegante Lösung gilt.

Empfehlenswert ist in diesem Zusammenhang die Prüfung der Ausgabe mit speziellen Tools und Programmen, sodass möglichst viele Ausgabeformate und die korrekte Darstellung getestet werden können. Zu erwähnen wären außerdem Ghostlab und das MIH-Tool für iOS oder Adobe Edge Inspect, das es auch für Windows-Plattformen gibt. Experten empfehlen zudem, dass reale Tests auf mobilen Endgeräten stattfinden, da auf diese Weise die tatsächlichen Bedingungen bei der Nutzung simuliert werden können.[2]

Die Pixeldichte wurde ebenfalls als Problem diskutiert: Es komme nicht darauf an, wie groß ein Display ist, sondern darauf, wie tief ein Pixel in der Darstellung auf verschiedenen Endgeräten ist. Denn bisher werden Pixel als Einheit verwendet. Moderne Geräte haben jedoch eine größere Pixeldichte oder -tiefe. Das bedeutet, dass es für Entwickler auch wichtig ist, wie viel Content sie auf einen Screen bekommen und nicht wie bestimmte Inhalte skaliert werden. [3]

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.[4]

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.

Einzelnachweise

  1. ↑ Der Viewport der mobilen Geräte mediaevent.de. Abgerufen am 30.01.2015
  2. ↑ Der Viewport — das unbekannte Wesen maddesigns.de. Abgerufen am 30.01.2015
  3. ↑ A pixel is not a pixel is not a pixel quirksmode.org. Abgerufen am 30.01.2015
  4. ↑ Mobile Devices: Viewport richtig einstellen html5-mobile.de. Abgerufen am 30.01.2015

Weblinks


Abgerufen von „https://de.ryte.com/wiki/index.php?title=Viewport&oldid=14418“

Kategorie