Viewport
Der Viewport stellt den Display von mobilen Endgeräten dar, also den Bereich, auf dem sich alle sichtbaren Informationen abrufen lassen. Er befindet sich auf, Tablets und Smartphones. Dem Viewport kommt eine wichtige Bedeutung in Bezug auf die Mobile Optimierung zu, wo er als Metaelement für HTML5 fungiert. Er soll die Displaygröße bestmöglich ausnutzen. Das setzt er durch das Skalieren des anzuzeigenden Inhalts um. Er erfüllt das, indem er die Inhalte komplett, richtig und lesbar anzeigt. Der Viewport passt dazu Länge und Breite der Seiten an, damit Mobile Browser die Inhalte korrekt anzeigen kann. Darüber hinaus ist es auch möglich, in die Inhalte zu zoomen, um sie größer darzustellen.
Inhaltsverzeichnis
Definition
Falls Mobile Browser über kleine Displays verfügen würden, können Inhalte in ihrer Größe nicht geändert werden. Dann steht die Seite auf einem solchen Display lediglich komplett bereit. Das wiederum heißt, dass alle Elemente der Seite wie Fotos, Texte und mehr schlecht lesbar und erkennbar wären, da so nur eine kleine Darstellung möglich ist. Es muss hineingezoomt werden, damit Inhalte besser erkannt, gescrollt oder Buttons gedrückt werden, um interagieren zu können. Ist die Website mit einem komplexen Layout ausgestattet und enthält viele Elemente, die zur Interaktion erforderlich sind, kann sie auf kleinen Displays nicht genutzt werden, wenn keine Skalierung erfolgt. De facto ist ein mobiler Browser erst einmal darauf ausgerichtet, dass Websites nicht auf sie zugeschnitten sind. Daher zeigen sie zunächst den kompletten Inhalt an. Mit dem Viewport soll das vermieden werden. Häufig werden auch Media Queries verwendet, um das Ausgabeformat je nach Gerät ermitteln zu können, zum Beispiel damit eine Datei auch in den gewünschten Formatierungen ausgedruckt werden kann.
Bedeutung für die Suchmaschinenoptimierung
Der Viewport ist für alle Websites sehr wichtig, die auf Tablet und Smartphone angezeigt werden. Experten empfehlen die Ermittlung des jeweiligen Elements für sämtliche Seiten, die der Suchmaschinenoptimierung zuträglich sein sollen. Apple hat das Viewport-Element ins Leben gerufen, allerdings ist es mittlerweile in allen Bereichen der Mobilen Optimierung und Responsive Design zu finden. Wenn Sie Ihren Kunden hohen Komfort beim Surfen auf Ihren Seiten ermöglichen wollen, sollten Sie den Viewport nutzen, damit die Darstellung Ihrer Inhalte optimiert werden kann, und zwar für verschiedene Endgeräte und Anwendungen. Dafür gibt es jedoch keine Lösung, die auf alles passt und mit nur wenigen Werten angegeben werden kann. Dazu gibt es unterschiedliche Ansätze, die dem User nicht nur eine komfortable Nutzung bieten, sondern auch für den Entwickler gut passen.
Funktionsweise
Um den Viewport in HTML-Dateien zu integrieren, gibt es zwei Möglichkeiten. Er kann sich bereits in einem Dokument befinden oder in der CSS-Datei gesteuert werden, auf die er sich bezieht. Soll er in der CSS-Datei gesteuert werden, wird nur die Syntax geändert.
Wie es sich in der Praxis mit dem Viewport verhält?
Da die Smartphones, Tablets und anderen mobilen Endgeräte mit Displays in verschiedenen Größen ausgestattet sind, muss dieses Problem gelöst werden, also Größe und Inhalte der jeweiligen Formate müssen adaptiert werden. Es gibt dazu Media-Queries, aber auch Infames können zur Lösung verwendet werden. Doch das ist nicht unbedingt die beste Lösung dieser Problematik. Deshalb sollte die Ausgabe lieber mit dafür geeigneten Programmen und Tools geprüft werden. Damit ist es nämlich möglich, viele Formate inklusive richtiger Darstellung zu überprüfen. In diesem Zusammenhang sind außerdem das iOS MH-Tool, Ghostlab und Adobe Edge Inspect zu nennen. Letzteres ist auch für Windows vorhanden. Es ist außerdem empfehlenswert, auch real auf verschiedenen Endgeräten zu prüfen. Denn so ist es möglich, unter realen Bedingungen zu testen und bessere Ergebnisse liefern zu können. Die Dichte der Pixel ist auch als problematisch bekannt. Daher ist die Größe des Display nicht unbedingt am wichtigsten. Es ist vielmehr die Tiefe der Pixel bei ihrer Darstellung auf den unterschiedlichen Geräten. Bis jetzt sind Pixel einheitlich verfügbar. Neue Endgeräte sind jedoch mit einer größeren Tiefe und Dichte der Pixel ausgestattet. Deshalb ist es für die einzelnen Entwickler ebenfalls von Bedeutung, welche Menge an Content auf dem Display angezeigt werden sollen. Wie die Inhalte skaliert werden sollen, ist dabei eher zweitrangig.
Der Viewport in Bezug auf CSS
Die jeweiligen Attributwerte sollten zu Beginn der CSS-Datei eingefügt werden. Es ist wichtig, sie vor die Media-Queries zu stellen, denn sonst könnte es zu Schwierigkeiten bei der Anzeige geben. Dabei wird die Breite mit dem englischen Begriff „width“ angegeben, und zwar so, dass eine Anpassung an die Breite des betreffenden Bildschirms möglich wird. Es ist zusätzlich möglich, unter diesen Attributwerten, einen Zoom-Faktor zu bestimmen, der das kleinste und größte Zoom-Level angibt. Das ergibt bei Apps Sinn, damit hier ein Zoomen nicht möglich ist. Bei Websites ist das ungünstig, denn das kann die Usability deutlich verschlechtern.
Der Viewport in Bezug auf HTML
Um die Breite des Bildschirms an den Inhalt der Seite anzupassen, wird eine Codezeile in die entsprechende Datei geschrieben. Sie lautet „width=device-width“. Danach muss das Zoom-Level ermittelt werden. Dazu wird „initial-scale=1“ eingefügt. Das definiert den Zoom-Faktor, wenn die Seite zum ersten Mal geladen wird. Soll die eigene Seite auch optimiert dargestellt werden, wenn das Gerät gedreht wird, sind in HTML die Attribute „portrait“ und „landscape“ zu nennen.
Wenn bspw. ein Abschnitt aus dem Glossareintrag „Viewport“ markiert und auf den Quelltext hin untersucht wird, sind auch hier die genannten Metadaten zur Skalierung zu finden. Die festgelegten Metadaten können sich gleichzeitig negativ auf die mobile Version der Webseite auswirken, aber für das Computer-Format sinnvoll und notwendig sein.
Häufig gestellte Fragen
Was ist der Viewport und wofür wird er genutzt?
Der Viewport stellt den Display von mobilen Geräten dar, also den Bereich, auf dem sich alle sichtbaren Informationen abrufen lassen. Dem Viewport kommt eine wichtige Bedeutung in Bezug auf die Mobile Optimierung zu, wo er als Metaelement für HTML5 fungiert. Er soll die Displaygröße bestmöglich ausnutzen, indem er dies durch das Skalieren des anzuzeigenden Inhalts umsetzt.
Welche Auswirkungen hat der Viewport auf die Mobile Optimierung von Websites?
Der Viewport passt die Länge und Breite der Seiten an, damit Mobile Browser die Inhalte korrekt anzeigen können. Dies ist wichtig, um sicherzustellen, dass die Ansicht auf kleinen Displays gut funktioniert, anstatt dass der Nutzer in das Fenster hineinzoomen muss, um die Inhalte zu sehen. So wird nicht nur die Schrift durch eine korrekte Darstellung verbessert, sondern auch das menschliche Auge beim Sehen entlastet.