Haben Sie sich jemals gefragt, wie Sie Ihre Website so gestalten können, dass sie auf allen Geräten gleichermaßen gut aussieht und reibungslos funktioniert? Die Antwort lautet: Optimieren Sie Ihre Website für Mobilgeräte! Heutzutage surfen immer mehr Menschen im Internet über ihr Handy. Doch wie gelingt diese Optimierung?
Eine Schlüsselkomponente ist der sogenannte Viewport. Im folgenden Artikel nehmen wir Sie an die Hand und führen Sie durch dieses Thema. Wir erklären Ihnen, was es mit dem Viewport auf sich hat, warum er wichtig ist und wie Sie ihn Funktion mithilfe des passenden HTML-Tags anpassen können.
Blick auf den Viewport: Was ist das und warum ist er für die Darstellung von Webseiten auf Mobilgeräten so wichtig?
Stellen Sie sich den Viewport als den sichtbaren Bereich einer Webseite auf einem Bildschirm vor. Er ist das Fenster, durch das der Nutzer Ihre Website sieht und mit ihr interagiert. Interessanterweise variiert die Größe dieses Fensters je nach Gerät und Browser. Zum Beispiel bietet ein Desktop-Monitor einen viel größeren Viewport als ein Smartphone-Bildschirm.
Jetzt ist es natürlich so, dass eine Webseite, die nicht für eine mobile Ansicht optimiert wurde, häufig so dargestellt wird, als wäre sie auf einem Desktop-Monitor. Das hat zur Folge, dass der gesamte Inhalt der Seite in den relativ kleinen Viewport des Smartphones gequetscht wird, was zu einer Reihe von Problemen führt. Vielleicht kennen Sie das ja aus eigener Erfahrung:
- Der Text ist zu winzig zum Lesen und muss vergrößert werden
- Die Navigation ist knifflig zu bedienen und erfordert viel Scrollen
- Die Bilder sind entweder zu groß oder zu klein für den Bildschirm
- Die Layout-Elemente passen nicht zur Bildschirmgröße
Um diesen Ärgernissen aus dem Weg zu gehen, sollten Sie Ihre Webseite so gestalten, dass sie sich dem jeweiligen Viewport des Geräts anpasst. Dieses Konzept wird als responsives Webdesign bezeichnet. Und hier spielt das Meta-Tag „viewport“ in Ihrem HTML-Code eine entscheidende Rolle.
Mit den Augen eines Mobilgeräts: Wie sieht eine Webseite aus, wenn der Viewport eingestellt wurde - und wie, wenn nicht?
Damit Sie sich ein Bild davon machen können, wie der Viewport die Darstellung einer Webseite auf einem Handy beeinflusst, werfen wir einen Blick auf zwei Beispiele:
Beispiel 1: Eine Webseite ohne Viewport-Einstellung
Stellen Sie sich vor, Sie rufen eine Webseite auf und das, was Sie sehen, ist auf einmal winzig klein. Die gesamte Breite der Webseite wird auf den Smartphone-Bildschirm gequetscht. Das macht den Text zu einem kaum lesbaren Miniaturbild und die Navigation ist kaum zu erkennen. Sie müssen zoomen, scrollen und sich anstrengen, um die Seite überhaupt lesen und bedienen zu können. Kein idealer Zustand, oder?
Beispiel 2: Eine Webseite mit Viewport-Einstellung
Jetzt stellen Sie sich dasselbe Szenario vor, aber diesmal passt sich die Webseite Ihrem Smartphone-Bildschirm an. Der Text ist gut lesbar, die Navigation ist einfach zu bedienen und Sie können sich bequem durch die Seite navigieren, ohne ständig zoomen und scrollen zu müssen. Eine deutliche Verbesserung, nicht wahr?
Ein prüfender Blick: Wie kann man feststellen, ob der Viewport für eine Webseite korrekt eingestellt ist?
Es gibt mehrere Möglichkeiten, um sicherzugehen, dass der Viewport Ihrer Webseite richtig eingestellt ist. Eine einfache Methode ist, die Seite auf verschiedenen Geräten oder in verschiedenen Browsern aufzurufen und zu beobachten, wie sie sich anpasst. Es gibt auch Online-Tools, die Ihnen zeigen können, wie Ihre Seite auf verschiedenen Bildschirmgrößen aussieht. Ein solches Tool ist beispielsweise der Mobile-Friendly Test von Google.
Viewport festlegen: Wie setzt man den Meta-Tag?
Aber wie legen Sie nun den Viewport fest? Und was hat es mit den verschiedenen Attributen innerhalb des Meta-Tags auf sich? Gehen wir das Schritt für Schritt durch.
Es ist eigentlich ganz einfach. Sie müssen nur den folgenden Code in den <head>-Bereich Ihrer HTML-Seite einfügen:
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
Dieser kurze Code hat eine große Wirkung: Er sagt dem Browser, dass die Breite des Viewports der Breite des Geräts entsprechen soll (width=device-width) und dass die Seite in ihrer ursprünglichen Größe angezeigt werden soll, also nicht vergrößert oder verkleinert wird (initial-scale=1.0). Dies ist die empfohlene Einstellung für responsive Websites, die sich jeder Bildschirmgröße anpassen sollen.
Wollen Sie noch mehr Kontrolle? Die verschiedenen Attribute innerhalb des Meta-Tags "viewport"
Das Meta-Tag „viewport“ bietet mehrere Attribute, mit denen Sie das Verhalten der Webseite auf Mobilgeräten beeinflussen können. Einige Beispiele sind:
- maximum-scale: Bestimmt den maximalen Zoomfaktor, den der Nutzer verwenden kann. Mit maximum-scale=2.0 kann der Nutzer die Seite zum Beispiel auf das Doppelte vergrößern.
- minimum-scale: Legt den kleinstmöglichen Zoomfaktor fest. Mit
- minimum-scale=0.5 kann der Nutzer die Seite auf die Hälfte verkleinern.
- user-scalable: Entscheidet, ob der Nutzer die Seite zoomen darf oder nicht. Mit user-scalable=no kann der Nutzer die Seite nicht zoomen.
- height: Legt die Höhe des Viewports fest. Mit height=device-height passt die Höhe des Viewports zur Höhe des Geräts.
Diese Attribute können Sie innerhalb des Meta-Tags „viewport“ kombinieren, indem Sie sie mit einem Komma trennen. Zum Beispiel so:
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes“>
Die eigene Breite festlegen: Warum und wie man die Pixelbreite individuell bestimmen kann
Es kann vorkommen, dass Sie die Pixelbreite des Viewports spezifisch festlegen möchten, anstatt sie an die Gerätbreite anzupassen. Zum Beispiel, wenn Sie eine feste Breite für Ihre Webseite haben und diese nicht ändern möchten. Um dies zu tun, können Sie eine Zahl als Wert für das Attribut width verwenden, z.B.:
<meta name=“viewport“ content=“width=800″>
Dieser Code teilt dem Browser mit, dass der Viewport 800 Pixel breit sein soll, unabhängig von der Breite des Geräts. Aber bedenken Sie, dass dies dazu führen kann, dass die Seite auf kleineren Bildschirmen abgeschnitten wird oder horizontal gescrollt werden muss.
CSS und der Viewport: Wie festigt man den Viewport im CSS und was ist dabei zu beachten?
Zusätzlich zu der beschriebenen Methode gibt es noch eine weitere Möglichkeit, um den Viewport festzulegen – und das ist durch CSS, genauer gesagt, durch sogenannte Media Queries. Mit Media Queries können Sie verschiedene CSS-Regeln für unterschiedliche Bildschirmgrößen festlegen. Schauen wir uns ein Beispiel an:
@media screen and (max-width: 600px) {
/* CSS-Regeln für Bildschirme bis zu 600 Pixel breit */
}
@media screen and (min-width: 601px) {
/* CSS-Regeln für Bildschirme ab 601 Pixel breit */
}
Mit Media Queries können Sie Ihre Webseite flexibel gestalten und beispielsweise Schriftgrößen, Abstände oder Layout-Elemente an die jeweilige Bildschirmgröße anpassen. Aber bitte beachten Sie: Media Queries funktionieren nur, wenn Sie auch das Meta-Tag „viewport“ verwenden. Ohne das Meta-Tag „viewport“ wird Ihre Webseite immer in voller Breite dargestellt und die Media Queries werden einfach ignoriert.
Warum ist der Viewport ein zentrales Element im responsive Webdesign?
In der Welt des responsive Webdesigns ist der Viewport ein absoluter Schlüsselakteur. Er bestimmt, wie Ihre Webseite auf den verschiedenen Geräten Ihrer Besucher aussieht und funktioniert. Wenn Sie den Viewport richtig einstellen, sorgen Sie dafür, dass Ihre Webseite sich an jede Bildschirmgröße anpasst und eine optimale Nutzererfahrung bietet.
Und das ist nicht nur für Ihre Besucher wichtig. Auch Google hat ein Auge auf die Mobilfreundlichkeit Ihrer Webseite. Google bevorzugt Webseiten, die mobilfreundlich sind – ein gut eingestellter Viewport kann also auch Ihre Position in den Suchergebnissen verbessern.
Fazit
Und damit kommen wir zum Ende unserer Reise durch die Welt des Viewports. Wir haben gesehen, was ein Viewport ist, warum er so wichtig ist und wie wir ihn mithilfe des Meta-Tags „viewport“ optimal einstellen können. Ich hoffe, dieser Artikel konnte Ihnen dabei helfen, Ihre Website besser auf die Nutzung auf Mobilgeräten vorzubereiten. Denn in einer Welt, in der immer mehr Menschen das Internet über ihr Handy nutzen, ist eine mobiloptimierte Webseite kein Luxus mehr – sie ist ein Muss.
