Dem Smartphone sei Erkenntlichkeit lassen sich Blogbeiträge, Recherchen und spannende Vorbehalt inzwischen von überall aus Vorlesung halten. Nervig wird die Problemstellung jedoch, wenn die Webseite in einem viel zu kleinen Format dargestellt wird und die Wörter erst durchs Zoomen erkennbar werden. Schuld ist dasjenige fehlende Metal-Element zu Gunsten von den Viewport. Welches es mit dem Viewport hinaus sich hat und warum er zu Gunsten von die Darstellung von Webseiten hinaus Mobilgeräten essentiell ist, routiniert Sie in diesem Gebühr.

E-Book-Download: Mit einer optimierten Website zu mehr Traffic und Leads

Welches sind Viewports?

Jener Viewport bezeichnet den Anzeigenbereich einer Webseite. Dieser Umfeld variiert gebunden von dem Gerät, hinaus dem die Seite aufgerufen wird. Genauer genommen bezieht sich jener Viewport danach hinaus ein Meta-Element im Quellcode

Wenn Sie den Viewport Ihrer Webseite nicht setzen, verfluchen Sie Ihre Besucherinnen und Gast zu vielen frustrierenden Minuten des Heranzoomens und Hin- und Herscrollens. Da immer mehr User via Mobile suchen, statt via den stationären PC, wird solche Problematik zunehmend relevanter. Wer beim Themenkreis Mobile Webdesign den Interface verpasst und keine zufriedenstellende User Experience eröffnen kann, dem werden die Besuchenden zwangsläufig den Verstellen kehren.

Wenn Ihre Webseite mithilfe des CMS Hub erstellt wurde, sollen Sie sich indes keine Sorgen um den Viewport zeugen. Ihre Seiten werden sich unwillkürlich an den richtigen Viewport hinaus jedem Gerät verbiegen. Auch sollen Sie – sogar im Zusammenhang einem responsiven Design – stets den Viewport setzen, um Ihren mobilen Besuchenden ein angenehmes Benutzererlebnis zu eröffnen.

So sieht Ihre Seite mit und ohne Viewport aus

Wenn Sie Ihren Viewport nicht zu Gunsten von Mobilgeräte setzen, wird Ihre Webseite hinaus diesen Geräten mit jener Stärke wiedergegeben, die zu Gunsten von vereinen typischen Desktop-Flimmerkiste vorgesehen ist. Dasjenige Mobilgerät schrumpft die Durchsicht dann unwillkürlich so, dass sie hinaus den kleinen Flimmerkiste passt, mit dem Ergebnis, dass die Texte und Grafiken winzig lütt angezeigt werden. Dasjenige ist die sogenannte „Standardbreite“ mit einer Pixelgröße zwischen 800 – 1024.

Wenn Sie Ihren Viewport zu Gunsten von Mobilgeräte setzen, wird Ihre Webseite hinaus diesen Geräten hingegen unwillkürlich hinaus die Größe des Bildschirms skaliert und bietet ein weitaus besseres Benutzererlebnis.

Wie sieht dasjenige genau aus? Im untenstehenden Vorbild sehen Sie hinaus jener linken Seite vereinen Flimmerkiste, im Zusammenhang dem jener Viewport nicht zu Gunsten von Mobilgeräte eingestellt wurde. Jener mobile Browser stellt danach unwillkürlich die zu Gunsten von vereinen Desktop-Computer vorgesehene Stärke dar. Beim Vorbild hinaus jener rechten Seite wurde jener Viewport eingestellt, sodass jener mobile Browser die Stärke unwillkürlich anpasst und die Inhalte skaliert, damit sie gut lesbar sind.

viewport optimierung mobile webseite

Denn Erstes sollten Sie herausfinden, ob schon ein Viewport eingestellt ist. Resultieren Sie dazu simpel den Google Mobile Ready Check durch. Fügen Sie Ihre URL in dasjenige vorgesehene Feld ein und klicken Sie hinaus „Submit“ (Vorschlagen). Dasjenige Tool testet, ob Ihre Webseite schon zu Gunsten von Mobilgeräte optimiert ist und prüft, ob Ihr Viewport eingestellt ist.

Wenn Ihr Viewport noch nicht eingestellt ist, Vorlesung halten Sie weiter.

Viewport mit <meta name=”viewport”> festlegen

Um vereinen mobilen Viewport einzustellen, sollen Sie simpel vereinen Meta-Viewport-Tag zu allen Webseiten hinzufügen, die Sie zu Gunsten von Mobilgeräte optimieren möchten.

Kopieren Sie dazu simpel den folgenden Hypertext Markup Language-Tag und fügen Sie ihn in den Header Ihrer Webseite ein:

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

Wenn Sie diesen Viewport Tag in Ihre Header-File einfügen, optimiert dasjenige in jener Regel unwillkürlich Ihre gesamte Webseite zu Gunsten von Mobilgeräte. Es ist dennoch sekundär möglich, dass Sie den Viewport Tag zu Gunsten von jede einzelne Ihrer Webseiten einfügen sollen. Vor allem, wenn Sie zu Gunsten von Ihre Webseite und Ihre Landingpage jeweils eine andere Software verwenden.

Wenn Sie kein integriertes CMS, wie bspw. dasjenige CMS von HubSpot verwenden, sollen Sie Stück zu Gunsten von Stück manuell prüfen, ob Ihre Landingpages, Ihre Webseiten und Ihr Internet-Tagebuch schon vereinen Viewport Tag nach sich ziehen und somit zu Gunsten von Mobilgeräte optimiert sind.

