So optimieren Sie Ihren Webauftritt

Homepage-Optimierung fürs iPhone

Jetzt wird das Web wirklich mobil. Der Workshop zeigt, wie Sie Ihre Websites mit wenigen Handgriffen für iPhone und iPod Touch optimieren.

  1. Homepage-Optimierung fürs iPhone
  2. Textgröße, Formulare, Ereignisverwaltung
Apple Mobilfunk Handy iPhone 3GS

© Archiv

Apple Handy 3GS

Aus Desktop-Browsern ist das Prinzip des Viewports bereits bekannt - das ist die Fläche innerhalb des Browser-Fensters, die der Anzeige von Webseiten dient. Safari auf dem iPhone/iPod Touch erweitert dieses Konzept.Sofern ihm eine Webseite nichts anderes vorgibt, geht der mobile Browser von einem 980 Pixel breiten Viewport aus - groß genug für die meisten Websites. Aus diesem Standard-Viewport leitet Safari einen Skalierungsfaktor ab, der so berechnet wird, dass er in seiner gesamten Breite auf dem Display des Gerätes erscheint.Die Größe des Displays beträgt je nach Ausrichtung des Gerätes 320 x 480 (hochkante Ausrichtung, sog. Portrait-Mode), beziehungsweise 480 x 320 Pixel (horizontal, Landscape-Mode). Netto, also nach Abzug von Safaris Bedienelementen bleiben davon 320 mal 356 beziehungsweise 480 x 208 Pixel übrig. Weil der Landscape-Mode in der Breite mehr Platz bietet, muss der Viewport hier weniger stark verkleinert werden, Texte und Bilder erscheinen also größer als im Portrait-Modus.Wenn die Breite der eigenen Webseiten deutlich von der des Standard-Viewports abweicht, dann ist die Darstellung suboptimal. Insbesondere schmalere Seiten zeigt Safari unnötig klein an, da auch die leeren Bereiche des Viewports mitskaliert werden. In diesen Fällen sollten Sie Safari mit individuellen Parametern konfigurieren.

Sie müssen aber nicht alle drei Parameter (Höhe, Breite und Skalierung) von Hand setzen, sondern können sich auf einen der Parameter konzentrieren. Safari wird die übrigen Werte aus Ihrer Vorgabe ableiten. Dabei versucht er immer, möglichst viel Website im Display unterzubringen. Wie das in der Praxis funktioniert, verdeutlichen drei Beispiele.

1. Setzen Sie den Skalierungsfaktor auf 1,0, dann leitet Safari daraus eine Viewport-Breite von 320/480 Pixel (Portrait/Landscape) ab. Der durch Drehen des iPhones hervorgerufene Wechsel zwischen Portrait- und Landscape-Modus ist übrigens der einzige Fall, in dem der Benutzer die Größe des Viewports verändern kann. Denn Zoomen wirkt sich nur auf den Skalierungsfaktor aus. 2. Geben Sie den Viewport mit einer Breite an, die unterhalb der des Displays liegt, dann ergibt sich daraus ein Skalierungsfaktor > 1, das heißt, die Seite wird herangezoomt. Eine Breite von 320 Pixeln führt zum Skalierungsfaktor 1,0/1,5 (Portrait/Landscape), während 200 Pixel zum Faktor 1,6/2,4 führen. 3. Wenn Sie den Skalierungsfaktor und die Breite vorgeben, errechnet Safari die Höhe der Seite entsprechend des Seitenverhältnisses der sichtbaren Anzeigefläche. Bei einer Skalierung von 1,0 und einer Viewport-Breite von 980px ergibt sich im Portrait-Mode also eine Höhe von 356 / 320 * 980 = 1.090 Pixeln; im Portrait-Modus 425 Pixel hoch.

Metatag reloaded

Der Safari-Viewport wird über das gleichnamige Metatag parametrisiert. Möchten Sie einfach eine vorhandene Seite mit einer Breite von 650 Pixeln für das iPhone optimieren, dann verwenden Sie

<meta name = "viewport" content =
"width = 650">

Möchten Sie sich mit den Angaben für die Breite und/oder die Höhe (height) auf die Dimensionen des Displays beziehen, dann verwenden Sie dafür die Keywords device-width (320 Pixel) beziehungsweise device-height (480 Pixel) und sorgen so schon für künftige Gerätegenerationen mit höher auflösenden Displays vor. Den Skalierungsfaktor setzen Sie wie folgt auf 1,0:

<meta name = "viewport" content =
"initial-scale = 1.0">

Mit dem Parameter user-scalable können Sie den Besucher vor versehentlichen Zooms schützen:

<meta name = "viewport" content =
"width = device-width, initial-scale = 1.0, user-scalable = no">

Konditionales CSS

Mit dem Keyword handheld enthält CSS schon seit Längerem eine Möglichkeit, ein Stylesheet explizit für die Verwendung in mobilen Geräten zu kennzeichnen. Safari macht davon aber keinen Gebrauch. Stattdessen jubeln Sie dem iPhone mit

<link media="only screen and
(max-device-width: 480px)" href="small-devices.css" type= "text/css" rel="stylesheet">

ein individuelles Stylesheet unter. Mit

<link media="only screen and
(min-device-width: 481px)" href="not-so-small-devices.css" type= "text/css" rel="stylesheet">

könnten Sie theoretisch ein Stylesheet für größere Displays vorsehen. In der Praxis birgt das aber Tücken, denn die aus CSS3 entnommenen Keywords only und and führen in älteren Browsern dazu, dass das Stylesheet ignoriert wird.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".