Eine kurze Hinweistext zum Hypertext Markup Language-Tag

Die Aufschneiderei content=”idth=device-width” gibt an, dass sich die Pixelbreite an die Stärke des jeweiligen Geräts anpasst, mit dem die Webseite aufgerufen wird.  Obgleich kann es sein, dass dann die Schriftgröße und andere Inhalte in jener horizontalen Durchsicht vergrößert dargestellt werden. Um dasjenige zu verhindern, verschenken Sie den Zahl „initial-scale“ mit 1 an. Dieser Zahl spezifisch den Zoomfaktor. Für jener Aufschneiderei 1 wird jener Inhalt im Verhältnis 1:1 angezeigt. So erhalten Sie in jener vertikalen und horizontalen Durchsicht des Mobilgeräts ungefähr dieselben Größenverhältnisse. 

Rauchzeichen: Durch den Viewport Tag bekommt Ihre Webseite kein responsives Design – dasjenige ist ein anderer Prozess. Gewiss durch den Tag sollen Benutzerinnen und Benutzer nicht mehr umständlich zoomen und herumscrollen, um Inhalte hinaus Ihrer Seite Vorlesung halten zu können.

Individuelle Pixelbreite verpflichten

Wenn Sie aus irgendeinem Grund vereinen bestimmten Inhalt zu Gunsten von ein bestimmtes Gerät in einer bestimmten Stärke darstellen möchten, dann sollen Sie den Zahl „device-width“ durch die Pixelbreite des gewünschten Gerätes ersetzen. Wenn Sie vereinen Pixelwert in den Tag tippen, dann wird Ihre Webseite hinaus jedem Gerät in dieser von Ihnen bestimmten Stärke angezeigt. 

Nehmen wir einmal an, Sie möchten gerne eine ganz bestimmte Stärke setzen. Zum Vorbild unterscheiden sich die Breitenmaße von verschiedenen iPhone-Modellen voneinander. Sagen wir danach, Sie möchten, dass Ihre Webseite genau in jener Größe des Querformats des iPhone X angezeigt wird. Die Querformat-Stärke des iPhone X beträgt 812 Pixel; danach würden Sie den folgenden Tag hinaus Ihrer Webseite einfügen:

<meta name=viewport content=”width=812, initial-scale=1″>

Ganz iPads (solange bis hinaus dasjenige iPad Pro) nach sich ziehen eine Querformat-Stärke von 1024 Pixel, danach würden Sie diesen Tag hinaus Ihrer Webseite einfügen:

<meta name=viewport content=”width=1024, initial-scale=1″>

Hier finden Sie eine vollständige Liste der verschiedenen Gerätegrößen für den Viewport Tag.

Vergessen Sie nicht, dass es eventuell Probleme verschenken könnte, wenn Ihr Viewport Tag hinaus eine bestimmte Größe eingestellt ist, Besuchende Ihrer Webseite dennoch verschiedene Mobilgeräte benutzen.

Eine Störungsbehebung zu diesem Zweck könnten eventuell JavaScripts sein, mit denen Sie die einzelnen Meta-Tag-Attribute zumindest verhältnismäßig aussuchen können. Sie können sich solche Quälerei dennoch sekundär sparen, während Sie den Zahl „device-width“ (Geräte-Stärke) im Viewport Tag erhalten – dasjenige ist endgültig die einfachste Störungsbehebung.

Viewport im CSS: Zoom hinaus Mobilgeräten kontrollieren

Es gibt noch eine weitere Möglichkeit, den Viewport festzulegen. Dazu fügen Sie dasjenige entsprechende Element ins CSS Ihrer Webseite ein. Die Vorgehensweise unterscheidet sich nur unwesentlich vom Einfügen ins Hypertext Markup Language-Doc. 

Um den Zoomfaktor im CSS festzulegen, kopieren Sie den folgenden Kode:

  @viewport {

width: device-width;

zoom: 1;

}

Fügen Sie die Regel an den Werden Ihres CSS, noch vor allen Media Queries, ein. 

Egal, ob Sie den Viewport im Hypertext Markup Language oder im CSS definieren, er ist im Zusammenhang jedem Responsive Entwurf ein absolutes Muss. 

Fazit: Viewport gehört zum Standard des respinsiven Webdesigns

Jener Viewport muss im Zusammenhang Webseiten im Hypertext Markup Language oder CSS festgesetzt werden. Ist dies nicht jener Kern, wird jener gesamte Inhalt einer Webseite hinaus jedem Gerät in den Flimmerkiste gezwängt. Skript, Bilder und Buttons sind so kaum noch erkennbar und eine schlechte User Experience ist die Folge.

Dasjenige können Sie jedoch leichtgewichtig umgehen, während Sie den Anzeigebereich durch dasjenige entsprechende Hypertext Markup Language-Element oder durch eine CSS-Regel definieren. Besucherinnen und Gast, die via Mobile hinaus Ihre Seite zupacken, können so ungestört Ihre Inhalte besuchen.

website optimierungTitelbild: Chaosamran_Studio / iStock / Getty Images Plus

Ursprünglich veröffentlicht am 26. Februar 2021, aktualisiert am Februar 26 2021


Originalquelle Hubspot

Published On: Februar 26th, 2021 / Categories: Digitales Marketing /

Leave A Comment

Die neusten Newsletter

Tragen Sie sich ein, um informiert zu bleiben.

    Mit Absenden des Formulars stimmen Sie unserer Datenschutzerklärung zu.